.experience { position:relative; isolation:isolate; display:grid; min-height:100svh; overflow:hidden; place-items:center; background:radial-gradient(ellipse at 50% 43%, #0a0a12 0%, #030305 43%, #020202 78%); }
.experience::before { content:""; position:absolute; z-index:-3; inset:-20%; pointer-events:none; opacity:.38; background:radial-gradient(ellipse at 19% 63%,rgba(82,104,173,.11),transparent 20%),radial-gradient(ellipse at 81% 26%,rgba(142,86,172,.09),transparent 23%),repeating-radial-gradient(ellipse at 46% 48%,rgba(205,221,255,.05) 0 1px,transparent 1px 9px); filter:blur(1px); animation:dust-drift 26s var(--ease-in-out) infinite alternate; }
#starfield,.aurora,.vignette,.ambient-orb { position:absolute; inset:0; pointer-events:none; }
#starfield { z-index:-4; width:100%; height:100%; opacity:0; animation:stars-in 3.8s var(--ease-out) .4s forwards; }
.aurora { z-index:-3; opacity:0; background:radial-gradient(ellipse 40% 31% at 43% 40%, rgba(64,78,152,.14), transparent 72%),radial-gradient(ellipse 27% 30% at 60% 48%, rgba(104,62,143,.09), transparent 70%); filter:blur(18px); animation:aurora-in 4.5s var(--ease-out) 1.7s forwards, aurora-drift 18s ease-in-out 6s infinite alternate; }
.vignette { z-index:-2; background:radial-gradient(ellipse at center, transparent 31%, rgba(0,0,0,.12) 57%, rgba(0,0,0,.79) 100%); }
.ambient-orb { z-index:-1; inset:auto; left:50%; top:50%; width:min(70vw,800px); aspect-ratio:1; transform:translate(-50%,-48%); border-radius:50%; opacity:0; background:radial-gradient(circle, rgba(228,235,255,.1), rgba(101,104,182,.045) 31%, transparent 67%); filter:blur(10px); animation:orb-in 3.5s var(--ease-out) 2.1s forwards, orb-breathe 7s ease-in-out 5s infinite alternate; }
.scene { position:relative; display:grid; place-items:center; width:min(100%, 950px); min-height:100svh; perspective:1300px; }
.eyebrow,.scene-status,.hint,.mobile-orientation { position:absolute; margin:0; letter-spacing:.22em; text-transform:uppercase; font-size:10px; font-weight:500; }
.eyebrow { top:8.5vh; left:max(32px,5vw); color:rgba(255,255,255,.36); opacity:0; animation:copy-in 1.4s var(--ease-out) 4.3s forwards; }
.scene-status { top:8.5vh; right:max(32px,5vw); color:rgba(255,255,255,.3); opacity:0; animation:copy-in 1.4s var(--ease-out) 4.5s forwards; }
.envelope-stage { position:relative; width:min(64vw,474px); aspect-ratio:1.48; transform-style:preserve-3d; transition:transform 1.3s var(--ease-out); }
.hint { left:50%; bottom:7vh; transform:translateX(-50%); color:rgba(225,233,255,.27); white-space:nowrap; opacity:0; animation:hint-in 1.5s var(--ease-out) 5.2s forwards; transition:opacity .55s ease; }
.mobile-orientation { display:none; bottom:calc(7vh + 30px); left:50%; transform:translateX(-50%); color:rgba(255,255,255,.22); white-space:nowrap; }
.experience.is-open .hint { opacity:0; pointer-events:none; }