/*
 * Filmstro page templates: motion + hover layer (shared by page-homepagev2.php and page-filmstro-desktop.php).
 * Scoped under .fsp. Load after fsp-home.css / fsp-desktop.css.
 * Reveal states only apply when html.fsp-js is set (inline script in the template) AND the user has no
 * reduced-motion preference, so no-JS and reduced-motion visitors always get static, fully visible content.
 * The reveal selector list must match SEL in fs-pages.js.
 */

.fsp { --fsp-e: cubic-bezier(.2, .7, .2, 1); }

/* ================= hover / focus (colour only; motion parts live in the media query below) ================= */
.fsp .fsph-way, .fsp .fsph-feat, .fsp .fspd-card, .fsp .fspd-prod, .fsp .fspd-prod2 { --fsp-tint: 255, 255, 255; }
.fsp .fsph-way.is-amber, .fsp .fsph-feat.is-amber, .fsp .fspd-prod.is-desk, .fsp .fspd-prod2:first-child, .fsp .fspd-card:has(.c-amber) { --fsp-tint: 247, 170, 21; }
.fsp .fsph-feat.is-mom, .fsp .fspd-card:has(.c-mom) { --fsp-tint: 246, 183, 43; }
.fsp .fsph-way.is-blue, .fsp .fsph-feat.is-blue, .fsp .fspd-prod:nth-child(2), .fsp .fspd-card:has(.c-blue) { --fsp-tint: 63, 140, 240; }
.fsp .fsph-way.is-pink, .fsp .fsph-feat.is-pink, .fsp .fspd-prod:nth-child(3), .fsp .fspd-card:has(.c-pink) { --fsp-tint: 239, 75, 108; }
.fsp .fspd-prod2.is-bes { --fsp-tint: 249, 168, 184; }
.fsp .fspd-card:has(.c-green) { --fsp-tint: 52, 211, 153; }

.fsp :is(.fsph-way, .fsph-feat, .fspd-card, .fspd-prod, .fspd-prod2):is(:hover, :has(:focus-visible)) { border-color: rgba(var(--fsp-tint), .32); }
.fsp :is(.fsph-way.is-pro, .fspd-prod.is-desk):is(:hover, :has(:focus-visible)) { border-color: rgba(var(--fsp-tint), .6); }

.fsp a.fsp-btn--primary:focus-visible { filter: brightness(1.08); }
.fsp a.fsp-btn--ghost:focus-visible { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); }
.fsp a.fsp-btn--outline:focus-visible { background: rgba(247, 170, 21, .1); }

