/* One stage; a brief entrance, then visitor-controlled product exploration. */
.loop-study{--content:0;--intro:1;--draw:100;--rise:45px;position:relative;height:200svh;background:#010d1f;color:#dee8f9;scroll-margin-top:0;overflow-anchor:none}
.loop-stage{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 71% 50%,#18374866,transparent 48%),#010d1f}
.loop-orbit{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.loop-orbit path{fill:none;stroke-width:1.3;vector-effect:non-scaling-stroke}.orbit-bed{stroke:#2a586c88}#loop-orbit-path{stroke:#ff5270;stroke-dasharray:100;stroke-dashoffset:var(--draw);opacity:calc(.7 - var(--content)*.43)}#loop-orbit-dot{fill:#ff5270;opacity:var(--content)}
.loop-intro{position:absolute;inset:0;z-index:3;opacity:var(--intro);pointer-events:none}
.loop-intro h2{transform:translateY(calc(var(--content)*-70px));position:absolute;inset:18% 5% auto;font-size:min(22.5vw,35vh);line-height:.83;font-weight:900;letter-spacing:-.075em}
.loop-intro h2>span{display:block}.loop-intro h2 em{display:block;margin-left:32%;font:400 .96em/.97 var(--accent);letter-spacing:-.055em;color:#ff5270}
.loop-intro-bottom{position:absolute;left:7%;right:7%;bottom:12%;display:flex;align-items:end;justify-content:space-between;gap:30px}
.loop-intro-bottom p{font-size:clamp(17px,1.8vw,27px);line-height:1.35;color:#92a8ae;letter-spacing:-.02em}.loop-intro-bottom strong{font-weight:600;color:#dee8f9}
#loop-enter{background:transparent;color:#dee8f9;border-bottom:1px solid #dee8f966;padding:12px 0;display:flex;gap:45px;align-items:center;font-size:15px}#loop-enter span{font-size:28px;color:#ff5270}
.loop-composition{position:absolute;inset:0;opacity:var(--content);transform:translateY(var(--rise));z-index:2}
.loop-stage-label{position:absolute;top:14%;left:6%;right:6%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;font-weight:650;color:#92a8ae}.loop-stage-label span:last-child{color:#ff5270;margin-left:auto}
.loop-feature-title{position:absolute;top:22%;left:5.5%;font-size:min(17.7vw,31vh);letter-spacing:-.075em;line-height:.85;font-weight:900;z-index:1;transition:opacity .2s,transform .35s;pointer-events:none}
.loop-feature-copy{position:absolute;left:7%;top:56%;width:31%;z-index:5;transition:opacity .2s,transform .3s}
.loop-human{font-family:var(--accent);font-size:clamp(27px,3vw,46px);font-weight:400;color:#ff5270;letter-spacing:-.045em;transform:rotate(-4deg);transform-origin:left;margin-bottom:22px;line-height:1.08}
#loop-description{font-size:clamp(17px,1.5vw,23px);line-height:1.45;max-width:30ch;letter-spacing:-.02em;color:#b6c8d3}
.loop-watch{display:flex;align-items:center;gap:14px;background:transparent;color:#dee8f9;text-align:left;padding:0;margin-top:25px;font-size:14px;min-height:48px;font-weight:650}.loop-watch small{display:block;font-size:10px;color:#92a8ae;font-weight:500;margin-top:5px;letter-spacing:.05em}
.loop-watch-icon{display:grid;place-items:center;border:1px solid #92a8ae88;border-radius:50%;width:44px;height:44px;font-size:22px;transition:background .2s,color .2s}.loop-watch:hover .loop-watch-icon{background:#ff5270;border-color:#ff5270;color:#010d1f}
.loop-product{position:absolute;left:78%;top:50%;transform:translate(-50%,-50%);width:min(29vw,31.5vh,350px);z-index:4;filter:drop-shadow(0 30px 30px #0005);transition:opacity .2s}
.loop-phone{aspect-ratio:720/1502;position:relative;overflow:hidden;border-radius:14.4% / 6.9%;background:#101117;transform:rotate(calc((1 - var(--content))*7deg));box-shadow:0 0 0 1px #dee8f915}
#loop-preview-video{display:block;width:100%;height:100%;object-fit:cover;background:#101117}
.loop-deck-crop{position:absolute;inset:0;overflow:hidden}.loop-deck-crop img{position:absolute;width:160%;height:135%;max-width:none;left:-30%;top:-10.5%;object-fit:fill}
.loop-preview-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;color:#92a8ae;margin-top:15px;letter-spacing:.015em;min-height:32px}
#loop-preview-toggle{width:34px;height:34px;display:grid;place-items:center;border:1px solid #2a586c;border-radius:50%;color:#dee8f9;background:#010d1f;font-size:11px}#loop-preview-toggle:hover{border-color:#ff5270;color:#ff5270}
.loop-preview-progress{height:1px;background:#2a586c80;margin-top:8px;overflow:hidden}.loop-preview-progress i{display:block;height:100%;background:#ff5270;transform:scaleX(0);transform-origin:left}
.loop-navigation{position:absolute;left:7%;right:7%;bottom:4%;display:flex;align-items:center;gap:25px;z-index:7;border-top:1px solid #dee8f923;padding-top:15px}
.loop-nav{display:flex;justify-content:space-between;gap:20px;flex:1;min-width:0}.loop-nav button{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 10px;position:relative;padding:8px 0 12px;background:transparent;color:#8198a6;font-size:16px;font-weight:650;letter-spacing:-.025em;min-height:44px}.loop-nav-number{font-size:9px;font-weight:500;letter-spacing:.05em;color:#52707f}.loop-nav button i{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#ff5270;transform:scaleX(0);transform-origin:left;transition:transform .3s}.loop-nav button[aria-selected=true]{color:#dee8f9}.loop-nav button[aria-selected=true] .loop-nav-number{color:#ff5270}.loop-nav button[aria-selected=true] i{transform:scaleX(1)}.loop-nav button:hover{color:#dee8f9}.loop-return{font-size:30px;color:#ff5270;font-weight:400}
.loop-study.is-switching .loop-feature-title{opacity:0;transform:translateY(-25px)}.loop-study.is-switching .loop-feature-copy{opacity:0;transform:translateY(16px)}.loop-study.is-switching .loop-product{opacity:0}
.loop-dialog{max-width:760px;width:calc(100% - 32px);max-height:94svh;padding:22px 30px;background:#010d1f;border:1px solid #2a586c;overflow:auto}
.loop-dialog-header{display:flex;justify-content:space-between;align-items:start;gap:20px}.loop-dialog-header>div>span{font-size:9px;color:#92a8ae;letter-spacing:.16em}.loop-dialog h2{font:900 40px/1 var(--display);letter-spacing:-.055em;margin:9px 0 18px}.loop-dialog-header button{width:44px;height:44px;border:1px solid #2a586c;background:transparent;color:#dee8f9;font-size:28px;border-radius:50%}
#loop-full-video{display:block;max-width:100%;width:auto;max-height:65svh;margin:0 auto;background:#010d1f}.loop-dialog p{max-width:46ch;margin:20px auto 0;font-size:15px;line-height:1.4;color:#b6c8d3;text-align:center;text-wrap:balance}.loop-dialog::backdrop{background:#010d1fee;backdrop-filter:blur(10px)}
@media(min-width:701px) and (max-height:760px){.loop-stage{min-height:620px}.loop-feature-copy{top:53%}.loop-human{font-size:31px;margin-bottom:15px}#loop-description{font-size:17px}.loop-watch{margin-top:18px}.loop-product{width:min(29vw,31vh)}.loop-stage-label{top:16%}.loop-feature-title{top:25%}}
@media(min-width:701px) and (max-width:1000px){.loop-feature-title{font-size:17.2vw;top:25%}.loop-feature-copy{width:40%;top:49%;left:6%}.loop-human{font-size:30px}#loop-description{font-size:18px}.loop-product{left:79%;width:min(28vw,31.5vh)}.loop-nav{gap:15px}.loop-nav button{font-size:14px;gap:6px}.loop-return{display:none}.loop-navigation{left:6%;right:6%}.loop-nav-number{font-size:8px}.loop-stage-label{top:17%}}
@media(max-width:700px){
 .loop-study{height:auto;--content:1;--intro:0;--draw:0;--rise:0px}.loop-stage{position:relative;height:auto;min-height:0;padding:76px 6vw 36px;overflow:hidden}
 .loop-orbit{height:780px;top:120px;width:180%;left:-40%;opacity:.7}.loop-intro{display:none}.loop-composition{position:relative;inset:auto;transform:none;opacity:1}
 .loop-stage-label{position:static;font-size:9px;letter-spacing:.13em;margin:25px 0 32px}.loop-feature-title{position:relative;left:-2px;top:auto;font-size:22vw;line-height:.85;margin:0 0 20px;letter-spacing:-.075em}
 .loop-feature-copy{position:relative;left:auto;top:auto;width:100%;display:grid;grid-template-columns:1fr;gap:0}.loop-human{font-size:30px;margin:3px 0 20px;transform:rotate(-3deg)}#loop-description{font-size:17px;line-height:1.4;max-width:31ch}.loop-watch{margin-top:19px;font-size:13px}.loop-watch small{font-size:9px}.loop-watch-icon{width:38px;height:38px;font-size:20px}
 .loop-product{position:relative;left:auto;top:auto;transform:none;width:min(67vw,285px);margin:33px auto 24px}.loop-phone{transform:none}.loop-preview-controls{font-size:10px;margin-top:12px}.loop-navigation{position:relative;inset:auto;display:block;padding-top:18px;margin-top:20px}.loop-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px}.loop-nav button{font-size:17px;justify-content:start;grid-template-columns:auto auto;gap:9px}.loop-return{display:none}.loop-dialog{padding:18px;max-height:94svh}.loop-dialog h2{font-size:32px}#loop-full-video{max-height:62svh}.loop-dialog p{font-size:13px}
}
.motion-reduced .loop-study{height:auto;--content:1;--intro:0;--draw:0;--rise:0px}.motion-reduced .loop-stage{position:relative}.motion-reduced .loop-intro{display:none}
@media(prefers-reduced-motion:reduce){.loop-study{height:auto}.loop-stage{position:relative}.loop-intro{display:none}.loop-composition{opacity:1;transform:none}.loop-phone{transform:none}#loop-orbit-path{stroke-dashoffset:0}.loop-study *{transition:none!important}}

.loop-study[data-feature="explore"] .loop-feature-title{font-size:min(15.4vw,29vh)}
@media(max-width:700px){.loop-study[data-feature="explore"] .loop-feature-title{font-size:19vw}}

/* Scroll sequence: each feature holds for one quarter of the stage height. */
.scroll-loop .loop-stage{position:sticky;top:0}
.scroll-loop .loop-nav button[aria-selected=true] i{transform:scaleX(1)}
@media(max-width:700px){
 .scroll-loop .loop-stage{height:100svh;min-height:600px;padding:0}
 .scroll-loop .loop-composition{position:absolute;inset:0}
 .scroll-loop .loop-stage-label{position:absolute;top:14%;left:6%;right:6%;margin:0}
 .scroll-loop .loop-feature-title{position:absolute;top:20%;left:5%;font-size:18vw;margin:0}
 .scroll-loop[data-feature="explore"] .loop-feature-title{font-size:16vw}
 .scroll-loop .loop-feature-copy{position:absolute;top:40%;left:6%;width:43%}
 .scroll-loop .loop-human{font-size:clamp(21px,4.4vw,29px);margin:0 0 17px}
 .scroll-loop #loop-description{font-size:clamp(14px,2.6vw,17px);line-height:1.35}
 .scroll-loop .loop-watch{gap:8px;font-size:11px;margin-top:16px}
 .scroll-loop .loop-watch-icon{width:30px;height:30px;flex-shrink:0;font-size:17px}
 .scroll-loop .loop-product{position:absolute;left:76%;top:55%;transform:translate(-50%,-50%);width:min(41vw,23vh);margin:0}
 .scroll-loop .loop-preview-controls{font-size:8px;gap:5px;margin-top:8px}
 .scroll-loop #loop-preview-toggle{width:30px;height:30px;flex-shrink:0}
 .scroll-loop .loop-navigation{position:absolute;left:6%;right:6%;bottom:3%;margin:0;padding-top:10px}
 .scroll-loop .loop-nav{gap:3px 15px}
 .scroll-loop .loop-nav button{font-size:14px;padding:6px 0;min-height:36px}
}

/* Separate playback bar: never overlays the explanatory text inside the video. */
.loop-player-controls{display:flex;align-items:center;gap:12px;width:min(100%,480px);margin:12px auto 0;padding:4px 10px 4px 4px;border:1px solid #2a586c;border-radius:14px;background:#091b2c}
.loop-player-controls[hidden]{display:none}
.loop-player-controls button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:10px;background:#ff5270;color:#010d1f;font-size:19px;line-height:1}
.loop-player-time{font:600 12px/1 Urbanist,sans-serif;font-variant-numeric:tabular-nums;color:#dee8f9;min-width:30px;text-align:center}
#loop-player-seek{flex:1;min-width:0;width:auto;height:44px;margin:0;cursor:pointer;accent-color:#ff5270}
.loop-player-controls :focus-visible{outline:2px solid #dee8f9;outline-offset:3px}
#loop-full-video{max-height:min(65svh,calc(94svh - 240px))}
@media(max-width:700px){.loop-player-controls{gap:8px;padding-right:8px}#loop-full-video{max-height:min(62svh,calc(94svh - 230px))}}

/* An unmistakable invitation on the poster, never on the playing walkthrough. */
#loop-phone #loop-preview-toggle{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:grid;place-items:center;border:0;border-radius:inherit;background:radial-gradient(ellipse at center,#010d1f12,transparent 65%);cursor:pointer;color:#010d1f}
.loop-play-disc{position:relative;display:grid;place-items:center;width:clamp(64px,7vw,100px);aspect-ratio:1;border-radius:50%;background:#ff5270;font-size:clamp(24px,2.5vw,36px);padding-left:5px;box-shadow:0 8px 35px #010d1f70,0 0 0 9px #ff527030;transition:transform .3s,box-shadow .3s}
.loop-play-disc:before{content:'';position:absolute;inset:-16px;border:1px solid #ff859a99;border-radius:50%;transition:transform .4s,border-color .3s}
.loop-play-disc:after{content:'';position:absolute;inset:-24px;border:1px solid #dee8f945;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-25deg);transition:transform .5s}
#loop-preview-toggle:hover .loop-play-disc,#loop-preview-toggle:focus-visible .loop-play-disc{transform:scale(1.08);box-shadow:0 10px 40px #010d1f80,0 0 0 12px #ff527030}
#loop-preview-toggle:hover .loop-play-disc:after{transform:rotate(45deg)}
#loop-preview-toggle:focus-visible{outline:2px solid #dee8f9;outline-offset:-4px}
.loop-product .loop-preview-controls{display:block;margin-top:18px;min-height:44px}
#loop-preview-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:8px 0 10px;border:0;border-bottom:2px solid #ff5270;background:transparent;color:#dee8f9;font:800 clamp(11px,1.1vw,16px)/1.2 Urbanist,sans-serif;text-transform:uppercase;letter-spacing:.07em;text-align:left;cursor:pointer}
.loop-cta-arrow{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#ff52701f;color:#ff5270;font-size:23px;transition:transform .25s,background .25s}
#loop-preview-cta:hover .loop-cta-arrow{transform:translate(2px,-2px);background:#ff527035}
#loop-preview-cta:focus-visible{outline:2px solid #ff5270;outline-offset:5px}
@media(max-width:700px){.loop-product .loop-preview-controls{margin-top:12px}.loop-play-disc{width:62px;font-size:24px}.loop-play-disc:before{inset:-11px}.loop-play-disc:after{inset:-18px}#loop-preview-cta{font-size:11px;letter-spacing:.035em}.loop-cta-arrow{width:25px;height:25px;font-size:20px}}
@media(prefers-reduced-motion:reduce){.loop-play-disc,.loop-play-disc:before,.loop-play-disc:after,.loop-cta-arrow{transition:none}}
.motion-reduced .loop-play-disc,.motion-reduced .loop-play-disc:before,.motion-reduced .loop-play-disc:after,.motion-reduced .loop-cta-arrow{transition:none}