/* REFORM cinematic opening v8 — Old Glory + desktop-safe immediate Old Glory motion + extended Fourth of July headline mortar.
   Progressive enhancement only: the original hero remains readable if this file or JS does not load. */

.cinematic-hero {
  isolation: isolate;
  z-index: 0;
  min-height: clamp(690px, calc(100svh - 150px), 980px);
  overflow: visible;
  align-content: center;
}

.cinematic-hero::before {
  content: none !important;
}

.cinematic-hero > .intro-main,
.cinematic-hero > .intro-aside,
.cinematic-hero > .hero-replay,
.cinematic-hero > .hero-motion-toggle {
  position: relative;
  z-index: 4;
}

.hero-cinema-layer {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 28%, rgba(63, 118, 230, .24), transparent 34%),
    radial-gradient(circle at 50% 88%, rgba(201, 28, 60, .16), transparent 31%),
    linear-gradient(115deg, #030914 0%, #06132b 42%, #071b47 100%);
  box-shadow: inset 0 -1px 0 rgba(130, 170, 235, .23);
}

.hero-cinema-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .62;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(134,181,255,.70) 0 1px, transparent 1.45px);
  background-size: 133px 133px, 211px 211px;
  background-position: 17px 31px, 63px 97px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.7) 62%, transparent 100%);
}

.hero-cinema-fallback,
#hero-flag-canvas,
#hero-fireworks-canvas,
.hero-cinema-light,
.hero-cinema-vignette,
.hero-shockwave,
.hero-flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-cinema-fallback {
  inset: -9% -5% -11% 19%;
  width: 96%;
  height: 120%;
  opacity: .46;
  background: url("old-glory-static.svg") center / cover no-repeat;
  transform: perspective(1250px) rotateY(-10deg) rotateZ(-3.2deg) scale(1.05);
  transform-origin: 62% 50%;
  filter: saturate(1.08) contrast(1.06) brightness(.78);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.20) 12%, #000 42%, rgba(0,0,0,.83) 100%);
}

#hero-flag-canvas,
#hero-fireworks-canvas {
  display: block;
}


#hero-fireworks-canvas {
  z-index: 9;
  left: 50%;
  right: auto;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(1.22) contrast(1.05);
  will-change: contents;
}

#hero-flag-canvas {
  z-index: 1;
  opacity: 0;
  transition: opacity .8s ease;
  filter: saturate(1.14) contrast(1.08) brightness(1.04);
}

.hero-cinema-ready #hero-flag-canvas {
  opacity: 1;
}

.hero-cinema-ready .hero-cinema-fallback {
  opacity: .10;
}

.hero-cinema-fallback {
  animation: heroFallbackBreeze 5.6s ease-in-out infinite alternate;
}

@keyframes heroFallbackBreeze {
  0% {
    transform: perspective(1250px) rotateY(-10deg) rotateZ(-3.2deg) translate3d(-.5%, 0, 0) scale(1.05);
  }
  50% {
    transform: perspective(1250px) rotateY(-7.8deg) rotateZ(-2.4deg) translate3d(.8%, -.7%, 0) scale(1.065);
  }
  100% {
    transform: perspective(1250px) rotateY(-11.2deg) rotateZ(-3.8deg) translate3d(1.4%, .4%, 0) scale(1.045);
  }
}


.hero-cinema-light {
  z-index: 2;
  background:
    radial-gradient(ellipse at 45% 53%, rgba(255,255,255,.12), transparent 29%),
    radial-gradient(ellipse at 44% 58%, rgba(61,120,255,.17), transparent 46%),
    linear-gradient(90deg, rgba(1,7,18,.95) 0%, rgba(3,11,29,.86) 31%, rgba(3,11,29,.38) 62%, rgba(3,10,27,.42) 100%);
}

.hero-cinema-vignette {
  z-index: 6;
  background:
    linear-gradient(to bottom, rgba(2,7,18,.36), transparent 16%, transparent 77%, rgba(2,7,18,.65)),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.38) 100%);
}

.hero-shockwave {
  z-index: 4;
  left: 20%;
  top: 42%;
  width: min(720px, 57vw);
  height: min(720px, 57vw);
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.05);
  box-shadow:
    0 0 0 10px rgba(55,117,255,.19),
    0 0 85px 18px rgba(255,255,255,.20),
    0 0 180px 50px rgba(210,31,65,.19);
}

.hero-flash {
  z-index: 3;
  opacity: 0;
  background: radial-gradient(circle at 36% 54%, rgba(255,255,255,.96), rgba(123,169,255,.36) 19%, rgba(208,27,63,.16) 36%, transparent 66%);
  mix-blend-mode: screen;
}

