/* Generated atmosphere comes before the animation implementation. The original
   supplied GLTF geometries remain the subject of all three hero-size scenes. */
:root{--pcaa-red:#bb203e;--pcaa-green:#01411c;--pcaa-gold:#e7c38b;--pcaa-fog:#d7e5db}
#touch,#about,#join{overflow:hidden;isolation:isolate;position:relative}
#touch{height:min(1020px,108svh);min-height:820px;padding:0 max(42px,calc((100vw - 1340px)/2));display:flex;align-items:center;background:radial-gradient(ellipse at 60% 46%,#287a5938,transparent 53%),linear-gradient(115deg,#001f16 0%,#073d2b 48%,#3e1324 100%)}
#touch .touch-grid{position:relative;z-index:7;min-height:0;display:flex;align-items:center;max-width:600px;width:100%;margin:0;padding:0;pointer-events:none}
#touch .touch-content{position:relative;z-index:8;max-width:535px;pointer-events:auto}
#touch .touch-content h2{font-size:clamp(65px,8.6vw,136px);line-height:.95;letter-spacing:-.084em;text-shadow:0 8px 40px #000b}
#touch .touch-content h2 em{color:#ed526d!important;text-shadow:0 0 55px #d3335575}
#touch .touch-content p{max-width:370px;color:#e7eee7}
#touch .model-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:4!important;pointer-events:none!important;opacity:0;transition:opacity 1.4s ease}
#touch .model-canvas.model-loaded{opacity:1}
#touch:before{content:"";position:absolute;inset:-16%;z-index:3;pointer-events:none;background:url('/assets/generated/touch-light.svg') center / cover no-repeat,url('/assets/generated/touch-aura.webp') center / cover no-repeat;mix-blend-mode:screen;opacity:calc(.5 + var(--contact,0)*.18);filter:blur(9px);transform:scale(1.10);animation:pcaa-breathe 13s ease-in-out infinite}
#touch:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,#001c17e8 0%,#00241896 28%,#011d1600 65%),linear-gradient(0deg,#021d15ca,transparent 35%,transparent 83%,#021d1566)}
#touch.scrollrig-ready .model-canvas{filter:drop-shadow(0 15px 34px #00170eab)}
#about.dark-manifesto{height:105svh;min-height:850px;padding:94px max(42px,calc((100vw - 1340px)/2));background:radial-gradient(ellipse at 65% 42%,#5b0b2338,transparent 50%),linear-gradient(110deg,#061d18,#0c3828 49%,#0b1c1a 100%)}
#about .dragon-canvas{position:absolute;inset:0!important;width:100%!important;height:100%!important;z-index:4!important;pointer-events:none;filter:drop-shadow(0 10px 22px #030e0c7d)}
#about .manifesto-top,#about .manifesto-head,#about .manifesto-footer{z-index:8;position:relative;pointer-events:auto}
#about .manifesto-head{max-width:910px;margin-top:clamp(88px,18vh,165px);font-size:clamp(64px,8.1vw,124px);text-shadow:0 6px 30px #000d}
#about .manifesto-head span{color:#f15c75!important}
#about .manifesto-footer{align-items:end;margin-top:10vh}
#about .dragon-vignette{z-index:6;pointer-events:none;background:linear-gradient(90deg,#051c18b0 0%,transparent 51%),linear-gradient(0deg,#001e19c9 0%,transparent 35%,transparent 85%,#001e1955)}
#about:before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:url('/assets/generated/dragon-light-trails.svg') center / cover no-repeat,url('/assets/generated/dragon-mist.webp') center / cover no-repeat;mix-blend-mode:screen;opacity:.39;animation:pcaa-trails 17s ease-in-out infinite alternate}
#join.immersive-temple{height:100svh;min-height:820px;padding:120px max(42px,calc((100vw - 1340px)/2));background:linear-gradient(100deg,#001a17,#0c372a 54%,#65182f 100%)}
#join.immersive-temple .temple-canvas{position:absolute;inset:0!important;width:100%!important;height:100%!important;z-index:2!important;pointer-events:none;opacity:0;transition:opacity 1.3s ease!important}
#join.immersive-temple .temple-canvas.model-loaded{opacity:1!important}
#join.immersive-temple .temple-shade{z-index:5;pointer-events:none;background:url('/assets/generated/temple-depth.svg') center / cover no-repeat,linear-gradient(90deg,#001812f5 0%,#06291d77 35%,transparent 65%),linear-gradient(0deg,#001f17d1,transparent 52%)}
#join.immersive-temple:before{content:"";position:absolute;inset:-10%;z-index:4;pointer-events:none;background:url('/assets/generated/temple-fog.webp') center / cover no-repeat;opacity:.84;mix-blend-mode:screen;transform:translate3d(0,calc(var(--fog-scroll,0)*-40px),0) scale(1.05);animation:pcaa-mist-drift 23s ease-in-out infinite alternate}
#join.immersive-temple:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,#021c15eb 0%,transparent 44%),radial-gradient(ellipse at 69% 61%,transparent 27%,#011d156a 86%)}
#join.immersive-temple h2,#join.immersive-temple p,#join.immersive-temple .join-button,#join.immersive-temple .join-zh{position:relative;z-index:8;pointer-events:auto;text-shadow:0 6px 40px #000a}
#join.immersive-temple h2{max-width:700px;font-size:clamp(70px,8.2vw,127px)}
#join.immersive-temple p{max-width:450px}
#join.immersive-temple .join-button{background:#b51e3d;border-color:#ef6d83}
#join.immersive-temple .join-button:hover{background:#01411c}
/* Progressive enhancement: accessible stills are visible only if WebGL fails. */
.no-webgl #touch:before{content:"";position:absolute;inset:0;z-index:4;opacity:1;filter:none;mix-blend-mode:normal;background:url('/assets/fallback/touch-model.webp') no-repeat 76% center / min(76vw,1000px) auto}
.no-webgl #about:before{background:url('/assets/fallback/dragon-model.webp') center 48% / min(95vw,1400px) auto no-repeat;mix-blend-mode:normal;opacity:.85}
.no-webgl #join.immersive-temple:before{background:url('/assets/fallback/temple-model.webp') center 65% / min(92vw,1200px) auto no-repeat;mix-blend-mode:normal;opacity:.75}
@keyframes pcaa-mist-drift{from{transform:translate3d(-1.5%,1%,0) scale(1.04)}to{transform:translate3d(1.5%,-2%,0) scale(1.095)}}
@keyframes pcaa-trails{from{transform:translateX(-3%) scale(1.03)}to{transform:translateX(3%) scale(1.08)}}
@keyframes pcaa-breathe{50%{transform:scale(1.19);opacity:.6}}
@media(max-width:760px){
#touch{height:100svh;min-height:740px;padding:92px 22px 65px;align-items:flex-start}
#touch .touch-grid{align-items:flex-start;padding-top:10px}
#touch .touch-content h2{font-size:clamp(55px,13.3vw,83px)}
#touch .touch-content p{max-width:270px;font-size:13px}
#touch:after{background:linear-gradient(180deg,#001b16df 0%,#05271db3 21%,transparent 53%,#001e17cf 100%)}
#touch:before{background-position:center center}
#about.dark-manifesto{height:100svh;min-height:775px;padding:80px 22px}
#about .manifesto-head{font-size:clamp(47px,11.8vw,74px);margin-top:clamp(112px,18vh,165px)}
#about .manifesto-footer{margin-top:9vh}
#about .dragon-vignette{background:linear-gradient(0deg,#001810e3 0%,transparent 50%,#001810aa 100%)}
#join.immersive-temple{height:100svh;min-height:740px;padding:105px 24px 65px;justify-content:flex-start}
#join.immersive-temple h2{font-size:clamp(55px,12.3vw,85px);max-width:370px;margin-top:30px}
#join.immersive-temple .temple-shade{background:url('/assets/generated/temple-depth.svg') center /cover no-repeat,linear-gradient(180deg,#001c17d9 0%,transparent 52%,#001c17bb 100%)}
.no-webgl #touch:before{background-size:115vw auto;background-position:center 68%}
.no-webgl #join.immersive-temple:before{background-size:135vw auto;background-position:center 65%}
}
@media(prefers-reduced-motion:reduce){#touch:before,#about:before,#join.immersive-temple:before{animation:none!important;transform:none!important}#touch .model-canvas,#join .temple-canvas{transition:none!important}}

/* Strong photographic fallback only for browsers without a 3D context. */
.no-webgl #join.immersive-temple:before{background:url('/assets/fallback/temple-model.webp') 89% 58% / min(82vw,1300px) auto no-repeat!important;opacity:1!important;mix-blend-mode:normal;filter:brightness(1.35) saturate(1.35) contrast(1.07) drop-shadow(0 34px 45px #00160f80)}
.no-webgl #join.immersive-temple .temple-shade{background:linear-gradient(90deg,#001c16ed 0%,#022b208c 37%,transparent 70%),linear-gradient(0deg,#001b14a6 0%,transparent 31%)}
.no-webgl #about:before{opacity:.95!important;filter:brightness(1.4) saturate(1.22) drop-shadow(0 7px 40px #da364866)}
@media(max-width:760px){.no-webgl #join.immersive-temple:before{background-position:center 73%!important;background-size:155vw auto!important;opacity:.78!important}.no-webgl #about:before{background-size:145vw auto!important}}
.no-webgl #join.immersive-temple:before{background:url('/assets/generated/temple-cinematic.webp') center 60%/cover no-repeat!important;opacity:.93!important;filter:none!important}
/* The original join-panel glow had a fixed 650px pseudo-element; override it
   so the generated temple backdrop occupies the whole responsive section. */
#join.immersive-temple:before{width:auto!important;height:auto!important;inset:0!important;border-radius:0!important;max-width:none!important;aspect-ratio:auto!important}
#join.immersive-temple .join-zh{position:absolute;right:clamp(18px,4vw,56px);left:auto;bottom:30px;z-index:8;white-space:nowrap;pointer-events:none}
@media(max-width:760px){#join.immersive-temple .join-zh{display:none}}