/* ============================================================
   Rune Tribe — text effects
   Grainy, icy-blue text cut from the same cloth as the cover:
   real noise inside the letters, tonal depth, glitch fringing.
   ============================================================ */

:root{
  /* Grayscale fractal-noise tile, contrast-compressed into a light
     band so it textures the letters as grain without muddying the
     color. Composited INTO the fill — real grain, not a blur. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.4'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.4'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Icy-cyan highlight → vivid cyan → deep ocean blue: the eye's range.
     Used on large text (title, confirm) where the tonal sweep reads. */
  --ice:linear-gradient(165deg,
        #d4f7ff 0%, #8fe6ff 20%, #46c6ff 44%,
        #1f9bf2 66%, #1f6fd8 84%, #1450aa 100%);
  /* Flatter, consistently-bright cyan for small text so thin strokes
     stay legible instead of fading into the gradient's dark end. */
  --ice-flat:linear-gradient(165deg,
        #c2f3ff 0%, #74dcff 45%, #3fbcff 100%);
}

/* Shared reveal: content rises into place as the eyes open */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(16px); }
  to{   opacity:1; transform:translateY(0); }
}

/* Film-grain crawl — jitters the noise tile so grain shimmers */
@keyframes grainCrawl{
  0%{   background-position:0 0,        0 0; }
  100%{ background-position:90px -60px, 0 0; }
}

/* Slow gradient drift — the icy sheen breathes across the letters */
@keyframes iceDrift{
  0%,100%{ background-position:0 0,   0% 0%; }
  50%{     background-position:45px -30px, 0% 100%; }
}

/* ------------------------------------------------------------
   Grain-text base: grayscale noise blended into the icy
   gradient, then clipped to the glyphs. Solid-cyan fallback
   first so unsupported browsers still get readable blue text.
   ------------------------------------------------------------ */
.title, #ask, .tracks li, #confirm p{ color:#74dcff; }

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .title, #ask, .tracks li, #confirm p{
    background-image:var(--grain), var(--ice);
    background-size:80px 80px, 200% 200%;
    background-repeat:repeat, no-repeat;
    background-blend-mode:soft-light;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* ------------------------------------------------------------
   Intro centerpiece — a slow breath so it reads as alive and
   tappable (held still once it detonates into the explosion).
   ------------------------------------------------------------ */
#introBox img:not(.boom){ animation:introBreath 4.5s ease-in-out infinite; }
@keyframes introBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }

/* ------------------------------------------------------------
   Intro question — sits over the live video, so it needs the
   strongest dark halo to stay legible, plus a restless grain.
   ------------------------------------------------------------ */
#ask{
  letter-spacing:.05em;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.95))
    drop-shadow(0 0 6px rgba(0,0,0,.85))
    drop-shadow(0 0 16px rgba(0,0,0,.7))
    drop-shadow(0 0 20px rgba(0,170,255,.35));
  animation:grainCrawl 1.1s steps(5) infinite, askFlicker 5s linear infinite;
}
@keyframes askFlicker{
  0%,100%{ opacity:.9; }
  3%{ opacity:.45; }  5%{ opacity:.9; }
  37%{ opacity:.3; }  39%{ opacity:.9; }
  68%{ opacity:.55; } 70%{ opacity:.9; } 73%{ opacity:.72; } 75%{ opacity:.9; }
}

/* ------------------------------------------------------------
   Release title — the focal point. Bigger grain drift, icy
   sheen, layered glow + a faint red/cyan glitch fringe that
   echoes the RGB-split runes around the cover.
   ------------------------------------------------------------ */
.title{
  letter-spacing:.07em;
  filter:
    drop-shadow(1px 0 0 rgba(255,42,82,.28))
    drop-shadow(-1px 0 0 rgba(0,247,255,.26))
    drop-shadow(0 2px 3px rgba(0,0,0,.7))
    drop-shadow(0 0 18px rgba(0,170,255,.4))
    drop-shadow(0 0 38px rgba(0,120,220,.25));
  animation:
    riseIn .8s ease-out backwards,
    iceDrift 9s ease-in-out infinite,
    grainCrawl 1.3s steps(6) infinite,
    titleBreath 4.2s ease-in-out infinite;
}
@keyframes titleBreath{
  0%,100%{ filter:
    drop-shadow(1px 0 0 rgba(255,42,82,.28))
    drop-shadow(-1px 0 0 rgba(0,247,255,.26))
    drop-shadow(0 2px 3px rgba(0,0,0,.7))
    drop-shadow(0 0 18px rgba(0,170,255,.4))
    drop-shadow(0 0 38px rgba(0,120,220,.25)); }
  50%{ filter:
    drop-shadow(1.5px 0 0 rgba(255,42,82,.34))
    drop-shadow(-1.5px 0 0 rgba(0,247,255,.32))
    drop-shadow(0 2px 3px rgba(0,0,0,.7))
    drop-shadow(0 0 26px rgba(0,190,255,.55))
    drop-shadow(0 0 54px rgba(0,140,240,.35)); }
}