.cinematic-hero .intro-main {
  text-shadow: 0 2px 26px rgba(0,0,0,.64);
}

.cinematic-hero #page-title {
  position: relative;
  perspective: 1100px;
  overflow: visible;
  text-wrap: balance;
  isolation: isolate;
}

.cinematic-hero #page-title > * {
  position: relative;
  z-index: 2;
  transform-origin: 42% 56%;
  backface-visibility: hidden;
}

.cinematic-hero #page-title::before,
.cinematic-hero #page-title::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 47%;
  top: 47%;
  transform: translate(-50%, -50%) scale(.08) rotate(-7deg);
  opacity: 0;
}

.cinematic-hero #page-title::before {
  z-index: 0;
  width: min(1220px, 88vw);
  aspect-ratio: 1;
  background: repeating-conic-gradient(
    from -7deg,
    rgba(233,38,74,.95) 0deg 1.4deg, transparent 1.4deg 6deg,
    rgba(255,255,255,.88) 6deg 7deg, transparent 7deg 12deg,
    rgba(72,137,255,.92) 12deg 13.4deg, transparent 13.4deg 20deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 7%, #000 8% 43%, rgba(0,0,0,.4) 56%, transparent 73%);
  mask: radial-gradient(circle, transparent 0 7%, #000 8% 43%, rgba(0,0,0,.4) 56%, transparent 73%);
  mix-blend-mode: screen;
  filter: blur(.25px) drop-shadow(0 0 22px rgba(255,255,255,.30));
}

.cinematic-hero #page-title::after {
  z-index: 1;
  width: min(760px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0 2%, rgba(134,182,255,.48) 7%, rgba(226,38,73,.26) 18%, transparent 56%);
  mix-blend-mode: screen;
  filter: blur(1px);
}

.hero-kicker-line,
.hero-detonate-line {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
}

.hero-kicker-line {
  color: rgba(255,255,255,.95);
  font-size: .78em;
  letter-spacing: -.04em;
}

.cinematic-hero .hero-detonate-line {
  z-index: 2;
  color: #fff;
  font-size: 1.07em;
  line-height: .86;
  letter-spacing: -.076em;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.95);
  paint-order: stroke fill;
  text-shadow:
    4px 2px 0 rgba(198,23,56,.92),
    -4px -1px 0 rgba(52,111,228,.88),
    0 3px 0 #020714,
    0 0 22px rgba(255,255,255,.30),
    0 0 58px rgba(93,145,255,.24);
}

.hero-detonate-line::before,
.hero-detonate-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  opacity: 0;
  pointer-events: none;
}

.hero-detonate-line::before {
  color: #e6294e;
  transform: translateX(-8px);
}

.hero-detonate-line::after {
  color: #4d8cff;
  transform: translateX(8px);
}

.cinematic-hero #page-title em {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: #ff5573;
  text-shadow: 0 0 24px rgba(255,68,100,.29), 0 2px 0 rgba(0,0,0,.5);
}

.cinematic-hero #page-title em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.17em;
  width: 100%;
  height: .075em;
  min-height: 3px;
  background: linear-gradient(90deg, #e52b4c 0 32%, #fff 32% 66%, #4c89ff 66% 100%);
  box-shadow: 0 0 18px rgba(102,151,255,.34);
  transform-origin: left center;
}

.hero-replay {
  position: absolute !important;
  right: 0;
  top: 21px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(173,208,255,.48);
  border-radius: 3px;
  background: rgba(5,18,44,.54);
  color: #d7e6ff;
  backdrop-filter: blur(9px);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}

.hero-replay:hover,
.hero-replay:focus-visible {
  color: #fff;
  border-color: #fff;
  background: rgba(22,55,108,.78);
}

.hero-replay svg {
  width: 14px;
  height: 14px;
  transition: transform .35s ease;
}

.hero-replay:hover svg {
  transform: rotate(-145deg);
}

.hero-motion-toggle {
  position: absolute !important;
  right: 0;
  top: 64px;
  z-index: 10 !important;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(173,208,255,.48);
  border-radius: 3px;
  background: rgba(5,18,44,.54);
  color: #d7e6ff;
  backdrop-filter: blur(9px);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: 1.05px;
  text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}

.hero-motion-toggle:hover,
.hero-motion-toggle:focus-visible {
  color: #fff;
  border-color: #fff;
  background: rgba(22,55,108,.78);
}

.hero-motion-toggle svg {
  width: 14px;
  height: 14px;
}

