/* A luminous architectural space, built from translucent planes and light. */
.ambient.architectural{background:#040b15;overflow:hidden;perspective:1100px}
.architectural .light-atmosphere{position:absolute;inset:-15%;background:radial-gradient(ellipse at 78% 43%,#087ca75c,transparent 38%),radial-gradient(ellipse at 47% 98%,#1343a34a,transparent 45%),radial-gradient(ellipse at 94% 10%,#c2914028,transparent 34%);animation:atmosphereDrift 24s ease-in-out infinite alternate}
.glass-space{position:absolute;left:45%;top:-12%;width:60%;height:125%;transform:rotate(-18deg);transform-style:preserve-3d}
.glass-slab{display:block;position:absolute;border-radius:26px;transform:skewY(-12deg);overflow:hidden}
.glass-slab:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#c1f1ff18,transparent 35%,#7bd5ff08 70%,#9febff12);border-radius:inherit;box-shadow:inset 1px 0 #9eeaff50,inset -1px 0 #a6eaff0c}
.slab-back{left:7%;top:6%;width:45%;height:78%;background:linear-gradient(120deg,#122e5355,#06152722);border:1px solid #4591bf21;box-shadow:-25px 10px 80px #0005;animation:planeBack 25s ease-in-out infinite alternate}
.slab-main{left:34%;top:17%;width:49%;height:85%;background:linear-gradient(110deg,#11375480,#12385128 43%,#071b2d95);border:1px solid #74dbff32;box-shadow:-28px 15px 80px #0007,-2px 0 20px #4dcfff1c,inset 3px 0 18px #3aaddf20;animation:planeMain 22s ease-in-out infinite alternate}
.slab-main:before{content:'';position:absolute;inset:0;background:linear-gradient(165deg,transparent 15%,#7fe3ff20 42%,transparent 64%);transform:translateY(-35%);animation:lightSweep 16s ease-in-out infinite alternate}
.slab-gold{left:87%;top:-3%;width:16%;height:83%;background:linear-gradient(90deg,#dbb87913,#b9832710,transparent);border-left:1px solid #e8bd7899;box-shadow:-5px 0 35px #e8bd7814;animation:planeBack 29s ease-in-out -8s infinite alternate}
.architectural .depth-grid{position:absolute;inset:0;background-image:radial-gradient(circle,#91d4f145 .7px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse at 83% 73%,#0008,transparent 48%);opacity:.3}
.architectural .ambient-vignette{background:linear-gradient(90deg,#030811ed,#03081188 33%,transparent 70%),linear-gradient(0deg,#030811b0,transparent 20%,transparent 80%,#03081166)}
@keyframes atmosphereDrift{to{transform:translate(-2%,3%) scale(1.04)}}
@keyframes planeMain{from{transform:skewY(-12deg) translate(0,0)}to{transform:skewY(-10deg) translate(12px,-18px)}}
@keyframes planeBack{to{transform:skewY(-12deg) translate(-9px,15px)}}
@keyframes lightSweep{to{transform:translateY(30%)}}
@media(max-width:760px){.glass-space{left:30%;width:100%;opacity:.8}.architectural .ambient-vignette{background:linear-gradient(90deg,#030811dd,#03081170 65%,#03081133),linear-gradient(0deg,#03081199,transparent 45%)}.glass-slab{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.architectural *,.architectural *:before{animation:none!important}}
/* Passing illumination across the glass, staggered between planes. */
.glass-reflection{position:absolute;z-index:2;left:-35%;top:-40%;width:170%;height:36%;pointer-events:none;background:linear-gradient(165deg,transparent 18%,#a8eaff05 35%,#b9edff25 49%,#e7fbff40 50%,#b9edff12 53%,transparent 72%);filter:blur(1px);mix-blend-mode:screen;animation:glassPass 13s cubic-bezier(.3,0,.25,1) infinite;will-change:transform,opacity}
.edge-glint{position:absolute;z-index:3;left:0;top:0;width:2px;height:22%;background:linear-gradient(transparent,#bdefff,#fff,transparent);box-shadow:0 0 12px #61d7ff;opacity:0;animation:edgePass 13s cubic-bezier(.3,0,.25,1) infinite;will-change:transform,opacity}
.slab-back .glass-reflection,.slab-back .edge-glint{animation-delay:3s;animation-duration:17s}.slab-back .glass-reflection{opacity:.6}
.slab-gold .glass-reflection{background:linear-gradient(165deg,transparent 30%,#e8bd7810 44%,#ffe2ac44 50%,transparent 66%);animation-delay:6s;animation-duration:19s}
.slab-gold .edge-glint{background:linear-gradient(transparent,#e8bd78,#fff2cc,transparent);box-shadow:0 0 15px #e8bd7899;animation-delay:6s;animation-duration:19s}
@keyframes glassPass{0%,8%{transform:translateY(-20%);opacity:0}18%{opacity:.8}55%{opacity:.7}70%,100%{transform:translateY(430%);opacity:0}}
@keyframes edgePass{0%,9%{transform:translateY(-120%);opacity:0}20%,52%{opacity:.8}70%,100%{transform:translateY(560%);opacity:0}}
@media(prefers-reduced-motion:reduce){.glass-reflection,.edge-glint{display:none;animation:none!important;will-change:auto}}
/* More visible motion: broad moving illumination and continuously passing edges. */
.glass-reflection{height:48%;background:linear-gradient(165deg,transparent 12%,#7cdcff18 32%,#b9edff66 47%,#effcff99 50%,#7cdbff32 56%,transparent 80%);animation:glassPassStrong 7s linear -2s infinite;filter:blur(2px)}
.edge-glint{width:3px;height:34%;box-shadow:0 0 18px #61d7ff,0 0 40px #61d7ff66;animation:edgePassStrong 7s linear -2s infinite}
.slab-back .glass-reflection,.slab-back .edge-glint{animation-duration:9s;animation-delay:-5s}
.slab-gold .glass-reflection{background:linear-gradient(165deg,transparent 15%,#e8bd7822 35%,#ffe2ac99 50%,#e8bd7833 58%,transparent 80%);animation-duration:8s;animation-delay:-3s}
.slab-gold .edge-glint{box-shadow:0 0 22px #e8bd78,0 0 45px #e8bd7877;animation-duration:8s;animation-delay:-3s}
.glass-bloom{position:absolute;inset:-30%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#32baf859,transparent 52%);animation:bloomTravel 9s ease-in-out -3s infinite alternate;mix-blend-mode:screen;will-change:transform}
.slab-back .glass-bloom{animation-duration:12s;animation-delay:-8s;background:radial-gradient(ellipse,#377bef44,transparent 55%)}
.slab-gold .glass-bloom{background:radial-gradient(ellipse,#e8bd784d,transparent 55%);animation-duration:10s;animation-delay:-6s}
.slab-main{animation:planeMainVisible 12s ease-in-out infinite alternate}
.slab-back{animation:planeBackVisible 15s ease-in-out -5s infinite alternate}
.slab-gold{animation:planeBackVisible 14s ease-in-out -8s infinite alternate}
@keyframes glassPassStrong{0%{transform:translateY(-50%);opacity:0}10%{opacity:.9}82%{opacity:.9}100%{transform:translateY(340%);opacity:0}}
@keyframes edgePassStrong{0%{transform:translateY(-110%);opacity:0}12%,82%{opacity:1}100%{transform:translateY(320%);opacity:0}}
@keyframes bloomTravel{from{transform:translate(-12%,-22%)}to{transform:translate(12%,28%)}}
@keyframes planeMainVisible{from{transform:skewY(-12deg) translate(-8px,18px)}to{transform:skewY(-8deg) translate(18px,-38px)}}
@keyframes planeBackVisible{from{transform:skewY(-12deg) translate(0,-12px)}to{transform:skewY(-15deg) translate(-16px,32px)}}
@media(prefers-reduced-motion:reduce){.architectural .glass-slab,.architectural .glass-bloom,.architectural .glass-reflection,.architectural .edge-glint{animation:none!important;will-change:auto}.glass-bloom{display:none}}
/* One rounded silhouette for every original, repeated plane and light overlay. */
.architectural .glass-slab{--glass-radius:32px;border-radius:var(--glass-radius);clip-path:inset(0 round var(--glass-radius));overflow:hidden;isolation:isolate}
.architectural .glass-slab:before,.architectural .glass-slab:after,.architectural .glass-reflection,.architectural .glass-bloom{border-radius:var(--glass-radius)}
.architectural .edge-glint{border-radius:999px}