/* Hallmark · macrostructure: split hero with scroll reveal · icy editorial
 * Pre-emit critique: P4 H4 E3 S4 R4 V3 (source review; no browser QA).
 * Approved typography, palette, navigation and content retained by request.
 * One authored sequence: contact, turn, ten-shard reveal. */
@import url("./tokens.css");
@import url("./explore.css");
@import url("./process.css");
@import url("./kol-cluster.css");
html,body{overflow-x:clip}
.ice-in-motion{font-family:var(--font-body)}
.motion-opening{position:relative;background:var(--color-paper)}
.motion-stage{position:relative;isolation:isolate;overflow:clip;padding:132px 7vw 88px;min-height:780px}
.motion-landscape{position:absolute;inset:0;z-index:-1;background:url('/ice-in-motion/assets/ice-studio-world.webp') center/cover;opacity:.16}
.motion-copy{position:relative;z-index:3;max-width:900px}
.motion-copy h1{font-size:clamp(36px,4.6vw,80px);line-height:1.12;letter-spacing:-.045em;margin-top:24px;min-width:0}
.motion-copy h1>span{display:block;white-space:nowrap}
.motion-copy .eyebrow{font-size:clamp(12px,1vw,15px);letter-spacing:.12em;max-width:560px}
.motion-copy .lede{color:var(--color-muted);max-width:560px;font-size:clamp(18px,1.45vw,23px);line-height:1.65;margin:30px 0 34px}
/* Approved CTA option 03: frosted glass, dark readable text and softly
 * asymmetric corners. Keep the hit area and keyboard outline intact. */
