/* ============================================================
   MOTION — scroll reveal, section handoff, parallax
   Loaded after styles.css. All effects are opt-in via .js-motion
   (added by motion.js), so no-JS pages stay fully visible.
   ============================================================ */

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:200;transform:scaleX(0);transform-origin:left;background:var(--teal);opacity:.9;pointer-events:none;will-change:transform}
.site-header{z-index:100}

/* ---------- reveal primitives ---------- */
.js-motion [data-rv]{opacity:0;transition:opacity .85s cubic-bezier(.16,.84,.32,1),transform 1.05s cubic-bezier(.16,.84,.32,1),clip-path 1.05s cubic-bezier(.16,.84,.32,1);transition-delay:var(--rvd,0ms);will-change:opacity,transform}
.js-motion [data-rv="up"]{transform:translate3d(0,34px,0)}
.js-motion [data-rv="up-sm"]{transform:translate3d(0,18px,0)}
.js-motion [data-rv="left"]{transform:translate3d(-26px,0,0)}
.js-motion [data-rv="right"]{transform:translate3d(26px,0,0)}
.js-motion [data-rv="scale"]{transform:translate3d(0,40px,0) scale(.985)}
.js-motion [data-rv="mask"]{opacity:1;clip-path:inset(0 0 100% 0)}
.js-motion [data-rv="rule"]{opacity:1;transform:scaleX(0);transform-origin:left}
.js-motion [data-rv].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);will-change:auto}

/* headline lines lift a touch further */
.js-motion .display-h2[data-rv],.js-motion .page-hero-title[data-rv],.js-motion .cta-title[data-rv],.js-motion .product-title[data-rv]{transform:translate3d(0,46px,0)}
.js-motion .display-h2[data-rv].is-in,.js-motion .page-hero-title[data-rv].is-in,.js-motion .cta-title[data-rv].is-in,.js-motion .product-title[data-rv].is-in{transform:none}

/* ---------- section handoff ---------- */
.js-motion .sec-fx{position:relative;isolation:isolate}
.sec-veil{position:absolute;inset:-1px 0;z-index:-1;pointer-events:none;background:var(--veil,var(--white));opacity:1;transition:opacity 1.25s cubic-bezier(.16,.84,.32,1)}
.js-motion .sec-fx.is-in > .sec-veil{opacity:0}
.sec-edge{position:absolute;left:var(--pad-x);right:var(--pad-x);top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.5s cubic-bezier(.16,.84,.32,1);pointer-events:none;z-index:1}
.js-motion .sec-fx.is-in > .sec-edge{transform:none}

/* veil colours — each section dissolves out of its neighbour's tone */
.js-motion .section.ivory{--veil:var(--white)}
.js-motion .section:not(.ivory){--veil:var(--ivory)}
.js-motion .mission{--veil:var(--teal-paper)}
.js-motion .top-news{--veil:var(--white)}
.js-motion .product{--veil:var(--ivory)}
.js-motion .cases{--veil:var(--teal-deep)}
.js-motion .cta-section{--veil:var(--white)}
.js-motion .site-footer{--veil:var(--teal)}
.js-motion .about-section.ivory{--veil:var(--white)}
.js-motion .about-section:not(.ivory){--veil:var(--ivory)}
.js-motion .page-hero{--veil:var(--white)}
.js-motion .tr-courses{--veil:var(--white)}
.js-motion .tr-principles{--veil:var(--white)}
.js-motion .tr-people{--veil:var(--white)}
.js-motion .list-section{--veil:var(--teal-paper)}
.js-motion .ae-sec{--veil:var(--ivory)}
.js-motion .ae-sec.ivory,.js-motion .ae-sec.paper{--veil:var(--white)}
.js-motion .ae-hero{--veil:var(--teal-darkest)}

/* ---------- parallax ---------- */
.js-motion [data-px]{will-change:transform}
/* hero photos are already re-cropped by the hero intro; these two only need
   the extra crop room when they actually move */
.js-motion .mission-photo-img{top:-7%;height:114%}
.js-motion .page-hero-photo img{top:-6%;height:112%}
.js-motion .value-card,.js-motion .tr-course,.js-motion .position-card,.js-motion .mvv-card,.js-motion .case-card{will-change:auto}
/* keep captions legible over the re-cropped photo */
.mission-photo::after,.page-hero-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(20,30,30,.5),rgba(20,30,30,0));pointer-events:none;z-index:1}
.mission-photo .photo-caption,.page-hero-photo .photo-caption{z-index:2;text-shadow:0 1px 14px rgba(0,0,0,.45)}

/* ---------- micro-interactions ---------- */
.js-motion .value-card,.js-motion .tr-course,.js-motion .position-card,.js-motion .mvv-card{transition:transform .5s cubic-bezier(.16,.84,.32,1)}
.js-motion .value-card:hover,.js-motion .tr-course:hover,.js-motion .position-card:hover{transform:translateY(-4px)}
.js-motion .case-card{transition:transform .55s cubic-bezier(.16,.84,.32,1)}
.js-motion .case-card:hover{transform:translateY(-6px)}
.js-motion .case-img-wrap{overflow:hidden}
.js-motion .case-img-main{transition:transform 1.1s cubic-bezier(.16,.84,.32,1)}
.js-motion .case-card:hover .case-img-main{transform:scale(1.045)}
.js-motion .iv-img img{transition:transform 1.1s cubic-bezier(.16,.84,.32,1)}
.js-motion .iv-card:hover .iv-img img{transform:scale(1.05)}

/* nav current-section marker on the top page */
.site-nav a{position:relative}
.site-nav a.is-here::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;opacity:.75;transform-origin:left;animation:navMark .45s cubic-bezier(.16,.84,.32,1)}
@keyframes navMark{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion: reduce){
  .js-motion [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .sec-veil{display:none}
  .sec-edge{transform:none!important}
  .scroll-progress{display:none}
  .js-motion [data-px]{transform:none!important}
}