/* Intro loader: a tiny slot machine that paints before any JS module loads.
 * Uses the same tokens, echo type and jade→gold language as the rest of the site. */
.is-loading, .is-loading body { overflow: hidden; }

.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + var(--s-7)) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + var(--s-6));
  background:
    radial-gradient(60% 45% at 50% 42%, rgb(61 220 132 / 0.12), transparent 70%),
    radial-gradient(40% 30% at 50% 45%, rgb(242 193 78 / 0.06), transparent 70%),
    var(--ink);
  color: var(--text);
  clip-path: inset(0 0 0 0);
}
.loader::after { /* film grain */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.loader__center { display: grid; justify-items: center; gap: var(--s-6); }

/* Machine window */
.loader__machine {
  position: relative; padding: var(--s-3); border-radius: 22px;
  background: linear-gradient(180deg, #13211b, #0a120f);
  border: 1px solid #2b4035;
  box-shadow: var(--shadow-2), inset 0 0 0 5px #0a120f, inset 0 0 0 6px rgb(242 193 78 / 0.25);
  transition: box-shadow var(--t-slow);
}
.loader__bulbs { position: absolute; inset: -9px; pointer-events: none; }
.loader__bulbs i {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold); opacity: 0.25;
  animation: loader-bulb 0.5s steps(1) infinite;
}
.loader__bulbs i:nth-child(odd) { animation-delay: -0.25s; }
@keyframes loader-bulb { 50% { opacity: 1; } }

.loader__reels {
  --cell: clamp(64px, 16vw, 92px);
  position: relative; display: grid; grid-template-columns: repeat(3, var(--cell)); gap: 8px;
  padding: 8px; border-radius: 14px; background: #050706;
  box-shadow: inset 0 8px 20px rgb(0 0 0 / 0.8), inset 0 0 0 1px #1d2c25;
}
.loader__reel {
  position: relative; height: var(--cell); overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #0c1512, #16261f 50%, #0c1512);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.loader__strip { display: grid; animation: loader-spin 0.5s linear infinite; filter: blur(1.5px); }
.loader__reel:nth-child(2) .loader__strip { animation-duration: 0.42s; }
.loader__reel:nth-child(3) .loader__strip { animation-duration: 0.58s; }
.loader__strip span {
  height: var(--cell); display: grid; place-items: center;
  font-size: calc(var(--cell) * 0.46); line-height: 1; color: var(--jade);
}
.loader__strip span:nth-child(3n + 2) { color: var(--gold); }
@keyframes loader-spin { to { transform: translateY(-50%); } }
.loader__reel.is-stopped .loader__strip { animation: loader-land 620ms var(--ease-spring) forwards; filter: none; }
.loader__reel.is-stopped .loader__strip span:first-child { color: var(--gold); text-shadow: 0 0 22px var(--gold-glow); }
@keyframes loader-land { from { transform: translateY(-38%); } to { transform: translateY(0); } }

.loader__payline {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(242 193 78 / 0.7), transparent);
  opacity: 0.35; transition: opacity var(--t-med);
}
.loader.is-win .loader__payline { opacity: 1; animation: loader-payline 0.25s steps(1) 4; }
.loader.is-win .loader__machine { box-shadow: var(--shadow-2), inset 0 0 0 5px #0a120f, inset 0 0 0 6px var(--gold), 0 0 80px rgb(242 193 78 / 0.3); }
.loader.is-win .loader__bulbs i { animation: loader-bulb-win 0.2s steps(1) infinite; opacity: 1; }
@keyframes loader-payline { 50% { opacity: 0.2; } }
@keyframes loader-bulb-win { 50% { background: var(--jade); box-shadow: 0 0 10px var(--jade); } }

/* Echo name */
.loader__name {
  margin: 0; display: grid; justify-items: center;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(2rem, 1.2rem + 4vw, 4.4rem); line-height: 0.9;
}
.loader__name span + span { margin-top: -0.14em; background: linear-gradient(180deg, var(--muted), transparent 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loader__name span:nth-child(2) { opacity: 0.55; }
.loader__name span:nth-child(3) { opacity: 0.22; }
.loader__name span:first-child { animation: loader-breathe 2.4s var(--ease-in-out) infinite; }
@keyframes loader-breathe { 50% { text-shadow: 0 0 40px rgb(61 220 132 / 0.25); } }

/* Progress */
.loader__foot { display: grid; justify-items: center; gap: var(--s-3); width: min(420px, 100%); text-align: center; }
.loader__meter { width: 100%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.loader__meter span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--jade), var(--gold)); box-shadow: 0 0 12px var(--jade-glow);
}
.loader__status {
  display: flex; justify-content: space-between; width: 100%; margin: 0;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.loader__pct { color: var(--gold); font-variant-numeric: tabular-nums; }
.loader.is-win .loader__label { color: var(--gold); }
.loader__tip {
  margin: 0; min-height: 2.8em; max-width: 36ch; color: var(--faint); font-size: var(--step--1); line-height: 1.4;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.loader__tip.is-swapping { opacity: 0; transform: translateY(6px); }
.loader__tip b { color: var(--jade); font-weight: 600; }

/* Gate: once the reels land, the visitor enters (and that click unlocks audio) */
.loader__gate {
  display: grid; justify-items: center; gap: var(--s-2);
  max-height: 0; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-spring), max-height 420ms var(--ease-out), visibility 0s 420ms;
}
.loader.is-ready { cursor: pointer; }
.loader.is-ready .loader__gate { max-height: 160px; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.loader.is-ready .loader__meter { opacity: 0.35; transition: opacity var(--t-med); }
.loader__enter {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: 0 var(--s-6); border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1a1204; background: linear-gradient(180deg, #ffd978, var(--gold) 55%, #d9a430);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25) inset, 0 10px 30px rgb(0 0 0 / 0.45), 0 0 0 0 var(--gold-glow);
  animation: loader-call 1.6s var(--ease-in-out) infinite;
  transition: transform var(--t-fast) var(--ease-spring);
}
.loader__enter:hover { transform: translateY(-2px) scale(1.03); }
.loader__enter:active { transform: scale(0.97); }
.loader__enter:focus-visible { outline: 2px solid var(--jade); outline-offset: 4px; }
@keyframes loader-call {
  0% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25) inset, 0 10px 30px rgb(0 0 0 / 0.45), 0 0 0 0 var(--gold-glow); }
  70%, 100% { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25) inset, 0 10px 30px rgb(0 0 0 / 0.45), 0 0 0 16px rgb(242 193 78 / 0); }
}
/* Play triangle that nudges forward, like a "press start" prompt */
.loader__play {
  width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
  animation: loader-nudge 1.1s var(--ease-in-out) infinite;
}
@keyframes loader-nudge { 50% { transform: translateX(3px); } }
/* Arcade-style blinking hint once the gate is open */
.loader.is-ready .loader__tip {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  min-height: 0; max-width: none; white-space: nowrap; animation: loader-blink 1.1s steps(1) infinite;
}
@keyframes loader-blink { 50% { opacity: 0.25; } }
@media (max-width: 359px) { .loader.is-ready .loader__tip { white-space: normal; } }
.loader__mute {
  min-height: 40px; padding: 0 var(--s-3); border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
.loader__mute:hover, .loader__mute:focus-visible { color: var(--text); text-decoration-color: currentColor; }
.loader__mute:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 6px; }
.loader.is-ready .loader__label { color: var(--jade); }
.loader.is-leaving .loader__enter { animation: none; }

/* Exit: the screen shuts like a reel window into a gold line, revealing the site */
.loader.is-leaving { animation: loader-shut 760ms var(--ease-in-out) forwards; }
.loader.is-leaving::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 24px var(--gold);
}
@keyframes loader-shut {
  0% { clip-path: inset(0 0 0 0); }
  75% { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); opacity: 1; }
  100% { clip-path: inset(50% 0 50% 0); opacity: 0; }
}

