/* ============================================================
   PROPER — NYE/NYD 2027 · SPLASH  (v4)
   ============================================================ */

/* ┌── CONTROLS ────────────────────────────────────────────────┐
   │  SCALE --*-scale · WIDTH --*-w · POSITION --*-top/--*-x     │
   │  Dots layout --dot-w / --dot-bottom + per-dot left below   │
   │  Texture --grain (fine) / --dust (scratches) · click=replay│
   └────────────────────────────────────────────────────────────┘ */
.proper-splash{
  --purple:#a370ff; --purple-hi:#ecdcff; --glow-a:rgba(163,112,255,.75); --glow-b:rgba(120,55,235,.6);

  /* LANDSCAPE (desktop) defaults */
  --top-top:6%;      --top-w:min(30%,460px); --top-scale:1;
  --logo-top:13%;    --logo-w:min(46%,860px); --logo-x:0px; --logo-scale:1;
  --thorns-scale:1.32;
  --emblem-w:22%; --emblem-h:47px; --emblem-scale:1.2;   /* emblem: --emblem-h = bar height; --emblem-scale grows it visually only */
  --fc:#BB69DF;                          /* FNGRS CRSSD purple (year text matches) */
  --bar-top:calc(49% - 10px);            /* black bar vertical position */
  --side-size:clamp(10px,1.05vw,15px);
  --midbar-w:60%;                 /* how far apart the side text sits (bar itself is full-width) */
  --wire-span:88%;  --wire-top:44%;      /* wires (rel. logo): spread across + top = black-bar top */
  --info-bottom:max(40px, 8vh);   --info-scale:1;   /* pinned near the bottom */
  --city-w:100%;
  --dot-w:40%;      --dot-bottom:15%;    /* crowd-dot size + how high they peek */

  --grain:.34;      --dust:.7;           /* minimal film grain + dust (full-bleed, never shows an edge) */
  --mono:"bdr-mono","IBM Plex Mono",ui-monospace,monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; background:#08060d; }
.proper-splash{
  position:relative; width:100%; height:100svh; min-height:100%;
  overflow:hidden; background:#08060d; cursor:pointer;
  font-family:var(--mono); color:var(--purple-hi);
  user-select:none; -webkit-tap-highlight-color:transparent;
}

/* ---------- SCENE ---------- */
.scene{ position:absolute; inset:0; }
.bg{ position:absolute; inset:0; background:#08060d url("assets/gfx/txtr_tall.webp") center/cover no-repeat; }
@media (min-aspect-ratio:1/1){ .bg{ background-image:url("assets/gfx/txtr_wide.webp"); } }

/* crowd dots — laid out side-by-side across the rooftop line, peeking over the city */
.dot{ position:absolute; bottom:var(--dot-bottom); width:var(--dot-w); z-index:1; mix-blend-mode:screen;
  transform-origin:50% 80%; will-change:opacity, transform; }
.dot.d1{ left:-6%;  animation:dotsPulseA 6.2s ease-in-out 0s   infinite; }
.dot.d2{ left:18%;  animation:dotsPulseB 7.6s ease-in-out .9s  infinite; }
.dot.d3{ left:42%;  animation:dotsPulseA 5.4s ease-in-out 1.7s infinite; }
.dot.d4{ left:66%;  animation:dotsPulseB 8.5s ease-in-out 2.6s infinite; }
/* two slightly different pulses so no two dots breathe alike */
@keyframes dotsPulseA{ 0%,100%{opacity:.40; transform:scale(.99)} 50%{opacity:.63; transform:scale(1.03)} }
@keyframes dotsPulseB{ 0%,100%{opacity:.42; transform:scale(1.02)} 45%{opacity:.58; transform:scale(.98)} }

.citywash{ position:absolute; left:-25%; right:-25%; bottom:0; height:46%; z-index:1; pointer-events:none;
  background:radial-gradient(46% 60% at 32% 82%, rgba(180,95,255,.2), transparent 68%);
  mix-blend-mode:screen; animation:wash 15s ease-in-out infinite alternate; }
@keyframes wash{ 0%{transform:translateX(-12%)} 100%{transform:translateX(16%)} }

/* stadium spotlights */
.beams{ position:absolute; left:50%; bottom:4%; transform:translateX(-50%); z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:0; }
.beam{ position:absolute; bottom:0; left:0; width:10px; height:40vh; transform-origin:bottom center; border-radius:50%;
  background:linear-gradient(to top, rgba(190,140,255,.4), rgba(150,90,255,.08) 55%, transparent); filter:blur(9px);
  animation:beamPulse 6.5s ease-in-out infinite; }
.beam.b1{ transform:rotate(-20deg); animation-delay:0s } .beam.b2{ transform:rotate(-7deg); animation-delay:1.6s }
.beam.b3{ transform:rotate(6deg); animation-delay:.8s }  .beam.b4{ transform:rotate(19deg); animation-delay:2.2s }
@keyframes beamPulse{ 0%,100%{opacity:.2} 50%{opacity:.55} }

/* city — pinned to the bottom, fixed proportion */
.city{ position:absolute; left:50%; bottom:0; width:var(--city-w); transform:translateX(-50%); z-index:3; display:block; }

/* ---------- CONTENT ---------- */
.content{ position:absolute; inset:0; z-index:4; }
.el{ position:absolute; left:50%; transform:translateX(-50%); }
.el img{ display:block; width:100%; height:auto; }

.thorns{ top:var(--logo-top); width:var(--logo-w); transform:translateX(-50%) scale(var(--thorns-scale)); transform-origin:center 42%; z-index:1; opacity:.95; }

/* TOP line: 2026 — [FNGRS/CRSSD] — 2027  (with glow) */
.top{ top:var(--top-top); width:var(--top-w); transform:translateX(-50%) scale(var(--top-scale)); z-index:6;
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-family:"amador",serif; font-weight:400; letter-spacing:.04em; font-size:clamp(14px,1.7vw,22px);
  color:var(--fc); text-shadow:0 0 7px var(--glow-a), 0 0 16px var(--glow-b); }
.top .rule{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--purple),transparent); max-width:70px; box-shadow:0 0 8px var(--glow-a); }
.top .fc{ width:clamp(58px,6vw,90px); flex:none; }
.top .fc img{ width:100%; height:auto; display:block; filter:drop-shadow(0 0 8px var(--glow-a)) drop-shadow(0 0 18px var(--glow-b)); }

