:root{
  --divider-black:#050505;
  --red-bright:#af0000;
  --red-mid:#b4081d;
  --red-bright:#a00000;
  --border-black:#111;
}

*{ box-sizing:border-box; }



.brand-divider{
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  border-radius: 0;
  padding: 10px 0;
  border-top: 10px solid var(--border-black);
  border-bottom: 3px solid var(--border-black);
  background: var(--divider-black);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 3px 4px rgba(255, 255, 255, 0.55);
}

.brand-divider::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index:0;
  background: linear-gradient(35deg,
    var(--divider-black) 0%,
    var(--red-dark) 15%,
    var(--red-mid) 38%,
    var(--red-bright) 50%,
    var(--red-mid) 62%,
    var(--red-dark) 85%,
    var(--divider-black) 100%
  );
  background-size: 250% 100%;
  animation: gradientFlow 12s ease-in-out infinite;
  filter: saturate(1.15) contrast(1.06);
}

.brand-divider::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(1200px 120px at 50% 40%, rgba(255,31,31,.12), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.06), transparent 30%);
}

.motion-layer{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.brand-text{
  font-family: 'babylon';
  font-size: clamp(28px, 5vw, 62px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(35deg,
    #000 0%,
    #000 18%,
    #000 36%,
    #fff 54%,
    #000 72%,
    #000 88%,
    #000 100%
  );
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 10px rgba(255,255,255,0.10);
  animation:
    textShine 15s ease-in-out infinite,
    textGlowPulse 1.4s ease-in-out infinite,
    slideLR 30s ease-in-out infinite;
}

@keyframes slideLR{
  0%   { transform: translateX(-50px); }
  50%  { transform: translateX(50px); }
  100% { transform: translateX(-50px); }
}

@keyframes textShine{
  0%   { background-position: 0% 50%; filter: brightness(1) saturate(1); }
  25%  { background-position: 55% 50%; filter: brightness(1.18) saturate(1.18); }
  50%  { background-position: 110% 50%; filter: brightness(1.06) saturate(1.10); }
  75%  { background-position: 55% 50%; filter: brightness(1.16) saturate(1.16); }
  100% { background-position: 0% 50%; filter: brightness(1) saturate(1); }
}

@keyframes textGlowPulse{
  0%   { opacity: .90; text-shadow: 0 0 10px rgba(255,255,255,0.10), 0 0 18px rgba(255,42,42,0.18); }
  40%  { opacity: 1;   text-shadow: 0 0 14px rgba(255,255,255,0.18), 0 0 30px rgba(255,42,42,0.34); }
  70%  { opacity: .98; text-shadow: 0 0 12px rgba(255,255,255,0.14), 0 0 24px rgba(255,42,42,0.28); }
  100% { opacity: .90; text-shadow: 0 0 10px rgba(255,255,255,0.10), 0 0 18px rgba(255,42,42,0.18); }
}

@keyframes gradientFlow{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 768px){
  body { padding: 0 !important; }
  .brand-divider { height: 130px; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce){
 .brand-divider{
  height: 50px;
 }
}