/*
 * Fort motion layer — site-wide micro-interactions and scroll reveals.
 * Loaded only when Appearance → Fort Theme → Animations allows it (body gets .fort-motion).
 * Brief: premium + punchy — smooth confident reveals, quick snappy hovers/presses, no bounce on large
 * elements. Animates transform/opacity only; every effect has a prefers-reduced-motion path.
 * Proven on the /test/ motion lab, 2026-10-29.
 */
/* Tokens — premium + punchy. Reveals: long + expo-out (confident settle, no overshoot).
   Hovers/presses: short + strong ease-out (snappy). One voice for every effect below. */
:root{
  --fm-press:120ms; --fm-hover:280ms; --fm-lift:400ms; --fm-reveal:1100ms; --fm-zoom:1400ms;
  --fm-ease-out:cubic-bezier(.23,1,.32,1);      /* hovers, presses */
  --fm-ease-expo:cubic-bezier(.16,1,.3,1);      /* entrances, reveals */
  --fm-dist:44px; --fm-lift-dist:8px; --fm-stagger:120ms;
}
.fort-motion .fort-button{position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--fm-press) var(--fm-ease-out),opacity var(--fm-hover) ease}
.fort-motion .fort-button:hover{opacity:1}
.fort-motion .fort-button:active{transform:scale(.97)}
.fort-motion .fort-button--red::before,.fort-motion .fort-button--navy::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(0,0,0,.18);transform:scaleX(0);transform-origin:left;transition:transform var(--fm-lift) var(--fm-ease-out)}
.fort-motion .fort-button--outline::before,.fort-motion .fort-button--outline-navy::before{content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:.12;transform:scaleX(0);transform-origin:left;transition:transform var(--fm-lift) var(--fm-ease-out)}
.fort-motion .fort-button:hover::before,.fort-motion .fort-button:focus-visible::before{transform:scaleX(1)}

/* Cards: lift on transform (not the studio tiles — photo + caption with no card, so a lift box looked wrong), deeper shadow on a pre-painted ::after (only its opacity animates). */
.fort-motion :is(.fort-feature-cards__card,.fort-training-blocks__card,.fort-class-cards__item,.fort-colour-panels__panel){
  position:relative;transition:transform var(--fm-lift) var(--fm-ease-out)!important;box-shadow:none}
.fort-motion :is(.fort-feature-cards__card,.fort-training-blocks__card,.fort-class-cards__item,.fort-colour-panels__panel)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 22px 44px rgba(17,32,68,.20);opacity:0;transition:opacity var(--fm-lift) var(--fm-ease-out)}
.fort-motion :is(.fort-feature-cards__card,.fort-training-blocks__card,.fort-class-cards__item,.fort-colour-panels__panel):is(:hover,:focus-within){
  transform:translateY(calc(-1 * var(--fm-lift-dist)));box-shadow:none}
.fort-motion :is(.fort-feature-cards__card,.fort-training-blocks__card,.fort-class-cards__item,.fort-colour-panels__panel):is(:hover,:focus-within)::after{opacity:1}
/* Image zoom inside its frame — slow, so the photo breathes while the card snaps. */
.fort-motion :is(.fort-feature-cards__media,.fort-studio-grid__media,.fort-class-cards__item,.fort-colour-panels__panel--has-image){overflow:hidden}
.fort-motion :is(.fort-feature-cards__image,.fort-studio-grid__image,.fort-class-cards__image,.fort-colour-panels__image){
  transition:transform var(--fm-zoom) var(--fm-ease-out)!important}
.fort-motion :is(.fort-feature-cards__card,.fort-studio-grid__item,.fort-class-cards__item,.fort-colour-panels__panel):is(:hover,:focus-within)
  :is(.fort-feature-cards__image,.fort-studio-grid__image,.fort-class-cards__image,.fort-colour-panels__image){transform:scale(1.06)}

