/* One product story, four scenes. No graphics or animation libraries to download. */
.hero-preview{position:relative;isolation:isolate}
.story-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 -8px 30px}
.story-steps button{position:relative;min-width:0;min-height:48px;padding:8px 0 12px;border:0;border-bottom:1px solid #28313D;background:transparent;text-align:left;color:#92A1B4;font:inherit;cursor:pointer}
.story-steps button span{display:block;font-size:9px;letter-spacing:.12em;margin-bottom:7px;font-variant-numeric:tabular-nums}
.story-steps button b{font-size:11px;font-weight:500}
.story-steps button:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#78C8FF;transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px #78C8FF70}
.story-steps button[aria-pressed=true]{color:#EEF3FA}
.story-steps button[aria-pressed=true] span{color:#78C8FF}
.story-steps button[aria-pressed=true]:after{animation:story-time 5.8s linear both}
.story-steps button:focus-visible{outline:2px solid #78C8FF;outline-offset:5px;border-radius:3px}
/* Keep the interactive iframe on a stable plane: no hit-target movement on click. */
.cinematic-stage{position:relative}
.device-shell{z-index:2;transform:none;transition:none}
.stage-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none}
.stage-atmosphere:before{content:'';position:absolute;inset:5% -25%;border-radius:50%;background:radial-gradient(ellipse,#1a3a552e,transparent 65%);transition:opacity 1.6s}
.orbit{position:absolute;width:145%;height:60%;left:-22%;top:21%;border:1px solid #78C8FF12;border-radius:50%;transform:rotate(-28deg);box-shadow:0 -1px 0 #78C8FF12}
.orbit-two{width:135%;height:58%;left:-17%;top:22%;transform:rotate(28deg);border-color:#b6788d14}
.orbit-light{position:absolute;left:-9%;top:40%;width:5px;height:5px;border-radius:50%;background:#B5E2FF;box-shadow:0 0 5px #78C8FF,0 0 24px 7px #78C8FF40;animation:light-path 23.2s ease-in-out infinite}
.stage-floor{position:absolute;bottom:-20px;left:5%;width:90%;height:45px;border-radius:50%;background:radial-gradient(ellipse,#78C8FF27,transparent 68%);filter:blur(12px);animation:floor-breathe 5.8s ease-in-out infinite}
.story-flyout{position:absolute;z-index:3;pointer-events:none;border:1px solid #3A4859;background:linear-gradient(135deg,#1B222CF2,#14181FF5);border-radius:18px;box-shadow:0 20px 45px #0008,inset 0 1px 0 #ffffff09;animation:flyout-arrive 1s cubic-bezier(.16,1,.3,1) both}
.flyout-primary{width:176px;right:-125px;top:18%;padding:17px;transform:rotate(3deg)}
.flyout-eyebrow{display:block;font-size:8px;letter-spacing:.14em;color:#92A1B4;margin-bottom:15px}
.story-symbol{display:block;width:25px;height:25px;color:#78C8FF;margin-bottom:12px;filter:drop-shadow(0 0 8px #78C8FF35)}
.flyout-title{display:block;font-size:13px;line-height:1.4;font-weight:600;color:#EEF3FA}
.flyout-detail{display:block;font-size:10px;line-height:1.6;color:#A2AFBF;margin-top:6px}
.flyout-meter{height:3px;margin-top:16px;background:#ffffff0D;border-radius:99px;overflow:hidden}
.flyout-meter span{display:block;width:100%;height:100%;background:#78C8FF;transform-origin:left;animation:story-time 5.8s cubic-bezier(.2,.8,.2,1) both}
.flyout-secondary{left:-100px;bottom:36%;max-width:150px;padding:14px 17px;transform:rotate(-4deg);display:grid;grid-template-columns:8px 1fr;gap:5px 10px}
.story-flyout[hidden]{display:none}
.flyout-status{width:6px;height:6px;background:#78C8FF;border-radius:50%;margin-top:5px;box-shadow:0 0 10px #78C8FF70}
.flyout-value{font-size:14px;font-weight:600;color:#EEF3FA;letter-spacing:-.01em}
.flyout-caption{grid-column:2;font-size:9px;color:#A2AFBF;line-height:1.5}
.hero-preview[data-story="1"] .flyout-primary{top:28%;transform:rotate(-3deg)}
.hero-preview[data-story="2"] .flyout-primary{top:15%;transform:rotate(2deg)}
.hero-preview[data-story="3"] .flyout-primary{top:50%;transform:rotate(-2deg);border-color:#315674}
.hero-preview[data-story="3"] .story-symbol{filter:drop-shadow(0 0 10px #78C8FF80)}
.story-description{font-size:12px;color:#A2AFBF;line-height:1.7;text-align:center;margin:27px -12px 0;min-height:41px}
.device-caption{margin-top:7px}
body[data-motion=paused] .hero-preview *,body[data-stage-suspended=true] .hero-preview *{animation-play-state:paused!important}
body[data-motion=paused] .story-flyout{animation:none}
@keyframes story-time{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes flyout-arrive{from{opacity:0;translate:0 24px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes light-path{0%,100%{transform:translate(0,0);opacity:.4}25%{transform:translate(350px,-160px);opacity:1}50%{transform:translate(390px,150px);opacity:.5}75%{transform:translate(60px,320px);opacity:1}}
@keyframes floor-breathe{0%,100%{opacity:.55;transform:scaleX(.85)}50%{opacity:1;transform:scaleX(1.1)}}
@media(min-width:1101px){.hero{gap:72px;padding-right:84px;padding-top:145px}.hero h1{font-size:56px}.hero-preview{max-width:360px}}
@media(max-width:1100px){.story-flyout{display:none}.orbit{width:120%;left:-10%}.orbit-two{width:115%;left:-7%}.orbit-light{display:none}}
@media(max-width:600px){.story-steps{margin:0 0 24px;gap:9px}.story-steps button b{font-size:10px}.story-description{margin:23px 0 0;font-size:11px}.stage-atmosphere{inset:0 -10px;overflow:hidden}.orbit{width:108%;left:-4%}.orbit-two{width:108%;left:-4%}}
@media(prefers-reduced-motion:reduce){.hero-preview *,.hero-preview *:before,.hero-preview *:after{animation:none!important;transition:none!important}.device-shell{transform:none!important;will-change:auto}.story-steps button[aria-pressed=true]:after,.flyout-meter span{transform:scaleX(1)}.orbit-light{display:none}}

@media(pointer:coarse){.stage-floor{display:none}.story-flyout{animation-duration:.25s}}