/* =====================================================
   DD FILM PRODUCTION — COMING SOON
   Luxury Hollywood / Dark Navy / Gold Metallic
   ===================================================== */

:root {
  --bg:          #0b6bc1;
  --bg-2:        #0b6bc1;
  --gold:        #C89A3D;
  --gold-light:  #E8C26D;
  --gold-deep:   #8a651f;
  --text:        #C89A3D;
  --glow:        rgba(255, 190, 70, 0.4);
  --screen-blue: #0d3a6e;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Jost', 'Segoe UI', sans-serif;
  --font-accent:  'Cinzel', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  height: 100%;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 50% 0%, #0a2c49 0%, var(--bg) 55%, #03101d 100%);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
  border-radius: 4px;
}

/* =====================================================
   BACKGROUND STAGE (fixed cinematic layers)
   ===================================================== */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0; /* revealed by entrance timeline */
}

/* =====================================================
   GLOWING & LIGHTING EFFECTS
   ===================================================== */

/* --- breathing glow orbs --- */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(10px);
  will-change: transform, opacity;
}
.glow-orb--gold-1 {
  width: 46vmax; height: 46vmax;
  top: -14vmax; left: -12vmax;
  background: radial-gradient(circle, rgba(255, 190, 70, 0.20) 0%, rgba(255, 190, 70, 0.07) 40%, transparent 68%);
  animation: orb-breathe-1 13s ease-in-out infinite;
}
.glow-orb--gold-2 {
  width: 40vmax; height: 40vmax;
  bottom: -12vmax; right: -10vmax;
  background: radial-gradient(circle, rgba(232, 194, 109, 0.17) 0%, rgba(200, 154, 61, 0.06) 42%, transparent 70%);
  animation: orb-breathe-2 17s ease-in-out infinite;
}
.glow-orb--blue {
  width: 52vmax; height: 52vmax;
  top: 26%; left: 50%;
  margin-left: -26vmax;
  background: radial-gradient(circle, rgba(60, 140, 235, 0.14) 0%, rgba(40, 110, 210, 0.05) 45%, transparent 70%);
  animation: orb-breathe-3 11s ease-in-out infinite;
}
.glow-orb--warm {
  width: 30vmax; height: 30vmax;
  top: 55%; left: 12%;
  background: radial-gradient(circle, rgba(255, 205, 120, 0.13) 0%, transparent 65%);
  animation: orb-drift 24s ease-in-out infinite alternate;
}
@keyframes orb-breathe-1 {
  0%, 100% { transform: scale(1) translate3d(0,0,0);       opacity: .55; }
  50%      { transform: scale(1.12) translate3d(2vmax,1vmax,0); opacity: 1; }
}
@keyframes orb-breathe-2 {
  0%, 100% { transform: scale(1.08) translate3d(0,0,0);    opacity: .9; }
  50%      { transform: scale(0.94) translate3d(-2vmax,-1vmax,0); opacity: .45; }
}
@keyframes orb-breathe-3 {
  0%, 100% { transform: scale(1);    opacity: .65; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1);        opacity: .4; }
  50%  { transform: translate3d(6vmax, -4vmax, 0) scale(1.2); opacity: .8; }
  to   { transform: translate3d(11vmax, 2vmax, 0) scale(.9);  opacity: .5; }
}