.ice-in-motion :is(.ice-button,.nav-contact){position:relative;isolation:isolate;color:#173a4d;background:linear-gradient(155deg,#ffffffbb,#b9d9e6 70%,#90b7cd);border:0;border-radius:14px 10px 19px 13px;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #83adbf,0 5px 9px #244f6112}
.ice-in-motion :is(.ice-button,.nav-contact):hover{color:#173a4d;background:linear-gradient(155deg,#fff,#c9e4ee 70%,#a2c9dc);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #729eb3,0 6px 12px #244f6120}
.ice-in-motion :is(.ice-button,.nav-contact):focus-visible{outline:3px solid var(--proof-focus);outline-offset:5px}
.motion-art{position:relative;width:180%;margin-left:-40%;aspect-ratio:1.5;pointer-events:none;z-index:2}
.motion-orbit,.motion-number,.motion-fragment,.motion-shine{position:absolute;inset:0;transform-origin:50% 82%}
.motion-orbit{transform-style:preserve-3d}
.motion-intact,.motion-fragment img,.motion-pedestal,.motion-pedestal img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.motion-intact,.motion-fragment img,.motion-shine{clip-path:url(#motion-three)}
.motion-fragment{opacity:0}
/* Complete alpha-cutout chip, independent of the falling numeral. Its
 * transparent canvas is positioned to match the original landing surface. */
.motion-pedestal img{left:25.7%;top:71.4%;width:48.1%;height:27.8%;object-fit:fill}
.motion-shadow{position:absolute;left:33%;top:82.5%;width:34%;height:3%;border-radius:50%;background:var(--color-shadow);filter:blur(9px);opacity:.4}
.motion-ripple{position:absolute;left:27%;top:80%;width:46%;height:13%;border:2px solid var(--color-glint);border-radius:50%;opacity:0}
.motion-shine{opacity:0;mix-blend-mode:screen}
.motion-shine i{display:block;position:absolute;inset:-10%;background:linear-gradient(112deg,transparent 43%,var(--color-glint) 49%,transparent 55%);transform:translateX(-60%)}
.motion-striker{position:absolute;left:36.7%;top:48%;width:16.8%;aspect-ratio:320/336;opacity:0;z-index:5;pointer-events:none;will-change:transform,opacity}
.motion-striker-spin{width:100%;height:100%;transform-style:preserve-3d}
.motion-striker-crop{position:absolute;inset:0}
.motion-striker-crop img{display:block;width:100%;height:100%;object-fit:contain}
.motion-fractures{position:absolute;inset:0;width:100%;height:100%;clip-path:url(#motion-three);opacity:0;pointer-events:none}
.motion-fractures path{fill:none;stroke:#e8fbff;stroke-width:.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 1px 1px #396679)}
.motion-impact{position:absolute;left:42.5%;top:48%;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f1fdff 0,rgba(215,242,250,.6) 20%,rgba(215,242,250,0) 68%);opacity:0;pointer-events:none;z-index:4}
.motion-reveal{display:none;position:absolute;inset:0;padding:100px 7vw;align-content:center;text-align:center;z-index:1;opacity:0;pointer-events:none}
.motion-reveal h2{font-size:clamp(44px,7vw,100px);letter-spacing:-.045em;line-height:1.08;color:var(--color-ink)}
.motion-reveal p{margin:32px auto 0;color:var(--color-muted);font-size:clamp(15px,1.6vw,21px);line-height:2}
.motion-foot{position:absolute;left:7vw;right:7vw;bottom:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--color-muted);font-size:12px;z-index:4}
.motion-replay{font:inherit;color:inherit;border:0;border-bottom:1px solid currentColor;background:none;padding:12px 0;cursor:pointer;white-space:nowrap;min-height:44px}
.motion-replay[hidden]{display:none}
.motion-replay:hover{color:var(--color-ink)}
.motion-replay:active{transform:translateY(1px)}
.motion-replay:disabled{opacity:.5;cursor:not-allowed}
.motion-replay:focus-visible{outline:3px solid var(--proof-focus);outline-offset:5px}
.motion-scroll{display:none}
.motion-return{position:relative;width:210px;height:210px;margin:-28px auto 12px;pointer-events:none}
.motion-return img{display:block;width:100%;height:100%;object-fit:contain}
.ice-in-motion .studio-close .motion-close-copy{padding-top:44px;background:transparent}
.ice-in-motion .studio-close{min-height:820px;height:auto;padding:80px 0}
@media(min-width:900px){
 /* Add one original approach interval (.22) so that flight takes twice
  * the scroll distance without speeding up the landing or shatter. */
 .motion-opening.is-enhanced{height:calc(190svh + (190svh - max(100svh,680px)) * .22)}
 .motion-stage{height:100svh;min-height:680px;display:flex;align-items:center;padding-top:130px;padding-bottom:110px}
 .is-enhanced .motion-stage{position:sticky;top:0}
 .motion-copy{width:62%}
 .motion-art{position:absolute;width:min(86%,1360px,120svh);margin:0;right:-8%;top:55%;transform:translateY(-50%);clip-path:inset(0 -100% -100% -100%)}
 .motion-scroll{display:inline}
 .is-enhanced .motion-reveal{display:grid}
}
/* Keep the product introduction and cards in flow so shorter viewports cannot
 * push the independently positioned cards into the description. */
@media(min-width:701px){
 .ice-in-motion .aperture-stage{height:auto;min-height:100svh;padding:clamp(64px,8vh,100px) 7vw 56px;display:flex;flex-direction:column;justify-content:center}
 .ice-in-motion .aperture-heading{position:relative;inset:auto;margin:0;flex-shrink:0}
 .ice-in-motion .ice-product-grid{position:relative;inset:auto;width:100%;margin-top:clamp(44px,5vh,64px);flex-shrink:0}
 .ice-in-motion .aperture-caption{position:relative;inset:auto;margin-top:36px;flex-shrink:0}
}
@media(max-width:899px){
 .motion-stage{padding-top:128px;padding-bottom:70px;min-height:0}
 .motion-copy{max-width:740px}
 .motion-copy h1{font-size:clamp(27px,8vw,62px)}
 .motion-copy .lede{font-size:18px;margin:24px 0 28px}
 .motion-art{margin-top:-16px;margin-bottom:-12px}
 .motion-foot>span:first-child{max-width:180px}
 .ice-in-motion .ice-nav{padding:24px 7vw}
}
@media(max-width:400px){
 .motion-stage{padding-top:138px}
 .motion-foot{font-size:11px;gap:12px}
 .motion-foot>span:first-child{max-width:130px}
}
@media(prefers-reduced-motion:reduce){
 .motion-opening.is-enhanced{height:auto}
 .is-enhanced .motion-stage{position:relative}
 .is-enhanced .motion-reveal{display:none}
 .motion-scroll,.motion-replay{display:none}
 .motion-return,.motion-orbit,.motion-number,.motion-copy{transform:none!important;opacity:1!important}
 .motion-fragment{transform:none!important;opacity:0!important}
 .motion-intact{opacity:1!important}
 .motion-shine,.motion-ripple,.motion-striker,.motion-fractures,.motion-impact{display:none}
}

/* Header nav: links and "Let's talk" button at 130% */
.ice-in-motion .ice-nav nav{gap:31.2px}
.ice-in-motion .ice-nav nav a{font-size:16.9px}
.ice-in-motion .ice-nav .nav-contact{font-size:18.2px;padding:16.9px 24.7px}
@media (max-width:768px){.ice-in-motion .ice-nav nav{gap:20.8px}}
@media (max-width:700px){
 .ice-in-motion .ice-nav nav{gap:18.2px}
 .ice-in-motion .ice-nav .nav-contact{font-size:15.6px;padding:13px 16.9px}
}