/* Shared motion styles for showcase templates (profiles F-I).
 * Every pre-hidden reveal state is scoped under html.anim (set by an inline
 * head script only when prefers-reduced-motion: no-preference) — no-JS and
 * reduced-motion visitors get a complete static page with zero layout shift.
 * Reveals animate transform/opacity only (mask-up adds clip-path). */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---- scroll reveals ----------------------------------------------------- */
html.anim [data-anim] {
  opacity: 0;
  transition:
    opacity 0.7s var(--ease-out-strong),
    transform 0.7s var(--ease-out-strong);
  will-change: opacity, transform;
}
html.anim [data-anim="fade-up"]     { transform: translateY(26px); }
html.anim [data-anim="slide-left"]  { transform: translateX(-30px); }
html.anim [data-anim="slide-right"] { transform: translateX(30px); }
html.anim [data-anim="scale-in"]    { transform: scale(0.955); }
html.anim [data-anim="mask-up"] {
  clip-path: inset(100% 0 0 0);
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease-out-strong),
    transform 0.85s var(--ease-out-strong),
    clip-path 0.85s var(--ease-in-out-strong);
}
html.anim [data-anim].in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* ---- marquee ------------------------------------------------------------ */
[data-marquee] { overflow: hidden; }
[data-marquee] .mq-track {
  display: flex;
  align-items: center;
  width: max-content;
}
html.anim [data-marquee] .mq-track {
  animation: mq-scroll var(--mq-dur, 30s) linear infinite;
}
html.anim [data-marquee][data-marquee-reverse] .mq-track { animation-direction: reverse; }
@media (hover: hover) and (pointer: fine) {
  html.anim [data-marquee]:hover .mq-track { animation-play-state: paused; }
}
@keyframes mq-scroll { to { transform: translateX(-50%); } }
/* no-JS / reduced motion: a static, swipeable row */
html:not(.anim) [data-marquee] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- tickers ------------------------------------------------------------ */
[data-ticker] { font-variant-numeric: tabular-nums; }

/* ---- parallax ----------------------------------------------------------- */
html.anim [data-parallax] { will-change: transform; }

/* ---- SVG draw-in (monograms, rules) ------------------------------------- */
html.anim [data-draw] path,
html.anim [data-draw] line,
html.anim [data-draw] polyline,
html.anim [data-draw] circle,
html.anim [data-draw] rect,
html.anim [data-draw] ellipse {
  transition: stroke-dashoffset 1.25s var(--ease-in-out-strong) 0.15s;
}
html.anim [data-draw].drawn path,
html.anim [data-draw].drawn line,
html.anim [data-draw].drawn polyline,
html.anim [data-draw].drawn circle,
html.anim [data-draw].drawn rect,
html.anim [data-draw].drawn ellipse {
  stroke-dashoffset: 0 !important;
}

/* ---- belt & suspenders: motion off even if .anim slipped through -------- */
@media (prefers-reduced-motion: reduce) {
  html.anim [data-anim] { opacity: 1; transform: none; clip-path: none; transition: none; }
  html.anim [data-marquee] .mq-track { animation: none; }
  html.anim [data-parallax] { transform: none !important; }
}