/* Scroll-led story for the four experience stages. */
#scenario .experience-scroll{
  position:relative;width:100vw;height:400vh;margin:54px 0 24px calc(50% - 50vw);
  background:#101419;color:#f5f6f7;isolation:isolate
}
.experience-sticky{position:sticky;top:0;height:100vh;min-height:650px;overflow:hidden}
.experience-inner{
  box-sizing:border-box;display:grid;grid-template-columns:clamp(220px,16vw,300px) clamp(440px,33vw,640px) clamp(680px,48vw,980px);
  gap:clamp(38px,3vw,64px);align-items:center;width:100%;height:100%;margin:auto;padding:70px 0 70px clamp(48px,6vw,120px)
}
.experience-orbit{position:relative;width:min(100%,280px);aspect-ratio:1;display:grid;place-items:center;text-align:center}
.experience-orbit::before{content:"";position:absolute;inset:18%;border:1px solid #27313d;border-radius:50%}
.experience-orbit-track{position:absolute;inset:5%;border:1px solid #476078;border-radius:50%;transform:rotate(var(--orbit-turn,0deg));will-change:transform}
.experience-orbit-track::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:#ff381f;box-shadow:0 0 20px #ff381f80;transform:translateX(-50%)}
.experience-orbit-track span{position:absolute;left:50%;top:0;height:29%;width:1px;background:linear-gradient(#476078,transparent);transform:translateX(-50%)}
.experience-orbit b{font:700 clamp(20px,1.96vw,29px)/1 'Eina03',sans-serif;letter-spacing:-.05em;transform:translateY(-10px)}
.experience-orbit small{position:absolute;top:57%;font:600 9px/1.4 'Eina03',sans-serif;letter-spacing:.16em;color:#8da0b4}
.orbit-point{position:absolute;z-index:1;display:grid;place-items:center;width:36px;height:28px;border:1px solid #344150;border-radius:20px;background:#101419;color:#9aafc4;font:600 11px 'Eina03',sans-serif}
.orbit-point-1{top:-4px;left:calc(50% - 18px)}.orbit-point-2{right:-8px;top:calc(50% - 14px)}
.orbit-point-3{bottom:-4px;left:calc(50% - 18px)}.orbit-point-4{left:-8px;top:calc(50% - 14px)}
.experience-index{display:flex;justify-content:space-between;gap:15px;color:#8da0b4;font:600 10px 'Eina03',sans-serif;letter-spacing:.15em}
.experience-index strong{color:#ff5b45;font-weight:700}
.experience-panels{position:relative;height:285px;margin:25px 0 34px}
.experience-panel{position:absolute;inset:0;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.experience-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.experience-kicker{color:#ff6b59;font-size:.77rem;font-weight:700;letter-spacing:.09em}
#scenario .experience-panel h3{color:#fff;font-size:clamp(30px,3.2vw,46px);line-height:1.2;margin:20px 0 25px;letter-spacing:-.05em}
#scenario .experience-panel p{color:#d0d8e1;font-size:clamp(.95rem,1.25vw,1.1rem);line-height:1.9;margin:0}
.experience-progress{height:2px;background:#344150;overflow:hidden}
.experience-progress span{display:block;width:var(--story-progress,0%);height:100%;background:#ff381f;transition:width .08s linear}
.experience-visual{position:relative;width:calc(100% + 120px);margin:0 0 0 clamp(70px,5vw,110px);min-width:0;border:1px solid #344150;border-radius:12px;overflow:hidden;box-shadow:0 34px 80px #0008;background:#0c1720}
.experience-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.experience-visual figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:9px 14px;background:#0b111bd9;color:#a9bacb;font:600 9px 'Eina03',sans-serif;letter-spacing:.15em}
@media(max-width:1100px){.experience-inner{grid-template-columns:170px minmax(360px,42vw) minmax(540px,55vw);gap:24px;padding-left:36px}.experience-orbit{width:170px}.experience-visual{margin-left:40px}}
@media(max-width:900px){
  #scenario .experience-scroll{height:auto;width:100vw;margin-top:36px}
  .experience-sticky{position:static;height:auto;min-height:0;overflow:visible}
  .experience-inner{display:block;padding:58px 24px 52px;max-width:720px}
  .experience-orbit{width:min(100%,280px);margin:0 auto 45px}.experience-orbit b{font-size:29px}
  .experience-panels{height:auto;margin:26px 0 32px;display:grid;gap:28px}
  .experience-panel{position:static;opacity:1;transform:none;pointer-events:auto;border-top:1px solid #344150;padding-top:22px;transition:none}
  #scenario .experience-panel h3{font-size:29px;margin:10px 0 12px}
  .experience-progress{display:none}.experience-visual{width:100%;margin:42px 0 0}
}
@media(max-width:480px){.experience-inner{padding:45px 18px}.experience-orbit{margin-bottom:34px}.experience-visual{border-radius:6px}.experience-visual figcaption{font-size:7px}}
@media(prefers-reduced-motion:reduce){
  #scenario .experience-scroll{height:auto}.experience-sticky{position:static;height:auto;min-height:0}
  .experience-inner{display:block;max-width:860px;padding:58px 24px}.experience-orbit{margin:0 auto 45px}
  .experience-panels{height:auto;display:grid;gap:28px}.experience-panel{position:static;opacity:1;transform:none;border-top:1px solid #344150;padding-top:22px;transition:none}
  .experience-progress{display:none}.experience-visual{width:100%;margin:40px 0 0}
}