/* ============================================================
   TEMPER FESTIVAL — SPLASH  (v9 · baked graphics + controls)
   ============================================================ */

/* ┌──────────────────────────────────────────────────────────┐
   │  ADJUSTABLE CONTROLS — tweak everything here.              │
   │  • Element SCALE ...... --*-scale        (1 = 100%)        │
   │  • Element WIDTH ...... --*-w                              │
   │  • Element NUDGE ...... --*-x / --*-y     (px or %, ± ok)  │
   │  • Section SPACING .... --edge-x / --edge-top / --edge-bot │
   │  • Glitch AMOUNT ...... --glitch-slip, --glitch-streak,    │
   │                         --dirt                             │
   │  • Glitch FREQUENCY ... data-attrs on <div class="temper-  │
   │                         splash"> below (ms): data-min /    │
   │                         data-max / data-dur                │
   └──────────────────────────────────────────────────────────┘ */
.temper-splash{
  /* section spacing (safe edges) */
  --edge-x:5%;  --edge-top:6.5%;  --edge-bot:6.5%;

  /* LED (top center) */
  --led-scale:1;  --led-w:clamp(96px,10vw,150px);  --led-top:var(--edge-top);  --led-x:0px; --led-y:0px;

  /* TEMPER logo (center) */
  --logo-scale:1; --logo-w:min(60vw,820px);        --logo-x:0px; --logo-y:0px;

  /* DATE block (bottom-left) */
  --date-scale:1; --date-w:clamp(190px,25vw,360px); --date-left:var(--edge-x); --date-bot:var(--edge-bot);

  /* LOCATION block (bottom-right) */
  --loc-scale:1;  --loc-w:clamp(190px,25vw,360px);  --loc-right:var(--edge-x); --loc-bot:var(--edge-bot);

  /* glitch amount */
  --glitch-slip:3px;     /* whole-scene vertical shift during a burst (keep subtle) */
  --glitch-jit:1;        /* per-element jump amount (mostly vertical, some horizontal) */
  --glitch-streak:.3;    /* peak opacity of the streak flash      */
  --dirt:.5;             /* multiply grit opacity (resting grime)  */

  /* intro — delay before each element glitches in (sequential order) */
  --in-led:.15s;  --in-logo:.45s;  --in-date:1.05s;  --in-loc:1.3s;   /* date/loc come in later */
}
/* ── end controls ── (frequency lives on the data- attributes in the HTML) */

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; background:#03050a; }

