/* =========================================================
   Electric Adrenaline Fix — Header Logo
   Rider left of phrase; gold glint R→L electrocutes the rider.
   ========================================================= */

.page-banner,
.logo-header {
  --yellow: #fecb00;
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 80% 120% at 10% 20%, rgba(254, 203, 0, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 70% 100% at 90% 80%, rgba(254, 203, 0, 0.12) 0%, transparent 45%),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 40%, #111 70%, #0d0d0d 100%);
  color: #fff;
  text-align: center;
  padding: 3.25rem 1.25rem 3.5rem;
  border-bottom: 3px solid var(--yellow);
  font-family: Helvetica, Arial, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
}

.page-banner *,
.logo-header * {
  box-sizing: border-box;
}

.page-banner::before,
.logo-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -18deg,
      transparent,
      transparent 12px,
      rgba(255, 255, 255, 0.015) 12px,
      rgba(255, 255, 255, 0.015) 13px
    );
  pointer-events: none;
}

.page-banner::after,
.logo-header::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 120%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(254, 203, 0, 0.18) 0%, transparent 65%);
  pointer-events: none;
  animation: banner-pulse 4s ease-in-out infinite;
}

@keyframes banner-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

.page-banner-inner,
.logo-header-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/*
  3-column grid: rider | phrase | spacer
  Equal side columns keep “Electric Adrenaline Fix” truly centered.
  Rider stays in normal flow (no absolute) so it never gets clipped.
*/
.accent-with-rider {
  --glint-dur: 3.5s;
  --rider-w: min(300px, 36vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  margin: 0.35em auto 0;
  position: relative;
  text-align: center;
  overflow: visible;
}

/* Stacked clean + electrocuted rider — left column, flush to phrase */
.rider-stack {
  grid-column: 1;
  justify-self: end;
  position: relative;
  display: block;
  width: var(--rider-w);
  max-width: 100%;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
  animation: rider-electrocute-shake var(--glint-dur) linear infinite;
}

.page-banner-charge,
.logo-header-charge {
  width: 100%;
  height: auto;
  max-height: min(320px, 48vw);
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  object-fit: contain;
  object-position: center;
  line-height: 0;
}

/* Phrase sits in the center column (true page center) */
.accent-with-rider > .page-banner-accent,
.accent-with-rider > .logo-header-accent {
  grid-column: 2;
  justify-self: center;
}

.rider-stack .rider-base {
  position: relative;
  z-index: 1;
  animation: rider-base-charge var(--glint-dur) linear infinite;
}

/* Electrocution overlay: body crackles when gold glint hits */
.rider-stack .rider-electrocuted {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  animation: rider-electrocute-flash var(--glint-dur) linear infinite;
}

/* Hide legacy bridge bolts / dual-rider if present */
.energy-bridge,
.bridge-arc,
.rider-charge-wrap .rider-charged,
.page-banner-rider .rider-charged {
  display: none !important;
}

.page-banner-copy,
.logo-header-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.page-banner-eyebrow,
.logo-header-eyebrow {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--yellow);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(254, 203, 0, 0.45);
  animation: banner-badge 2.8s ease-in-out infinite;
}

@keyframes banner-badge {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(254, 203, 0, 0.35);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 32px rgba(254, 203, 0, 0.7);
    transform: translateY(-2px);
  }
}

.page-banner-title,
.logo-header-title {
  font-size: clamp(2.1rem, 7vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.45);
  width: 100%;
  max-width: min(1100px, 100%);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.page-banner-title .accent-with-rider,
.logo-header-title .accent-with-rider {
  width: 100%;
  align-self: stretch;
}

.page-banner-accent,
.logo-header-accent {
  display: block;
  margin-top: 0;
  /* Deep gold base + wide hot-white glint band for a clear sweep */
  background: linear-gradient(
    90deg,
    #c49200 0%,
    #e6b800 12%,
    #fecb00 22%,
    #ffe566 32%,
    #fff8d0 40%,
    #ffffff 46%,
    #fffef5 50%,
    #ffffff 54%,
    #fff8d0 60%,
    #ffe566 68%,
    #fecb00 78%,
    #e6b800 88%,
    #c49200 100%
  );
  background-size: 280% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 10px rgba(254, 203, 0, 0.55))
    drop-shadow(0 0 22px rgba(255, 243, 168, 0.35));
  /* Glint travels toward the rider (right → left) */
  animation: banner-shine-rtl var(--glint-dur, 3.5s) linear infinite;
  text-align: center;
  line-height: 1.08;
  position: relative;
  z-index: 2;
  flex-shrink: 1;
  min-width: 0;
}