/* LOGO — glow on wrapper (overflow visible) */
.logo{ top:var(--logo-top); width:var(--logo-w); transform:translate(calc(-50% + var(--logo-x)),0) scale(var(--logo-scale)); z-index:5; }
.logo-glow{ position:relative; filter:drop-shadow(0 0 20px var(--glow-a)) drop-shadow(0 0 54px var(--glow-b)); }
.logo-glow img{ display:block; width:100%; height:auto; }

/* blackout mid-strip — text sits at --midbar-w apart; the BAR spans the full page width */
.midbar{ position:absolute; top:var(--bar-top); left:50%; transform:translate(-50%,-50%); width:var(--midbar-w);
  display:flex; align-items:center; justify-content:space-between; gap:3%; z-index:6; }
.midbar::before{ content:""; position:absolute; top:0; bottom:0; left:-100vw; right:-100vw; background:#08060d; z-index:-1; }
.midbar .side{ font-weight:400; letter-spacing:.18em; font-size:var(--side-size); white-space:nowrap; text-shadow:0 0 8px var(--glow-a); }
.midbar .emblem{ width:auto; flex:none; }
.midbar .emblem img{ height:var(--emblem-h); width:auto; display:block; transform:scale(var(--emblem-scale)); transform-origin:center; }

/* WIRES — nested in .logo so they scale + stay put WITH the logo.
   Top-aligned to the black bar, behind the logo (z:-1), spread across,
   each swaying on its own clock. Cropped + alpha-boosted → full opacity. */
.wires{ position:absolute; left:50%; top:var(--wire-top); width:var(--wire-span);
  transform:translateX(-50%); z-index:-1; pointer-events:none; }
.wires .wire{ position:absolute; top:0; transform-origin:top center; will-change:transform;
  filter:drop-shadow(0 0 6px var(--glow-a)) drop-shadow(0 0 16px var(--glow-b)); }
.wire.w1{ left:1%;  width:46%; animation:swayW 6.5s ease-in-out 0s   infinite; }
.wire.w2{ left:29%; width:42%; animation:swayW 8.1s ease-in-out 1.1s infinite; }
.wire.w3{ left:55%; width:44%; animation:swayW 7.2s ease-in-out .5s  infinite; }
@keyframes swayW{ 0%,100%{transform:rotate(-2.6deg)} 50%{transform:rotate(2.6deg)} }

/* INFO — typed line by line, pinned near the bottom */
.info{ top:auto; bottom:var(--info-bottom); text-align:center; transform:translateX(-50%) scale(var(--info-scale)); z-index:6;
  font-weight:700; letter-spacing:.14em; font-size:clamp(15px,1.85vw,25px); line-height:1.62; }
.info .line{ display:block; white-space:nowrap; }
.info .t{ background:rgba(163,112,255,.18); padding:.05em .3em; box-decoration-break:clone; text-shadow:0 0 8px var(--glow-a); }
.info .cur{ display:inline-block; width:.6em; height:1em; vertical-align:-.14em; background:var(--purple-hi); box-shadow:0 0 10px var(--glow-a); margin-left:.04em; }

/* ---------- OVERLAYS ---------- */
.ov{ position:absolute; inset:0; pointer-events:none; z-index:7; }
/* grain + dust extend well past the viewport so their jump never reveals an edge */
.ov-grain,.ov-dust{ inset:-45%; background-repeat:repeat; }
.ov-grain{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:var(--grain); mix-blend-mode:overlay; animation:grain 1.1s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 30%{transform:translate(-4%,3%)} 60%{transform:translate(3%,-4%)} 100%{transform:translate(0,0)} }
.ov-scan{ background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); opacity:.2; }
/* minimal dust/scratch specks that jump around (à la Temper) */
.ov-dust{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23d)'/></svg>");
  opacity:calc(var(--dust) * .14); mix-blend-mode:screen; animation:dust 2.6s steps(4) infinite; }