/* --- cinema projector beam from top --- */
.projector-beam {
  position: absolute;
  top: -12%;
  left: 50%;
  width: 130vmax;
  height: 130vmax;
  margin-left: -65vmax;
  background: conic-gradient(from 180deg at 50% 0%,
      transparent 44.5%,
      rgba(255, 214, 140, 0.045) 46.5%,
      rgba(255, 224, 160, 0.13) 50%,
      rgba(255, 214, 140, 0.045) 53.5%,
      transparent 55.5%);
  filter: blur(14px);
  mix-blend-mode: screen;
  transform-origin: 50% 0%;
  animation: beam-sway 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes beam-sway {
  0%   { transform: rotate(-5deg);  opacity: .6; }
  35%  { transform: rotate(2deg);   opacity: 1; }
  70%  { transform: rotate(-1.5deg);opacity: .75; }
  100% { transform: rotate(4.5deg); opacity: .9; }
}

/* --- diagonal light sweep across the scene --- */
.light-sweep {
  position: absolute;
  top: -30%;
  left: -45%;
  width: 34%;
  height: 160%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 226, 168, 0.05) 30%,
      rgba(255, 236, 190, 0.12) 50%,
      rgba(255, 226, 168, 0.05) 70%,
      transparent 100%);
  transform: rotate(16deg) translate3d(0, 0, 0);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: light-sweep-move 16s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes light-sweep-move {
  0%   { transform: rotate(16deg) translate3d(-40vw, 0, 0); opacity: 0; }
  12%  { opacity: .9; }
  50%  { opacity: .7; }
  88%  { opacity: .9; }
  100% { transform: rotate(16deg) translate3d(175vw, 0, 0); opacity: 0; }
}

/* --- expanding halo rings from the TV --- */
.halo-ring {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 30vmin;
  height: 30vmin;
  margin: -15vmin 0 0 -15vmin;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 200, 100, 0.35);
  box-shadow: 0 0 26px rgba(255, 190, 70, 0.22), inset 0 0 26px rgba(255, 190, 70, 0.12);
  mix-blend-mode: screen;
  opacity: 0;
  animation: halo-expand 9s ease-out infinite;
  will-change: transform, opacity;
}
.halo-ring--2 { animation-delay: 4.5s; }
@keyframes halo-expand {
  0%   { transform: scale(0.55); opacity: 0; }
  12%  { opacity: .5; }
  100% { transform: scale(3.4);  opacity: 0; }
}

/* --- soft horizontal shimmer band --- */
.shimmer-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  height: 22vh;
  background: linear-gradient(180deg,
      transparent,
      rgba(255, 205, 120, 0.05) 40%,
      rgba(120, 170, 255, 0.05) 60%,
      transparent);
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: shimmer-breathe 10s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes shimmer-breathe {
  0%, 100% { opacity: .35; transform: translate3d(0, 0, 0); }
  50%      { opacity: .85; transform: translate3d(0, -12px, 0); }
}

/* --- vignette --- */
.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 60% at 50% 42%, transparent 40%, rgba(2, 10, 18, 0.55) 100%),
    linear-gradient(180deg, rgba(2,10,18,.35) 0%, transparent 18%, transparent 78%, rgba(2,10,18,.6) 100%);
}

/* --- drifting smoke --- */
.bg-smoke {
  position: absolute;
  width: 140vmax;
  height: 140vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  will-change: transform;
}
.bg-smoke--1 {
  top: -40vmax; left: -30vmax;
  background: radial-gradient(circle at 40% 40%, rgba(20, 66, 108, 0.5), transparent 60%);
  animation: smoke-drift-1 60s ease-in-out infinite alternate;
}
.bg-smoke--2 {
  bottom: -50vmax; right: -35vmax;
  background: radial-gradient(circle at 60% 60%, rgba(120, 84, 26, 0.22), transparent 60%);
  animation: smoke-drift-2 75s ease-in-out infinite alternate;
}
@keyframes smoke-drift-1 {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(8vmax, 5vmax, 0) rotate(12deg) scale(1.15); }
}
@keyframes smoke-drift-2 {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1); }
  to   { transform: translate3d(-7vmax, -4vmax, 0) rotate(-10deg) scale(1); }
}

/* --- light rays --- */
.bg-lightray {
  position: absolute;
  top: -20%;
  width: 34vw;
  height: 130%;
  filter: blur(30px);
  opacity: 0.14;
  transform-origin: top center;
  will-change: transform, opacity;
}
.bg-lightray--1 {
  left: 8%;
  background: linear-gradient(190deg, rgba(232,194,109,.5) 0%, transparent 65%);
  transform: rotate(14deg);
  animation: ray-breathe 14s ease-in-out infinite alternate;
}
.bg-lightray--2 {
  right: 6%;
  background: linear-gradient(170deg, rgba(120,170,255,.35) 0%, transparent 60%);
  transform: rotate(-16deg);
  animation: ray-breathe 18s 4s ease-in-out infinite alternate;
}
@keyframes ray-breathe {
  from { opacity: 0.07; }
  50%  { opacity: 0.18; }
  to   { opacity: 0.1; }
}

