/* =========================================================
   Intro / loading curtain — runs once on first paint.
   Pure CSS + tiny inline JS to remove on load.
   ========================================================= */

.vtt-curtain {
  position: fixed; inset: 0; z-index: 100000;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", -apple-system, sans-serif;
  pointer-events: auto;
  overflow: hidden;
}
.vtt-curtain .panel {
  position: absolute; inset: 0;
  background: #0a0a0a;
  transform: translateY(0);
  transition: transform 700ms cubic-bezier(.7,.0,.2,1);
  will-change: transform;
}
.vtt-curtain.lift .panel { transform: translateY(-100%); }

.vtt-curtain .stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  color: #fff;
  mix-blend-mode: difference;
}

.vtt-curtain .mark {
  display: flex; align-items: baseline; gap: 12px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  opacity: 0;
  animation: vtt-fade-up 700ms cubic-bezier(.2,.7,.2,1) 80ms forwards;
}
.vtt-curtain .mark .sq {
  width: 14px; height: 14px;
  background: #00805c;
  display: inline-block;
  transform: scale(0);
  animation: vtt-pop 600ms cubic-bezier(.2,.7,.2,1) 200ms forwards;
}
.vtt-curtain .mark b { font-weight: 500; }
.vtt-curtain .mark em { font-style: normal; opacity: 0.55; font-weight: 400; }

.vtt-curtain .meter {
  position: relative;
  width: clamp(200px, 28vw, 320px);
  height: 1px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
  margin-top: 6px;
  opacity: 0;
  animation: vtt-fade 500ms ease 350ms forwards;
}
.vtt-curtain .meter::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: #00805c;
  animation: vtt-fill 1100ms cubic-bezier(.7,.0,.2,1) 380ms forwards;
}

.vtt-curtain .ticks {
  display: flex; gap: 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  opacity: 0;
  animation: vtt-fade-up 600ms cubic-bezier(.2,.7,.2,1) 480ms forwards;
}
.vtt-curtain .ticks span { font-variant-numeric: tabular-nums; }
.vtt-curtain .ticks .live { color: #00805c; display: inline-flex; align-items: center; gap: 6px; }
.vtt-curtain .ticks .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #00805c;
  animation: vtt-blink 1.1s ease-in-out infinite;
}

.vtt-curtain .crosshair-tl,
.vtt-curtain .crosshair-tr,
.vtt-curtain .crosshair-bl,
.vtt-curtain .crosshair-br {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,0.5);
  opacity: 0;
  animation: vtt-fade 500ms ease 200ms forwards;
}
.vtt-curtain .crosshair-tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.vtt-curtain .crosshair-tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.vtt-curtain .crosshair-bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.vtt-curtain .crosshair-br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }

@keyframes vtt-fade { to { opacity: 1; } }
@keyframes vtt-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes vtt-pop {
  to { transform: scale(1); }
}
@keyframes vtt-fill {
  to { width: 100%; }
}
@keyframes vtt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Stage fade-out (text+marks slide up before curtain leaves) */
.vtt-curtain.lift .stage {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 280ms ease, transform 480ms cubic-bezier(.7,.0,.2,1);
}
.vtt-curtain.lift .crosshair-tl,
.vtt-curtain.lift .crosshair-tr,
.vtt-curtain.lift .crosshair-bl,
.vtt-curtain.lift .crosshair-br {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* App content already in place — no entrance animation, the curtain
   simply lifts to reveal it. */
body.vtt-ready #root {
  animation: none;
}
@keyframes vtt-app-in {
  from { opacity: 1; transform: none; }
  to   { opacity: 1; transform: none; }
}

/* No animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vtt-curtain, .vtt-curtain * { animation: none !important; transition: none !important; }
  .vtt-curtain { display: none; }
  body.vtt-ready #root { animation: none; }
}