/* "Electric" on its own line above "Adrenaline Fix" */
.page-banner-accent br,
.logo-header-accent br {
  display: block;
  content: "";
}

/*
  Gold glint: bright white-hot band sweeps toward the rider.
  Stronger contrast + glow so the pass is easy to see.
*/
@keyframes banner-shine-rtl {
  0% {
    background-position: 0% center;
    filter:
      drop-shadow(0 0 8px rgba(254, 203, 0, 0.45))
      drop-shadow(0 0 16px rgba(255, 243, 168, 0.25));
  }
  40% {
    filter:
      drop-shadow(0 0 14px rgba(254, 203, 0, 0.7))
      drop-shadow(0 0 28px rgba(255, 250, 220, 0.5));
  }
  70% {
    filter:
      drop-shadow(0 0 18px rgba(255, 243, 168, 0.95))
      drop-shadow(0 0 36px rgba(254, 203, 0, 0.85))
      drop-shadow(0 0 48px rgba(255, 255, 255, 0.35));
  }
  78% {
    background-position: 100% center;
    filter:
      drop-shadow(0 0 22px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 40px rgba(254, 203, 0, 1))
      drop-shadow(0 0 60px rgba(255, 243, 168, 0.75));
  }
  100% {
    background-position: 100% center;
    filter:
      drop-shadow(0 0 12px rgba(254, 203, 0, 0.55))
      drop-shadow(0 0 24px rgba(255, 243, 168, 0.3));
  }
}