/* ------------------------------------------------------------
   Tracklist — same icy grain, calmer. Staggered reveal,
   grain shimmer, and a brighter glitch-pop on hover.
   ------------------------------------------------------------ */
.tracks li{
  transition:transform .25s ease, filter .25s ease;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.85))
    drop-shadow(0 0 10px rgba(40,180,255,.45))
    drop-shadow(0 0 22px rgba(0,140,235,.25));
  animation:riseIn .6s ease-out backwards, grainCrawl 1.5s steps(5) infinite;
}
/* small text → flat bright cyan fill so thin strokes stay readable */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #ask, .tracks li{ background-image:var(--grain), var(--ice-flat); }
}
.tracks li:nth-child(1){ animation-delay:.18s, .0s; }
.tracks li:nth-child(2){ animation-delay:.26s, .12s; }
.tracks li:nth-child(3){ animation-delay:.34s, .24s; }
.tracks li:nth-child(4){ animation-delay:.42s, .36s; }
.tracks li:nth-child(5){ animation-delay:.50s, .48s; }
.tracks li:nth-child(6){ animation-delay:.58s, .60s; }
.tracks span{ -webkit-text-fill-color:#9fefff; }   /* track numbers stay crisp */
.tracks li:hover{
  transform:translateX(7px);
  filter:
    drop-shadow(1px 0 0 rgba(255,42,82,.35))
    drop-shadow(-1px 0 0 rgba(0,247,255,.3))
    drop-shadow(0 0 12px rgba(0,200,255,.5))
    drop-shadow(0 0 26px rgba(0,150,255,.35));
}

/* ------------------------------------------------------------
   Eyebrow ("Coming Soon") — the release tease. Soft cyan with a
   slow anticipatory pulse and a hairline glow.
   ------------------------------------------------------------ */
.eyebrow{
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 14px rgba(0,190,255,.35);
  animation:riseIn .7s ease-out backwards, eyebrowPulse 3.4s ease-in-out infinite;
}
@keyframes eyebrowPulse{
  0%,100%{ opacity:.72; text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 10px rgba(0,190,255,.22); }
  50%{     opacity:1;   text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 20px rgba(0,210,255,.55); }
}

/* Subtitle ("Rune Tribe") — quiet wordmark under the title */
.subtitle{
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(0,170,235,.28);
  animation:riseIn .8s ease-out .08s backwards;
}

/* "Click me" hint above the cover — small, inviting, with soft glow */
.click-me{
  margin:0 0 clamp(14px,2.8vh,24px);
  font-family:var(--display); font-weight:400;
  font-size:clamp(.88rem,2.3vw,1.08rem); letter-spacing:.12em;
  color:#74dcff;
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 10px rgba(0,190,255,.32);
  animation:riseIn .6s ease-out .24s backwards;
  user-select:none;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .click-me{
    background-image:var(--grain), var(--ice-flat);
    background-size:80px 80px, 200% 200%;
    background-repeat:repeat, no-repeat;
    background-blend-mode:soft-light;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}

/* ------------------------------------------------------------
   Credits — refined release sheet: role labels + names, gently
   lit so the block reads as polished, not faint.
   ------------------------------------------------------------ */
.credits{
  color:#a9def4;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,160,235,.18);
  animation:riseIn .6s ease-out .62s backwards, creditsBreath 6s ease-in-out infinite;
}
@keyframes creditsBreath{
  0%,100%{ opacity:.86; }
  50%{     opacity:1; }
}
/* the names pick up a soft glow; the role labels stay calm */
.credit-row dt{ text-shadow:0 1px 1px rgba(0,0,0,.85); }
/* dd is a flex track so multi-person credits split into separate
   chips that centre and wrap cleanly instead of one run-on link */
.credit-row dd{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4em .9em; margin:.32em 0 0;
}
/* credit chip — SoundCloud icon + name, clickable per person */
.credit-name{
  display:inline-flex; align-items:center; gap:.4em;
  color:#a9def4; text-decoration:none; cursor:pointer;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 12px rgba(0,180,255,.28);
  transition:color .25s ease, text-shadow .25s ease, transform .2s ease;
}
.credit-name .sc-icon{
  width:1.45em; height:auto; flex:0 0 auto; display:block;
  opacity:.82;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
  transition:opacity .25s ease, filter .25s ease, transform .2s ease;
}
a.credit-name:hover{
  color:#d4f7ff; transform:translateY(-1px);
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 20px rgba(0,210,255,.6);
}
a.credit-name:hover .sc-icon{
  opacity:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 7px rgba(120,220,255,.7));
  transform:scale(1.08);
}
a.credit-name:focus-visible{
  outline:1px solid rgba(96,215,255,.7); outline-offset:4px; border-radius:3px;
}
/* unknown / to-be-announced credit — muted, no link affordance */
.credit-name--tba{ color:#6f8ea0; cursor:default; letter-spacing:.18em; }
.credits-rule{ animation:ruleGlow 6s ease-in-out infinite; }
@keyframes ruleGlow{
  0%,100%{ opacity:.5; } 50%{ opacity:1; }
}

/* ------------------------------------------------------------
   Confirm message — icy grain with a pulsing ritual glow.
   ------------------------------------------------------------ */
#confirm p{
  letter-spacing:.03em;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.85))
    drop-shadow(0 0 14px rgba(0,170,255,.3));
  animation:grainCrawl 1.4s steps(5) infinite, confirmGlow 2.8s ease-in-out infinite;
}
@keyframes confirmGlow{
  0%,100%{ filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.85))
    drop-shadow(0 0 14px rgba(0,170,255,.3)); }
  50%{ filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.85))
    drop-shadow(0 0 24px rgba(0,200,255,.5))
    drop-shadow(0 0 44px rgba(0,150,255,.3)); }
}

