/*
 * License page: motion engine (scroll-reveal + shared micro-interactions).
 * Companion: assets/js/license/motion.js, tokens (--lpl-ease, --lpl-dur*) in base.css.
 *
 * Contract used by every section partial:
 *   [data-lpl-reveal]            element fades/slides in once when scrolled into view
 *   [data-lpl-reveal="left|right|scale|fade|up"]  direction (default "up")
 *   style="--i:N"                stagger index inside its group (70ms per step, capped at 8 steps)
 *   .lpl-sec.is-inview           section is in view (one-shot): hook for section choreography
 *
 * The reveal is an ANIMATION on opacity / translate / scale only, so it never collides with a
 * section's own hover transitions (those use transform, box-shadow, colours...).
 * The hidden start state exists only while html.lpl-js is set and motion.js has not failed
 * (html.lpl-motion-off removes it), so the page is fully visible without JS.
 */

@media (prefers-reduced-motion: no-preference) {
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal]:not(.is-revealed) {
    opacity: 0;
    translate: 0 28px;
  }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="left"]:not(.is-revealed)  { translate: -36px 0; }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="right"]:not(.is-revealed) { translate: 36px 0; }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="scale"]:not(.is-revealed) { translate: 0 12px; scale: 0.94; }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="fade"]:not(.is-revealed)  { translate: none; }

  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal].is-revealed {
    animation: lpl-reveal-up var(--lpl-dur-slow, 0.8s) var(--lpl-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
    animation-delay: calc(min(var(--i, 0), 8) * 70ms);
  }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="left"].is-revealed  { animation-name: lpl-reveal-left; }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="right"].is-revealed { animation-name: lpl-reveal-right; }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="scale"].is-revealed { animation-name: lpl-reveal-scale; }
  html.lpl-js:not(.lpl-motion-off) [data-lpl-reveal="fade"].is-revealed  { animation-name: lpl-reveal-fade; }

  @keyframes lpl-reveal-up    { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
  @keyframes lpl-reveal-left  { from { opacity: 0; translate: -36px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes lpl-reveal-right { from { opacity: 0; translate: 36px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes lpl-reveal-scale { from { opacity: 0; translate: 0 12px; scale: 0.94; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes lpl-reveal-fade  { from { opacity: 0; } to { opacity: 1; } }

  /* smooth in-page navigation (CTA "#contact", breadcrumb jumps) */
  html:has(.lpl-page) { scroll-behavior: smooth; }
}

/* anchored sections stop below the floating header */
.lpl-page .lpl-sec[id] { scroll-margin-top: 24px; }

/* ---- shared micro-interactions ------------------------------------------------------------- */
.lpl-page .lpl-btn {
  transition:
    filter var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease),
    background-color var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease),
    box-shadow var(--lpl-dur, 0.45s) var(--lpl-ease, ease),
    transform var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease);
}
@media (hover: hover) {
  .lpl-page .lpl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(245, 179, 25, 0.55); }
  .lpl-page .lpl-btn--ghost:hover { transform: translateY(-2px); }
}
.lpl-page .lpl-btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.lpl-page .lpl-btn__icon { transition: transform var(--lpl-dur, 0.45s) var(--lpl-ease, ease); }
@media (hover: hover) {
  .lpl-page .lpl-btn:hover .lpl-btn__icon { transform: translateX(3px); }
}

/* keyboard focus eases in instead of snapping */
.lpl-page :focus-visible { transition: outline-offset var(--lpl-dur-fast, 0.2s) var(--lpl-ease, ease); }