/* SAEFA Milestone 1.2 — Global Motion System
   Progressive enhancement: all content remains visible when JS/GSAP is unavailable. */

/* Reveal primitives ------------------------------------------------------- */
/*
   Content is NEVER pre-hidden in CSS. Motion is applied only when an element
   actually enters the viewport. This keeps headings and placeholders visible
   even if GSAP, ScrollTrigger, or IntersectionObserver fails.
*/
[data-reveal],[data-heading-reveal],[data-media-reveal]{opacity:1;transform:none}
.motion-ready [data-reveal],
.motion-ready [data-heading-reveal],
.motion-ready [data-media-reveal]{will-change:transform,opacity,clip-path}

/* Eyebrow lines remain visible statically; JS animates them from zero only on enter. */
.eyebrow{--eyebrow-line:1}
.eyebrow::before{transform:scaleX(var(--eyebrow-line));transform-origin:left center}

/* Hero copy uses clip-path rather than opacity-only movement. */
.motion-ready .hero .display,
.motion-ready .hero .lead,
.motion-ready .hero__actions,
.motion-ready .hero .pill-row{
  will-change:transform,opacity,clip-path;
}
.motion-ready .hero__visual,
.motion-ready .reference-media,
.motion-ready .cta-visual,
.motion-ready .truck-stage{
  will-change:transform,clip-path;
}

/* Media parallax: JS changes the inner image, never the layout box. */
.hero__placeholder,
.reference-media img,
.cta-visual img,
.truck-placeholder{
  transform-origin:center center;
  will-change:transform;
}

/* Section transition language ------------------------------------------- */
.motion-ready .section--dark,
.motion-ready .video-section,
.motion-ready .cta-section{
  will-change:transform;
}

/* Cards ----------------------------------------------------------------- */
.training-card,
.sector-card{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
}
.training-card > *,
.sector-card > *{
  transform:translateZ(1px);
}

/* Motion-enhanced buttons retain their normal CSS hover as fallback. */
.motion-ready .btn{will-change:transform}
.motion-ready .arrow{will-change:transform}

/* Cursor affordance ----------------------------------------------------- */
.cursor-dot{transition:width .2s ease,height .2s ease,background .2s ease,opacity .2s ease}
.cursor-dot.is-interactive{width:30px;height:30px;background:rgba(121,199,25,.52)}