/* --- bokeh --- */
.bg-bokeh span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,194,109,.5) 0%, rgba(232,194,109,0) 70%);
  filter: blur(2px);
  opacity: 0.35;
  will-change: transform, opacity;
  animation: bokeh-float 22s ease-in-out infinite alternate;
}
.bg-bokeh span:nth-child(1)  { width: 90px;  height: 90px;  top: 12%; left: 6%;  animation-duration: 26s; }
.bg-bokeh span:nth-child(2)  { width: 46px;  height: 46px;  top: 30%; left: 16%; animation-duration: 21s; animation-delay: -4s; }
.bg-bokeh span:nth-child(3)  { width: 120px; height: 120px; top: 66%; left: 4%;  animation-duration: 30s; animation-delay: -9s; }
.bg-bokeh span:nth-child(4)  { width: 34px;  height: 34px;  top: 80%; left: 22%; animation-duration: 19s; animation-delay: -2s; }
.bg-bokeh span:nth-child(5)  { width: 70px;  height: 70px;  top: 8%;  right: 10%; left: auto; animation-duration: 24s; animation-delay: -6s; }
.bg-bokeh span:nth-child(6)  { width: 110px; height: 110px; top: 40%; right: 5%;  left: auto; animation-duration: 32s; animation-delay: -12s; }
.bg-bokeh span:nth-child(7)  { width: 40px;  height: 40px;  top: 72%; right: 18%; left: auto; animation-duration: 18s; animation-delay: -8s; }
.bg-bokeh span:nth-child(8)  { width: 58px;  height: 58px;  top: 88%; right: 8%;  left: auto; animation-duration: 27s; animation-delay: -14s; }
.bg-bokeh span:nth-child(9)  { width: 26px;  height: 26px;  top: 52%; left: 12%;  animation-duration: 16s; animation-delay: -5s; }
.bg-bokeh span:nth-child(10) { width: 82px;  height: 82px;  top: 22%; right: 26%; left: auto; animation-duration: 29s; animation-delay: -11s; }
@keyframes bokeh-float {
  from { transform: translate3d(0, 0, 0) scale(1);      opacity: .18; }
  50%  { transform: translate3d(14px, -26px, 0) scale(1.12); opacity: .4; }
  to   { transform: translate3d(-10px, 12px, 0) scale(.95);  opacity: .22; }
}

/* --- soft moving light streaks --- */
.bg-streak {
  position: absolute;
  width: 160%;
  height: 2px;
  left: -30%;
  background: linear-gradient(90deg, transparent, rgba(232,194,109,.28), transparent);
  filter: blur(1px);
  opacity: 0.4;
  will-change: transform;
}
.bg-streak--1 { top: 26%; transform: rotate(-8deg);  animation: streak-move 34s linear infinite; }
.bg-streak--2 { top: 68%; transform: rotate(6deg);   animation: streak-move 46s -18s linear infinite reverse; }
@keyframes streak-move {
  from { transform: translate3d(-12%, 0, 0) rotate(-8deg); }
  to   { transform: translate3d(12%, 0, 0) rotate(-8deg); }
}