.hero-motion-paused .hero-cinema-fallback,
.hero-motion-paused .hero-cinema-layer,
.hero-motion-paused .hero-kicker-line,
.hero-motion-paused .hero-detonate-line,
.hero-motion-paused #page-title::before,
.hero-motion-paused #page-title::after,
.hero-motion-paused #page-title em,
.hero-motion-paused #page-title em::after,
.hero-motion-paused .hero-shockwave,
.hero-motion-paused .hero-flash {
  animation-play-state: paused !important;
}

/* Opening choreography. The headline detonates once; the canvas continues
   an extended, staggered mortar display without repeating the text strobe. */
.hero-cinematic-playing #page-title::before {
  animation: heroTitleRays 1650ms 535ms cubic-bezier(.08,.72,.13,1) both;
}

.hero-cinematic-playing #page-title::after {
  animation: heroTitleCore 760ms 590ms ease-out both;
}

.hero-cinematic-playing .intro-main {
  animation: heroImpactShake 540ms 760ms cubic-bezier(.2,.7,.2,1) both;
}

.hero-cinematic-playing .hero-kicker-line {
  animation: heroStandIn 900ms cubic-bezier(.16,.88,.20,1.03) both;
}

.hero-cinematic-playing .hero-detonate-line {
  animation: heroDetonate 1150ms 390ms cubic-bezier(.13,.84,.12,1.12) both;
}

.hero-cinematic-playing .hero-detonate-line::before {
  animation: heroChromaticRed 920ms 420ms ease-out both;
}

.hero-cinematic-playing .hero-detonate-line::after {
  animation: heroChromaticBlue 920ms 420ms ease-out both;
}

.hero-cinematic-playing #page-title em {
  animation: heroDemandIn 760ms 1210ms cubic-bezier(.20,.82,.18,1) both;
}

.hero-cinematic-playing #page-title em::after {
  animation: heroUnderline 820ms 1450ms cubic-bezier(.2,.8,.2,1) both;
}

.hero-cinematic-playing .hero-shockwave {
  animation: heroShockwave 1420ms 545ms cubic-bezier(.11,.67,.18,1) both;
}

.hero-cinematic-playing .hero-flash {
  animation: heroSingleFlash 760ms 530ms ease-out both;
}

.hero-cinematic-playing .hero-cinema-layer {
  animation: heroCameraKick 980ms 480ms cubic-bezier(.18,.75,.2,1) both;
}


@keyframes heroTitleRays {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.05) rotate(-13deg); }
  18% { opacity: .98; }
  42% { opacity: .92; transform: translate(-50%, -50%) scale(1.16) rotate(4deg); }
  70% { opacity: .48; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.72) rotate(11deg); }
}

@keyframes heroTitleCore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.03); filter: blur(7px) brightness(1); }
  25% { opacity: 1; filter: blur(.3px) brightness(2.2); }
  62% { opacity: .56; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); filter: blur(4px); }
}

@keyframes heroImpactShake {
  0%, 100% { transform: translate3d(0,0,0); }
  18% { transform: translate3d(-5px,1px,0) rotate(-.08deg); }
  34% { transform: translate3d(4px,-1px,0) rotate(.06deg); }
  52% { transform: translate3d(-2px,0,0); }
  70% { transform: translate3d(1px,0,0); }
}

@keyframes heroStandIn {
  0% { opacity: 0; transform: translate3d(-4vw, 28px, -80px) scale(.88); filter: blur(7px); }
  68% { opacity: 1; transform: translate3d(.7vw, 0, 10px) scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes heroDetonate {
  0% { opacity: 0; transform: translate3d(-1vw, 54px, -420px) scale(.18) rotateX(16deg); filter: blur(16px) brightness(.7); letter-spacing: -.13em; }
  30% { opacity: 1; filter: blur(0) brightness(3.2); }
  53% { transform: translate3d(1.3vw, -4px, 220px) scale(1.38) rotateX(-2deg); filter: brightness(2.45); letter-spacing: -.066em; }
  68% { transform: translate3d(-.35vw, 1px, 35px) scale(.96); filter: brightness(1.22); }
  82% { transform: translate3d(.12vw, 0, 10px) scale(1.035); }
  100% { opacity: 1; transform: none; filter: none; letter-spacing: -.076em; }
}

@keyframes heroChromaticRed {
  0% { opacity: 0; transform: translateX(-2px) scale(.25); filter: blur(9px); }
  35% { opacity: .95; transform: translateX(-24px) scale(1.14); filter: blur(1px); }
  100% { opacity: 0; transform: translateX(-8px) scale(1); filter: blur(0); }
}

@keyframes heroChromaticBlue {
  0% { opacity: 0; transform: translateX(2px) scale(.25); filter: blur(9px); }
  35% { opacity: .95; transform: translateX(24px) scale(1.14); filter: blur(1px); }
  100% { opacity: 0; transform: translateX(8px) scale(1); filter: blur(0); }
}

@keyframes heroDemandIn {
  0% { opacity: 0; transform: translate3d(0, 32px, 0); letter-spacing: .08em; filter: blur(5px); }
  70% { opacity: 1; transform: translate3d(0, -2px, 0); letter-spacing: -.02em; filter: blur(0); }
  100% { opacity: 1; transform: none; letter-spacing: -.035em; }
}

@keyframes heroUnderline {
  0% { transform: scaleX(0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes heroShockwave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.03); }
  18% { opacity: .92; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.20); border-width: .5px; }
}

@keyframes heroSingleFlash {
  0%, 12% { opacity: 0; }
  21% { opacity: .88; }
  37% { opacity: .18; }
  100% { opacity: 0; }
}

@keyframes heroCameraKick {
  0%, 34% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.018); }
  68%, 100% { transform: translateX(-50%) scale(1); }
}

