/* =========================================================
   PANZOOM STUDIO — ANIMATED EDITABLE HEADLINER
   Version: 2026-08-02
   - 64:5 master composition (2048 × 160 reference)
   - Editable/translatable HTML tagline
   - Subtle motion and white glow; no final sweep bar
   - Plays once per browser session
   ========================================================= */

.panzoom-headliner.brand-banner-top {
  --pz-h-ease: cubic-bezier(.19, 1, .22, 1);
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 64 / 5;
  margin-top: 82px;
  overflow: hidden;
  color: #f7f7f7;
  background: #000;
  contain: layout paint;
}

.panzoom-headliner-bg,
.panzoom-headliner-curtain,
.panzoom-headliner-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panzoom-headliner-bg {
  z-index: 0;
  background: #000 url('/assets/images/brand/headliner/background.png') center / 100% 100% no-repeat;
  opacity: 0;
  animation: pz-headliner-bg-in .42s ease 2.95s forwards;
}

.panzoom-headliner-curtain {
  z-index: 20;
  background: #000;
  animation: pz-headliner-curtain-out .42s ease 2.95s forwards;
}

.panzoom-headliner-glow {
  z-index: 1;
  background:
    radial-gradient(circle at 7.5% 52%, rgba(255,255,255,.055), transparent 7.5%),
    radial-gradient(circle at 92% 48%, rgba(132,36,255,.085), transparent 10%),
    radial-gradient(circle at 94% 52%, rgba(14,104,255,.07), transparent 12%);
  opacity: 0;
  animation: pz-headliner-ambient-in 1.1s ease 3.25s forwards;
}

