/* AngelB — angelb.org. An immersive campus, with lettering in its open skyline. */
.gateway-opening{position:relative;isolation:isolate;width:calc(100% - 32px);height:auto;min-height:0;margin:16px auto 24px;border-radius:24px;overflow:hidden;background:#102644;color:#f4f9ff}
.gateway-media{position:relative;isolation:isolate;aspect-ratio:1916/1080}.gateway-poster,.gateway-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.gateway-poster{z-index:-3}.gateway-poster--dark{display:none}html[data-theme=dark] .gateway-poster--light{display:none}html[data-theme=dark] .gateway-poster--dark{display:block}.gateway-video{z-index:-2;opacity:0;transition:opacity .4s ease}
[data-gateway-ready=true] .gateway-video{opacity:1}
/* A localized sky exposure treatment protects lettering without tinting the city. */
.gateway-media::before{content:"";position:absolute;left:27%;right:27%;top:0;height:24%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 25%,rgba(5,24,43,.56),transparent 72%)}
.gateway-content{position:absolute;top:14%;left:28%;width:44%;text-align:center;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
body.glearning-ui .gateway-heading{position:absolute;top:2.5%;left:28%;width:44%;text-align:center;font:750 clamp(1.8rem,2.65vw,3.25rem)/1.08 Manrope,sans-serif;letter-spacing:-.025em;margin:0;color:#f4f9ff;text-shadow:0 2px 4px rgba(4,20,41,.9),0 8px 20px rgba(3,21,42,.45);transform:perspective(900px) rotateX(5deg);text-wrap:balance}
.gateway-heading span{display:block}
body.glearning-ui .gateway-content>p{font-size:clamp(.72rem,.88vw,.95rem);line-height:1.45;margin:0 0 12px;color:#fff;text-shadow:0 1px 3px #071b32,0 3px 10px #071b32}
.gateway-content .hero__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0}
.gateway-content .button{min-height:44px;padding:10px 16px;font-size:clamp(.72rem,.8vw,.9rem);gap:8px;white-space:nowrap}
.gateway-content .button--ghost{color:#f4f9ff;background:rgba(13,37,59,.36);border-color:rgba(233,246,255,.7);backdrop-filter:blur(8px)}
.gateway-content .button:hover,.gateway-content .button:focus-visible{color:#fff;background:var(--interactive-purple);border-color:#ad88ed}
body.home .learning-hero{margin-block:16px 24px}
body.home .learning-hero__copy h2{color:var(--ink);font-size:clamp(2.1rem,3.1vw,3.2rem);line-height:1.15;margin:0 0 18px}
body.home .learning-hero__copy h2 em{font-style:normal;color:var(--blue-strong)}
/* Narrow screens keep the complete scene and move tap controls to its immediate edge. */
@media(max-width:1050px){


 .gateway-media::before{height:auto;aspect-ratio:1916/1080;background:radial-gradient(ellipse at 50% 0,rgba(5,24,43,.4),transparent 26%);left:0;right:0}
 .gateway-content{position:static;width:auto;padding:16px 24px 20px;text-align:left;background:var(--glass-quiet);color:var(--ink)}
 body.glearning-ui .gateway-heading{position:absolute;left:28%;top:2.5%;width:44%;font-size:clamp(1rem,2.6vw,1.8rem);text-align:center}
 body.glearning-ui .gateway-content>p{font-size:.9rem;line-height:1.5;color:var(--ink);text-shadow:none;margin:0 0 12px}
 .gateway-content .hero__actions{justify-content:flex-start;gap:8px}
 .gateway-content .button{font-size:.85rem;padding:12px 16px}
 .gateway-content .button--ghost{background:var(--glass-quiet);color:var(--ink);border-color:var(--glass-depth)}
}
@media(max-width:560px){
 .gateway-opening{width:calc(100% - 24px);border-radius:16px;margin:12px auto 16px}
 .gateway-content{padding:16px}
 body.glearning-ui .gateway-heading{font-size:clamp(.8rem,3.7vw,1rem);top:2%}
 body.glearning-ui .gateway-content>p{font-size:.82rem}
 .gateway-content .button{font-size:.75rem;padding:11px 12px;min-height:44px}
 body.home .learning-hero__copy h2{font-size:2.05rem}
}
@media(prefers-reduced-motion:reduce){.gateway-video{transition:none}}