/* ------------------------------------------------------------
   Hand cursor — pointer marker (media/pointer.png) that marks HBD,
   then slides to whichever track is hovered (desktop) / tapped
   (mobile). A soft dark halo + blue glow keep it legible over the
   busy backdrop; the glow breathes gently while it waits.
   ------------------------------------------------------------ */
#handCursor{
  position:absolute; left:0; top:0; z-index:5;
  width:clamp(30px,7.5vw,44px); height:auto;
  pointer-events:none;
  /* start off-screen; JS sets the real position once release shows */
  transform:translate(-200px,-200px);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.7))
    drop-shadow(0 0 16px rgba(0,180,255,.5));
  animation:handBob 3.4s ease-in-out infinite;
}
#handCursor img{ display:block; width:100%; height:auto; }
/* gentle glow breathing so the marker feels alive while it waits */
@keyframes handBob{
  0%,100%{ filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.7))
    drop-shadow(0 0 16px rgba(0,180,255,.5)); }
  50%{ filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.7))
    drop-shadow(0 0 26px rgba(0,210,255,.7)); }
}

@media (prefers-reduced-motion: reduce){
  #handCursor{ transition:none; animation:none; }
}

/* ------------------------------------------------------------
   Cover art — assembles in with the type, and lights up with a
   cyan halo on hover so it reads as part of the blue world.
   ------------------------------------------------------------ */
.cover{
  transition:transform .25s ease, box-shadow .3s ease;
  animation:riseIn .85s ease-out backwards;
}
.cover:hover{
  box-shadow:0 14px 60px rgba(0,0,0,.7),
             0 0 30px rgba(0,180,255,.4),
             0 0 64px rgba(0,120,220,.22);
}

/* ------------------------------------------------------------
   Confirm dialog — soft entrance instead of a hard pop-in, and
   each choice glows on hover (cyan for yes, ember-red for no).
   ------------------------------------------------------------ */
#confirm{ animation:confirmIn .3s ease-out; }
@keyframes confirmIn{
  from{ opacity:0; transform:scale(.97); }
  to{   opacity:1; transform:scale(1); }
}
.yes img, .no img{ transition:filter .25s ease, transform .2s ease; }
.yes:hover img{ filter:drop-shadow(0 0 16px rgba(0,200,255,.55)); }
.no:hover img{  filter:drop-shadow(0 0 16px rgba(255,70,95,.5)); }
/* labels: cyan affirmation, ember refusal */
.choice-label{ text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(0,190,255,.35); transition:text-shadow .25s ease, color .25s ease; }
.no .choice-label{ color:#f0a3aa; text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(255,80,100,.3); }
.yes:hover .choice-label{ text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 18px rgba(0,210,255,.6); }
.no:hover .choice-label{  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 18px rgba(255,90,110,.55); }

/* Keyboard focus — a cyan ring that matches the palette */
.cover:focus-visible, .yes:focus-visible, .no:focus-visible{
  outline:2px solid rgba(96,215,255,.8); outline-offset:6px; border-radius:4px;
}

/* ------------------------------------------------------------
   Respect reduced-motion — hold the grain still, drop the rest.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .title, #ask, .tracks li, .credits, #confirm p,
  .cover, #confirm, .eyebrow, .subtitle, .credits-rule, .credit-row dd,
  .click-me, #introBox img{ animation:none !important; }
  .tracks li, .cover, .credit-name, .credit-name .sc-icon{ transition:none; }
}