/* Astorians v3.0.6 — Cinematic Everywhere / readability-first */
/* Keep content readable regardless of photography and animation state. */
:root{--as-stage-deep:#100b20;--as-stage-ink:#fff7ff;--as-stage-muted:#e9dff2;--as-stage-cyan:#69edfa;--as-stage-pink:#f983e2;--as-speed:.65s}
#labs .labs-intro{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;min-height:540px;padding-bottom:188px;background:linear-gradient(150deg,#291640 0%,#1c102d 68%,#140e28 100%);color:#fff6ff;overflow:hidden;border-color:rgba(243,138,236,.46)}
#labs .labs-intro::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(16,10,30,.24),rgba(16,10,30,.2) 40%,rgba(16,10,30,.74) 100%)}
#labs .labs-intro::after{content:'';position:absolute;z-index:0;inset:auto 0 0 0!important;width:100%;height:182px;border-radius:0;background:var(--labs-art) center 60%/cover no-repeat;opacity:.64;filter:none;box-shadow:none;mask-image:linear-gradient(180deg,transparent,black 37%,black)}
#labs .labs-intro>*{position:relative;z-index:2}
#labs .labs-intro h3{color:#fffaff;text-shadow:0 2px 22px rgba(8,3,20,.85);max-width:17ch}
#labs .labs-intro p{color:#f1e8f8;line-height:1.67;text-shadow:0 1px 8px rgba(8,4,20,.75);max-width:38ch}
#labs .labs-intro .badge{color:#ffdaaa;letter-spacing:.12em;font-size:12px}
#labs .labs-intro .row{position:relative;z-index:3}
#labs .labs-intro .pill{background:rgba(25,13,48,.92);color:#fff6ff;border-color:rgba(235,145,246,.62);min-height:44px;cursor:pointer}
#labs .labs-intro .pill:hover,#labs .labs-intro .pill:focus-visible{border-color:#72edff;box-shadow:0 0 18px rgba(212,89,255,.48);background:rgba(70,29,100,.96)}
#labs .labs-intro .pill:active{transform:scale(.97)}
/* Other media-heavy panels get stable contrast and compositing layers. */
.academy-banner,.paths-stage,.destination-card,.cat-card,.quality-art,.journal-art{isolation:isolate}
.academy-banner:before{background-image:linear-gradient(90deg,rgba(14,8,30,.96) 0%,rgba(14,8,30,.86) 45%,rgba(14,8,30,.25) 100%),var(--academy-land)!important}
.paths-stage:before{background-image:linear-gradient(90deg,rgba(13,8,30,.97) 0%,rgba(13,8,30,.84) 48%,rgba(13,8,30,.32) 100%),var(--paths-image)!important}
.destination-card:before{background-image:linear-gradient(180deg,rgba(16,9,32,.30) 0%,rgba(16,9,32,.81) 55%,rgba(12,8,26,.99) 100%),var(--card-image)!important}
.cat-card:before{background-image:linear-gradient(90deg,rgba(15,9,28,.97),rgba(15,9,28,.86) 62%,rgba(15,9,28,.53)),var(--cat-art)!important}
.feature-visual::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(22,13,41,.94),rgba(22,13,41,.56) 60%,rgba(22,13,41,.07))}
.feature-visual>.inside{z-index:2;max-width:65%}.feature-visual p{color:#f1e8f8}
.section .section-head p,.section-intro,.quality-copy>p,.faq-grid>div>p{color:var(--as-stage-muted)}
.browser-panel .browser-main p,.route-stop p,.method p,.tools-four article p,.cat-card p,.thought-card p{color:#e4d5ef}
/* Each major card has moving rim light / on-focus neon, but no overlay masks text. */
.as-movie-card{--as-glow-x:50%;--as-glow-y:35%;position:relative;isolation:isolate;transition:border-color .28s ease,box-shadow .32s ease,background-color .28s ease;}
.as-movie-card>.as-movie-sheen{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;overflow:hidden;opacity:0;background:radial-gradient(290px circle at var(--as-glow-x) var(--as-glow-y),rgba(113,237,255,.16) 0,rgba(234,87,250,.08) 42%,transparent 75%);transition:opacity .26s ease}
.as-movie-card.as-card-seen>.as-movie-sheen{animation:as-cinema-sweep .95s cubic-bezier(.18,.72,.25,1) 1}
@keyframes as-cinema-sweep{0%{opacity:0;clip-path:inset(0 100% 0 0)}45%{opacity:.85}100%{opacity:0;clip-path:inset(0 0 0 0)}}
.as-movie-card:focus-within{outline:2px solid #8df3fc;outline-offset:2px;border-color:#9ef9ff;box-shadow:0 12px 45px rgba(163,75,255,.28),0 0 0 1px rgba(255,140,242,.22)}
.as-movie-card .as-card-details{position:relative;z-index:5;margin-top:16px;border-top:1px solid rgba(209,136,240,.35);padding-top:10px;color:#f4ecfc}
.as-card-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:7px 0;font-size:14px;font-weight:800;color:#aaf5ff;letter-spacing:.012em}
.as-card-details summary::-webkit-details-marker{display:none}
.as-card-details summary::after{content:'+';display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;border:1px solid #b36bee80;color:#fff;transition:transform .2s ease,background .2s ease}
.as-card-details[open] summary::after{content:'−';background:#773cb088;color:#fff}
.as-card-details[open]{animation:as-expand .36s ease-out both}
.as-card-details>p{margin:0 0 9px!important;color:#eee3f8!important;font-size:14.5px!important;line-height:1.62}
@keyframes as-expand{from{opacity:.7}to{opacity:1}}
.as-movie-card h3{position:relative;z-index:3}
.as-movie-card h3 .as-kinetic-word{display:inline-block;white-space:normal;transform-origin:bottom left}
.as-movie-card.as-card-seen h3 .as-kinetic-word{animation:as-word-rise .56s cubic-bezier(.2,.82,.22,1) both;animation-delay:calc(var(--word-n,0)*35ms)}
@keyframes as-word-rise{0%{opacity:.12;transform:translate3d(0,14px,0) skewX(-5deg);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}
.as-movie-card.as-card-seen>p,.as-movie-card.as-card-seen>.inside>p{animation:as-copy-appear .6s ease-out both}
@keyframes as-copy-appear{from{opacity:.2;clip-path:inset(0 0 26% 0);transform:translateY(11px)}to{opacity:1;clip-path:inset(0);transform:none}}
/* Bright edge accents on interactions; not a constant blinding glow. */
.as-movie-card:hover,.as-movie-card:focus-within{border-color:rgba(241,142,247,.8)!important;box-shadow:0 14px 48px rgba(127,52,209,.38),0 0 26px rgba(225,83,241,.17)}
.as-movie-card:hover>.as-movie-sheen,.as-movie-card:focus-within>.as-movie-sheen{opacity:1}
.as-movie-card:active{box-shadow:0 0 28px rgba(106,238,255,.4)}
.as-kinetic-line{position:relative;overflow:visible}
.as-kinetic-line::after{content:'';position:absolute;bottom:-7px;left:0;width:clamp(58px,32%,140px);height:2px;background:linear-gradient(90deg,transparent,#70f2ff 30%,#ff72ce 70%,transparent);transform:scaleX(.06);transform-origin:left;opacity:0;pointer-events:none;box-shadow:0 0 12px #fd84ea}
.as-movie-card.as-card-seen .as-kinetic-line::after{animation:as-line-travel .9s ease-out both}
@keyframes as-line-travel{0%{transform:translateX(-16px) scaleX(.05);opacity:0}45%{opacity:1}100%{transform:translateX(0) scaleX(1);opacity:.95}}
/* Navigation chips / interactive controls are always legible and visibly actionable. */
.button,.subject-chip,.filter-chip,.resource-tab,.path-option,.faq-item button,.hero-portals a,.end-portals a{position:relative;transition:box-shadow .25s ease,background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.button:focus-visible,.subject-chip:focus-visible,.filter-chip:focus-visible,.resource-tab:focus-visible,.path-option:focus-visible{outline:3px solid #83f5ff;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 .as-movie-card:hover{transform:translateY(-5px)}
 .as-movie-card[data-reveal]:hover{transform:translateY(-5px)!important}
 .subject-chip:hover,.filter-chip:hover,.resource-tab:hover,.path-option:hover,.hero-portals a:hover,.end-portals a:hover,.faq-item button:hover{box-shadow:0 0 0 1px rgba(135,238,255,.36),0 0 24px rgba(217,68,244,.24);transform:translateY(-2px)}
 .as-movie-card:hover h3{text-shadow:0 0 18px rgba(245,148,254,.18)}
}
/* subtle bottom-to-top section reveal lights instead of full-screen blur animation */
.section .wrap::after{pointer-events:none}
.as-movie-card.as-active-detail{border-color:#7cefff!important;box-shadow:0 0 0 1px rgba(124,239,255,.4),0 0 30px rgba(180,80,246,.32)}
/* Explicit viewport-specific layout: resource image is BELOW the text, NEVER above it. */
@media(max-width:700px){
 #labs .labs-intro{padding:28px 24px 228px;min-height:unset;display:flex;align-items:stretch}
 #labs .labs-intro::before{background:linear-gradient(180deg,#24143a 0%,#211335 58%,rgba(19,11,33,.9) 69%,rgba(19,11,33,.36) 100%)}
 #labs .labs-intro::after{inset:auto 0 0 0!important;width:100%;height:215px;border-radius:0;opacity:.86;mask-image:linear-gradient(180deg,transparent,black 28%,black 100%);background-position:center 58%}
 #labs .labs-intro h3{font-size:clamp(29px,8vw,38px);max-width:100%;margin:18px 0 14px}
 #labs .labs-intro p{font-size:16.5px;line-height:1.69;max-width:100%;color:#f9f0fc;text-shadow:none}
 #labs .labs-intro .row{margin-top:20px!important;gap:9px}
 #labs .labs-intro .pill{flex:1;justify-content:center;min-width:84px;padding:9px 10px;font-size:13.5px}
 .feature-visual img{opacity:.55;width:59%}.feature-visual>.inside{max-width:75%}
 .as-movie-card:hover{transform:none}
 .as-movie-card.as-card-seen h3 .as-kinetic-word{animation-duration:.43s;animation-delay:calc(var(--word-n,0)*23ms)}
 .as-movie-card.as-card-seen>.as-movie-sheen{animation-duration:.65s}
 .as-card-details summary{min-height:48px}
}
@media(max-width:375px){#labs .labs-intro{padding:26px 20px 220px}.labs-intro h3{font-size:28px}.feature-visual>.inside{max-width:82%}}
@media(prefers-reduced-motion:reduce){
 .as-movie-card .as-movie-sheen,.as-kinetic-line::after{display:none!important;animation:none!important}
 .as-movie-card h3 .as-kinetic-word,.as-movie-card p{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
 .as-movie-card,.as-card-details,.subject-chip,.filter-chip,.resource-tab,.path-option{animation:none!important;transition:none!important}
}
body.motion-off .as-movie-card .as-movie-sheen,body.motion-off .as-kinetic-line::after{display:none!important;animation:none!important}
body.motion-off .as-movie-card h3 .as-kinetic-word,body.motion-off .as-movie-card p{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
@media(forced-colors:active){.as-movie-card .as-movie-sheen,.as-kinetic-line::after{display:none!important}.as-card-details summary{color:LinkText}}