/* Site entrance right after the loader */
.is-entering .hero__name .echo__line { animation: enter-rise 900ms var(--ease-out) both; }
.is-entering .hero__name .echo__line:nth-child(2) { animation-delay: 80ms; }
.is-entering .hero__name .echo__line:nth-child(3) { animation-delay: 160ms; }
.is-entering .hero__name .echo__line:nth-child(4) { animation-delay: 240ms; }
.is-entering .hero__hi, .is-entering .hud { animation: enter-fade 700ms var(--ease-out) both; }
.is-entering .sticker { animation: enter-pop 700ms var(--ease-spring) both; }
.is-entering .sticker:nth-of-type(2) { animation-delay: 120ms; }
.is-entering .sticker:nth-of-type(3) { animation-delay: 200ms; }
.is-entering .sticker:nth-of-type(4) { animation-delay: 280ms; }
.is-entering .sticker:nth-of-type(5) { animation-delay: 360ms; }
@keyframes enter-rise { from { transform: translateY(0.5em); opacity: 0; } }
@keyframes enter-fade { from { opacity: 0; } }
@keyframes enter-pop { from { scale: 0.4; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .loader__strip, .loader__bulbs i, .loader__name span:first-child, .loader__enter, .loader__play, .loader.is-ready .loader__tip { animation: none !important; filter: none; }
  .loader.is-leaving { animation: enter-fade 200ms reverse forwards; }
}