/* ============================================================
   Studio1 — Motion layer (standing conventions)
   Reusable keyframes + utility classes for the system's
   interaction patterns. GOLDEN RULE: only animate `transform`
   and `opacity`. Pair with motion.js for the JS-driven
   behaviors (scroll reveal, magnetic buttons, parallax, etc).
   ============================================================ */

/* Site-wide smooth / inertia scroll */
html { scroll-behavior: smooth; }

/* ---- Keyframes ---- */
@keyframes s1-rise   { from { opacity: 0; transform: translateY(var(--reveal-rise)); } to { opacity: 1; transform: translateY(0); } }
@keyframes s1-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes s1-mask-up{ from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes s1-marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Scroll reveal — sections fade-and-rise on enter.
   motion.js adds .is-visible when the element scrolls in.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Stagger: children animate ~80ms apart. motion.js sets --i per child. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
  will-change: transform, opacity;
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); }

/* ============================================================
   Heading reveal — large headings mask up line-by-line.
   motion.js wraps each line in .s1-line inside .s1-line-mask.
   ============================================================ */
.s1-line-mask { overflow: hidden; }
.s1-line {
  display: block;
  transform: translateY(110%);
  transition: transform var(--duration-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
  will-change: transform;
}
.is-visible .s1-line { transform: translateY(0); }

/* ============================================================
   Card hover — scale 1.02 + subtle lift.
   ============================================================ */
.s1-hover-card {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  will-change: transform;
}
.s1-hover-card:hover {
  transform: scale(var(--card-hover-scale)) translateY(var(--hover-lift));
  box-shadow: var(--shadow-xl);
}

/* ============================================================
   Button — magnetic hover (JS sets translate) + scale shift.
   ============================================================ */
.s1-magnetic {
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  will-change: transform;
}
.s1-magnetic:hover { transform: scale(1.04); }
.s1-magnetic:active { transform: scale(var(--press-scale)); }

/* ============================================================
   Marquee — infinite horizontal scroll, ease-in-out loop.
   motion.js slows playbackRate on hover.
   ============================================================ */
.s1-marquee-track {
  display: inline-flex;
  align-items: center;
  animation: s1-marquee var(--marquee-duration, 28s) var(--ease-in-out) infinite;
  will-change: transform;
}

/* ============================================================
   Sticky header — condenses after ~80px scroll.
   motion.js toggles .is-condensed on the [data-sticky-header].
   ============================================================ */
[data-sticky-header] {
  transition: padding var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

/* ============================================================
   Parallax — motion.js translates [data-parallax] on scroll.
   ============================================================ */
[data-parallax] { will-change: transform; }

/* ============================================================
   Respect reduced motion — show end-state, no movement.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal],
  [data-reveal-stagger] > *,
  .s1-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .s1-marquee-track { animation: none !important; }
  .s1-hover-card:hover,
  .s1-magnetic:hover { transform: none !important; }
}