/* =====================================================================
   AMAN — MOTION LAYER
   Scroll-scrubbed effects: state always follows scroll position, so nothing
   can get "stuck". Everything is fully visible if JavaScript never runs.
   ===================================================================== */

/* scroll progress bar */
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:1000;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-2),var(--red));transform-origin:0 50%;transform:scaleX(var(--sp,0))}

/* load-time word rise (time based, never waits for scroll) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block;animation:wordUp 1.1s var(--ease) both;animation-delay:calc(var(--d,0) * 55ms + 120ms)}
@keyframes wordUp{from{transform:translateY(110%) rotate(4deg)}to{transform:none}}
.load{animation:fadeUp 1s var(--ease) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.load-zoom{animation:zoomIn 1.4s var(--ease) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes zoomIn{from{opacity:0;transform:scale(.92) translateY(30px)}to{opacity:1;transform:none}}

/* parallax + magnetic use the independent `translate` property, so they never fight transforms */
[data-speed]{will-change:translate}
.btn,.play,.vid__play{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,translate .6s var(--ease)}

/* ---------- hero extras ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.hero .wrap{width:100%}
.bento__card.--b{right:auto;left:-26px;top:auto;bottom:-18px;animation-delay:-3s}
.bento__card.--b i{background:var(--blue-soft);color:var(--navy-2)}
@media(max-width:980px){.bento__card.--b{left:8px}}
.hero__scroll{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.hero__scroll i{width:22px;height:34px;border-radius:12px;border:2px solid var(--line-2);position:relative}
.hero__scroll i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--red);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media(max-height:760px),(max-width:980px){.hero__scroll{display:none}}

/* ---------- spotlight + 3D tilt cards ---------- */
.card,.tile,.pcard,.person,.way,.step{--rx:0deg;--ry:0deg;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.card:hover,.pcard:hover{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px)}
.tile:hover,.person:hover,.way:hover,.step:hover{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px)}
.step:hover{box-shadow:var(--shadow)}
.tile,.step{position:relative;overflow:hidden}
.card::after,.tile::after,.way::after,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(27,67,148,.11),transparent 45%)}
.way.--navy::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 45%)}
.card:hover::after,.tile:hover::after,.way:hover::after,.step:hover::after{opacity:1}

/* ---------- word-fill statement ---------- */
.fill{font-family:var(--head);font-weight:800;font-size:clamp(28px,4.2vw,58px);line-height:1.14;letter-spacing:-.03em;max-width:24ch;color:var(--ink)}
.fill.--center{margin-inline:auto;text-align:center}
.fill .hl{color:var(--navy-2)}
.fill .hl-red{color:var(--red)}
html.js .fill .fw{color:rgba(14,27,51,.14);transition:color .25s}
html.js .fill .fw.--on{color:var(--ink)}
html.js .fill .hl .fw.--on{color:var(--navy-2)}
html.js .fill .hl-red .fw.--on{color:var(--red)}

