/* css/animations.css — opening curtain, grain, scroll reveals (homepage only) */

/* ── Timing handshake with the intro ───────────────────────────
   First visit this session: hero entrance waits for the curtain.
   Repeat visit: curtain is skipped, hero plays immediately. */
:root { --intro-delay: 1.55s; }
html.intro-played { --intro-delay: 0.1s; }
html.intro-played .intro { display: none; }

/* ── Opening curtain ───────────────────────────────────────── */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: intro-lift 0.9s var(--ease-out-expo) 1.55s forwards;
}

@keyframes intro-lift {
  to { transform: translateY(-100%); visibility: hidden; }
}

.intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.intro-word {
  display: flex;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(52px, 11vw, 110px);
  line-height: 1.05;
  color: var(--color-bg);
  padding: 0 8px 6px;
}

.intro-letter {
  display: inline-block;
  transform: translateY(115%);
  animation: intro-letter-up 0.7s var(--ease-out-expo) forwards;
}
.intro-letter:nth-child(1) { animation-delay: 0.10s; }
.intro-letter:nth-child(2) { animation-delay: 0.16s; }
.intro-letter:nth-child(3) { animation-delay: 0.22s; }
.intro-letter:nth-child(4) { animation-delay: 0.28s; }
.intro-letter:nth-child(5) { animation-delay: 0.34s; }
.intro-letter:nth-child(6) { animation-delay: 0.40s; }
.intro-letter:nth-child(7) { animation-delay: 0.46s; }

@keyframes intro-letter-up {
  to { transform: translateY(0); }
}

.intro-rule {
  display: block;
  width: min(280px, 56vw);
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  animation: intro-rule-draw 0.8s var(--ease-out-expo) forwards;
}
.intro-rule--top    { transform-origin: left;  animation-delay: 0.25s; }
.intro-rule--bottom { transform-origin: right; animation-delay: 0.45s; }

@keyframes intro-rule-draw {
  to { transform: scaleX(1); }
}

.intro-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0;
  animation: intro-tag-in 0.6s ease 0.75s forwards;
}

@keyframes intro-tag-in {
  to { opacity: 1; }
}

/* Lock scroll while the curtain is up (class managed by animations.js) */
body.is-locked { overflow: hidden; height: 100vh; }

/* ── Grain overlay ─────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 1500;
  pointer-events: none;
  opacity: 0.05;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 9s steps(6) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ── Scroll reveals (IntersectionObserver adds .is-visible) ── */
.reveal-up {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.85s var(--ease-out-expo) var(--delay, 0s),
    transform 0.85s var(--ease-out-expo) var(--delay, 0s);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image curtain reveal: wrapper unclips, image settles from a zoom */
.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out-expo) var(--delay, 0s);
}
.reveal-img img {
  transform: scale(1.18);
  transition: transform 1.4s var(--ease-out-expo) var(--delay, 0s);
}
.reveal-img.is-visible { clip-path: inset(0 0 0% 0); }
.reveal-img.is-visible img { transform: scale(1); }

/* Manifesto words lit by scroll (managed by animations.js) */
[data-words] .word {
  opacity: 0.14;
  transition: opacity 0.3s ease;
}
[data-words] .word.is-lit { opacity: 1; }

/* ── Reduced motion: kill the curtain outright ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .grain { animation: none; }
  .reveal-up, .reveal-img { opacity: 1; transform: none; clip-path: none; }
  .reveal-img img { transform: none; }
  [data-words] .word { opacity: 1; }
}