/* Step 4 three-shot sequence — storyboard 967:9026. */

.feature{position:relative;width:100%!important;max-width:none!important;padding:0 0 94px;overflow-anchor:none}
.step-card{position:relative;width:100%}
.step-showcase{
  isolation:isolate;
  width:100vw!important;
  height:auto!important;
  aspect-ratio:1512/863!important;
  margin-inline:auto;
  overflow:hidden!important;
  outline:none;
  border-radius:0;
  background:#eae9e4!important;
  transform-origin:50% 50%;
  transition:width .52s cubic-bezier(.22,.72,.22,1),aspect-ratio .52s cubic-bezier(.22,.72,.22,1),border-radius .52s cubic-bezier(.22,.72,.22,1),box-shadow .52s ease;
}
.step-showcase:focus-visible{outline:3px solid #00a9ff;outline-offset:6px}
.step-scene{container-type:inline-size;position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:1512/863;overflow:hidden;border-radius:0;background:#eae9e4;transform-origin:50% 50%;transition:top .52s cubic-bezier(.22,.72,.22,1),border-radius .52s cubic-bezier(.22,.72,.22,1)}
.feature.is-step-packing .step-showcase{width:min(1100px,calc(100vw - 48px))!important;aspect-ratio:11/5!important;border-radius:24px;box-shadow:0 16px 48px rgba(37,48,62,.08)}
.feature.is-step-packing .step-scene{top:-3.344cqw;border-radius:24px}
.feature.is-scroll-driven .step-showcase,.feature.is-scroll-driven .step-scene{transition:none!important}
.step-layer{position:absolute;display:block;max-width:none!important;pointer-events:none;user-select:none}
.step-layer img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transform:none!important}

/* Exact Figma placement, mapped from the full 1512 × 863 frame. The scene
   keeps this coordinate system while its parent shortens to the 1100 × 500
   card, so the final state is a crop rather than a distorted resize. */
.step-paper{z-index:0;left:-46.652%;top:.62%;width:157.322%!important;height:155.14%!important;object-fit:cover;transform:none!important}
.step-big-circle{z-index:2;left:46.716%;top:-82.397%;width:90.238%!important;height:172.803%!important;transform:none!important}
.step-black-line{z-index:5;left:60.359%;top:22.029%;width:37.483%!important;height:6.882%!important;transform:none}
.step-right-curve{z-index:4;left:84.481%;top:22.029%;width:13.361%!important;height:50.302%!important;transform:none!important}
.step-blue-dot{z-index:28;left:96.608%;top:20.129%;width:2.169%!important;height:3.8%!important;transform:none!important}

.step-orbit{position:absolute;z-index:14;inset:0;display:block;pointer-events:none;transform:rotate(0deg);opacity:1}
.step-orbit--big{transform-origin:91.835% 4.005%}
.step-orbit--small{z-index:18;transform-origin:67.92% 19.7%}
.step-blue-line{left:50.184%;top:22.029%;width:47.66%!important;height:17.155%!important;transform:none}
.step-blue-sky{left:50.596%;top:39.184%;width:19.527%!important;height:25.766%!important;overflow:hidden}
.step-blue-sky img{object-position:center 50%}
.step-butterfly{left:53.593%;top:45.547%;width:21.689%!important;height:24.334%!important;overflow:hidden}
.step-butterfly img{position:absolute;left:0;top:-46.17%;height:195.19%!important;object-fit:fill!important}
.step-neuron-card{left:64.546%;top:45.471%;width:10.259%!important;height:16.263%!important;overflow:hidden;background:#fff}
.step-neuron-card img{object-fit:cover!important}
.step-neuron{left:60.652%;top:44.693%;width:15.648%!important;height:20.258%!important;object-fit:contain;transform:rotate(-12.32deg)!important}

.step-ellipse-outline{left:62.739%;top:7.037%;width:10.344%!important;height:26.077%!important;transform:none!important}
.step-ellipse-art{left:63.57%;top:6.366%;width:9.764%!important;height:25.652%!important;overflow:hidden}
.step-ellipse-art img{object-fit:contain!important}
.step-wave{left:60.397%;top:16.032%;width:8.31%!important;height:12.878%!important;overflow:hidden;background:#fff}
.step-wave img{position:absolute;left:-.09%;top:-54.04%;width:100.09%!important;height:166.15%!important;object-fit:fill!important}

.step-letter{
  z-index:23;left:73.631%;top:32.447%;width:4.16%!important;height:7.106%!important;
  display:grid;place-items:center;border:1px solid rgba(0,0,0,.68);background:#f9f8f5;
  color:#080808;font-family:Georgia,"Times New Roman",serif;font-size:4cqw;font-weight:700;line-height:1;
}
.step-letter:before,.step-letter:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#111}
.step-letter:before{left:-4px;top:-4px}.step-letter:after{right:-4px;bottom:-4px}

.step-copy{z-index:25;left:9.094%;top:35.647%;width:29.91%}
.step-copy h2{margin:0 0 .818cqw;font-family:"Source Han Serif CN","Noto Serif SC",serif;font-size:6.01cqw;font-weight:700;line-height:1.442;letter-spacing:-.12cqw}
.step-copy p{margin:0 0 2.636cqw;font-family:"Source Han Serif CN","Noto Serif SC",serif;font-size:1.953cqw;font-weight:700;line-height:1.422;white-space:nowrap}
.step-copy span{display:inline-flex;height:3.637cqw;align-items:center;padding:0 1.455cqw;border-radius:.727cqw;background:#191919;color:#fff;font-family:var(--sans);font-size:1.272cqw}
.step-final-composite{position:absolute;z-index:50;left:0;top:0;display:none;width:100%!important;height:auto!important;max-width:none!important;aspect-ratio:1512/863;object-fit:cover;pointer-events:none;transform:none!important}
.feature.is-step-complete .step-layer,.feature.is-step-complete .step-orbit,.feature.is-step-complete .step-copy{visibility:hidden}
.feature.is-step-complete .step-final-composite{display:block}
.step-hotspot{z-index:70}

/* On entry, keep the countdown absent. It only follows after the scene locks. */
.motion-enabled .feature .countdown-bar{
  width:min(1100px,calc(100vw - 48px));
  margin:16px auto 0;
  opacity:0;
  translate:0 16px;
  scale:.995;
  filter:none;
  pointer-events:none;
  transition:opacity .36s ease,translate .48s cubic-bezier(.22,.72,.22,1),scale .48s cubic-bezier(.22,.72,.22,1);
}
.motion-enabled .feature.is-countdown-visible .countdown-bar{opacity:1;translate:0 0;scale:1;filter:blur(0);pointer-events:auto}
.motion-enabled .feature.is-scroll-driven .countdown-bar{translate:0 0;scale:1;filter:none;transition:none!important}
.countdown span{overflow:hidden}
.countdown b{position:relative;display:block;width:100%;height:28px;overflow:hidden;color:transparent;transform-origin:50% 50%}
.countdown b::before,.countdown b::after{position:absolute;inset:0;display:grid;place-items:center;color:#111;font:500 24px/28px var(--sans);letter-spacing:-1.4px;content:""}
.countdown b::before{content:attr(data-prev);transform:translateY(-105%)}
.countdown b::after{content:attr(data-current);transform:translateY(0)}
.countdown b.is-stepping::before{animation:step4PrevValue .08s cubic-bezier(.25,.7,.35,1) both}
.countdown b.is-stepping::after{animation:step4NextValue .08s cubic-bezier(.25,.7,.35,1) both}
@keyframes step4PrevValue{from{transform:translateY(0)}to{transform:translateY(-105%)}}
@keyframes step4NextValue{from{transform:translateY(105%)}to{transform:translateY(0)}}

/* Storyboard 967:9026: a single set of layers moves from frame 966:8864 to
   frame 966:8908. There is deliberately no second composite image, so text,
   artwork and buttons can never double-expose during the transition. */
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-blue-line{transform:translate(6.166cqw,0) scale(.87,2.04)!important;transform-origin:100% 0}
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-blue-sky{translate:5.769cqw 10.203cqw}
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-butterfly{translate:7.055cqw 12.892cqw}
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-neuron-card,.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-neuron{translate:9.321cqw 14.042cqw}
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-black-line{transform:translateX(10.011cqw) scale(.732,1.162)!important;transform-origin:100% 0}
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-orbit--small{translate:1.695cqw 8.007cqw}
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-letter{translate:3.078cqw 8.056cqw}
.feature:not(.is-step-animating):not(.is-step-packing):not(.is-step-settled) .step-copy{translate:0 5.91cqw;opacity:.6}

.feature.is-step-animating .step-blue-line{animation:step4BlueLine 1.05s cubic-bezier(.18,.76,.26,1) .02s both}
.feature.is-step-animating .step-blue-sky{animation:step4Sky 1s cubic-bezier(.18,.76,.26,1) .08s both}
.feature.is-step-animating .step-butterfly{animation:step4Butterfly .98s cubic-bezier(.18,.76,.26,1) .12s both}
.feature.is-step-animating .step-neuron-card,.feature.is-step-animating .step-neuron{animation:step4Neuron .96s cubic-bezier(.18,.76,.26,1) .16s both}
.feature.is-step-animating .step-black-line{animation:step4BlackLine 1.02s cubic-bezier(.18,.76,.26,1) .05s both}
.feature.is-step-animating .step-orbit--small{animation:step4SmallGroup .94s cubic-bezier(.18,.76,.26,1) .13s both}
.feature.is-step-animating .step-letter{animation:step4Letter .82s cubic-bezier(.18,.76,.26,1) .25s both}
.feature.is-step-animating .step-copy{animation:step4Copy .8s cubic-bezier(.18,.76,.26,1) .05s both}

@keyframes step4BlueLine{0%{transform:translate(6.166cqw,0) rotate(14deg) scale(.87,2.04)}58%{transform:translate(1.15cqw,-1.4cqw) rotate(-3deg) scale(.98,1.05)}100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes step4Sky{0%{translate:5.769cqw 10.203cqw;rotate:18deg}55%{translate:-.8cqw 1.2cqw;rotate:-3deg}100%{translate:0 0;rotate:0deg}}
@keyframes step4Butterfly{0%{translate:7.055cqw 12.892cqw;rotate:22deg}58%{translate:-.7cqw 1cqw;rotate:-4deg}100%{translate:0 0;rotate:0deg}}
@keyframes step4Neuron{0%{translate:9.321cqw 14.042cqw;rotate:25deg}58%{translate:-.5cqw .8cqw;rotate:-3deg}100%{translate:0 0;rotate:0deg}}
@keyframes step4BlackLine{0%{transform:translateX(10.011cqw) scale(.732,1.162)}100%{transform:translateX(0) scale(1)}}
@keyframes step4SmallGroup{0%{translate:1.695cqw 8.007cqw;rotate:17deg}58%{translate:-.55cqw .65cqw;rotate:-3deg}100%{translate:0 0;rotate:0deg}}
@keyframes step4Letter{0%{translate:3.078cqw 8.056cqw;rotate:14deg}70%{translate:-.35cqw .45cqw;rotate:-2deg}100%{translate:0 0;rotate:0deg}}
@keyframes step4Copy{0%{translate:0 5.91cqw;opacity:.6}100%{translate:0 0;opacity:1}}

@media(max-width:800px){
  .feature{padding-top:0}
  .feature.is-step-packing .step-showcase{width:calc(100vw - 32px)!important;border-radius:16px}
  .feature.is-step-packing .step-scene{border-radius:16px}
  .motion-enabled .feature .countdown-bar{width:calc(100vw - 32px)}
}

@media(max-width:480px){
  .feature{padding-top:0}
  .feature.is-step-packing .step-showcase{width:calc(100vw - 24px)!important}
  .motion-enabled .feature .countdown-bar{width:calc(100vw - 24px)}
  .step-copy{left:7.5%;top:42%;width:37%}
  .step-copy p{white-space:normal}
  .step-letter{font-size:clamp(18px,6vw,30px)}
}

@media(prefers-reduced-motion:reduce){
  .feature.is-step-animating .step-layer,.feature.is-step-animating .step-orbit,.feature.is-step-animating .step-letter,.feature.is-step-animating .step-copy{animation:none!important}
  .motion-enabled .feature.is-countdown-visible .countdown-bar{opacity:1;translate:0 0;scale:1;filter:none;pointer-events:auto}
  .countdown b.is-stepping::before,.countdown b.is-stepping::after{animation:none!important}
}