/* ============================================================
   ANIMATIONS, boot sequence, reveals, glitch, motion prefs
   ============================================================ */

/* ---------- Boot / preloader ---------- */
.boot {
  position: fixed; inset: 0; z-index: 9990;
  background: var(--ink-900);
  display: grid; place-items: center;
  padding: var(--gutter);
  transition: opacity .7s var(--e-soft), visibility .7s;
}
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__inner { width: min(560px, 100%); font-family: var(--f-mono); font-size: var(--t-sm); }
.boot__logo {
  font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600;
  letter-spacing: -.03em; margin-bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
}
.boot__logo i {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--acc-dim); border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: 12px; color: var(--acc); font-style: normal;
}
.boot__log { min-height: 168px; margin-bottom: var(--s-5); }
.boot__log div { color: var(--txt-3); line-height: 1.85; opacity: 0; animation: bootLine .3s var(--e-out) forwards; }
.boot__log div b { color: var(--acc); font-weight: 400; }
.boot__log div .ok { color: var(--acc); float: right; }
@keyframes bootLine { to { opacity: 1; } }
.boot__track { height: 2px; background: var(--ink-600); border-radius: 99px; overflow: hidden; }
.boot__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acc), var(--azure));
  box-shadow: 0 0 12px var(--acc-glow);
  transition: width .3s var(--e-soft);
}
.boot__pct {
  display: flex; justify-content: space-between;
  margin-top: var(--s-3); color: var(--txt-4); font-size: var(--t-xs);
  letter-spacing: .12em;
}
.boot__skip {
  position: absolute; right: var(--gutter); bottom: var(--gutter);
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--txt-4);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 14px;
  transition: all var(--d-fast);
}
.boot__skip:hover { color: var(--acc); border-color: var(--acc-dim); }

/* ---------- Reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal="clip"]  { opacity: 1; clip-path: inset(0 0 100% 0); transform: none; transition: clip-path 1s var(--e-out); }
[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* Staggered line mask (hero name) */
.mask-line { display: block; overflow: hidden; }
.mask-line > * {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--e-out);
  transition-delay: var(--rd, 0ms);
}
.is-booted .mask-line > * { transform: none; }

/* ---------- Glitch ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-txt);
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}
.glitch::before { color: var(--azure); }
.glitch::after  { color: var(--danger); }
.glitch:hover::before { opacity: .8; animation: gl1 .5s steps(3) 2; }
.glitch:hover::after  { opacity: .8; animation: gl2 .5s steps(3) 2; }
@keyframes gl1 {
  0%   { transform: translate(-2px, 1px);  clip-path: inset(10% 0 62% 0); }
  33%  { transform: translate(3px, -2px);  clip-path: inset(52% 0 22% 0); }
  66%  { transform: translate(-3px, 0);    clip-path: inset(28% 0 48% 0); }
  100% { transform: none; clip-path: inset(0 0 100% 0); }
}
@keyframes gl2 {
  0%   { transform: translate(2px, -1px);  clip-path: inset(70% 0 8% 0); }
  33%  { transform: translate(-3px, 2px);  clip-path: inset(18% 0 66% 0); }
  66%  { transform: translate(2px, 0);     clip-path: inset(44% 0 34% 0); }
  100% { transform: none; clip-path: inset(0 0 100% 0); }
}

/* ---------- Magnetic / tilt helpers ---------- */
.magnetic { transition: transform .3s var(--e-out); will-change: transform; }
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform .25s var(--e-out); }

/* ---------- Shimmer skeleton ---------- */
.shimmer {
  background: linear-gradient(90deg, var(--ink-700) 25%, var(--ink-600) 50%, var(--ink-700) 75%);
  background-size: 200% 100%;
  animation: shim 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shim { to { background-position: -200% 0; } }

/* ---------- Counter ---------- */
.counting { font-variant-numeric: tabular-nums; }

/* ---------- Section number watermark ---------- */
.watermark {
  position: absolute; right: var(--gutter); top: var(--s-8);
  font-family: var(--f-display); font-size: clamp(6rem, 16vw, 15rem);
  font-weight: 700; letter-spacing: -.06em; line-height: 1;
  color: var(--txt-1); opacity: .022; pointer-events: none; user-select: none;
  z-index: -1;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .mask-line > * { transform: none !important; }
  .noise, .portrait__scan, .scanlines { display: none; }
  .marquee__track { animation: none; }
}