/* Promo bar: arrow nudges on hover; one light sweep across the bar after the hero lands. */
.fort-motion .fort-promo__go{display:inline-block;transition:transform var(--fm-hover) var(--fm-ease-out)}
.fort-motion .fort-promo__inner:hover .fort-promo__go{transform:translateX(4px)}
.fort-motion .fort-promo--bar{position:relative;overflow:hidden}

/* Text links inside cards: underline grows from the left. */
/* (Not on .fort-feature-cards__link — that link wraps the WHOLE card, so an underline drew a line across it.) */
.fort-motion .fort-colour-panels__link{text-decoration:none!important;
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0% 2px;transition:background-size var(--fm-hover) var(--fm-ease-out)}
.fort-motion .fort-colour-panels__panel:is(:hover,:focus-within) .fort-colour-panels__link{background-size:100% 2px}

@media (prefers-reduced-motion: no-preference){
  /* Hero entrance — the page's ONE authored moment: eyebrow → title → subtitle → buttons. */
  @keyframes fm-rise{from{opacity:0;transform:translateY(var(--fm-dist))}to{opacity:1;transform:none}}
  @keyframes fm-settle{from{transform:scale(1.06)}to{transform:none}}
  .fort-motion .fort-hero__content>*{animation:fm-rise var(--fm-reveal) cubic-bezier(.16,1,.3,1) both}
  .fort-motion .fort-hero__content>:nth-child(2){animation-delay:160ms}
  .fort-motion .fort-hero__content>:nth-child(3){animation-delay:320ms}
  .fort-motion .fort-hero__content>:nth-child(4){animation-delay:480ms}
  .fort-motion .fort-hero__content>:nth-child(n+5){animation-delay:640ms}
  .fort-motion :is(.fort-hero__poster,.fort-hero__video){animation:fm-settle 2400ms cubic-bezier(.16,1,.3,1) both}
  @keyframes fm-sweep{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(320%) skewX(-20deg)}}
  .fort-motion .fort-promo--bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    transform:translateX(-120%) skewX(-20deg);animation:fm-sweep 1700ms cubic-bezier(.4,0,.2,1) 1500ms 1 both}

  /* Button shine — the same light sweep as the promo bar: once when the button first appears, again on every hover. */
  .fort-motion .fort-button::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;z-index:1;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-160%) skewX(-20deg)}
  .fort-motion .fort-button.fm-shine::after{animation:fm-btn-sweep 1300ms cubic-bezier(.4,0,.2,1) 1 both}
  .fort-motion .fort-button:is(:hover,:focus-visible)::after{animation:fm-btn-sweep-hover 1000ms cubic-bezier(.4,0,.2,1) 1 both}
  @keyframes fm-btn-sweep{from{transform:translateX(-160%) skewX(-20deg)}to{transform:translateX(320%) skewX(-20deg)}}
  @keyframes fm-btn-sweep-hover{from{transform:translateX(-160%) skewX(-20deg)}to{transform:translateX(320%) skewX(-20deg)}}

  /* Scroll reveals — hidden ONLY once the script has added .fm-on (no JS ⇒ everything visible). */
  .fort-motion.fm-on .fm-reveal{opacity:0;transform:translateY(var(--fm-dist));
    transition:opacity var(--fm-reveal) var(--fm-ease-expo),transform var(--fm-reveal) var(--fm-ease-expo);transition-delay:var(--fm-delay,0ms)}
  .fort-motion.fm-on .fm-reveal.fm-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  /* Tier 1 (zoom, lift, sweep) removed; Tier 2 reveals become a short fade; colour/focus kept. */
  .fort-motion :is(.fort-feature-cards__card,.fort-training-blocks__card,.fort-class-cards__item,.fort-colour-panels__panel):is(:hover,:focus-within){transform:none}
  .fort-motion :is(.fort-feature-cards__card,.fort-studio-grid__item,.fort-class-cards__item,.fort-colour-panels__panel):is(:hover,:focus-within)
    :is(.fort-feature-cards__image,.fort-studio-grid__image,.fort-class-cards__image,.fort-colour-panels__image){transform:none}
  .fort-motion .fort-button:active{transform:none}
  .fort-motion .fort-promo__inner:hover .fort-promo__go{transform:none}
}