/* --- golden filigree arcs (corners, like reference) --- */
.bg-arcs {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  opacity: 0.4;
  will-change: transform;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0 46px,
      rgba(200, 154, 61, 0.16) 46px 47px,
      transparent 47px 78px,
      rgba(232, 194, 109, 0.09) 78px 79px);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 72%);
  mask-image: radial-gradient(circle at center, black 30%, transparent 72%);
}
.bg-arcs--tl { top: -30vmax; left: -26vmax;  animation: arcs-spin 160s linear infinite; }
.bg-arcs--br { bottom: -32vmax; right: -26vmax; animation: arcs-spin 190s linear infinite reverse; }
@keyframes arcs-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- film grain --- */
.bg-grain {
  position: absolute;
  inset: -60px;
  background-image: url('../assets/noise.png');
  background-size: 220px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: grain-jitter 0.9s steps(4) infinite;
  will-change: transform;
}
@keyframes grain-jitter {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-24px, 16px, 0); }
  50%  { transform: translate3d(18px, -22px, 0); }
  75%  { transform: translate3d(-12px, -14px, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* --- vertical film scratches --- */
.bg-scratches {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 18.9%, rgba(255,255,255,.05) 19%, transparent 19.15%),
    linear-gradient(90deg, transparent 63.4%, rgba(255,255,255,.04) 63.5%, transparent 63.6%),
    linear-gradient(90deg, transparent 86.7%, rgba(255,255,255,.05) 86.8%, transparent 86.9%);
  opacity: 0;
  animation: scratch-flicker 7s steps(1) infinite;
}
@keyframes scratch-flicker {
  0%, 88%, 100% { opacity: 0; }
  89%, 90.5%    { opacity: .6; }
  93%, 93.8%    { opacity: .35; }
}

/* --- lens flare (random breathing, JS positioned) --- */
.lens-flare {
  position: absolute;
  width: 420px;
  height: 420px;
  top: 20%;
  left: 30%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255,225,160,.55) 0%, rgba(255,190,70,.18) 28%, transparent 62%),
    radial-gradient(2px 140px at 50% 50%, rgba(255,235,190,.8), transparent 70%),
    radial-gradient(140px 2px at 50% 50%, rgba(255,235,190,.8), transparent 70%);
  filter: blur(1px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* =====================================================
   PAGE / HERO
   ===================================================== */
#page { position: relative; z-index: 1; }

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 40px) 20px;
  perspective: 1200px;
}

/* =====================================================
   STAGE : reel + TV + clapperboard
   ===================================================== */
.stage {
  position: relative;
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- floating filmstrip behind reel --- */
.filmstrip {
  position: absolute;
  left: -4%;
  top: -12%;
  width: 46%;
  opacity: 0.15;
  transform: rotate(-24deg);
  will-change: transform;
  animation: filmstrip-float 26s ease-in-out infinite alternate;
  z-index: 0;
}
.filmstrip__inner {
  display: flex;
  gap: 6px;
  padding: 14px 10px;
  border-top: 5px dashed rgba(232,194,109,.7);
  border-bottom: 5px dashed rgba(232,194,109,.7);
  background: linear-gradient(180deg, rgba(8,38,63,.9), rgba(6,26,44,.9));
  border-radius: 4px;
}
.filmstrip__inner span {
  flex: 1;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, rgba(200,154,61,.28), rgba(13,58,110,.5));
  border: 1px solid rgba(232,194,109,.3);
  border-radius: 2px;
}
@keyframes filmstrip-float {
  from { transform: rotate(-24deg) translate3d(0, 0, 0); }
  to   { transform: rotate(-21deg) translate3d(16px, 14px, 0); }
}

/* --- props --- */
.prop {
  position: absolute;
  z-index: 1;
  will-change: transform;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
}
.prop img {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.prop--reel {
  width: clamp(180px, 24vw, 320px);
  left: 0;
  bottom: -6%;
  animation: reel-float 18s ease-in-out infinite;
}
@keyframes reel-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, 20px, 0) rotate(4deg); }
}

.prop--clapper {
  width: clamp(170px, 22vw, 300px);
  right: 0;
  top: 4%;
  animation: clapper-float 16s ease-in-out infinite;
}
@keyframes clapper-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -15px, 0) rotate(-3deg); }
}

/* =====================================================
   CRT TELEVISION
   ===================================================== */
.tv-wrap {
  position: relative;
  z-index: 2;
  width: min(650px, 82vw, 92vh);
  will-change: transform;
}

.tv {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  animation: tv-breathe 10s ease-in-out infinite;
}
@keyframes tv-breathe {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}