/*
  Electrocution flash: when glint arrives (~74–90%), show body lightning overlay.
  Quick flicker for that “zapped” feel.
*/
@keyframes rider-electrocute-flash {
  0%,
  72% {
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  74% {
    opacity: 1;
    filter:
      brightness(1.35)
      drop-shadow(0 0 14px rgba(120, 200, 255, 0.95))
      drop-shadow(0 0 28px rgba(254, 203, 0, 0.85));
  }
  76% {
    opacity: 0.55;
  }
  78% {
    opacity: 1;
    filter:
      brightness(1.45)
      drop-shadow(0 0 18px rgba(160, 220, 255, 1))
      drop-shadow(0 0 36px rgba(254, 203, 0, 0.95));
  }
  82% {
    opacity: 0.7;
  }
  86% {
    opacity: 1;
    filter:
      brightness(1.3)
      drop-shadow(0 0 16px rgba(120, 200, 255, 0.9))
      drop-shadow(0 0 30px rgba(254, 203, 0, 0.8));
  }
  92%,
  100% {
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
}

/* Base rider brightens slightly under the zap */
@keyframes rider-base-charge {
  0%,
  72% {
    filter: brightness(0.98) drop-shadow(0 0 0 transparent);
  }
  76%,
  88% {
    filter:
      brightness(1.18) saturate(1.12)
      drop-shadow(0 0 12px rgba(254, 203, 0, 0.65))
      drop-shadow(0 0 28px rgba(120, 200, 255, 0.35));
  }
  100% {
    filter: brightness(0.98) drop-shadow(0 0 0 transparent);
  }
}

/* Subtle electrocution shake while charged */
@keyframes rider-electrocute-shake {
  0%,
  72% {
    transform: translate(0, 0) scale(1);
  }
  74% {
    transform: translate(-1px, 1px) scale(1.04);
  }
  76% {
    transform: translate(2px, -1px) scale(1.05);
  }
  78% {
    transform: translate(-2px, 0) scale(1.06);
  }
  80% {
    transform: translate(1px, 2px) scale(1.05);
  }
  82% {
    transform: translate(-1px, -1px) scale(1.05);
  }
  84% {
    transform: translate(2px, 1px) scale(1.04);
  }
  86% {
    transform: translate(-1px, 0) scale(1.03);
  }
  90%,
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* Hide any leftover strike markup if present */
.e-strike-layer,
.strike-layer,
.header-energy-wave {
  display: none !important;
}

.page-banner-bar,
.logo-header-bar {
  width: min(220px, 50%);
  height: 5px;
  margin: 1.35rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--yellow), #fff3a8, var(--yellow), transparent);
  box-shadow: 0 0 20px rgba(254, 203, 0, 0.55);
}

/* Company name under banner header */
.company-name-under-header {
  margin: 0.85rem 0 0;
  padding: 0;
  font-family: Helvetica, Arial, "Helvetica Neue", sans-serif;
  font-size: clamp(1.05rem, 2.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fecb00;
  text-align: center;
  text-shadow:
    0 0 18px rgba(254, 203, 0, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.35);
}

.logo-header--sm .company-name-under-header,
.m-site-banner .company-name-under-header {
  font-size: clamp(0.9rem, 3.2vw, 1.15rem);
  letter-spacing: 0.22em;
  margin-top: 0.65rem;
}

.company-name-bar-standalone {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
  border-bottom: 2px solid #fecb00;
  padding: 0.85rem 1rem 1rem;
  text-align: center;
}

.company-name-bar-standalone .company-name-under-header {
  margin-top: 0;
}

/* Compact size variants */
.logo-header--sm {
  padding: 1.5rem 1rem 1.75rem;
}

.logo-header--sm .logo-header-title {
  font-size: clamp(1.25rem, 4vw, 2rem);
}

.logo-header--sm .logo-header-eyebrow {
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.55rem;
}

.logo-header--sm .logo-header-bar {
  width: min(140px, 45%);
  height: 3px;
  margin-top: 0.85rem;
}

.logo-header--sm .accent-with-rider {
  --rider-w: min(140px, 28vw);
}

.logo-header--sm .page-banner-charge,
.logo-header--sm .logo-header-charge {
  max-height: min(150px, 32vw);
}

.logo-header--md {
  padding: 2.25rem 1.25rem 2.5rem;
}

.logo-header--md .logo-header-title {
  font-size: clamp(1.6rem, 5vw, 2.75rem);
}

.logo-header--md .accent-with-rider {
  --rider-w: min(240px, 34vw);
}

.logo-header--md .page-banner-charge,
.logo-header--md .logo-header-charge {
  max-height: min(260px, 42vw);
}

@media (prefers-reduced-motion: reduce) {
  .page-banner::after,
  .logo-header::after,
  .page-banner-eyebrow,
  .logo-header-eyebrow,
  .page-banner-accent,
  .logo-header-accent,
  .rider-stack,
  .rider-stack .rider-base,
  .rider-stack .rider-electrocuted {
    animation: none !important;
  }

  .rider-stack .rider-electrocuted {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .page-banner,
  .logo-header {
    padding: 1.35rem 0.75rem 1.5rem;
  }

  .page-banner-title,
  .logo-header-title {
    font-size: clamp(1.35rem, 6.5vw, 2.1rem);
  }

  .page-banner-eyebrow,
  .logo-header-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    padding: 0.28rem 0.65rem;
    margin-bottom: 0.55rem;
  }

  .accent-with-rider {
    --rider-w: min(100px, 26vw);
    column-gap: 0.15rem;
  }

  .page-banner-charge,
  .logo-header-charge {
    max-height: min(120px, 30vw);
  }

  .page-banner-accent,
  .logo-header-accent {
    text-align: center;
    font-size: 0.88em;
    line-height: 1.1;
  }

  .page-banner-bar,
  .logo-header-bar {
    width: min(160px, 45%);
    height: 3px;
    margin-top: 0.9rem;
  }
}

/* Stack rider above phrase on narrow phones so nothing clips */
@media (max-width: 540px) {
  .accent-with-rider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
  }

  .rider-stack {
    position: relative;
    width: min(150px, 42vw);
    margin: 0;
    order: -1;
  }

  .accent-with-rider > .page-banner-accent,
  .accent-with-rider > .logo-header-accent {
    grid-column: auto;
    justify-self: center;
    width: 100%;
  }

  .page-banner-title,
  .logo-header-title {
    font-size: clamp(1.2rem, 6.2vw, 1.75rem);
  }
}