/* Motion scenes share the existing palette and typography. */
.motion-hero{grid-template-columns:1.1fr 1fr;align-items:center;min-height:650px;gap:3%;overflow:hidden}
.motion-hero .hero-copy{text-align:left;max-width:700px}
.motion-brand{position:relative;height:460px;min-width:0;isolation:isolate}
.motion-brand:before{content:"";position:absolute;inset:15%;background:radial-gradient(ellipse,#44799120,transparent 68%);border-radius:50%;z-index:-1}
.motion-brand-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .7s}
.motion-brand.ready .motion-brand-canvas{opacity:1}
.motion-brand-fallback{position:absolute;width:65%;height:65%;object-fit:contain;inset:17.5%;transform:scale(.72);transition:opacity .5s}
.motion-brand.ready .motion-brand-fallback{opacity:0}
.motion-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.motion-line-inner{display:block;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .85s;transition-delay:var(--line-delay,0ms)}
.motion-enabled .motion-reveal:not(.is-visible) .motion-line-inner{transform:translateY(110%);opacity:0}
.motion-reveal.is-visible .motion-line-inner{transform:translateY(0);opacity:1}
.product-home .experience{display:block;padding-bottom:20px}
.product-home .experience-copy{text-align:center;margin:auto;max-width:800px}
.product-home .experience-copy>p{margin-inline:auto;max-width:480px}
.product-home .experience-details{display:flex;justify-content:center;gap:25px;margin-top:25px}
.product-home .experience-details span{font-size:11px;border:0}
.motion-sequence{height:150vh;min-height:1050px;margin-top:35px;position:relative}
.motion-stage{height:76vh;min-height:510px;max-height:740px;position:sticky;top:12vh;overflow:hidden;border-radius:26px;perspective:1100px;background:radial-gradient(ellipse at 70% 55%,#44799112,transparent 65%)}
.motion-thought{position:absolute;left:5%;top:50%;width:40%;transform:translateY(-50%) translateX(calc(var(--scene-progress,0)*-90px));opacity:calc(1 - var(--scene-progress,0)*2.2)}
.motion-thought>p{font-size:clamp(32px,4vw,58px);line-height:1.12;margin:22px 0;letter-spacing:-.045em}
.motion-thought em{font-style:normal;color:var(--sand)}
.motion-connection{display:flex;align-items:center;gap:10px;width:70%;color:var(--sand);font-size:25px}
.motion-connection i{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--sand));position:relative}
.motion-connection i:after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--sand);box-shadow:0 0 15px var(--sand)}
.product-home .motion-stage .showcase-player{position:absolute;right:4%;top:4%;height:92%;width:calc(38% + var(--scene-progress,0)*54%);max-width:none;border-radius:22px;transform:rotateY(calc((1 - var(--scene-progress,0))*-9deg));box-shadow:0 30px 70px #0004;background:var(--white);will-change:width,transform}
.product-home .motion-stage .showcase-player video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:transparent}
.motion-tilt{position:relative;transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;isolation:isolate;overflow:hidden}
.motion-tilt:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),#ffffff14,transparent 60%);opacity:0;transition:opacity .35s;z-index:-1}
.motion-tilt:hover{transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 20px 45px #0002}
.motion-tilt:hover:after{opacity:1}
@media(max-width:740px){.motion-hero{grid-template-columns:1fr;min-height:0;gap:0}.motion-hero .hero-copy{text-align:center}.motion-hero .lead{margin-inline:auto}.motion-hero .hero-actions,.motion-hero .hero-meta{justify-content:center}.motion-brand{height:310px;width:100%;max-width:430px;margin:auto}.product-home .experience-details{gap:12px;flex-wrap:wrap}.motion-sequence{height:115vh;min-height:800px}.motion-stage{top:8vh;min-height:530px;height:80vh}.motion-thought{top:8%;left:7%;width:86%;transform:translateX(calc(var(--scene-progress,0)*-40px))}.motion-thought>p{font-size:32px;margin-block:12px}.motion-connection{display:none}.product-home .motion-stage .showcase-player{top:calc(31% - var(--scene-progress,0)*27%);height:calc(65% + var(--scene-progress,0)*27%);width:calc(72% + var(--scene-progress,0)*20%);right:4%;transform:none}.motion-thought .eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){.motion-line-inner{transition:none!important;transform:none!important;opacity:1!important}.motion-tilt{transform:none!important}.motion-sequence{height:auto;min-height:0}.motion-stage{position:relative;top:auto}.motion-brand-canvas{transition:none}}

/* A conversation, staged as two human portraits rather than an abstract brand object. */
.conversation-scene{position:relative;width:100%;height:460px;max-width:500px;margin:auto;isolation:isolate}
.conversation-person{position:absolute;margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:0 15px 35px #0002}
.conversation-person img,.conversation-person video{display:block;width:100%;height:100%;object-fit:cover}
.conversation-sender{left:0;top:35px;width:45%;height:280px;transform:rotate(-3deg)}
.conversation-receiver{right:0;top:110px;width:48%;height:310px;transform:rotate(3deg)}
.conversation-person figcaption{position:absolute;bottom:0;left:0;right:0;padding:28px 12px 13px;display:flex;align-items:center;gap:7px;background:linear-gradient(transparent,#071b28d9);color:#f8f6f1;font-size:10px}
.conversation-dot{width:5px;height:5px;border-radius:50%;background:#c6a17d}
.conversation-message,.conversation-response{position:absolute;z-index:3;max-width:75%;border:1px solid var(--line);border-radius:14px;padding:13px 18px;font-size:13px;line-height:1.4;box-shadow:0 8px 24px #0002;white-space:nowrap}
.conversation-message{top:17px;left:12%;background:var(--white);color:var(--ink)}
.conversation-response{bottom:32px;right:5%;background:var(--sand);color:var(--ivory)}
.conversation-caption{position:absolute;bottom:-16px;width:100%;text-align:center;font-size:11px;color:var(--muted);letter-spacing:.02em}
.conversation-thread{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.conversation-thread path{fill:none;stroke:var(--sand);stroke-width:1;stroke-dasharray:420;stroke-dashoffset:420;opacity:.5}
.conversation-visible .conversation-message{animation:conversation-speech 10s cubic-bezier(.22,1,.36,1) infinite}
.conversation-visible .conversation-response{animation:conversation-reply 10s cubic-bezier(.22,1,.36,1) infinite}
.conversation-visible .conversation-thread path{animation:conversation-link 10s ease infinite}
.conversation-visible .conversation-receiver{animation:conversation-listen 10s ease infinite}
.conversation-paused *,.conversation-scene:not(.conversation-visible) *{animation-play-state:paused!important}
@keyframes conversation-speech{0%,5%{opacity:0;transform:translateY(10px) scale(.97)}15%,78%{opacity:1;transform:translateY(0) scale(1)}92%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes conversation-reply{0%,32%{opacity:0;transform:translateY(10px) scale(.97)}45%,80%{opacity:1;transform:translateY(0) scale(1)}94%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes conversation-link{0%,17%{stroke-dashoffset:420;opacity:0}35%,72%{stroke-dashoffset:0;opacity:.5}90%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes conversation-listen{0%,25%,100%{transform:rotate(3deg);box-shadow:0 15px 35px #0002}45%,75%{transform:rotate(0deg) translateY(-4px);box-shadow:0 15px 35px #0002,0 0 0 1px #c6a17d44}}
@media(max-width:740px){.conversation-scene{height:400px;max-width:370px;margin-top:25px}.conversation-sender{height:240px;top:25px}.conversation-receiver{height:270px;top:85px}.conversation-message,.conversation-response{font-size:11px;padding:10px 13px}.conversation-message{top:5px}.conversation-response{bottom:30px}.conversation-caption{bottom:0}}
@media(prefers-reduced-motion:reduce){.conversation-visible *{animation:none!important}.conversation-thread path{stroke-dashoffset:0}.conversation-message,.conversation-response{opacity:1}}

/* A soft handover of attention from the speaker to the signer. */
.conversation-person:after{content:"";position:absolute;inset:0;border:1px solid var(--sand);border-radius:inherit;box-shadow:inset 0 0 14px #c6a17d16;pointer-events:none;opacity:0}
.conversation-visible .conversation-sender:after{animation:conversation-speaker-light 10s ease-in-out infinite}
.conversation-visible .conversation-receiver:after{animation:conversation-signer-light 10s ease-in-out infinite}
.conversation-visible .conversation-thread .conversation-track{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.2}
.conversation-thread .conversation-pulse{stroke:var(--sand);stroke-width:2;stroke-linecap:round;stroke-dasharray:7 100;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 4px #c6a17d88)}
.conversation-visible .conversation-thread .conversation-pulse{animation:conversation-pulse-travel 10s cubic-bezier(.4,0,.2,1) infinite}
@keyframes conversation-speaker-light{0%,100%{opacity:0}8%,24%{opacity:.75}38%,92%{opacity:0}}
@keyframes conversation-signer-light{0%,32%,100%{opacity:0}45%,74%{opacity:.8}90%{opacity:0}}
@keyframes conversation-pulse-travel{0%,16%{stroke-dashoffset:100;opacity:0}20%{stroke-dashoffset:100;opacity:.9}42%{stroke-dashoffset:-7;opacity:.9}47%,100%{stroke-dashoffset:-7;opacity:0}}
.conversation-paused .conversation-person:after,.conversation-scene:not(.conversation-visible) .conversation-person:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.conversation-visible .conversation-person:after,.conversation-visible .conversation-thread .conversation-pulse{animation:none;opacity:0}.conversation-visible .conversation-thread .conversation-track{opacity:.2}}