@media (min-width: 1500px) {
  .cinematic-hero {
    min-height: min(970px, calc(100svh - 146px));
  }
  .cinematic-hero .hero-detonate-line {
    font-size: 1.11em;
  }
  .hero-shockwave {
    left: 25%;
  }
}

@media (max-width: 1050px) {
  .cinematic-hero {
    min-height: 760px;
  }
  .hero-cinema-fallback {
    left: 26%;
    opacity: .32;
  }
  .hero-replay {
    top: 12px;
  }
}

@media (max-width: 760px) {
  .cinematic-hero {
    min-height: auto;
    overflow: hidden;
    padding-top: 54px;
  }
  .hero-cinema-layer {
    top: 0;
    bottom: 0;
  }
  .hero-cinema-fallback {
    inset: -2% -45% 30% 16%;
    width: 138%;
    height: 75%;
    opacity: .31;
    transform: perspective(900px) rotateY(-9deg) rotateZ(-4deg) scale(1.08);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 15%, #000 47%, rgba(0,0,0,.72) 100%);
  }
  .hero-cinema-light {
    background:
      radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.11), transparent 28%),
      linear-gradient(180deg, rgba(2,8,21,.68) 0%, rgba(3,10,27,.66) 44%, rgba(3,10,27,.90) 100%);
  }
  .hero-kicker-line {
    font-size: .74em;
  }
  .cinematic-hero #page-title::before {
    width: 118vw;
    left: 50%;
    top: 45%;
  }
  .cinematic-hero #page-title::after {
    width: 82vw;
    left: 50%;
    top: 45%;
  }
  .cinematic-hero .hero-detonate-line {
    font-size: 1.02em;
    letter-spacing: -.082em;
    -webkit-text-stroke-width: 1px;
    text-shadow:
      2px 1px 0 rgba(198,23,56,.95),
      -2px -1px 0 rgba(52,111,228,.92),
      0 2px 0 #020714,
      0 0 20px rgba(255,255,255,.22);
  }
  .hero-replay {
    right: 0;
    top: 8px;
    font-size: 8px;
    background: rgba(5,18,44,.70);
  }
  .hero-motion-toggle {
    right: 0;
    top: 51px;
    font-size: 8px;
    background: rgba(5,18,44,.70);
  }
  .hero-shockwave {
    left: 49%;
    top: 27%;
    width: 78vw;
    height: 78vw;
  }
  .hero-cinematic-playing .hero-detonate-line {
    animation-name: heroDetonateMobile;
  }
  @keyframes heroDetonateMobile {
    0% { opacity: 0; transform: translate3d(0, 32px, -240px) scale(.22); filter: blur(12px) brightness(.7); }
    32% { opacity: 1; filter: blur(0) brightness(2.7); }
    54% { transform: translate3d(0, -2px, 80px) scale(1.16); filter: brightness(1.7); }
    72% { transform: scale(.97); filter: brightness(1.12); }
    86% { transform: scale(1.025); }
    100% { opacity: 1; transform: none; filter: none; }
  }
}

@media (max-width: 480px) {
  .hero-replay span,
  .hero-motion-toggle span {
    display: none;
  }
  .hero-replay,
  .hero-motion-toggle {
    width: 38px;
    justify-content: center;
    padding: 7px;
  }
  .hero-cinema-layer::before {
    opacity: .42;
  }
}

@media print {
  .hero-cinema-layer,
  #hero-fireworks-canvas,
  .hero-replay,
  .hero-motion-toggle {
    display: none !important;
  }
}