.tv__body {
  position: relative;
  z-index: 2;
  width: 100%;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.75));
}

/* blue light the TV casts on surroundings */
.tv__blue-cast {
  position: absolute;
  inset: -22%;
  z-index: 0;
  background: radial-gradient(50% 45% at 42% 46%, rgba(50, 130, 230, 0.30) 0%, rgba(40, 110, 210, 0.12) 42%, transparent 70%);
  filter: blur(22px);
  animation: cast-breathe 8s ease-in-out infinite;
  will-change: opacity;
}
@keyframes cast-breathe {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}

/* golden ambient behind tv */
.tv__glow {
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: url('../assets/glow.png') center / contain no-repeat;
  opacity: 0.28;
  animation: glow-breathe 9s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes glow-breathe {
  0%, 100% { opacity: .22; transform: scale(1); }
  50%      { opacity: .38; transform: scale(1.06); }
}

/* ground shadow + reflection */
.tv__shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -5.5%;
  height: 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75) 0%, transparent 72%);
  filter: blur(8px);
  z-index: 1;
}
.tv__reflection {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -13%;
  height: 12%;
  background: linear-gradient(180deg, rgba(70, 140, 230, 0.16), transparent 80%);
  filter: blur(6px);
  border-radius: 50%;
  z-index: 0;
}

/* --- screen (positioned over glass area of the png) --- */
.tv__screen {
  position: absolute;
  z-index: 3;
  left: 9.5%;
  top: 10.6%;
  width: 64%;
  height: 70.4%;
  border-radius: 14% / 18%;
  overflow: hidden;
  transform: translateZ(30px);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.85),
    0 0 34px rgba(45, 120, 220, 0.35);
}

.screen__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 70% at 50% 38%, #1c5aa8 0%, var(--screen-blue) 45%, #051d3d 82%, #02101f 100%);
}

/* --- video player fitted to the CRT glass --- */
.screen__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills the curved screen edge-to-edge */
  border-radius: inherit;
  filter: saturate(1.05) contrast(1.04) brightness(0.96);
  background: #02101f;
}
.screen__bg::after {
  /* horizontal brushed texture like reference */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0 1px,
      transparent 1px 5px);
  opacity: 0.7;
}

/* logo overlay — shown when the video is paused */
.screen__logo-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
  background: radial-gradient(85% 70% at 50% 38%, rgba(28, 90, 168, 0.92) 0%, rgba(13, 58, 110, 0.94) 45%, rgba(5, 29, 61, 0.96) 82%, rgba(2, 16, 31, 0.97) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  will-change: opacity;
  pointer-events: none;
}
.tv__screen.is-paused .screen__logo-wrap {
  opacity: 1;
  visibility: visible;
}

.screen__logo {
  width: 88%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}
.screen__logo--main { position: relative; z-index: 3; }

/* --- CRT effects --- */
.screen__scanlines {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: repeating-linear-gradient(180deg,
      rgba(0, 0, 0, 0.22) 0 1px,
      transparent 1px 3px);
  pointer-events: none;
  animation: scanline-shift 9s linear infinite;
  will-change: background-position;
}
@keyframes scanline-shift {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

.screen__scanbar {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  left: 0; right: 0;
  top: -30%;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(140, 190, 255, 0.09) 45%, rgba(180, 215, 255, 0.14) 50%, rgba(140, 190, 255, 0.09) 55%, transparent);
  animation: scanbar-move 7s linear infinite;
  will-change: transform;
}
@keyframes scanbar-move {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 620%, 0); }
}

.screen__static {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: url('../assets/noise.png');
  background-size: 130px;
  opacity: 0.06;
  mix-blend-mode: screen;
  animation: static-jitter 0.45s steps(3) infinite;
  will-change: transform, opacity;
}
@keyframes static-jitter {
  0%   { transform: translate3d(0,0,0); }
  33%  { transform: translate3d(-18px, 12px, 0); }
  66%  { transform: translate3d(14px, -10px, 0); }
  100% { transform: translate3d(0,0,0); }
}

