/* Round 4 shared motion mechanics (v4). Each concept's style.css supplies the look; this file supplies the movement.
   Curves are from the animate skill's table: strong ease-out for entrances, strong ease-in-out for
   on-screen wipes, the iOS drawer curve for the menu. */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --d-press:120ms; --d-hover:240ms; --d-sweep:520ms; --d-drawer:520ms; --d-overlay:400ms;
  --d-item:480ms; --d-reveal:900ms; --d-word:1000ms; --d-rule:1200ms; --d-veil:480ms; --d-veil-in:620ms; --d-fade:200ms; --d-none:0ms;
  --d-img:1400ms; --d-dial:1600ms; --d-bar:1200ms; --lift:4px; --img-zoom:1.12; --rise:22px; --rise-sm:14px; --item-shift:14px; --arrow-nudge:3px; --line:1px;
}

/* Hero words: rise out of a mask */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .1em 0;margin:0 -.06em -.1em 0}
[data-split] .wi{display:inline-block}
.js-motion [data-split] .wi{transform:translateY(108%);transition:transform var(--d-word) var(--ease-out)}
.js-motion.is-ready [data-split] .wi{transform:none}
.js-motion [data-hero]{opacity:0;transform:translateY(var(--rise-sm));transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.js-motion.is-ready [data-hero]{opacity:1;transform:none}

/* Scroll reveals (marketing surface; once only) */
.js-motion [data-reveal]{opacity:0;transform:translateY(var(--rise));transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.js-motion [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path var(--d-reveal) var(--ease-in-out)}
.js-motion [data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.js-motion [data-rule]{transform:scaleX(0);transform-origin:left center;transition:transform var(--d-rule) var(--ease-in-out)}
.js-motion [data-rule].is-in{transform:scaleX(1)}
[data-progress]{transform-origin:left center;transform:scaleX(0)}

/* Buttons: a fill sweeps in from the left on hover, presses down slightly */
.btn{position:relative;isolation:isolate;overflow:hidden;transition:color var(--d-hover) ease,transform var(--d-press) var(--ease-out),border-color var(--d-hover) ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right center;transition:transform var(--d-sweep) var(--ease-out)}
.btn .arr{transition:transform var(--d-sweep) var(--ease-out)}
.btn:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleX(1);transform-origin:left center}
  .btn:hover .arr{transform:translateX(var(--arrow-nudge))}
  .ul{position:relative;text-decoration:none}
  .ul::after{content:"";position:absolute;left:0;right:0;bottom:-.15em;height:var(--line);background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform var(--d-sweep) var(--ease-out)}
  .ul:hover::after{transform:scaleX(1);transform-origin:left center}
}

/* Header scrolled state */
.hdr{transition:background-color var(--d-overlay) ease,border-color var(--d-overlay) ease,backdrop-filter var(--d-overlay) ease}

/* Drawer */
.overlay{position:fixed;inset:0;z-index:40;opacity:0;pointer-events:none;transition:opacity var(--d-overlay) ease}
.drawer{position:fixed;top:0;bottom:0;left:0;z-index:50;transform:translateX(-100%);transition:transform var(--d-drawer) var(--ease-drawer);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
.menu-open .overlay{opacity:1;pointer-events:auto}
.menu-open .drawer{transform:none;visibility:visible}
.drawer:not([inert]){visibility:visible}
.menu-open body{overflow:hidden}
[data-menu-item]{opacity:0;transform:translateX(calc(-1 * var(--item-shift)));transition:opacity calc(var(--d-item) * .5) ease,transform var(--d-item) var(--ease-out)}
.menu-open [data-menu-item]{opacity:1;transform:none;transition-delay:var(--open-delay,var(--d-none))}
.menu-instant .drawer,.menu-instant .overlay,.menu-instant [data-menu-item]{transition:none}
.drawer [data-rule]{transform:scaleX(0);transform-origin:left center;transition:transform var(--d-rule) var(--ease-in-out)}
.menu-open .drawer [data-rule]{transform:scaleX(1);transition-delay:var(--d-hover)}
.menu-instant .drawer [data-rule]{transition:none}

/* Page-transition veil */
.veil{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--veil);opacity:0;pointer-events:none;transition:opacity var(--d-veil-in) var(--ease-out)}
.veil span{opacity:0;transform:translateY(var(--rise-sm));transition:opacity var(--d-veil) var(--ease-out),transform var(--d-veil) var(--ease-out)}
.vt-out .veil{opacity:1;pointer-events:auto;transition-duration:var(--d-veil)}
.vt-out .veil span{opacity:1;transform:none;transition-delay:var(--d-press)}
.vt-in .veil{opacity:1;transition:none}
.vt-in .veil span{opacity:1;transform:none;transition:none}

/* Reduced motion: no movement, only short fades */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-split] .wi,.js-motion [data-hero],.js-motion [data-reveal],[data-menu-item],.veil span{transform:none!important}
  .js-motion [data-split] .wi{transform:none;transition:none}
  .js-motion [data-hero],.js-motion [data-reveal]{transition:opacity var(--d-fade) ease}
  .js-motion [data-reveal="clip"]{clip-path:none}
  .js-motion [data-rule]{transform:none}
  .drawer{transition:opacity var(--d-fade) ease,visibility var(--d-fade);transform:none;opacity:0}
  .menu-open .drawer{opacity:1}
  .btn::before,.btn .arr,.ul::after{transition:none}
  html{scroll-behavior:auto}
}

/* Image reveal: the frame opens while the photo settles from a slight zoom */
.js-motion [data-reveal="img"]{opacity:1;transform:none;clip-path:inset(10% 6% 10% 6%);transition:clip-path var(--d-img) var(--ease-in-out)}
.js-motion [data-reveal="img"] img{transform:scale(var(--img-zoom));transition:transform var(--d-img) var(--ease-out)}
.js-motion [data-reveal="img"].is-in{clip-path:inset(0 0 0 0)}
.js-motion [data-reveal="img"].is-in img{transform:none}

/* Interactive cards */
.card{transition:transform var(--d-sweep) var(--ease-out),box-shadow var(--d-sweep) var(--ease-out)}
.card .card-img img{transition:transform var(--d-img) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(calc(-1 * var(--lift)))}
  .card:hover .card-img img{transform:scale(1.045)}
}

/* Scrubbed elements are composited; reduced motion pins them at their first frame */
[data-scrub]{will-change:transform,opacity}
.rm [data-scrub]{will-change:auto}

@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal="img"]{clip-path:none}
  .js-motion [data-reveal="img"] img{transform:none}
  .card,.card .card-img img{transition:none}
}

/* Score dial: a 270-degree arc that sweeps to its value once in view */
.dial .val{stroke-dasharray:0 100;transition:stroke-dasharray var(--d-dial) var(--ease-out)}
.dial.is-in .val,.is-in .dial .val,.no-js .dial .val{stroke-dasharray:var(--len) 100}
.js-motion .bar-fill{transform:scaleX(0);transform-origin:left center;transition:transform var(--d-bar) var(--ease-out)}
.js-motion .is-in .bar-fill{transform:scaleX(var(--w,1))}
.js-motion .hl-mark{background-size:0% 78%;transition:background-size var(--d-reveal) var(--ease-out)}
.js-motion .is-in .hl-mark{background-size:100% 78%}
@media (prefers-reduced-motion:reduce){.dial .val,.js-motion .bar-fill,.js-motion .hl-mark{transition:none}}