:root{color-scheme:dark;--black:#010203;--white:#eee;--muted:#aaa;--line:#ffffff38;--red:#74272b;font-family:Arial,'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;background:var(--black);color:var(--white)}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait;opacity:.45}button:focus-visible{outline:2px solid #fff;outline-offset:7px}button{border:0;background:none}img{max-width:100%;height:auto}#experience{height:100svh;min-height:660px;position:relative;overflow:hidden;isolation:isolate;background:var(--black)}
.atmosphere{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 68% 54%,#71838b28,transparent 58%),linear-gradient(180deg,#020303 10%,#0c1216 47%,#28343b 65%,#10171c 69%,#030506 92%)}
#scene{position:absolute;inset:0;z-index:-2;touch-action:pan-y}#scene canvas{width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,#0007,transparent 67%),linear-gradient(180deg,#0007,transparent 29%,transparent 65%,#000 100%)}.vignette::after{content:'';position:absolute;inset:0;opacity:.18;background-image:radial-gradient(#000 .55px,transparent .65px);background-size:3px 3px}
.masthead{position:absolute;inset:40px 40px auto;display:flex;justify-content:space-between;align-items:flex-start;z-index:5}.brand-home{padding:0;width:160px;text-align:left}.brand-home:disabled{opacity:1}.brand{width:160px;display:block}.header-tools{display:flex;align-items:center;gap:15px}.languages{display:flex;align-items:center;gap:7px;font-size:19px;letter-spacing:1px}.languages>span{color:#888}.languages button{padding:5px 7px;min-height:32px;font-size:18px;line-height:1.2}.languages button[aria-pressed="true"]{background:#eee;color:#080808;font-weight:700}.languages button:not([aria-pressed="true"]):hover{background:#ffffff20}.home-icon{width:27px;height:34px;padding:2px}.home-icon svg{width:23px;fill:currentColor}.menu-toggle{margin-left:65px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 3px;font-size:15px;letter-spacing:1px;font-weight:700}.hamburger{position:relative;width:40px;height:22px;display:block}.hamburger i{height:1px;width:100%;position:absolute;left:4px;top:0;background:currentColor;transition:transform .25s}.hamburger i:nth-child(2){left:-4px;top:10px}.hamburger i:nth-child(3){top:21px}.menu-toggle:hover .hamburger i:nth-child(2){transform:translateX(8px)}
.hero-copy{position:absolute;top:36%;left:19.8%;max-width:510px;width:39%;pointer-events:none;z-index:2;transition:opacity .65s,transform .65s}h1{margin:0 0 16px;line-height:1}h1 img{width:350px;display:block}.slogan{font-size:23px;font-weight:500;letter-spacing:1.4px;line-height:1.25;color:#b7b7b7;margin:0 0 23px;transform:scaleX(1.06);transform-origin:left}.calibration{display:flex;justify-content:space-between;width:100%;max-width:480px;height:12px}.calibration i{display:block;width:2px;height:10px;background:#ddd}.calibration i:nth-child(even){opacity:.7}.intro{font-size:15px;font-weight:400;letter-spacing:1px;color:#aaa;line-height:1.85;margin:19px 0 0}.side-explore{position:absolute;left:0;top:41%;height:161px;padding:0 0 0 15px;display:flex;align-items:center;gap:6px;writing-mode:vertical-rl;border-left:8px solid var(--red);font-size:15px;font-weight:600;letter-spacing:1px}.side-explore>i{height:69px;width:10px;background:repeating-linear-gradient(to bottom,#ddd 0 1px,transparent 1px 3px);position:relative}.side-explore>i::before{content:'';position:absolute;top:0;left:0;width:10px;height:21px;background:#ddd;transition:transform .4s}.side-explore:hover>i::before{transform:translateY(45px)}
.scene-caption{position:absolute;right:41px;top:140px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#969b9d;font-size:9px;letter-spacing:1.8px}.scene-caption>span:first-child{color:#ccc;font-size:10px}.detail{position:absolute;left:73%;top:35%;display:flex;gap:14px;align-items:center;pointer-events:none;opacity:0;transition:opacity .6s;z-index:1}.detail-line{width:32px;height:1px;background:#adb7bc9c;transform:rotate(-35deg);transform-origin:right}.detail>div{display:flex;flex-direction:column;gap:8px}.detail strong{font-size:16px;letter-spacing:2px;font-weight:400}.detail span:not(.detail-line){font-size:11px;color:#aaa;letter-spacing:1px}.detail .detail-kicker{font-size:8px!important;letter-spacing:2px!important;color:#929b9e!important}.thermal{position:absolute;right:60px;bottom:292px;width:170px;opacity:0;transition:opacity .7s}.thermal>div:first-child{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px}.thermal>div:first-child span:last-child{color:#aaa}.thermal-track{height:2px;background:#ffffff28;margin-top:12px;overflow:hidden}.thermal-track span{height:100%;display:block;width:8%;background:#aaa}.thermal p{font-size:10px;color:#8f9699;text-align:right;letter-spacing:1px}
.primary-wrap{position:absolute;right:55px;bottom:67px;z-index:3;display:flex;flex-direction:column;align-items:center;width:184px}.primary{width:154px;height:154px;border-radius:50%;position:relative;padding:0;color:#ddd;transition:color .3s}.orbit-type{position:absolute;inset:0;width:100%;height:100%;animation:orbit 27s linear infinite}.orbit-type text{font-size:10px;font-weight:600;letter-spacing:1.45px;fill:currentColor}.rotor-emblem{position:absolute;inset:28px;width:98px;height:98px;stroke:currentColor;stroke-width:.55;fill:none;opacity:.6;transition:opacity .35s,transform .65s}.rotor-slots{stroke-width:1.2}.rotor-bolts{fill:currentColor}.primary::after{content:'';position:absolute;inset:22px;border:1px solid #aaa2;border-radius:50%;transition:box-shadow .4s}.start-label{position:absolute;top:63px;left:8px;right:8px;text-align:center;font-size:12px;letter-spacing:1.5px;font-weight:500;background:#070a0cbe;padding:7px 0;z-index:1}.primary:hover{color:#fff}.primary:hover .rotor-emblem{opacity:.9;transform:rotate(35deg)}.primary:hover::after{box-shadow:0 0 25px #a6bbc421}.cta-note{display:block;color:#92999d;font-size:10px;letter-spacing:.6px;line-height:1.5;text-align:center;margin-top:12px}
.experience-bar{position:absolute;left:80px;right:285px;bottom:53px;display:flex;align-items:center;gap:30px;z-index:3}.live-state{display:flex;align-items:center;gap:10px;flex-shrink:0}.live-state>span:first-child{font-size:25px;letter-spacing:1px}.state-separator{font-size:10px;color:#757c7e;align-self:flex-end;line-height:24px}.live-state>div{display:flex;flex-direction:column;gap:6px;margin-left:8px}.live-state strong{font-size:12px;letter-spacing:1px;font-weight:400}.live-state>div>span{font-size:8px;letter-spacing:1px;color:#8b9295}.chapters{display:flex;gap:16px;flex:1;max-width:340px;margin-left:auto}.chapter{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px;padding:9px 0;text-align:left}.chapter-track{height:1px;background:#ffffff35;width:100%;overflow:hidden}.chapter-track i{display:block;height:100%;background:#eee;width:0}.chapter>span:last-child{font-size:10px;color:#898f92;letter-spacing:1px;white-space:nowrap;display:flex;gap:7px}.chapter b{font-size:9px;font-weight:400;color:#666e72}.chapter.active>span:last-child,.chapter.active b,.chapter:hover>span:last-child{color:#eee}.playback{display:flex;align-items:center;gap:17px;flex-shrink:0}.icon-button{width:34px;height:34px;border:1px solid #ffffff30;border-radius:50%;display:grid;place-items:center;font-size:12px}.icon-button:hover{border-color:#ddd}.text-button{font-size:10px;letter-spacing:.6px;color:#999;display:flex;gap:8px;align-items:center;padding:8px 0}.text-button>span:last-child{font-size:17px}.text-button:hover{color:#fff}.corner-line{position:absolute;bottom:0;left:0;width:35%;max-width:480px;fill:none;stroke:#ffffff35;stroke-width:1;pointer-events:none}
.loading{position:absolute;left:64%;top:54%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:2px;color:#afb8be;transition:opacity .5s}.loader-ring{width:22px;height:22px;border:1px solid #aaa4;border-top-color:#ddd;border-radius:50%;animation:orbit 1s linear infinite}.fallback{position:absolute;top:25%;left:54%;width:38%;text-align:center;z-index:2}.fallback[hidden]{display:none}.fallback img{width:100%;max-height:300px;object-fit:contain}.fallback p{font-size:12px;color:#bbb;line-height:1.65;max-width:320px;margin:15px auto}.fallback button{border:1px solid #8885;padding:11px 23px;background:#111}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript{position:absolute;top:50%;left:50%;padding:25px;background:#111;color:#fff}#experience:not([data-phase="drive"]) .hero-copy{opacity:.36;transform:translateX(-9%)}#experience:not([data-phase="drive"]) .detail,#experience[data-phase="brake"] .thermal,#experience[data-phase="cool"] .thermal{opacity:1}
.navigation{position:fixed;inset:0 0 0 auto;margin:0;width:62%;max-width:none;height:100%;max-height:none;padding:0;border:0;background:radial-gradient(ellipse at 0 90%,#4c11163a,transparent 35%),#030303;color:#eee;overflow-y:auto;overscroll-behavior:contain}.navigation::backdrop{background:#000a;backdrop-filter:blur(3px)}.navigation[open]{animation:menu-in .35s ease-out}.menu-close{position:absolute;right:45px;top:40px;width:43px;height:43px;z-index:2;padding:0}.menu-close span{position:absolute;top:21px;left:0;width:43px;height:1px;background:#eee;transform:rotate(45deg)}.menu-close span:last-child{transform:rotate(-45deg)}.menu-close:hover{opacity:.7}.nav-content{padding:105px 0 40px}.nav-kicker{font-size:11px;color:#888;letter-spacing:3px;margin:0 45px 24px}.nav-list{display:flex;flex-direction:column;gap:8px}.nav-list button{position:relative;display:flex;align-items:center;text-align:left;width:90%;padding:24px 46px;gap:17px;background:linear-gradient(90deg,#333,transparent 89%);min-height:76px}.nav-list button:nth-child(2){width:85%}.nav-list button:nth-child(3){width:80%}.nav-list button:nth-child(4){width:75%}.nav-list button::after{content:'';position:absolute;inset:auto 0 0;height:6px;border-top:1px solid #9996;background:linear-gradient(90deg,#762c3355,transparent 78%)}.nav-number{color:#8c8c8c;font-size:10px}.nav-title{font-size:23px;letter-spacing:1px;font-weight:500;white-space:nowrap}.nav-zh{font-size:11px;color:#999;letter-spacing:2px;white-space:nowrap}.double-arrow{position:absolute;right:10px;top:50%;transform:translateY(-56%);font-size:48px;font-weight:200;line-height:1;transition:translate .2s}.nav-list button:hover .double-arrow{translate:10px 0}.nav-list button:hover{color:#fff;background:linear-gradient(90deg,#444,transparent 89%)}.nav-footer{margin:48px 46px 0}.nav-footer img{width:145px;opacity:.8}.nav-footer p{font-size:10px;letter-spacing:2px;color:#888;margin:15px 0}.nav-footer .nav-caption{letter-spacing:1px;line-height:1.6;color:#777}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes menu-in{from{transform:translateX(100%);opacity:.7}to{transform:translateX(0);opacity:1}}
@media(min-width:1700px){.hero-copy{left:25%;max-width:580px}.hero-copy h1 img{width:390px}.intro{font-size:17px}.primary-wrap{right:78px;bottom:78px}.experience-bar{left:100px;right:325px;bottom:60px}.chapters{max-width:470px}}
@media(max-width:1100px){.hero-copy{left:14%;width:43%}.hero-copy h1 img{width:310px}.slogan{font-size:20px}.intro{font-size:13px}.experience-bar{left:54px;right:245px;gap:22px}.live-state>div{display:none}.primary-wrap{right:25px}.detail{left:72%}.detail-line{display:none}.detail strong{font-size:13px}.detail span:not(.detail-line){font-size:10px}.scene-caption{right:40px}.nav-title{font-size:20px}.nav-zh{display:none}.nav-list button{padding-left:35px}}
@media(max-width:700px){#experience{height:100svh;min-height:740px}.masthead{inset:22px 22px auto}.brand,.brand-home{width:125px}.header-tools{gap:8px}.languages{gap:3px;font-size:15px}.languages button{font-size:13px;min-height:27px;padding:4px 5px}.home-icon{display:none}.languages>span:last-child{display:none}.menu-toggle{margin-left:15px;font-size:10px;gap:6px;padding:0 2px}.hamburger{width:28px;height:17px}.hamburger i{left:2px}.hamburger i:nth-child(2){top:8px;left:-2px}.hamburger i:nth-child(3){top:16px}.hero-copy{left:14%;top:19%;width:72%;max-width:400px}.hero-copy h1 img{width:280px}h1{margin-bottom:15px}.slogan{font-size:16px;letter-spacing:.7px;margin-bottom:20px;transform:none}.calibration{height:9px;max-width:310px}.calibration i{height:8px;width:1px}.intro{font-size:12px;letter-spacing:.4px;line-height:1.75;margin-top:17px}.side-explore{top:43%;height:133px;border-left-width:5px;padding-left:8px;font-size:11px;gap:8px}.side-explore>i{width:7px;height:47px}.side-explore>i::before{width:7px;height:16px}.scene-caption{top:41%;right:22px;font-size:7px;letter-spacing:.9px;gap:6px}.scene-caption>span:first-child{font-size:8px}.primary-wrap{right:17px;bottom:133px;width:134px}.primary{width:121px;height:121px}.rotor-emblem{inset:23px;width:75px;height:75px}.primary::after{inset:17px}.start-label{top:47px;left:5px;right:5px;font-size:10px;letter-spacing:.3px;padding:6px 0}.cta-note{font-size:8px;letter-spacing:.2px;margin-top:4px}.detail{left:14%;top:41%;right:auto}.detail>div{gap:6px}.detail strong{font-size:12px}.detail span:not(.detail-line){font-size:9px}.detail .detail-kicker{display:none}.thermal{left:14%;right:auto;bottom:185px;width:112px}.thermal>div:first-child{font-size:7px;letter-spacing:.4px}.thermal p{font-size:8px;letter-spacing:.2px}.thermal-track{margin-top:9px}.experience-bar{left:23px;right:23px;bottom:27px;display:grid;grid-template-columns:1fr auto;gap:10px}.live-state>span:first-child{font-size:22px}.state-separator{font-size:9px}.live-state>div{display:flex;margin-left:9px;gap:4px}.live-state strong{font-size:10px}.live-state>div>span{font-size:7px}.chapters{grid-column:1/-1;grid-row:2;width:100%;max-width:none;gap:16px}.chapter{gap:9px;padding:6px 0}.chapter>span:last-child{font-size:9px;gap:7px}.chapter b{font-size:8px}.playback{grid-column:2;grid-row:1;gap:13px}.icon-button{width:29px;height:29px;font-size:11px}.text-button{font-size:9px}.text-button>span:last-child{font-size:15px}.corner-line{width:60%;opacity:.6}.loading{left:57%;top:56%;font-size:9px;letter-spacing:1px;white-space:nowrap}.loader-ring{width:17px;height:17px}.fallback{top:42%;left:22%;width:64%}.fallback img{max-height:170px}.fallback p{font-size:10px;margin:10px auto;max-width:220px}.fallback button{font-size:10px;padding:7px 15px}.atmosphere{background:radial-gradient(ellipse at 70% 57%,#526a7729,transparent 60%),linear-gradient(180deg,#020303 5%,#060a0d 38%,#27363e 59%,#0d171d 64%,#040607 88%)}.vignette{background:linear-gradient(180deg,#0004,transparent 36%,transparent 65%,#000 95%)}#experience:not([data-phase="drive"]) .hero-copy{opacity:.3;transform:translateY(-5%)}.navigation{width:92%}.menu-close{top:22px;right:22px;width:31px;height:31px}.menu-close span{width:31px;top:15px}.nav-content{padding-top:100px}.nav-kicker{margin-left:25px;font-size:10px}.nav-list{gap:11px}.nav-list button{width:94%;padding:22px 25px;gap:12px;min-height:72px}.nav-list button:nth-child(2){width:91%}.nav-list button:nth-child(3){width:88%}.nav-list button:nth-child(4){width:85%}.nav-title{font-size:17px;letter-spacing:.5px}.nav-number{font-size:9px}.double-arrow{font-size:36px;right:6px}.nav-footer{margin:40px 25px}.nav-footer img{width:136px}}
@media(max-width:360px){.masthead{left:18px;right:18px}.brand,.brand-home{width:111px}.menu-toggle{margin-left:10px}.hero-copy{width:76%}.hero-copy h1 img{width:245px}.slogan{font-size:14px}.intro{font-size:11px}.scene-caption{display:none}.text-button{font-size:8px}}
@media(max-height:700px) and (min-width:701px){.hero-copy{top:29%}.hero-copy h1 img{width:285px}.slogan{font-size:19px;margin-bottom:18px}.intro{font-size:13px;margin-top:16px}.primary-wrap{bottom:48px}.experience-bar{bottom:40px}.scene-caption{top:120px}.thermal{bottom:260px}}
#detail,#callout{display:none}
/* Low-key studio backdrop: a cool horizon surrounded by deep black. */
.atmosphere{background:radial-gradient(ellipse 48% 15% at 65% 65%,#829b9f30,transparent 78%),radial-gradient(ellipse 52% 29% at 69% 59%,#25424c42,transparent 82%),linear-gradient(180deg,#010203 0%,#020405 35%,#071015 53%,#18272d 64%,#090f13 70%,#020304 85%,#000 100%)}
.vignette{background:linear-gradient(90deg,#000b,transparent 52%,#0002),linear-gradient(180deg,#0006,transparent 36%,transparent 69%,#000 98%)}
.vignette::after{opacity:.055;background-size:2px 2px}
@media(max-width:700px){.atmosphere{background:radial-gradient(ellipse 80% 16% at 65% 60%,#78979e2b,transparent 80%),linear-gradient(180deg,#010203 5%,#03070a 39%,#15262e 60%,#080e12 69%,#000 90%)}.vignette{background:linear-gradient(180deg,#0005,transparent 38%,transparent 67%,#000 96%)}}
/* Smooth blue backlight inspired by the supplied studio reference. */
.atmosphere{background:radial-gradient(ellipse 52% 25% at 69% 59%,#4686a66b,transparent 80%),radial-gradient(ellipse 65% 16% at 65% 69%,#6aafc542,transparent 82%),linear-gradient(180deg,#010305 0%,#03090e 31%,#0a1d2a 52%,#173746 65%,#07121b 75%,#010305 94%)}
.vignette::after{display:none}
@media(max-width:700px){.atmosphere{background:radial-gradient(ellipse 85% 24% at 64% 59%,#478aa667,transparent 82%),linear-gradient(180deg,#010305 5%,#05101a 40%,#173746 61%,#08151d 72%,#010305 92%)}}
/* Broad blue-grey cyclorama with a soft illuminated floor band. */
.atmosphere{background:radial-gradient(ellipse 75% 30% at 68% 55%,#587b8b88,transparent 85%),linear-gradient(180deg,#0a1821 0%,#122833 30%,#294654 49%,#537483 62%,#9cb3bd 72%,#526c7c 78%,#192c39 87%,#09121c 100%)}
.vignette{background:linear-gradient(90deg,#02080e70,transparent 55%,#06111b10),linear-gradient(180deg,#03090f20,transparent 35%,transparent 72%,#02080e65 100%)}
@media(max-width:700px){.atmosphere{background:radial-gradient(ellipse 100% 26% at 66% 57%,#698c9b66,transparent 90%),linear-gradient(180deg,#0a1821 0%,#172e3b 37%,#3d6172 56%,#91acb9 68%,#425f70 76%,#122634 86%,#09121c 100%)}.vignette{background:linear-gradient(180deg,#02070c20,transparent 40%,transparent 72%,#02080e65 100%)}}
/* Keep the main experience control on the left, clear of the timeline. */
.primary-wrap{left:55px;right:auto;bottom:125px}
.experience-bar{right:80px}
@media(min-width:1700px){.primary-wrap{left:78px;bottom:140px}.experience-bar{right:100px}}
@media(min-width:701px) and (max-width:1100px){.primary-wrap{left:25px}.experience-bar{right:54px}}
@media(max-height:700px) and (min-width:701px){.primary-wrap{bottom:110px}}
@media(max-width:700px){.primary-wrap{left:17px;right:auto;bottom:133px}.thermal{left:auto;right:22px}.experience-bar{right:23px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.orbit-type,.loader-ring{animation:none}}
/* Fine geometry callouts stay attached to the actual 3D caliper. */
.callout{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:1;overflow:visible;fill:none;stroke:#b8c2c6;stroke-width:.75}.callout-dot{fill:#e4e8e9;stroke:none}.callout-ring{stroke:#d3dcdf99}.detail-line{display:none}.detail strong::after{content:'';display:block;width:32px;height:1px;background:#8c3338;margin-top:10px}.primary-wrap,.experience-bar,.hero-copy{transition-timing-function:cubic-bezier(.22,1,.36,1)}#experience[data-paused="true"] .orbit-type{animation-play-state:paused}
/* BC Forged's original 146 px wheel / 200 px type-ring proportion. Only this
   control changes; the 3D wheels, background and chapter layout are untouched. */
.primary .rotor-emblem{inset:13.5%;width:73%;height:73%;object-fit:contain}
.primary .orbit-type text{font-family:Arial,sans-serif;font-size:11.2px;font-weight:700;letter-spacing:1.2px;font-kerning:none;text-rendering:geometricPrecision}
.primary::after{display:none}
/* PLAY stays frameless; keyboard focus brightens the existing artwork. */
.primary:focus,.primary:focus-visible{outline:none}
.primary:focus-visible{color:#fff}
.primary:focus-visible .rotor-emblem{opacity:1}
/* Reserve two caption lines so playback/language changes cannot move the
   bottom-anchored PLAY wheel. Scales with the mobile caption font size. */
.primary-wrap .cta-note{min-block-size:3em}
/* Stagger only the desktop leftward move. The two full-width layers share
   the original 9% endpoint; parent opacity and mobile motion stay unchanged. */
@media(min-width:701px){
  .hero-copy{transition-property:opacity}
  #experience:not([data-phase="drive"]) .hero-copy{transform:none}
  .hero-copy>h1,.hero-copy>.hero-support{transform:translateX(0);transition:transform .65s cubic-bezier(.22,1,.36,1)}
  #experience:not([data-phase="drive"]) .hero-copy>h1,
  #experience:not([data-phase="drive"]) .hero-copy>.hero-support{transform:translateX(-9%)}
  #experience:not([data-phase="drive"]) .hero-copy>.hero-support{transition-delay:.18s}
}
@media(prefers-reduced-motion:reduce){.hero-copy>h1,.hero-copy>.hero-support{transition-delay:0s!important}}
/* Enlarge only the header mark by 35%, retaining its responsive proportions. */
.brand-home{width:auto}
.brand-home .brand{width:auto;height:calc(160px * 130 / 547 * 1.35)}
@media(max-width:700px){.brand-home .brand{height:calc(125px * 130 / 547 * 1.35)}}
@media(max-width:360px){.brand-home .brand{height:calc(111px * 130 / 547 * 1.35)}}
/* Keep the exact logo box during preload; the writing starts after 3D setup. */
#experience[data-logo-intro="pending"] #hero-heading img{visibility:hidden}
@media(prefers-reduced-motion:reduce){#experience[data-logo-intro="pending"] #hero-heading img{visibility:visible}}
/* Reference motion: fixed white head, fine ticks reveal downward, hold, reset.
   The three-second cycle never translates the label or changes its layout. */
.side-explore{--scroll-rail-width:8px;--scroll-head-height:21px;border-left-color:transparent;height:max-content}
.side-explore::before{
  content:'';position:absolute;left:calc(-1 * var(--scroll-rail-width));top:0;
  width:var(--scroll-rail-width);height:100%;background:var(--red);
  /* A soft leading edge travels down, leaving a fully solid red rail behind. */
  mask-image:linear-gradient(to bottom,#000 0 50%,transparent 65%);
  mask-size:100% 200%;mask-repeat:no-repeat;mask-position:0 130%;
  animation:scroll-rail-fill 3s cubic-bezier(.45,0,.55,1) infinite;
}
.side-explore>i{background:none;overflow:hidden;flex-shrink:0}
.side-explore>i::before,.side-explore:hover>i::before{transition:none;animation:none;transform:none;opacity:1}
.side-explore>i::after{
  content:'';position:absolute;inset:var(--scroll-head-height) 0 0;
  background:repeating-linear-gradient(to top,#ddd 0 1px,transparent 1px 3px);
  animation:scroll-ticks-reveal 3s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scroll-rail-fill{
  0%{mask-position:0 130%}
  66.667%,100%{mask-position:0 0}
}
@keyframes scroll-ticks-reveal{
  0%,16.667%{clip-path:inset(0 0 100% 0)}
  66.667%,100%{clip-path:inset(0 0 0 0)}
}
.side-explore:disabled::before,.side-explore:disabled>i::after,
#experience[data-paused="true"] .side-explore::before,
#experience[data-paused="true"] .side-explore>i::after{animation-play-state:paused}
@media(max-width:700px){.side-explore{--scroll-rail-width:5px;--scroll-head-height:16px}}
@media(prefers-reduced-motion:reduce){
  .side-explore::before,.side-explore>i::after{animation:none;transform:none;clip-path:none;mask-position:0 0}
}
/* Entry layers run with the writing logo, independently of the PLAY leftward
   parent transform. Individual translate preserves the slogan's original scale. */
#experience[data-logo-intro="pending"] .hero-support>*{opacity:0;translate:0 12px}
#experience[data-logo-intro="writing"] .hero-support>*{
  animation:hero-support-enter .75s cubic-bezier(.22,1,.36,1) both;
}
#experience[data-logo-intro="writing"] .hero-support>.slogan{animation-delay:.65s}
#experience[data-logo-intro="writing"] .hero-support>.calibration{animation-delay:.85s;animation-duration:.65s}
/* Small copy enters last, after the logo lockup lands at 2.23 s.
   Finish before the unchanged 2.8 s static handoff to avoid a visible snap. */
#experience[data-logo-intro="writing"] .hero-support>.intro{animation-delay:2.3s;animation-duration:.45s}
@keyframes hero-support-enter{
  from{opacity:0;translate:0 12px}
  to{opacity:1;translate:0 0}
}
@media(prefers-reduced-motion:reduce){
  #experience[data-logo-intro] .hero-support>*{animation:none;opacity:1;translate:none}
}