/* ============ Root & Base ============ */
:root {
  --fg: #0b0b0c;
  --fg-dim: #555;
  --bg: #ffffff;
  --accent: currentColor;            /* underline uses text color for a clean look */
  --rise-duration: 600ms;
  --rise-stagger: 55ms;              /* per-character delay */
  --underline-duration: 720ms;
  --max-w: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #f4f4f5;
    --fg-dim: #a1a1aa;
    --bg: #0a0a0b;
  }
}

/* Scope ALL page-specific rules so they don't touch the navbar or global body */
.video-edit-page,
.video-edit-page *::before,
.video-edit-page *::after {
  box-sizing: border-box;
}

/* Optional: set color/background for this page area only (no font override) */
.video-edit-page {
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ Layout ============ */
.video-edit-page .intro-hero {
  display: grid;
  place-items: center;
  padding-top: 5%;
}

.video-edit-page .headline {
  --headline-size: clamp(2.4rem, 9vw, 8rem);
  --letter-weight: 750;
  --track: -0.01em;

  position: relative;
  display: inline-block;
  font-size: var(--headline-size);
  line-height: 1;
  letter-spacing: var(--track);
  font-weight: var(--letter-weight);
  margin: 0;
  max-width: min(92vw, var(--max-w));
  /* Subtle entrance fade for the whole block */
  opacity: 0.98;
}

/* Keep the raw text intact; JS wraps chars in spans */
.video-edit-page .headline__text {
  display: inline-block;
  white-space: pre; /* preserve spaces */
}

/* Each character becomes an inline-block so transforms look clean */
.video-edit-page .headline .char {
  display: inline-block;
  transform: translateY(1.15em) scale(0.98);
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity, filter;
  visibility: hidden; /* hidden until ready */
}

/* Activated state once in view */
.video-edit-page .headline.in .char {
  animation: riseIn var(--rise-duration) cubic-bezier(.2,.6,.2,1) both;
  animation-delay: calc(var(--i) * var(--rise-stagger));
  visibility: visible;
}

@keyframes riseIn {
  0% {
    transform: translateY(1.15em) scale(0.98);
    opacity: 0;
    filter: blur(6px);
  }
  60% {
    transform: translateY(0) scale(1.005);
    opacity: 1;
    filter: blur(0.5px);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* ============ Underline (draw from center out) ============ */
.video-edit-page .headline__underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(-0.28em, -10px);
  height: clamp(2px, 0.5vw, 6px);
  transform-origin: 50% 50%;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 0%, transparent),
    var(--accent),
    color-mix(in srgb, var(--accent) 0%, transparent)
  );
  border-radius: 999px;
  opacity: 0.9;
  visibility: hidden; /* belt & suspenders: hidden until ready */
}

/* Underline draws after most letters are visible */
.video-edit-page .headline.in .headline__underline {
  animation: drawLine var(--underline-duration) cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(10 * var(--rise-stagger)); /* after first ~10 letters */
  visibility: visible;
}

@keyframes drawLine {
  0%   { transform: scaleX(0); opacity: 0; }
  50%  { transform: scaleX(1.02); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* ============ Responsiveness tweaks ============ */
@media (max-width: 480px) {
  .video-edit-page .headline {
    letter-spacing: 0.005em; /* slightly looser on very small screens */
  }
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
  .video-edit-page .headline .char,
  .video-edit-page .headline__underline {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
  }
}

/* Prevent pre-animation flash (only when JS is present) */
.js .video-edit-page .headline__text { 
  visibility: hidden;          /* hide raw text until chars are built */
}

/* After JS builds spans, we mark the headline as ready */
.video-edit-page .headline.ready .char {
  visibility: visible;
}

/* Optional: keep underline hidden until ready as well (already handled) */
.video-edit-page .headline:not(.ready) .headline__underline {
  visibility: hidden;
}

/* No-JS fallback: if scripts are off, show the text */
noscript .video-edit-page .headline__text { visibility: visible !important; }