/* chummarsons.com — scroll-reveal + motion system
   Spec §4, §9: all motion respects prefers-reduced-motion: reduce.
   Everything is gated on html.js so content is never hidden without JS. */

/* ---- Scroll reveal variants (JS assigns .is-visible + --d stagger delay) ---- */
html.js [data-reveal],
html.js .reveal {
  opacity: 0;
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease),
    box-shadow 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal="up"],
html.js .reveal { transform: translate3d(0, 28px, 0); }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
html.js [data-reveal="zoom"] { transform: scale(0.93) translate3d(0, 18px, 0); }
html.js [data-reveal="tilt"] {
  transform: perspective(900px) rotateX(9deg) translate3d(0, 30px, 0);
  transform-origin: 50% 0;
}
html.js .is-visible,
html.js [data-reveal].is-visible,
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Line-mask title reveal (hero + section headings) ----
   The clip window needs headroom for Fraunces' deep italic descenders — the
   "y" of "Chummar Iyppunny" over the candle scene was cropped at 0.08em.
   Each following mask is pulled up over its predecessor's descender headroom
   so the line-to-line advance stays exactly as it was (clip windows only bind
   their own children, so revealed tails still render). A lone mask (e.g. the
   <h1 class="line-mask"> page heads) is untouched, keeping its own margin.
   The 135% start offset keeps each line fully below the clip edge pre-reveal
   (0.35 × line-height must exceed the 0.24em window — true for both the 1.04
   hero and 1.15 heading line-heights). */
html.js .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.24em;
}
html.js .line-mask + .line-mask { margin-top: -0.16em; }
html.js .line-mask > span {
  display: block;
  transform: translate3d(0, 135%, 0);
  transition: transform 1.15s var(--ease-expo);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
html.js .line-mask.is-visible > span,
html.js .is-visible .line-mask > span { transform: none; }

/* ---- Ken Burns settle (portrait images ease from 1.1x to 1x on reveal) ---- */
html.js .kb { transform: scale(1.1); transition: transform 2.6s var(--ease-expo); }
html.js .is-visible .kb,
html.js .kb.is-visible { transform: scale(1); }

/* ---- SVG connector draw-in ---- */
.svg-draw path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.svg-draw path.is-drawn { stroke-dashoffset: 0; }

/* ---- Photo tilt (tilt.js): hover-capable + non-reduced-motion only ---- */
[data-tilt] {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}
[data-tilt] .tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 236, 190, 0.16),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
[data-tilt]:hover .tilt-glare { opacity: 1; }
html.reduce-motion [data-tilt],
html:not(.has-hover) [data-tilt] { transform: none !important; }

/* ---- Tribute letter unfold (messages.html) ---- */
.letter-card { transform-origin: top center; }
html.js .letter-card.reveal { transform: scaleY(0.96) translateY(14px); }
html.js .letter-card.reveal.is-visible { transform: none; }

/* ---- Scroll cue + hero helpers handled here so reduced-motion kills them ---- */
html.reduce-motion .scroll-cue .mouse span { animation: none; }
html.reduce-motion .brand-flame { animation: none; }

/* ---- Reduced motion: everything instant, nothing hidden ---- */
html.reduce-motion [data-reveal],
html.reduce-motion .reveal,
html.reduce-motion .line-mask > span,
html.reduce-motion .kb {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.reduce-motion .svg-draw path { stroke-dashoffset: 0; transition: none; }
html.reduce-motion [data-parallax] { transform: none !important; }
html.reduce-motion [data-scroll-cinema] img { transform: none !important; filter: none !important; }
html.reduce-motion [data-scroll-cinema]::after { opacity: 1; }