.screen__glare {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(42% 30% at 26% 16%, rgba(255, 255, 255, 0.16) 0%, transparent 65%),
    linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 28%);
  pointer-events: none;
}
.screen__vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  box-shadow: inset 0 0 46px 18px rgba(0, 0, 12, 0.75);
  pointer-events: none;
}

/* subtle constant flicker on whole screen */
.tv__screen { animation: crt-flicker 4s steps(1) infinite; }
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  92%      { opacity: .985; }
  92.6%    { opacity: 1; }
  96.8%    { opacity: .99; }
  97.2%    { opacity: 1; }
}

/* glitch state applied by JS every 12s */
.tv__screen.is-glitching .screen__static { opacity: 0.35; }
.tv__screen.is-glitching .screen__video  { filter: saturate(1.4) contrast(1.2) brightness(1.25) hue-rotate(6deg); }

/* =====================================================
   PLAYER CONTROLS (inside the CRT screen)
   ===================================================== */
.player {
  position: absolute;
  z-index: 9;
  left: 7%;
  right: 7%;
  bottom: 5.5%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(4, 16, 30, 0.62);
  border: 1px solid rgba(200, 154, 61, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  will-change: opacity, transform;
}
.tv__screen:hover .player,
.tv__screen:focus-within .player,
.tv__screen.is-paused .player {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.player__btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(200, 154, 61, 0.12);
  color: var(--gold-light);
  font-size: 11px;
  cursor: pointer;
  transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.player__btn:hover,
.player__btn:focus-visible {
  background: rgba(200, 154, 61, 0.28);
  box-shadow: 0 0 14px var(--glow);
  transform: scale(1.08);
}

.player__track {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  overflow: hidden;
}
.player__track::before {
  /* larger invisible hit area */
  content: '';
  position: absolute;
  inset: -8px 0;
}
.player__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  box-shadow: 0 0 10px var(--glow);
  will-change: width;
}

/* =====================================================
   COPY
   ===================================================== */
.copy {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-top: clamp(18px, 4vh, 44px);
  max-width: 860px;
}

/* kicker : SOMETHING BIG IS */
.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 26px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(13px, 2vw, 21px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: #C89A3D;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.kicker__line {
  width: clamp(28px, 5vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 194, 109, 0.8));
}
.kicker__line:last-child {
  background: linear-gradient(90deg, rgba(232, 194, 109, 0.8), transparent);
}

/* headline : COMING SOON */
.headline {
  margin-top: clamp(6px, 1.4vh, 14px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 9.4vw, 118px);
  line-height: 1.02;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  background: linear-gradient(180deg,
      #f7df9c 0%,
      var(--gold-light) 26%,
      var(--gold) 50%,
      #a5731f 68%,
      #e3b95f 88%,
      #f2d489 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(255, 190, 70, 0.30));
  will-change: transform, opacity;
}

/* divider with flare + icon */
.divider {
  position: relative;
  margin: clamp(14px, 2.6vh, 26px) auto clamp(12px, 2.2vh, 22px);
  width: min(560px, 78vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent);
  box-shadow: 0 0 16px var(--glow);
}
.divider__flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255, 235, 180, 0.85) 0%, rgba(255, 190, 70, 0.25) 26%, transparent 60%),
    radial-gradient(2px 90px at 50% 50%, rgba(255, 240, 200, 0.9), transparent 70%),
    radial-gradient(90px 2px at 50% 50%, rgba(255, 240, 200, 0.9), transparent 70%);
  mix-blend-mode: screen;
  animation: flare-breathe 5s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity, transform;
}
@keyframes flare-breathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
.divider__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(38px, 5vw, 50px);
  height: clamp(38px, 5vw, 50px);
  display: grid;
  place-items: center;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: rgba(6, 26, 44, 0.85);
  color: var(--gold-light);
  font-size: clamp(15px, 2vw, 20px);
  box-shadow: 0 0 22px var(--glow), inset 0 0 12px rgba(255, 190, 70, 0.18);
}

