/* ============================================================
   INTRO LOADER — 33-image roll → ink-bleed wipe → 3D name reveal
   Plays once per browser session (see js/loader.js). Pure CSS
   timing (animation-delay) so it never depends on a JS render
   loop — only the per-image delays are computed once at build
   time (see js/loader.js) and written as inline style attributes.
   ============================================================ */

#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper, #1a1715);
  overflow: hidden;
}
#loader[hidden] { display: none; }
#loader.is-leaving {
  animation: loaderOut .6s ease forwards;
  pointer-events: none;
}
@keyframes loaderOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#loader .cuts { position: absolute; inset: 0; }
#loader .cuts img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  filter: grayscale(.35) contrast(1.2) brightness(.7);
  animation-name: loaderHardcut;
  animation-timing-function: steps(1, end);
  animation-fill-mode: forwards;
}
@keyframes loaderHardcut {
  0%   { opacity: 1; transform: scale(1.09); }
  35%  { opacity: 1; transform: scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

#loader .ink {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #2a221d 0%, #1a1715 55%, #100d0b 100%);
  filter: url(#loaderInkWobble);
  opacity: 0;
  animation-name: loaderInkGrow, loaderInkFadeOut;
  animation-timing-function: cubic-bezier(.2,.8,.15,1), ease;
  animation-fill-mode: forwards, forwards;
  animation-duration: .9s, .7s;
}
@keyframes loaderInkGrow {
  0%   { width: 20px; height: 20px; margin: -10px 0 0 -10px; opacity: 1; box-shadow: 0 0 40px 10px rgba(232,90,42,.5); }
  55%  { width: 2200px; height: 2200px; margin: -1100px 0 0 -1100px; opacity: 1; box-shadow: 0 0 0 0 rgba(232,90,42,0); }
  100% { width: 2600px; height: 2600px; margin: -1300px 0 0 -1300px; opacity: 1; }
}
@keyframes loaderInkFadeOut { from { opacity: 1; } to { opacity: 0; } }

#loader .titlewrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; opacity: 0;
  animation: loaderTitleIn 1.1s cubic-bezier(.16,.9,.2,1) forwards;
}
@keyframes loaderTitleIn {
  0%   { opacity: 0; transform: scale(1.4); filter: blur(6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
#loader .title3d {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(56px, 15vw, 210px); letter-spacing: .01em; line-height: .86;
  color: #f4a261; text-align: center; text-transform: uppercase;
  text-shadow:
    1px 1px 0 #c2491e, 2px 2px 0 #b5431b, 3px 3px 0 #a83d18, 4px 4px 0 #9b3715,
    5px 5px 0 #8e3113, 6px 6px 0 #812b10, 7px 7px 0 #74260e, 8px 8px 0 #67200b,
    9px 9px 0 #5a1a09, 10px 10px 0 #4d1407, 11px 11px 22px rgba(0,0,0,.65);
}
#loader .subtitle2 {
  font-family: 'Instrument Sans', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .35em;
  color: #e3d6c2; margin-top: 18px; opacity: 0;
  animation: loaderFadeUp .6s ease forwards;
}
@keyframes loaderFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#loader .skip {
  position: absolute; right: 20px; bottom: 20px;
  font: 700 11px 'Instrument Sans', sans-serif; letter-spacing: .2em;
  color: #e3d6c2; opacity: .55; background: none; border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px; padding: 8px 16px; cursor: pointer;
}
#loader .skip:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #loader { display: none; }
}