/* Frontal satin-metal wordmark; one quiet reflection every 3 seconds. */
#home .entrance-title{width:34vw;max-width:600px;left:4%;aspect-ratio:auto;isolation:isolate;overflow:visible}
#home .entrance-title img{display:block;position:static;width:100%;height:auto;filter:drop-shadow(0 0 7px #b8ff3526)}
#home .entrance-title::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#ffffff08 46%,#ffffff5c 50%,#ffffff08 54%,transparent 58%);background-size:350% 100%;background-position:100% 0;-webkit-mask:url('assets/entrance-metal-wordmark-v1.png') center/100% 100% no-repeat;mask:url('assets/entrance-metal-wordmark-v1.png') center/100% 100% no-repeat;mix-blend-mode:screen;animation:crux-metal-sheen 3s ease-in-out infinite}
@keyframes crux-metal-sheen{0%,30%{background-position:100% 0;opacity:0}35%{opacity:.42}85%{background-position:0% 0;opacity:.42}92%,100%{background-position:0% 0;opacity:0}}
/* sqrt(.8) on each dimension gives 20% less square canvas area. */
#tools .particle-stage{width:89.4427%;justify-self:center;align-self:center}
@media(max-width:760px){#home .entrance-title{width:82%;max-width:460px;left:50%;transform:translateX(-50%);top:9%}#tools .particle-stage{margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:reduce){#home .entrance-title::after{animation:none;display:none}}
/* Scroll entrance transforms previously overrode hover on cohort packs. */
#team .booster{animation:none;transition:transform .38s cubic-bezier(.2,.7,.2,1)}
#team .booster .pack-open{display:block;opacity:0;transition:opacity .25s ease;color:#43512f}
@media(hover:hover){#team .booster:hover{transform:translateY(-12px) rotateY(-7deg) rotateZ(-2deg)}#team .booster:hover .pack-open{opacity:1}}
#team .booster:focus-visible{transform:translateY(-12px)}
#team .booster:focus-visible .pack-open{opacity:1}
@media(hover:none){#team .booster .pack-open{opacity:1}}
@media(prefers-reduced-motion:reduce){#team .booster{transition:none}#team .booster:hover,#team .booster:focus-visible{transform:none}}

/* Opening light stays in the gate coordinate system and follows its camera scale. */
#home .gate-rim{stroke:#fff;stroke-width:3;opacity:clamp(0,calc(var(--door-open,0)*1.15),.92);filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #ffffffb3) drop-shadow(0 0 22px #eef5ff66);transition:none;mix-blend-mode:screen}
#home .shutter-door{box-shadow:inset 0 -2px 0 rgb(255 255 255 / calc(var(--door-open,0)*.85)),inset 0 -9px 14px -10px rgb(255 255 255 / var(--door-open,0))}
/* Broad interior spill grows with opening, attached to the moving frame. */
#home .gate-rim{stroke-width:5;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 18px #ffffffe6) drop-shadow(0 0 42px #f0f7ffb3);opacity:clamp(0,calc(var(--door-open,0)*1.7),1)}
#home .gate-opening-spill{position:absolute;inset:17% 30% 4%;z-index:5;pointer-events:none;mix-blend-mode:screen;opacity:clamp(0,calc(var(--door-open,0)*1.25),.85);background:linear-gradient(90deg,#f4faffaa,transparent 20%,transparent 80%,#f4faffaa);box-shadow:0 0 28px 10px #f0f7ff80,0 0 70px 25px #e5f1ff55,inset 0 0 30px #fff9;filter:blur(8px);clip-path:inset(calc((1 - var(--door-open,0))*100%) -100% -20%)}
#home .gate-opening-spill::after{content:"";position:absolute;left:-45%;right:-45%;bottom:-6%;height:25%;background:radial-gradient(ellipse,#fff9,#edf6ff44 40%,transparent 72%);filter:blur(12px)}
/* Mobile pack browsing: each chapter is its own native horizontal rail. */
@media(max-width:760px){
 #team,#team-rail,#team .team-cohort{min-width:0;max-width:100%}
 #team .cohort-packs,#team .cohort-new .cohort-packs{display:flex;flex-wrap:nowrap;width:100%;max-width:100%;min-width:0;gap:18px;overflow-x:auto;overflow-y:hidden;padding:16px 8px 45px;scroll-snap-type:x proximity;scroll-padding-inline:8px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:#a9cf65 #343b4b}
 #team .cohort-packs .booster,#team .cohort-new .cohort-packs .booster{flex:0 0 clamp(145px,48vw,210px);width:clamp(145px,48vw,210px);height:auto;aspect-ratio:280/520;min-width:0;scroll-snap-align:start;transform:none;touch-action:pan-x pan-y pinch-zoom}
 #team .cohort-packs .pack-open{opacity:1;font-size:10px;letter-spacing:.04em;color:#b9cba1}
 #team .cohort-packs .pack-render{-webkit-user-drag:none;user-select:none}
 #team .team-cohort:after{content:'左右滑動選擇卡包 ↔';display:block;margin-top:8px;font-size:11px;letter-spacing:.08em;color:#b9cba1}
}
/* Compact phone entrance: separate wordmark from the doorway, including short screens. */
@media(max-width:760px){
 #home .entrance-title{width:min(62vw,32svh);max-width:290px;top:6%;left:50%;transform:translateX(-50%)}
 #home .academy-gate{width:min(88vw,57svh,500px);top:54%}
}