/* ============================================================
   EFFECTS — slate preloader, HUD viewfinder, film grain
   ============================================================ */

/* ---------- film grain over everything ---------- */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 95;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grain 0.9s steps(4) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 3%); }
  50%  { transform: translate(3%, -2%); }
  75%  { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* subtle vignette */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 94;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.42) 100%);
}

/* ---------- slate preloader ---------- */
.slate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #050506;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

.slate.is-done { opacity: 0; visibility: hidden; }

.slate-bar {
  position: absolute;
  left: 0; right: 0;
  height: 11vh;
  background: #000;
  border-block: 1px solid var(--line);
  transition: transform 0.8s var(--ease-snap) 0.15s;
}

.slate-bar--top { top: 0; transform-origin: top; }
.slate-bar--bottom { bottom: 0; transform-origin: bottom; }

.slate.is-done .slate-bar--top { transform: translateY(-101%); }
.slate.is-done .slate-bar--bottom { transform: translateY(101%); }

.slate-card {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.6rem 2rem 1.4rem;
  min-width: min(340px, 84vw);
  position: relative;
  background:
    linear-gradient(45deg, transparent 48%, var(--line) 48%, var(--line) 52%, transparent 52%) top / 100% 10px no-repeat,
    var(--bg0);
  transition: opacity 0.3s;
}

.slate.is-done .slate-card { opacity: 0; }

.slate-row {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  font-size: 0.72rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
}

.slate-row span { color: var(--ink3); }
.slate-row strong { color: var(--ink); font-weight: 500; }
.slate-take { color: var(--acc) !important; }

.slate-count {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 125, "wght" 900;
  font-weight: 900;
  font-size: clamp(6rem, 24vw, 13rem);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}

.slate-count.is-tick {
  animation: count-tick 0.34s var(--ease-out);
}

@keyframes count-tick {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
}

/* ---------- HUD viewfinder chrome ---------- */
.hud {
  position: fixed;
  inset: var(--hud-inset);
  z-index: 80;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ink3);
}

.hud-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--line-strong);
  border-style: solid;
  border-width: 0;
}

.hud-corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hud-corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hud-corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hud-corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hud-item { position: absolute; display: flex; align-items: center; gap: 0.6em; }

.hud-tc { top: 4px; right: 28px; }

.rec-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rec);
  animation: pulse 1.6s infinite;
}

.hud-scene { bottom: 4px; left: 28px; }

.hud-progress { bottom: 4px; right: 28px; gap: 0.9em; }

.hud-progress i {
  width: 64px;
  height: 2px;
  background: var(--line);
  position: relative;
  display: block;
}

.hud-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acc);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
}

@media (max-width: 720px) {
  .hud-tc { display: none; }
  .hud-scene { display: none; }
}