.fsp :is(.fsph-badge, .fspd-badge):is(:hover, :focus-visible) { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.fsp .fspd-link:is(:hover, :focus-visible) { filter: brightness(1.15); }
.fsp .fsph-lic-row small a:is(:hover, :focus-visible) { color: var(--text); }

.fsp .fsp-logos li:hover img { opacity: .95; }

.fsp :is(.fsph-uses, .fspd-chips) li:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.fsp :is(.fsph-incl, .fspd-covered) li:hover span { background: rgba(52, 211, 153, .22); }

.fsp :is(.fsph-q, .fsph-faqs summary):is(:hover, :focus-visible) { color: var(--amber); }
.fsp :is(.fsph-q, .fsph-faqs summary):is(:hover, :focus-visible) i { background: rgba(255, 255, 255, .09); color: var(--text); }
.fsp .fsph-col:focus-visible { outline-offset: 3px; }

/* ================= motion ================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---- scroll reveal (hidden only once JS has flagged <html>) ---- */
  html.fsp-js .fsp :is(.fsp-eyebrow, .fsp-h2, .fspd-hd, .fsp-lead, .fsp-logos > li, .fsph-trust-label, .fspd-trust-label, .fsph-way, .fsph-pro-side, .fsph-pro-win, .fsph-feat, .fsph-facts, .fsph-vis, .fsph-pillar, .fsph-lib .fsp-checks, .fsph-lib-btn, .fsph-quote, .fsph-cols > li, .fsph-bes-btns, .fsph-bes-quote, .fsph-usp, .fsph-uses > li, .fsph-lic-row, .fsph-incl, .fsph-tc, .fsph-ask, .fsph-faqs > li, .fsph-cta-panel, .fspd-vis, .fspd-leg, .fspd-card, .fspd-also, .fspd-prod, .fspd-prod2, .fspd-lic-copy > p:not(.fsp-eyebrow), .fspd-chips, .fspd-lic-row, .fspd-covered, .fspd-quote, .fspd-stat, .fspd-panel):not(.fsp-v) {
    opacity: 0;
    transform: translate3d(0, var(--fsp-y, 16px), 0);
  }
  html.fsp-js .fsp .fsp-v:not(.fsp-done) {
    transition: opacity .7s var(--fsp-e), transform .7s var(--fsp-e);
    transition-delay: calc(var(--fsp-b, 0ms) + var(--fsp-d, 0ms));
    will-change: opacity, transform;
  }
  .fsp :is(.fsp-lead, .fsph-pro-side) { --fsp-b: 120ms; }
  .fsp :is(.fsph-vis, .fspd-vis, .fsph-pro-win, .fsph-cta-panel, .fspd-panel) { --fsp-y: 24px; }
  .fsp :is(.fsp-logos > li, .fsph-uses > li) { --fsp-y: 8px; }

  /* ---- hero: load sequence ---- */
  @keyframes fsp-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
  @keyframes fsp-rise { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.98); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0); } }
  html.fsp-js .fsp :is(.fsph-badge, .fsph-h1 > span, .fsph-sub, .fsph-hero .fsp-btns, .fsph-reassure, .fsph-cap, .fspd-badge, .fspd-h1 > span, .fspd-row > p, .fspd-hcta .fsp-btns, .fspd-meta) {
    animation: fsp-up .7s var(--fsp-e) backwards;
  }
  html.fsp-js .fsp :is(.fsph-h1, .fspd-h1) > span:first-child { animation-delay: 80ms; }
  html.fsp-js .fsp :is(.fsph-h1, .fspd-h1) > span:last-child { animation-delay: 170ms; }
  html.fsp-js .fsp :is(.fsph-sub, .fspd-row > p) { animation-delay: 260ms; }
  html.fsp-js .fsp :is(.fsph-hero, .fspd-hcta) .fsp-btns { animation-delay: 340ms; }
  html.fsp-js .fsp :is(.fsph-reassure, .fspd-meta) { animation-delay: 420ms; }
  html.fsp-js .fsp .fsph-cap { animation-delay: 900ms; }
  html.fsp-js .fsp :is(.fsph-stage, .fspd-stage) .fsp-shot { animation: fsp-rise 1.1s var(--fsp-e) 300ms backwards; }

  /* app window parallax: --fsp-py is set by fs-pages.js (fine pointer, wide screens only) */
  .fsp :is(.fsph-stage, .fspd-stage) { translate: 0 var(--fsp-py, 0px); }

  /* hero glows drift (gradients moved onto a composited layer) */
  @keyframes fsp-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 1.2%, 0) scale(1.04); }
  }
  #content.fsp > :is(.fsph-hero, .fspd-hero) { position: relative; isolation: isolate; background: var(--bg); }
  #content.fsp > :is(.fsph-hero, .fspd-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    animation: fsp-drift 22s ease-in-out infinite alternate;
  }
  #content.fsp > .fsph-hero::before {
    background:
      radial-gradient(ellipse 55% 22% at 50% 18%, rgba(247, 170, 21, .08), transparent),
      radial-gradient(ellipse 45% 40% at 20% 62%, rgba(63, 140, 240, .12), transparent),
      radial-gradient(ellipse 42% 38% at 82% 66%, rgba(239, 75, 108, .11), transparent);
  }
  #content.fsp > .fspd-hero::before {
    background:
      radial-gradient(ellipse 42% 36% at 22% 62%, rgba(246, 183, 43, .12), transparent),
      radial-gradient(ellipse 45% 36% at 52% 55%, rgba(63, 140, 240, .14), transparent),
      radial-gradient(ellipse 40% 34% at 82% 66%, rgba(239, 75, 108, .12), transparent);
  }

  /* ---- coloured rules draw in (Momentum / Depth / Power legends, scoring pillars) ---- */
  html.fsp-js .fsp :is(.fspd-leg, .fsph-pillar) { position: relative; border-top-color: transparent; }
  html.fsp-js .fsp :is(.fspd-leg, .fsph-pillar)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
  }
  html.fsp-js .fsp .fsph-pillar::before { top: -1px; height: 1px; }
  html.fsp-js .fsp :is(.fspd-leg.is-mom, .fsph-pillar.is-mom)::before { background: var(--mom); }
  html.fsp-js .fsp :is(.fspd-leg.is-blue, .fsph-pillar.is-blue)::before { background: var(--blue); }
  html.fsp-js .fsp :is(.fspd-leg.is-pink, .fsph-pillar.is-pink)::before { background: var(--pink); }
  html.fsp-js .fsp .fsph-pillar.is-green::before { background: var(--green); }
  html.fsp-js .fsp :is(.fspd-leg, .fsph-pillar).fsp-v::before {
    transform: none;
    transition: transform .9s var(--fsp-e) calc(var(--fsp-d, 0ms) + 200ms);
  }

  /* ---- CTA brand bars: grow in, then breathe like slow music levels ---- */
  @keyframes fsp-grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes fsp-breathe { from { transform: none; opacity: 1; } to { transform: scaleX(.93); opacity: .82; } }
  html.fsp-js .fsp :is(.fsph-cta-panel, .fspd-panel):not(.fsp-v) :is(.fsph-bars, .fspd-bars) i { clip-path: inset(0 100% 0 0); }
  .fsp :is(.fsph-bars, .fspd-bars) i { transform-origin: left center; }
  html.fsp-js .fsp :is(.fsph-cta-panel, .fspd-panel).fsp-v :is(.fsph-bars, .fspd-bars) i { animation: fsp-grow .9s var(--fsp-e) 250ms backwards, fsp-breathe 6s ease-in-out 1.6s infinite alternate; }
  html.fsp-js .fsp :is(.fsph-cta-panel, .fspd-panel).fsp-v :is(.fsph-bars, .fspd-bars) i:nth-child(2) { animation-delay: 360ms, 2.4s; animation-duration: .9s, 7.4s; }
  html.fsp-js .fsp :is(.fsph-cta-panel, .fspd-panel).fsp-v :is(.fsph-bars, .fspd-bars) i:nth-child(3) { animation-delay: 470ms, 1.9s; animation-duration: .9s, 5.2s; }

  /* ---- hover motion ---- */
  .fsp a.fsp-btn { transition: background-color .2s ease, border-color .2s ease, transform .25s var(--fsp-e), filter .2s ease, box-shadow .25s ease; }
  .fsp a.fsp-btn:is(:hover, :focus-visible) { transform: translateY(-1px); }
  .fsp a.fsp-btn--primary:is(:hover, :focus-visible) { box-shadow: 0 10px 28px -12px rgba(247, 170, 21, .55); }
  .fsp a.fsp-btn:active { transform: translateY(0); transition-duration: .08s; }
  .fsp :is(a.fsp-btn, .fspd-link, .fsph-badge, .fspd-badge) svg { transition: transform .25s var(--fsp-e); }
  .fsp :is(a.fsp-btn, .fspd-link, .fsph-badge, .fspd-badge):is(:hover, :focus-visible) svg:has(path[d="M5 12h14"]):has(path[d="m12 5 7 7-7 7"]) { transform: translateX(3px); }
  .fsp a.fsp-btn:is(:hover, :focus-visible) svg:has(path[d="M12 15V3"]) { transform: translateY(1.5px); }
  .fsp :is(.fsph-badge, .fspd-badge) { transition: border-color .2s ease, background-color .2s ease; }
  .fsp .fspd-link { transition: filter .2s ease; }

  .fsp :is(.fsph-way, .fsph-feat, .fspd-card, .fspd-prod, .fspd-prod2) { transition: border-color .3s ease, box-shadow .35s ease, transform .35s var(--fsp-e); }
  .fsp :is(.fsph-way, .fsph-feat, .fspd-card, .fspd-prod, .fspd-prod2):is(:hover, :has(:focus-visible)) { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .7); }

  /* screenshot crops zoom gently inside their clipped frames */
  .fsp :is(.fsph-crop img, .fspd-crop picture) { transition: transform .6s var(--fsp-e); }
  .fsp .fsph-crop.is-ext img { transform-origin: 26.8% 48.3%; }
  .fsp .fsph-crop.is-web img { transform-origin: 26.6% 19.9%; }
  .fsp .fspd-crop picture { transform-origin: 20% 20%; }
  .fsp .fsph-way:is(:hover, :has(:focus-visible)) .fsph-crop img, .fsp .fspd-card:hover .fspd-crop picture { transform: scale(1.03); }

  /* collection tiles */
  .fsp .fsph-col img { transition: transform .7s var(--fsp-e); }
  .fsp .fsph-col:is(:hover, :focus-visible) img { transform: scale(1.05); }

  .fsp .fsp-logos img { transition: opacity .3s ease; }
  .fsp :is(.fsph-uses, .fspd-chips) li { transition: border-color .2s ease, background-color .2s ease; }
  .fsp :is(.fsph-incl, .fspd-covered) li span { transition: background-color .2s ease, transform .25s var(--fsp-e); }
  .fsp :is(.fsph-incl, .fspd-covered) li:hover span { transform: scale(1.1); }
  .fsp :is(.fsph-q, .fsph-faqs summary) { transition: color .2s ease; }
  .fsp :is(.fsph-q, .fsph-faqs summary) i { transition: background-color .2s ease, color .2s ease, transform .3s var(--fsp-e); }
  .fsp .fsph-q:is(:hover, :focus-visible) i { transform: translateX(2px); }

  /* ---- FAQ: smooth open (height where ::details-content is supported, fade everywhere) ---- */
  .fsp .fsph-faqs details { interpolate-size: allow-keywords; }
  .fsp .fsph-faqs details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--fsp-e), content-visibility .4s allow-discrete; }
  .fsp .fsph-faqs details[open]::details-content { block-size: auto; }
  .fsp .fsph-faqs details[open] > p { animation: fsp-up .45s var(--fsp-e) backwards; }
}