/* ============================================================
   BASE — reset, body, links. Values come from tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: var(--fw-book);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-accent); }
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

html { scroll-padding-top: var(--nav-height); }

/* Figma "content": 40px between hero and each section */
main { display: flex; flex-direction: column; gap: 2.5rem; }

/* Text links that are underlined at rest ("music", "film", "Full credits"):
   on hover the line slides out to the right and redraws from the left,
   turning blue with the text — the same gesture as the nav underline. */
.hero__intro a,
.section-title .link-out span:first-child {
  text-decoration: none;
  padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.hero__intro a:hover,
.section-title .link-out:hover span:first-child {
  animation: underline-redraw 0.7s var(--ease-out);
}
@keyframes underline-redraw {
  0%   { background-size: 100% 1px; background-position: 100% 100%; }
  45%  { background-size: 0 1px;    background-position: 100% 100%; }
  46%  { background-size: 0 1px;    background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__intro a:hover,
  .section-title .link-out:hover span:first-child { animation: none; }
}

/* Horizontal rules above and below a block (1px, Figma lines).
   Drawn as pseudo-elements so motion.css can draw them in from the left. */
.ruled { position: relative; }
.ruled::before,
.ruled::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-line);
}
.ruled::before { top: 0; }
.ruled::after { bottom: 0; }

/* ↗ and + symbols: DM Sans Light, optical size 14 (as in Figma) */
.glyph {
  font-family: var(--font-symbol);
  font-weight: var(--fw-symbol);
  font-variation-settings: "opsz" 14;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Lenis smooth scroll (from lenis@1.1.13/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* TODO: remove once the real sections are built */
.placeholder { min-height: 100vh; }