.panzoom-headliner-symbol,
.panzoom-headliner-thinker,
.panzoom-headliner-panzoom,
.panzoom-headliner-studio {
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.panzoom-headliner-symbol {
  left: 3.32%;
  top: 15%;
  width: 5.67%;
  opacity: 0;
  transform: translate3d(-145%, 0, 0) scale(.965);
  filter: blur(7px) brightness(1.14);
  animation: pz-headliner-symbol-in .88s var(--pz-h-ease) 3s forwards;
}

.panzoom-headliner-thinker {
  right: 3.42%;
  top: 13%;
  width: 8.06%;
  opacity: 0;
  transform: translate3d(145%, 0, 0) scale(1.015);
  filter: blur(9px) saturate(1.12) brightness(.92);
  animation:
    pz-headliner-thinker-in 1.08s var(--pz-h-ease) 3.12s forwards,
    pz-headliner-thinker-float 7s ease-in-out 4.45s infinite alternate;
}

.panzoom-headliner-brand {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.panzoom-headliner-panzoom {
  left: 50%;
  top: 6.8%;
  width: 28.56%;
  opacity: 0;
  transform: translate3d(-50%, 7px, 0) scale(.99);
  filter: blur(7px) brightness(1.45) drop-shadow(0 0 0 rgba(255,255,255,0));
  animation: pz-headliner-panzoom-in .86s var(--pz-h-ease) 3.72s forwards;
}

.panzoom-headliner-studio {
  left: 50%;
  top: 38.8%;
  width: 26.37%;
  opacity: 0;
  transform: translateX(-50%);
  clip-path: inset(0 50% 0 50%);
  filter: blur(5px) brightness(1.36);
  animation: pz-headliner-studio-in .84s var(--pz-h-ease) 4.18s forwards;
}

.panzoom-headliner-tagline {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 66%;
  width: min(79%, 1620px);
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
  clip-path: inset(0 100% 0 0);
  color: #f4f4f4;
  opacity: 0;
  filter: blur(4px) brightness(1.22);
  font-family: 'Arial Narrow', 'Roboto Condensed', 'Noto Sans', Arial, sans-serif;
  font-size: clamp(7px, .92vw, 19px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: clamp(.12em, .24vw, .34em);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  white-space: nowrap;
  animation: pz-headliner-tagline-in 1.72s steps(34, end) 4.72s forwards;
}

@keyframes pz-headliner-bg-in {
  to { opacity: 1; }
}

@keyframes pz-headliner-curtain-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes pz-headliner-ambient-in {
  to { opacity: 1; }
}

@keyframes pz-headliner-symbol-in {
  0% { opacity: 0; transform: translate3d(-145%,0,0) scale(.965); filter: blur(7px) brightness(1.14); }
  72% { opacity: 1; filter: blur(0) brightness(1.16) drop-shadow(0 0 8px rgba(255,255,255,.16)); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: none; }
}

@keyframes pz-headliner-thinker-in {
  0% { opacity: 0; transform: translate3d(145%,0,0) scale(1.015); filter: blur(9px) saturate(1.12) brightness(.92); }
  75% { opacity: .95; filter: blur(0) saturate(1.08) brightness(1.02) drop-shadow(0 0 12px rgba(80,58,255,.13)); }
  100% { opacity: .92; transform: translate3d(0,0,0) scale(1); filter: saturate(1.06); }
}

@keyframes pz-headliner-thinker-float {
  from { translate: 0 -1px; }
  to { translate: -3px 2px; }
}

@keyframes pz-headliner-panzoom-in {
  0% { opacity: 0; transform: translate3d(-50%,7px,0) scale(.99); filter: blur(7px) brightness(1.45); }
  72% { opacity: 1; filter: blur(0) brightness(1.18) drop-shadow(0 0 12px rgba(255,255,255,.2)); }
  100% { opacity: 1; transform: translate3d(-50%,0,0) scale(1); filter: none; }
}

@keyframes pz-headliner-studio-in {
  0% { opacity: 0; clip-path: inset(0 50% 0 50%); filter: blur(5px) brightness(1.36); }
  70% { opacity: 1; filter: blur(0) brightness(1.14) drop-shadow(0 0 8px rgba(255,255,255,.16)); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}

@keyframes pz-headliner-tagline-in {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(4px) brightness(1.22); transform: translate3d(-50%,4px,0); }
  18% { opacity: 1; }
  82% { filter: blur(0) brightness(1.08); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; transform: translate3d(-50%,0,0); }
}

/* Final state after the animation has played during the current session. */
.panzoom-headliner-seen .panzoom-headliner-bg,
.panzoom-headliner.is-complete .panzoom-headliner-bg,
.panzoom-headliner-seen .panzoom-headliner-glow,
.panzoom-headliner.is-complete .panzoom-headliner-glow {
  opacity: 1;
  animation: none;
}

.panzoom-headliner-seen .panzoom-headliner-curtain,
.panzoom-headliner.is-complete .panzoom-headliner-curtain {
  display: none;
}

.panzoom-headliner-seen .panzoom-headliner-symbol,
.panzoom-headliner.is-complete .panzoom-headliner-symbol {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

.panzoom-headliner-seen .panzoom-headliner-thinker,
.panzoom-headliner.is-complete .panzoom-headliner-thinker {
  opacity: .92;
  transform: none;
  filter: saturate(1.06);
  animation: pz-headliner-thinker-float 7s ease-in-out infinite alternate;
}

.panzoom-headliner-seen .panzoom-headliner-panzoom,
.panzoom-headliner.is-complete .panzoom-headliner-panzoom,
.panzoom-headliner-seen .panzoom-headliner-studio,
.panzoom-headliner.is-complete .panzoom-headliner-studio {
  opacity: 1;
  filter: none;
  clip-path: inset(0 0 0 0);
  animation: none;
}

.panzoom-headliner-seen .panzoom-headliner-panzoom,
.panzoom-headliner.is-complete .panzoom-headliner-panzoom,
.panzoom-headliner-seen .panzoom-headliner-studio,
.panzoom-headliner.is-complete .panzoom-headliner-studio {
  transform: translateX(-50%);
}

.panzoom-headliner-seen .panzoom-headliner-tagline,
.panzoom-headliner.is-complete .panzoom-headliner-tagline {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateX(-50%);
  filter: none;
  animation: none;
}

/* Tablet: preserve the cinematic horizontal composition. */
@media (max-width: 1100px) {
  .panzoom-headliner.brand-banner-top {
    margin-top: 76px;
    min-height: 86px;
    aspect-ratio: auto;
  }

  .panzoom-headliner-symbol { left: 2.6%; width: 7%; top: 17%; }
  .panzoom-headliner-thinker { right: 2.6%; width: 10%; top: 14%; }
  .panzoom-headliner-panzoom { width: 35%; top: 8%; }
  .panzoom-headliner-studio { width: 32%; top: 40%; }
  .panzoom-headliner-tagline {
    top: 67%;
    width: 78%;
    font-size: clamp(7px, 1.1vw, 12px);
    letter-spacing: clamp(.09em, .22vw, .24em);
  }
}

/* Mobile: enlarged readable version while keeping the 64:5 visual language. */
@media (max-width: 620px) {
  .panzoom-headliner.brand-banner-top {
    margin-top: 72px;
    min-height: 104px;
  }

  .panzoom-headliner-symbol {
    left: 12px;
    top: 24px;
    width: 48px;
  }

  .panzoom-headliner-thinker {
    right: 7px;
    top: 20px;
    width: 65px;
    opacity: .78;
  }

  .panzoom-headliner-brand {
    left: 58px;
    right: 62px;
  }

  .panzoom-headliner-panzoom {
    top: 15px;
    width: min(76%, 255px);
  }

  .panzoom-headliner-studio {
    top: 47px;
    width: min(70%, 225px);
  }

  .panzoom-headliner-tagline {
    top: 74px;
    width: calc(100% - 26px);
    font-size: clamp(5.2px, 1.42vw, 7px);
    line-height: 1.25;
    letter-spacing: .08em;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panzoom-headliner-bg,
  .panzoom-headliner-glow,
  .panzoom-headliner-symbol,
  .panzoom-headliner-thinker,
  .panzoom-headliner-panzoom,
  .panzoom-headliner-studio,
  .panzoom-headliner-tagline {
    opacity: 1;
    animation: none !important;
    filter: none;
  }

  .panzoom-headliner-curtain { display: none; }
  .panzoom-headliner-symbol,
  .panzoom-headliner-thinker { transform: none; }
  .panzoom-headliner-panzoom,
  .panzoom-headliner-studio,
  .panzoom-headliner-tagline { transform: translateX(-50%); clip-path: none; }
}