/* ---------- sticky stacking cards ---------- */
.stack{position:relative}
.scard{position:sticky;top:calc(var(--nav-h) + 20px + var(--i,0) * 18px);margin-bottom:7vh}
.scard:last-child{margin-bottom:0}
.scard__in{position:relative;display:grid;grid-template-columns:1fr 1.15fr;min-height:min(560px,72vh);border-radius:var(--r-xl);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 -24px 60px -34px rgba(14,27,51,.35),var(--shadow-sm);transform-origin:50% 0;will-change:transform}
.scard__in::after{content:"";position:absolute;inset:0;background:#0B1F4B;opacity:calc(var(--dim,0) * .3);pointer-events:none}
.scard__body{position:relative;padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.scard__top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.scard__num{font-family:var(--head);font-weight:800;font-size:clamp(56px,7vw,104px);line-height:.85;letter-spacing:-.05em;color:var(--bg-3)}
.scard .h2{font-size:clamp(30px,3.6vw,52px);margin-bottom:16px}
.scard p{color:var(--muted);font-size:clamp(16px,1.25vw,18.5px);max-width:44ch}
.scard__img{position:relative;overflow:hidden;background:var(--bg-3)}
.scard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.14;translate:0 var(--iy,0px);transition:scale 1.2s var(--ease)}
.scard:hover .scard__img img{scale:1.2}
.scard.--navy .scard__in{background:var(--navy-deep);border-color:transparent}
.scard.--navy .h2{color:#fff}
.scard.--navy p{color:var(--on-navy-soft)}
.scard.--navy .scard__num{color:rgba(255,255,255,.1)}
.scard.--navy .link{color:#fff}
.scard.--navy .eyebrow{background:rgba(255,255,255,.12);color:#fff}
.scard.--navy .eyebrow::before{background:#FF8A94}
.scard.--red .scard__in{background:var(--red);border-color:transparent}
.scard.--red .h2{color:#fff}
.scard.--red p{color:rgba(255,255,255,.88)}
.scard.--red .scard__num{color:rgba(255,255,255,.2)}
.scard.--red .link{color:#fff}
.scard.--red .eyebrow{background:rgba(255,255,255,.18);color:#fff}
.scard.--red .eyebrow::before{background:#fff}
.scard.--blue .scard__in{background:var(--blue-soft);border-color:transparent}
.scard.--blue .scard__num{color:#fff}
@media(max-width:860px){
  .scard{top:calc(var(--nav-h) + 10px + var(--i,0) * 10px);margin-bottom:4vh}
  .scard__in{grid-template-columns:1fr;min-height:0}
  .scard__img{aspect-ratio:16/10;order:-1}
  .scard__num{display:none}
  .scard__body{gap:14px;padding:22px 22px 26px}
  .scard .h2{font-size:26px;margin-bottom:8px}
  .scard p{font-size:15px}
}

/* ---------- pinned horizontal scroller (native swipe when not pinned) ---------- */
.hpin{position:relative;background:var(--bg-2)}
.hpin__sticky{padding-block:clamp(64px,8vw,110px);overflow:hidden}
.hpin__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.hpin__head .h2{margin-top:16px;max-width:16ch}
.hpin__count{font-family:var(--head);font-weight:800;font-size:14px;color:var(--muted-2);display:flex;align-items:center;gap:12px}
.hpin__bar{width:140px;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden}
.hpin__bar i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--hp,0))}
.hpin__track{display:flex;gap:clamp(14px,1.6vw,22px);padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.hpin__track::-webkit-scrollbar{display:none}
.hpin__track>*{flex:0 0 min(430px,84vw);scroll-snap-align:center}
.hpin .way{grid-column:auto;display:flex;flex-direction:column;min-height:min(470px,60vh)}
.hpin .way ul{margin-top:auto;padding-top:20px}
.hcard-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:min(470px,60vh);background:var(--bg-3)}
.hcard-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hcard-photo span{position:absolute;left:16px;bottom:16px;right:16px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.93);font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink)}
.hcard-end{border-radius:var(--r-lg);background:var(--navy-deep);color:#fff;padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;min-height:min(470px,60vh)}
.hcard-end b{font-family:var(--head);font-weight:800;font-size:clamp(64px,7vw,110px);line-height:.9;letter-spacing:-.05em}
.hcard-end p{color:var(--on-navy-soft);margin:12px 0 24px}
.hpin.--pin .hpin__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 8px) 24px}
.hpin.--pin .hpin__track{overflow:visible;scroll-snap-type:none;will-change:transform}
@media(max-height:780px){
  .hpin .way,.hcard-photo,.hcard-end{min-height:52vh}
  .hpin__head{margin-bottom:18px}
  .hpin__head .h2{font-size:clamp(26px,3vw,36px);margin-top:10px}
  .hpin .way ul{display:none}
}

/* ---------- image expand on scroll ---------- */
.expand{position:relative;height:230vh;--p:1;background:#fff}
.expand__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.expand__media{position:absolute;inset:0;clip-path:inset(calc((1 - var(--p)) * 16vh) calc((1 - var(--p)) * 18vw) round calc((1 - var(--p)) * 48px))}
.expand__media img{width:100%;height:100%;object-fit:cover;scale:calc(1.3 - var(--p) * .3)}
.expand__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,75,.4),rgba(11,31,75,.8));opacity:calc(.2 + var(--p) * .8)}
.expand__text{position:relative;z-index:1;text-align:center;color:#fff;max-width:920px;padding-inline:var(--gutter);opacity:calc((var(--p) - .45) * 2.2);translate:0 calc((1 - var(--p)) * 60px)}
.expand__text blockquote{font-family:var(--head);font-weight:800;font-size:clamp(26px,3.8vw,52px);line-height:1.18;letter-spacing:-.03em}
.expand__text blockquote em{font-style:normal;color:#FFB3BA}
.expand__text p{margin-top:18px;font-size:clamp(16px,1.4vw,20px);color:rgba(255,255,255,.82)}
.expand__text cite{display:inline-block;margin-top:22px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.14);font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){.expand{height:180vh}}

/* ---------- CTA grows in as you reach it ---------- */
.cta{scale:var(--cs,1);transform-origin:50% 100%}

@media(prefers-reduced-motion:reduce){
  .expand{height:auto;--p:1!important}
  .expand__sticky{position:relative;height:auto;padding-block:120px}
  .hpin.--pin .hpin__sticky{position:relative;height:auto}
  .scard__in{transform:none!important}
  .cta{scale:1!important}
}