/* Active landing-page navigation --------------------------------------- */
.nav a[href^="#"]{position:relative}
.nav a[href^="#"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-8px;
  height:2px;
  border-radius:999px;
  background:var(--saefa-green);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav a[href^="#"].is-active{opacity:1}
.nav a[href^="#"].is-active::after{transform:scaleX(1)}


/* Desktop navigation must remain visible regardless of animation state. */
@media (min-width:1081px){
  .site-header .nav{opacity:1;visibility:visible;pointer-events:auto}
  .site-header .nav a{color:var(--ink);opacity:.78}
  .site-header .nav a:hover,.site-header .nav a:focus-visible,.site-header .nav a.is-active{opacity:1}
  .site-header .nav__cta{color:var(--ink);background:#fff}
}

/* Mobile menu enters as a motion panel rather than inline styles. */
@media (max-width:1080px){
  .nav{
    display:flex;
    position:absolute;
    top:calc(100% + 10px);
    left:16px;
    right:16px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:14px;
    border-radius:20px;
    background:rgba(246,248,243,.985);
    border:1px solid var(--line);
    box-shadow:0 20px 60px rgba(20,28,17,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-10px,0) scale(.985);
    transform-origin:top center;
    transition:opacity .24s ease,visibility .24s ease,transform .32s var(--ease);
  }
  .nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav a{padding:11px 12px;border-radius:12px}
  .nav a:hover{background:rgba(121,199,25,.09)}
  .nav a[href^="#"]::after{display:none}
}

/* Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal],[data-heading-reveal],[data-media-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .eyebrow{--eyebrow-line:1!important}
  .hero__placeholder,.reference-media img,.cta-visual img,.truck-placeholder{transform:none!important}
  .section--dark,.video-section,.cta-section{clip-path:none!important;transform:none!important}
  .cursor-dot,.scroll-progress{display:none!important}
}

/* Milestone 1.2.4 — persistent section-icon motion */
@keyframes saefa-inspection-focus{0%{transform:scale(1);opacity:.95}72%{transform:scale(2.25);opacity:0}100%{transform:scale(2.25);opacity:0}}
@keyframes saefa-check-pop{0%,18%,100%{opacity:.2;transform:translateY(2px)}8%,12%{opacity:1;transform:translateY(0)}}
@keyframes saefa-sectors-dash{to{stroke-dashoffset:-30}}
@keyframes saefa-sectors-runner{0%{transform:translateX(0)}50%{transform:translateX(57px)}100%{transform:translateX(114px)}}
@keyframes saefa-sectors-bus{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
.motion-emblem--inspection .inspection-focus{animation:saefa-inspection-focus 2.8s ease-out infinite}
.motion-emblem--inspection .inspection-check--one{animation:saefa-check-pop 3.8s ease-in-out infinite}
.motion-emblem--inspection .inspection-check--two{animation:saefa-check-pop 3.8s ease-in-out infinite .6s}
.motion-emblem--inspection .inspection-check--three{animation:saefa-check-pop 3.8s ease-in-out infinite 1.2s}
.motion-emblem--sectors .sector-baseline--dash{animation:saefa-sectors-dash 5.8s linear infinite}
.motion-emblem--sectors .sector-runner{animation:saefa-sectors-runner 5.8s ease-in-out infinite}
.motion-emblem--sectors .sector-bus-group{animation:saefa-sectors-bus 4.9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .motion-emblem *{animation:none!important}
}


/* Milestone 1.3.3 — mobile performance polish */
@media (max-width:680px){
  .signal-track{will-change:transform}
  .motion-emblem--inspection .inspection-focus{animation-duration:3.6s}
  .motion-emblem--sectors .sector-baseline--dash{animation-duration:7s}
  .motion-emblem--sectors .sector-runner{animation-duration:7.2s}
}

/* Milestone 1.3.6.5 — motion for supplied vehicle artwork */
@keyframes saefa-inspection-orbit{to{stroke-dashoffset:-40}}
@keyframes saefa-inspection-pulse-provided{0%{transform:scale(1);opacity:.9}75%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@keyframes saefa-sector-route-provided{to{stroke-dashoffset:-30}}
@keyframes saefa-sector-runner-provided{0%{transform:translateX(0)}50%{transform:translateX(56px)}100%{transform:translateX(112px)}}
@keyframes saefa-sector-passenger-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
.motion-emblem--inspection .inspection-orbit{animation:saefa-inspection-orbit 8s linear infinite}
.motion-emblem--inspection .inspection-pulse{animation:saefa-inspection-pulse-provided 3s ease-out infinite}
.motion-emblem--inspection .inspection-marker--wheel .inspection-pulse{animation-delay:.6s}
.motion-emblem--inspection .inspection-marker--rear .inspection-pulse{animation-delay:1.2s}
.motion-emblem--sectors .sector-route--accent{animation:saefa-sector-route-provided 6s linear infinite}
.motion-emblem--sectors .sector-runner{animation:saefa-sector-runner-provided 6s ease-in-out infinite}
.motion-emblem--sectors .provided-vehicle--passenger{animation:saefa-sector-passenger-float 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .motion-emblem--inspection .inspection-orbit,
  .motion-emblem--inspection .inspection-pulse,
  .motion-emblem--sectors .sector-route--accent,
  .motion-emblem--sectors .sector-runner,
  .motion-emblem--sectors .provided-vehicle--passenger{animation:none!important}
}


/* Milestone 1.4.1 — seamless signal-strip marquee */
@keyframes saefa-signal-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-33.333333%,0,0)}
}
.signal-track{animation:saefa-signal-marquee 34s linear infinite}
@media (max-width:680px){.signal-track{animation-duration:27s}}
@media (prefers-reduced-motion:reduce){.signal-track{animation:none!important;transform:none!important}}