/* description */
.description {
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 1.8vw, 18.5px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  line-height: 2;
  text-transform: uppercase;
  color: #C89A3D;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* stay tuned */
.stay-tuned {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
  margin-top: clamp(12px, 2.4vh, 24px);
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 26px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-shadow: 0 0 18px var(--glow);
}
.stay-tuned__line {
  width: clamp(22px, 3.4vw, 44px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.stay-tuned__line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

/* =====================================================
   CONTACT
   ===================================================== */
.contact {
  margin-top: clamp(16px, 3vh, 30px);
  font-style: normal;
  display: flex;
  justify-content: center;
}
.contact__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 18px);
  padding: 8px 14px;
  border-radius: 14px;
  transition: transform 0.35s ease, filter 0.35s ease;
  will-change: transform;
}
.contact__icon {
  width: clamp(44px, 5.6vw, 56px);
  height: clamp(44px, 5.6vw, 56px);
  display: grid;
  place-items: center;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
  font-size: clamp(17px, 2.2vw, 22px);
  box-shadow: 0 0 0 rgba(255, 190, 70, 0);
  transition: box-shadow 0.35s ease, background 0.35s ease;
}
.contact__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.contact__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact__email {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 2.2vw, 21px);
  letter-spacing: 0.06em;
  color: var(--text);
  transition: text-shadow 0.35s ease;
}
.contact__link:hover,
.contact__link:focus-visible {
  transform: translateY(-2px);
}
.contact__link:hover .contact__icon,
.contact__link:focus-visible .contact__icon {
  box-shadow: 0 0 26px var(--glow), inset 0 0 14px rgba(255, 190, 70, 0.25);
  background: rgba(200, 154, 61, 0.1);
}
.contact__link:hover .contact__email,
.contact__link:focus-visible .contact__email {
  text-shadow: 0 0 16px rgba(255, 220, 150, 0.8);
}

/* =====================================================
   SOCIAL ICONS
   ===================================================== */
.socials {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3.4vw, 38px);
  margin-top: clamp(16px, 3vh, 30px);
  padding-bottom: clamp(6px, 1.5vh, 16px);
}
.social {
  width: clamp(42px, 5.4vw, 52px);
  height: clamp(42px, 5.4vw, 52px);
  display: grid;
  place-items: center;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
  font-size: clamp(16px, 2vw, 19px);
  transition: transform 0.4s cubic-bezier(.22,1.4,.36,1), box-shadow 0.4s ease, background 0.4s ease, color 0.4s ease;
  will-change: transform;
}
.social:hover,
.social:focus-visible {
  transform: scale(1.14) rotate(6deg) translateZ(0);
  box-shadow: 0 0 28px var(--glow), inset 0 0 14px rgba(255, 190, 70, 0.22);
  background: rgba(200, 154, 61, 0.12);
  color: #fceeca;
}

/* =====================================================
   DOWNLOAD ZIP BUTTON
   ===================================================== */
.download-btn {
  position: fixed;
  top: clamp(14px, 2.4vh, 26px);
  right: clamp(14px, 2.4vw, 28px);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: rgba(6, 26, 44, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  box-shadow: 0 0 0 rgba(255, 190, 70, 0), 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.35s ease, background 0.35s ease, transform 0.35s ease, color 0.35s ease;
  will-change: transform;
}
.download-btn i { font-size: 14px; }
.download-btn:hover,
.download-btn:focus-visible {
  transform: translateY(-2px);
  background: rgba(200, 154, 61, 0.16);
  color: #fceeca;
  box-shadow: 0 0 26px var(--glow), 0 8px 26px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   ENTRANCE — initial hidden states (revealed by GSAP)
   ===================================================== */
.js .prop--reel,
.js .prop--clapper,
.js .tv-wrap,
.js .kicker,
.js .headline,
.js .divider,
.js .description,
.js .stay-tuned,
.js .contact,
.js .socials .social,
.js .filmstrip,
.js .download-btn {
  opacity: 0;
  visibility: hidden;
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}