/* Radiant motion study. Original implementation inspired by Trionn's choreography. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--curtain-ease:cubic-bezier(.76,0,.24,1)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.intro-active{overflow:hidden}
#site-intro{display:none;position:fixed;inset:0;z-index:1000;overflow:hidden;background:var(--paper);color:var(--ink);isolation:isolate}
.motion-enabled.intro-pending #site-intro{display:block}
#site-intro.is-done,#site-intro[hidden]{display:none!important}
.intro-backdrop{position:absolute;inset:0;background:var(--paper)}
.intro-window{position:absolute;inset:0;background:var(--ink);clip-path:inset(27% 25% round 3px);transition:clip-path .8s var(--curtain-ease)}
.intro-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--lime);transition:opacity .25s,transform .4s var(--motion-ease)}
.intro-brand{font:500 clamp(65px,10vw,160px)/1 var(--display);letter-spacing:-.085em;margin:24px 0;animation:intro-brand-in .45s var(--motion-ease) both}
.intro-overline,.intro-caption{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.intro-caption{opacity:.68;letter-spacing:.06em}
.intro-footer{position:absolute;left:var(--gutter);right:var(--gutter);bottom:44px;display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;text-transform:uppercase;letter-spacing:.08em;transition:opacity .2s}
.intro-footer b{font:350 44px/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.intro-footer small{font-size:11px;opacity:.5}
.intro-rail{position:absolute;bottom:28px;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line);transition:opacity .2s}
.intro-rail span{display:block;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--motion-ease)}
#intro-skip{position:absolute;right:var(--gutter);top:32px;display:flex;gap:25px;align-items:center;padding:12px 0;font-size:11px;z-index:2}
#intro-skip span{font-size:20px}
.intro-cross{position:absolute;font-size:20px;font-weight:200;color:#819080;line-height:1;transition:opacity .2s;transform:translate(-50%,-50%)}
.intro-cross.a{left:25%;top:27%}.intro-cross.b{left:75%;top:27%}.intro-cross.c{left:25%;top:73%}.intro-cross.d{left:75%;top:73%}
#site-intro.is-ready .intro-content{opacity:0;transform:translateY(-18px)}
#site-intro.is-opening .intro-window{clip-path:inset(0 round 0)}
#site-intro.is-opening .intro-cross,#site-intro.is-opening .intro-footer,#site-intro.is-opening .intro-rail,#site-intro.is-opening #intro-skip{opacity:0;pointer-events:none}
#site-intro.is-opening{animation:intro-open .4s .65s both}
@keyframes intro-brand-in{from{opacity:0;transform:translateY(28px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-open{to{opacity:0;visibility:hidden;pointer-events:none}}
/* First screen: typography at upper left, landscape fills the other side. */
.cinematic-hero{position:relative;padding-top:0;min-height:735px;height:calc(100svh - 100px);max-height:1050px;isolation:isolate;margin-bottom:0}
.cinematic-hero .hero-heading{position:relative;z-index:2;display:block;padding-top:28px;margin-bottom:0;pointer-events:none}
.cinematic-hero .hero-heading button,.cinematic-hero .hero-heading a{pointer-events:auto}
.cinematic-hero h1{font:430 clamp(51px,5.85vw,98px)/1.04 var(--display);letter-spacing:-.065em;margin-top:30px;max-width:760px}
.cinematic-hero .hero-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.06em;line-height:1.18;font-size:1em;letter-spacing:inherit}
.cinematic-hero .hero-line>span{display:block;transform-origin:left bottom}
.cinematic-hero .hero-product{font-size:.83em;margin-top:.14em;letter-spacing:-.055em}
.cinematic-hero #hero-rotator{display:inline-grid;position:relative;font-size:.83em;letter-spacing:-.055em;line-height:1.2;color:#718568;min-height:1.28em;overflow:visible}
.kinetic-word{grid-area:1/1;display:inline-block;white-space:nowrap}
.kinetic-char{display:inline-block;white-space:pre;will-change:transform,opacity,filter}
.kinetic-word[hidden]{display:none!important}
.cinematic-hero .hero-intro{position:relative;width:330px;margin-top:24px;padding:0;pointer-events:auto}
.cinematic-hero .hero-intro p{font-size:13px;color:var(--muted);line-height:1.75;margin-bottom:23px;max-width:285px}
.cinematic-hero .hero-intro .button{padding:20px 24px;font-size:13px;width:100%;position:relative;overflow:hidden}
.hero-explore{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:11px;padding:16px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.hero-explore span{font-size:19px;transition:transform .3s}
.hero-explore:hover span{transform:translateY(4px)}
.cinematic-hero .hero-frame{position:absolute;inset:0 0 72px auto;width:76%;height:auto;aspect-ratio:auto;z-index:-1;border-radius:0;background:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 46%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%)}
.hero-image-depth{position:absolute;inset:0;overflow:hidden}
.hero-image-depth:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,#f3f2eb22 27%,transparent 50%),linear-gradient(0deg,var(--paper) 0%,transparent 18%,transparent 75%,#f3f2eb33);pointer-events:none}
.hero-image-depth img{width:100%;height:100%;object-fit:cover;object-position:54% 45%;filter:saturate(.8);animation:none}
.cinematic-hero .hero-frame:after{display:none}
.cinematic-hero .hero-frame figcaption{left:auto;right:75px;bottom:30px;font-size:9px;color:var(--ink);text-shadow:none}
.cinematic-hero .hero-photo-link{color:var(--ink);border-color:#203d3266;bottom:18px;right:8px}
.cinematic-hero .hero-photo-link:hover{background:var(--lime)}
.cinematic-hero .hero-bottom{position:absolute;bottom:0;width:100%;height:72px;padding:0;align-items:center;gap:30px;color:var(--muted);font-size:10px;z-index:3}
.hero-motion-controls{display:flex;align-items:center;gap:19px;margin-left:auto}
[data-replay-intro]{display:none;font-size:10px;color:var(--muted);align-items:center;gap:13px;padding:10px 0}
.motion-enabled [data-replay-intro]{display:flex}
[data-replay-intro] span{font-size:18px}
[data-motion-toggle]{display:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;place-items:center;padding:8px}
.motion-enabled [data-motion-toggle]{display:grid}
[data-motion-toggle] svg{width:13px;height:13px;grid-area:1/1;fill:none;stroke:currentColor;stroke-width:1.3}
[data-motion-toggle] .motion-play-icon{display:none}
[data-motion-toggle][aria-pressed=true] .motion-play-icon{display:block}
[data-motion-toggle][aria-pressed=true] .motion-pause-icon{display:none}
[data-motion-toggle]:hover{background:var(--lime)}
/* Entrance is progressive enhancement; the unenhanced page is always readable. */
.motion-enabled .cinematic-hero .hero-line>span{opacity:0;transform:translateY(108%) rotate(2deg);filter:blur(8px)}
.motion-enabled .cinematic-hero #hero-rotator,.motion-enabled .cinematic-hero .hero-intro,.motion-enabled .cinematic-hero .eyebrow{opacity:0}
.hero-entered .cinematic-hero .hero-line>span{animation:hero-line-in 1.1s var(--motion-ease) forwards}
.hero-entered .cinematic-hero .hero-product>span{animation-delay:.1s}
.hero-entered .cinematic-hero #hero-rotator{animation:hero-fade-in .9s .27s var(--motion-ease) forwards}
.hero-entered .cinematic-hero .eyebrow{animation:hero-fade-in .8s .03s var(--motion-ease) forwards}
.hero-entered .cinematic-hero .hero-intro{animation:hero-fade-in .9s .43s var(--motion-ease) forwards}
.hero-entered .cinematic-hero .hero-image-depth img{animation:hero-image-in 1.8s var(--motion-ease) both}
@keyframes hero-line-in{to{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}}
@keyframes hero-fade-in{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hero-image-in{from{transform:scale(1.08)}to{transform:scale(1)}}
/* Ten horizontal route belts, composed with transforms only. */
#page-curtain{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;pointer-events:none}
.motion-enabled #page-curtain{display:flex}
#page-curtain>span{display:block;flex:1;margin-block:-.5px;background:var(--ink);transform:scaleY(0);transform-origin:bottom;will-change:transform}
.route-arrived #page-curtain>span{animation:route-open .45s calc((9 - var(--i))*17ms) var(--curtain-ease) both}
.route-leaving #page-curtain{pointer-events:auto}
.route-leaving #page-curtain>span{animation:route-close .3s calc(var(--i)*15ms) var(--curtain-ease) both}
@keyframes route-open{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes route-close{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* A short five-strip reveal at photo boundaries; scroll is never hijacked. */
[data-curtain-reveal]{isolation:isolate}
.section-curtain{position:absolute;inset:0;display:none;flex-direction:column;z-index:5;pointer-events:none}
.motion-enabled .curtain-ready .section-curtain{display:flex}
.section-curtain>span{flex:1;display:block;margin-block:-.5px;transform-origin:bottom;transform:scaleY(1);background:var(--ink);transition:transform .85s calc((4 - var(--i))*65ms) var(--motion-ease)}
.location-preview .section-curtain>span{background:var(--paper)}
.curtain-open .section-curtain>span{transform:scaleY(0)}
@media(min-width:1600px){.cinematic-hero{min-height:800px}.cinematic-hero .hero-heading{padding-top:50px}.cinematic-hero .hero-intro{margin-top:30px}}
@media(max-width:1150px){.cinematic-hero{min-height:690px}.cinematic-hero h1{font-size:clamp(49px,6vw,68px)}.cinematic-hero .hero-frame{width:78%;mask-image:linear-gradient(90deg,transparent,#000 40%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%)}.cinematic-hero .hero-intro{width:290px}.cinematic-hero .hero-heading{padding-top:22px}}
@media(max-width:900px){.cinematic-hero{height:auto;min-height:710px}.cinematic-hero h1{font-size:55px;max-width:610px}.cinematic-hero .hero-heading{padding-top:28px}.cinematic-hero .hero-frame{width:85%;inset:55px -10px 72px auto;mask-image:linear-gradient(90deg,transparent,#000 46%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 46%)}.hero-image-depth img{object-position:57% center}.cinematic-hero .hero-intro{width:280px}.cinematic-hero .hero-intro .button{font-size:12px;padding:18px}.cinematic-hero .hero-bottom{gap:15px;font-size:9px}.hero-motion-controls{gap:10px}[data-replay-intro]{font-size:9px}.intro-window{clip-path:inset(30% 17% round 3px)}.intro-cross.a{left:17%;top:30%}.intro-cross.b{left:83%;top:30%}.intro-cross.c{left:17%;top:70%}.intro-cross.d{left:83%;top:70%}}
@media(max-width:600px){.cinematic-hero{min-height:0;height:auto;padding-top:0;padding-bottom:0;display:flex;flex-direction:column;isolation:isolate}.cinematic-hero .hero-heading{padding-top:20px;display:block}.cinematic-hero h1{font-size:clamp(35px,9.7vw,54px);margin-top:23px;letter-spacing:-.065em}.cinematic-hero .hero-product{font-size:1.05em;margin-top:.12em}.cinematic-hero #hero-rotator{font-size:1.05em;min-height:1.28em}.cinematic-hero .hero-line{overflow:visible}.cinematic-hero .hero-intro{width:100%;margin-top:17px;display:block}.cinematic-hero .hero-intro p{font-size:13px;max-width:310px;margin-bottom:17px;line-height:1.65}.cinematic-hero .hero-intro p br{display:none}.cinematic-hero .hero-intro .button{font-size:13px;padding:18px 20px;margin:0}.hero-explore{font-size:11px;padding-block:14px;max-width:100%;border:0}.cinematic-hero .hero-frame{position:relative;inset:auto;width:100%;height:350px;margin-top:11px;mask-image:none;-webkit-mask-image:none;z-index:0;border-radius:3px;overflow:hidden}.hero-image-depth{inset:0}.hero-image-depth img{object-position:55% center}.hero-image-depth:after{background:linear-gradient(0deg,#162d2877,transparent 30%)}.cinematic-hero .hero-frame figcaption{font-size:8px;left:15px;right:auto;bottom:22px;color:var(--white)}.cinematic-hero .hero-photo-link{width:38px;height:38px;right:12px;bottom:12px;color:var(--white);border-color:#ffffff77}.cinematic-hero .hero-bottom{position:relative;height:auto;min-height:97px;flex-wrap:wrap;gap:0;padding-block:16px 9px;line-height:1.6;font-size:9px}.cinematic-hero .hero-bottom>span{width:65%}.cinematic-hero .hero-bottom>a{order:2;width:35%;text-align:right;font-size:9px}.hero-motion-controls{order:3;width:100%;justify-content:space-between;margin:12px 0 0}.motion-enabled .hero-motion-controls{border-top:1px solid var(--line);padding-top:8px}[data-replay-intro]{font-size:10px}.intro-window{clip-path:inset(32% 10% round 3px)}.intro-brand{font-size:80px;margin:23px 0}.intro-overline{font-size:8px}.intro-caption{font-size:8px}.intro-cross.a{left:10%;top:32%}.intro-cross.b{left:90%;top:32%}.intro-cross.c{left:10%;top:68%}.intro-cross.d{left:90%;top:68%}#intro-skip{top:20px;font-size:10px}.intro-footer{font-size:9px}.intro-footer b{font-size:34px}}
@media(max-width:360px){.cinematic-hero h1{font-size:32px}.cinematic-hero .hero-product,.cinematic-hero #hero-rotator{font-size:1.08em}.cinematic-hero .hero-frame{height:300px}.cinematic-hero .hero-bottom>span{width:60%;font-size:8px}.cinematic-hero .hero-bottom>a{width:40%;font-size:8px}.intro-brand{font-size:64px}}
@media(prefers-reduced-motion:reduce){#site-intro,#page-curtain,.section-curtain{display:none!important}.cinematic-hero .hero-line>span,.cinematic-hero #hero-rotator,.cinematic-hero .hero-intro,.cinematic-hero .eyebrow{opacity:1!important;transform:none!important;filter:none!important}.kinetic-char{will-change:auto}[data-motion-toggle],[data-replay-intro]{display:none!important}}