.temper-splash{
  position:relative; width:100%; height:100svh; min-height:100%;
  overflow:hidden; background:#03050a; cursor:default;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.temper-splash[data-click="on"]{ cursor:pointer; }   /* click-to-replay enabled */

/* ---------- SCENE (bg + graphics slip together on a glitch) ---------- */
.scene{ position:absolute; inset:0; filter:contrast(1.06) saturate(1.04); }
.bg{
  position:absolute; inset:0;
  background:#05070d url("https://temperfest.netlify.app/assets/gfx/bg.jpg") center/cover no-repeat;
  transform:scale(1.06);
}
/* black cover that glitch-clears on load so the bg "scans in" first */
.bg-reveal{ position:absolute; inset:0; background:#03050a; opacity:0; pointer-events:none; }

/* subtle constant BACKGROUND glitch — 4 stepped positions, no tween (toggle: data-bg-glitch) */
.temper-splash[data-bg-glitch="on"] .bg{ animation:bgGlitch 1.6s step-end infinite; }
@keyframes bgGlitch{
  0%{transform:scale(1.06) translate(0,0)}
  25%{transform:scale(1.06) translate(0,-.9%)}
  50%{transform:scale(1.06) translate(.5%,.5%)}
  75%{transform:scale(1.06) translate(-.4%,1%)}
  100%{transform:scale(1.06) translate(0,0)}
}
.content{ position:absolute; inset:0; }

/* each element = stack of frames: rest (in-flow) + glitch frames over it */
.gfx{ position:absolute; }
.gfx .jit{ position:relative; width:100%; }   /* carries the per-element jump */
.gfx img{ display:block; width:100%; height:auto; }
.gfx .rest{ position:relative; opacity:1; }
.gfx .fr{ position:absolute; inset:0; opacity:0; }

.led {
  top:var(--led-top); left:50%; width:var(--led-w);
  transform:translate(calc(-50% + var(--led-x)), var(--led-y)) scale(var(--led-scale));
  transform-origin:top center;
}
.logo{
  top:50%; left:50%; width:var(--logo-w);
  transform:translate(calc(-50% + var(--logo-x)), calc(-50% + var(--logo-y))) scale(var(--logo-scale));
}
.date{
  bottom:var(--date-bot); left:var(--date-left); width:var(--date-w);
  transform:scale(var(--date-scale)); transform-origin:left bottom;
}
.loc{
  bottom:var(--loc-bot); right:var(--loc-right); width:var(--loc-w);
  transform:scale(var(--loc-scale)); transform-origin:right bottom;
}

/* ---------- OVERLAYS (dark grit + edge; nothing additive at rest) ---------- */
.ov{ position:absolute; inset:0; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:cover; }
.ov-dirt{ background-image:url("https://temperfest.netlify.app/assets/tex/dirt.jpg"); mix-blend-mode:multiply; opacity:var(--dirt); transform:scale(1.12); }
/* SCRATCH texture shifting — 4 stepped positions, no tween (toggle: data-scratch) */
.temper-splash[data-scratch="on"] .ov-dirt{ animation:scratchShift 1.6s step-end -.4s infinite; }
@keyframes scratchShift{
  0%{transform:scale(1.12) translate(0,0)}
  25%{transform:scale(1.12) translate(-3%,2%)}
  50%{transform:scale(1.12) translate(2%,-2.5%)}
  75%{transform:scale(1.12) translate(-1.5%,-1%)}
  100%{transform:scale(1.12) translate(0,0)}
}
.ov-vignette{ background:radial-gradient(120% 120% at 50% 50%, transparent 50%, rgba(0,0,0,.5) 85%, rgba(0,0,0,.85) 100%); }
.ov-streak{ background-image:url("https://temperfest.netlify.app/assets/tex/streak-a.jpg"); mix-blend-mode:screen; opacity:0; }
.scanner{
  position:absolute; left:0; right:0; top:-34%; height:34%;
  background:linear-gradient(180deg, transparent, rgba(150,195,255,.08) 46%, rgba(200,225,255,.22) 50%, rgba(150,195,255,.08) 54%, transparent);
  mix-blend-mode:screen; filter:blur(2px); opacity:0; pointer-events:none;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.led,.logo,.date,.loc{ opacity:0; }
.temper-splash.play .led,.temper-splash.play .logo,.temper-splash.play .date,.temper-splash.play .loc{ opacity:1; }  /* resting state after intro */
.temper-splash.play .scanner{ animation:sweep 1.7s ease-in .1s 1 both; }

/* INTRO — the WHOLE PAGE runs the glitch (bg + graphics together); each
   element snaps in sequentially *through* the glitch (no fade/flash).
   Sequence timing = the delays below. Set them all equal for simultaneous.
   Intro length is ~1.9s and is matched by the JS timer. */
.temper-splash.intro .bg-reveal{ animation:bgReveal .4s step-end 1 both; }
.temper-splash.intro .scene    { animation:sceneBurst 2.0s step-end 1 both; }
.temper-splash.intro .g01      { animation:fr01 2.0s step-end 1 both; }
.temper-splash.intro .g02      { animation:fr02 2.0s step-end 1 both; }
.temper-splash.intro .ov-streak{ animation:streakBurst 2.0s step-end 1 both; }
.temper-splash.intro .led { animation:glitchOn .6s step-end var(--in-led)  both; }
.temper-splash.intro .logo{ animation:glitchOn .6s step-end var(--in-logo) both; }
.temper-splash.intro .date{ animation:glitchOn .6s step-end var(--in-date) both; }
.temper-splash.intro .loc { animation:glitchOn .6s step-end var(--in-loc)  both; }

/* OUTRO — reverse glitch-out (click-to-replay, and before navigating away) */
.temper-splash.outro .scene   { animation:sceneBurst .9s step-end 1 both; }
.temper-splash.outro .g01     { animation:fr01 .9s step-end 1 both; }
.temper-splash.outro .g02     { animation:fr02 .9s step-end 1 both; }
.temper-splash.outro .ov-streak{ animation:streakBurst .9s step-end 1 both; }
.temper-splash.outro .led  .jit{ animation:jitter .9s step-end .06s 1 both; }
.temper-splash.outro .logo .jit{ animation:jitter .9s step-end .02s 1 both; }
.temper-splash.outro .date .jit{ animation:jitter .9s step-end .08s 1 both; }
.temper-splash.outro .loc  .jit{ animation:jitter .9s step-end 0s   1 both; }
/* elements snap OUT in reverse order (loc → date → logo → led) */
.temper-splash.outro .loc { animation:glitchOff .5s step-end 0s   both; }
.temper-splash.outro .date{ animation:glitchOff .5s step-end .12s both; }
.temper-splash.outro .logo{ animation:glitchOff .5s step-end .28s both; }
.temper-splash.outro .led { animation:glitchOff .5s step-end .40s both; }

/* REPEATING burst (random, every 5–8s) */
.temper-splash.glitching .scene   { animation:sceneBurst .8s step-end 1 both; }
.temper-splash.glitching .g01     { animation:fr01 .8s step-end 1 both; }
.temper-splash.glitching .g02     { animation:fr02 .8s step-end 1 both; }
.temper-splash.glitching .ov-streak{ animation:streakBurst .8s step-end 1 both; }

/* per-element jumps — mostly vertical, a little horizontal; desynced so they
   jump independently. Runs during both the intro and the repeating bursts. */
.temper-splash.glitching .led  .jit{ animation:jitter .82s step-end 0s   1 both; }
.temper-splash.glitching .logo .jit{ animation:jitter .80s step-end .04s 1 both; }
.temper-splash.glitching .date .jit{ animation:jitter .78s step-end .08s 1 both; }
.temper-splash.glitching .loc  .jit{ animation:jitter .84s step-end .02s 1 both; }
.temper-splash.intro .led  .jit{ animation:jitter 2.0s step-end 0s   1 both; }
.temper-splash.intro .logo .jit{ animation:jitter 2.0s step-end .05s 1 both; }
.temper-splash.intro .date .jit{ animation:jitter 2.0s step-end .10s 1 both; }
.temper-splash.intro .loc  .jit{ animation:jitter 2.0s step-end .15s 1 both; }

@keyframes sweep{ 0%{top:-34%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:104%;opacity:0} }
/* entrance: hidden, then snaps on mid-glitch and stays (no fade in/out) */
@keyframes glitchOn{ 0%{opacity:0} 30%{opacity:0} 31%{opacity:1} 100%{opacity:1} }
/* exit: visible, then snaps off mid-glitch (no fade) */
@keyframes glitchOff{ 0%{opacity:1} 55%{opacity:1} 56%{opacity:0} 100%{opacity:0} }
/* bg scan-in: black cover flickers off first, revealing the background */
@keyframes bgReveal{ 0%{opacity:1} 20%{opacity:.35} 32%{opacity:1} 48%{opacity:.15} 62%{opacity:.6} 75%{opacity:0} 100%{opacity:0} }

/* whole-scene vertical ink-pull slips — hard jumps, scaled by --glitch-slip */
@keyframes sceneBurst{
  0%{transform:translateY(0)}
  7%{transform:translateY(calc(var(--glitch-slip) * -1))}
  11%{transform:translateY(calc(var(--glitch-slip) * .5))}
  15%{transform:translateY(0)}
  46%{transform:translateY(0)}
  49%{transform:translateY(calc(var(--glitch-slip) * .83))}
  53%{transform:translateY(calc(var(--glitch-slip) * -.33))}
  57%{transform:translateY(0)}
  82%{transform:translateY(0)}
  84%{transform:translateY(calc(var(--glitch-slip) * -.5))}
  87%{transform:translateY(calc(var(--glitch-slip) * .17))}
  90%{transform:translateY(0)} 100%{transform:translateY(0)}
}
@keyframes fr01{ 0%,100%{opacity:0} 8%{opacity:1} 20%{opacity:0} 40%{opacity:1} 54%{opacity:0} }
@keyframes fr02{ 0%,100%{opacity:0} 14%{opacity:1} 27%{opacity:0} 48%{opacity:1} 62%{opacity:0} }

/* per-element jump: mostly vertical (±~5px), a little horizontal (±~2px), hard steps */
@keyframes jitter{
  0%{transform:translate(0,0)}
  9%{transform:translate(calc(var(--glitch-jit)*1px),  calc(var(--glitch-jit)*-5px))}
  18%{transform:translate(calc(var(--glitch-jit)*-2px), calc(var(--glitch-jit)*3px))}
  27%{transform:translate(0,                            calc(var(--glitch-jit)*-4px))}
  38%{transform:translate(calc(var(--glitch-jit)*2px),  calc(var(--glitch-jit)*2px))}
  50%{transform:translate(0,0)}
  61%{transform:translate(calc(var(--glitch-jit)*-1px), calc(var(--glitch-jit)*4px))}
  72%{transform:translate(calc(var(--glitch-jit)*1px),  calc(var(--glitch-jit)*-3px))}
  84%{transform:translate(calc(var(--glitch-jit)*-1px), calc(var(--glitch-jit)*2px))}
  100%{transform:translate(0,0)}
}
@keyframes streakBurst{
  0%,100%{opacity:0; background-image:url("https://temperfest.netlify.app/assets/tex/streak-a.jpg")}
  12%{opacity:var(--glitch-streak); background-image:url("https://temperfest.netlify.app/assets/tex/streak-b.jpg")}
  34%{opacity:calc(var(--glitch-streak) * .5); background-image:url("https://temperfest.netlify.app/assets/tex/streak-c.jpg")}
  52%{opacity:var(--glitch-streak); background-image:url("https://temperfest.netlify.app/assets/tex/streak-a.jpg")}
  68%{opacity:calc(var(--glitch-streak) * .45)}
}

@media (prefers-reduced-motion:reduce){
  .led,.logo,.date,.loc{ opacity:1 !important; animation:none !important; }
  .scene,.bg,.bg-reveal,.ov-dirt,.g01,.g02,.ov-streak,.jit{ animation:none !important; }
  .fr{ opacity:0 !important; }
  .scanner{ display:none; }
}

/* ===== RESPONSIVE BREAKPOINTS =====
   The control block at the very top = 1120px AND UP (the base).
   Each block below overrides those same --vars at that width. Adjust any
   --var per breakpoint (scale, width, position, spacing, glitch, intro delays). */

@media (max-width:1119.98px){   /* less than 1120 */
  .temper-splash{
    --logo-w:64vw; --led-w:clamp(100px,10vw,140px);
    --date-w:24vw; --loc-w:24vw;
  }
}
@media (max-width:991.98px){    /* less than 992 */
  .temper-splash{
    --logo-w:70vw; --led-w:12vw;
    --date-w:27vw; --loc-w:27vw; --edge-x:4.5%;
  }
}
@media (max-width:767.98px){    /* less than 768 */
  .temper-splash{
    --logo-w:82vw; --led-top:9%; --led-w:22vw;
    --date-w:40vw; --loc-w:40vw; --edge-x:6%; --edge-bot:7%;
  }
}
@media (max-width:479.98px){    /* less than 480 */
  .temper-splash{
    --logo-w:88vw; --led-top:10%; --led-w:30vw;
    --date-w:44vw; --loc-w:44vw; --edge-x:6%; --edge-bot:6%;
  }
}