@keyframes dust{ 0%{transform:translate(0,0)} 25%{transform:translate(-9%,6%)} 50%{transform:translate(7%,-8%)} 75%{transform:translate(-5%,9%)} 100%{transform:translate(0,0)} }
.ov-vignette{ background:radial-gradient(135% 100% at 50% 38%, transparent 56%, rgba(0,0,0,.5) 90%, rgba(0,0,0,.86) 100%); }

/* ============================================================
   TIMELINE
   ============================================================ */
.top,.logo,.thorns,.info{ opacity:0; }
.proper-splash.play .top,.proper-splash.play .logo,.proper-splash.play .thorns{ opacity:1; }

.proper-splash.play .bg    { animation:glowUp 1.1s ease-out 1 both; }
.proper-splash.play .beams { animation:fadeIn 1.6s ease-out 1.9s both; }
.proper-splash.play .thorns{ animation:fadeIn 1s ease-out .5s both; }
.proper-splash.play .top   { animation:fadeIn .7s ease-out .7s both; }
.proper-splash.play .logo  { animation:fadeIn 1.3s ease-out .7s both; }
.proper-splash.play .logo-glow{ animation:logoGlow 1.7s ease-out .7s both; }
/* wires sway continuously (defined on their base rules) — no glitch */

@keyframes glowUp{ 0%{opacity:0; filter:brightness(.25)} 100%{opacity:1; filter:brightness(1)} }
@keyframes fadeIn{ 0%{opacity:0} 100%{opacity:1} }
/* logo just glows up (no glitch, no clip-path → glow is never trapped/cut) */
@keyframes logoGlow{
  0%{ filter:drop-shadow(0 0 0 transparent) brightness(.6) }
  55%{ filter:drop-shadow(0 0 30px var(--glow-a)) drop-shadow(0 0 70px var(--glow-b)) brightness(1.15) }
  100%{ filter:drop-shadow(0 0 20px var(--glow-a)) drop-shadow(0 0 54px var(--glow-b)) brightness(1) }
}

@media (prefers-reduced-motion:reduce){
  .top,.logo,.thorns,.wire,.info{ opacity:1 !important; animation:none !important; clip-path:none !important; }
  .bg,.dot,.citywash,.beams,.ov-grain,.ov-dust,.wire{ animation:none !important; }
}

/* PORTRAIT (mobile) */
@media (max-aspect-ratio:1/1){
  .proper-splash{
    --top-top:11%; --top-w:min(72%,420px);
    --logo-top:19%; --logo-w:min(88%,760px);
    --thorns-scale:1.45; --side-size:clamp(8px,2.4vw,12px); --midbar-w:78%;
    --wire-span:94%; --wire-top:44%;
    --info-bottom:max(40px, 7vh); --city-w:170%; --dot-w:62%; --dot-bottom:16%;
  }
  /* keep the black-bar group centered & fitting on narrow screens */
  .proper-splash{ --emblem-h:39px; }
  .proper-splash .midbar{ width:auto; max-width:96vw; justify-content:center; gap:min(4.5vw,18px); }
  .proper-splash .midbar .side{ letter-spacing:.05em; }
}