.vista{position:relative;overflow:hidden;isolation:isolate}
/* Positioned in the document rather than fixed to the viewport, so the coin
   stays where it landed on the page and a scroll carries it away with
   everything around it. Fixed, it sat still on screen while the page moved
   under it — and because the drawing position was recomputed a frame behind
   each scroll, it lagged as well. The script sets top to the scroll offset
   the reveal began at. */
.coin-particle-canvas{position:absolute;left:0;top:0;z-index:12;display:block;width:100%;height:100vh;pointer-events:none!important;user-select:none;contain:strict}
@media(prefers-reduced-motion:reduce){.coin-particle-canvas{display:none!important}}

:root{--scene-x:50%}
body:before{background-position:var(--scene-x) top}
.alexandria-atmosphere{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict;mix-blend-mode:screen}
main{position:relative;z-index:1}
.atmosphere-stars,.atmosphere-haze,.city-flicker,.water-shimmer,.lighthouse-light{position:absolute;inset:0}
.atmosphere-stars{bottom:50%;background-image:radial-gradient(circle at 8% 21%,#fff8d8 0 1px,transparent 1.8px),radial-gradient(circle at 23% 13%,#fff 0 1px,transparent 1.7px),radial-gradient(circle at 39% 27%,#ffe7a1 0 1px,transparent 1.8px),radial-gradient(circle at 54% 9%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 68% 18%,#fff2c5 0 1px,transparent 1.8px),radial-gradient(circle at 83% 8%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 94% 29%,#ffe6a0 0 1px,transparent 1.8px);background-size:29% 43%,31% 37%,37% 51%,41% 39%,43% 47%,33% 53%,39% 41%;opacity:.28;animation:stars-breathe 6s ease-in-out infinite alternate;will-change:opacity}
.atmosphere-haze{top:18%;bottom:auto;height:31%;width:140%;left:-20%;background:radial-gradient(ellipse at center,rgba(255,174,88,.09),transparent 67%);filter:blur(18px);animation:haze-drift 28s ease-in-out infinite alternate;will-change:transform,opacity}
.lighthouse-light{inset:auto;left:var(--lamp-x,80.55vw);top:var(--lamp-y,23.8vh);width:1px;height:1px;filter:drop-shadow(0 0 8px rgba(255,188,73,.6));isolation:isolate;perspective:900px}
.lighthouse-beam{position:absolute;left:0;top:-6vh;width:max(62vw,720px);height:12vh;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,246,204,.52) 0,rgba(255,220,138,.25) 14%,rgba(255,193,72,.11) 50%,transparent 100%);clip-path:polygon(0 46%,100% 4%,100% 96%,0 54%);filter:blur(7px);mix-blend-mode:screen;opacity:0;animation:lighthouse-sweep 13.5s cubic-bezier(.42,0,.58,1) infinite;will-change:transform,opacity}
.lighthouse-beam::after{content:"";position:absolute;inset:24% 0;background:linear-gradient(90deg,rgba(255,252,226,.48),rgba(255,220,132,.12) 42%,transparent 88%);clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);filter:blur(3px)}
.lighthouse-glow{position:absolute;width:clamp(20px,2vw,34px);height:clamp(20px,2vw,34px);left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fffdf0 0 10%,#ffe39a 24%,rgba(255,175,48,.38) 52%,transparent 74%);box-shadow:0 0 15px #ffcf65,0 0 38px rgba(255,174,45,.55);animation:lamp-breathe 13.5s ease-in-out infinite}
.city-flicker{top:37%;bottom:auto;height:18%;background:radial-gradient(circle at 16% 62%,rgba(255,185,56,.25) 0 1px,transparent 2px),radial-gradient(circle at 29% 48%,rgba(255,208,100,.22) 0 1px,transparent 2px),radial-gradient(circle at 43% 70%,rgba(255,184,55,.2) 0 1px,transparent 2px),radial-gradient(circle at 61% 58%,rgba(255,212,119,.19) 0 1px,transparent 2px),radial-gradient(circle at 76% 66%,rgba(255,183,49,.22) 0 1px,transparent 2px);background-size:43px 31px,57px 37px,67px 41px,73px 47px,83px 53px;opacity:.32;animation:city-lights 5.5s steps(4,end) infinite}
.water-shimmer{top:47%;background:repeating-linear-gradient(96deg,transparent 0 7%,rgba(255,193,72,.045) 7.2% 7.5%,transparent 7.8% 14%);mask-image:linear-gradient(transparent,rgba(0,0,0,.8) 12%,rgba(0,0,0,.6) 45%,transparent 72%);animation:water-shift 11s ease-in-out infinite alternate;will-change:transform,opacity}
.ambient-paused .alexandria-atmosphere *{animation-play-state:paused!important}
@keyframes lighthouse-sweep{0%{transform:scaleX(-1);opacity:.5}20%{transform:scaleX(-.34);opacity:.7}27%{transform:scaleX(-.05);opacity:1}34%{transform:scaleX(.28);opacity:.72}52%{transform:scaleX(1);opacity:.48}70%{transform:scaleX(.24);opacity:.2}76%{transform:scaleX(.02);opacity:0}82%{transform:scaleX(-.22);opacity:.12}100%{transform:scaleX(-1);opacity:.5}}
@keyframes lamp-breathe{0%,100%{opacity:.74;transform:translate(-50%,-50%) scale(1)}20%{opacity:.84;transform:translate(-50%,-50%) scale(1.04)}27%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}38%,58%{opacity:.72;transform:translate(-50%,-50%) scale(.98)}76%{opacity:.5;transform:translate(-50%,-50%) scale(.86)}82%{opacity:.58;transform:translate(-50%,-50%) scale(.92)}}
@keyframes stars-breathe{0%{opacity:.18}55%{opacity:.34}100%{opacity:.25}}
@keyframes haze-drift{0%{transform:translate3d(-3%,0,0);opacity:.35}100%{transform:translate3d(3%,1.5vh,0);opacity:.7}}
@keyframes city-lights{0%,100%{opacity:.18}45%{opacity:.4}75%{opacity:.26}}
@keyframes water-shift{0%{transform:translate3d(-1.5%,0,0);opacity:.42}100%{transform:translate3d(1.5%,.5vh,0);opacity:.7}}
@media(max-width:900px){.atmosphere-haze{display:none}.lighthouse-beam{width:120vw;height:7vh;top:-3.5vh;filter:blur(3px);opacity:.58}.city-flicker{opacity:.2}.water-shimmer{animation-duration:16s}}
@media(max-width:560px){:root{--scene-x:76%}}
@media(prefers-reduced-motion:reduce){.alexandria-atmosphere *{animation:none!important}.lighthouse-beam{transform:scaleX(-.82);opacity:.34}.lighthouse-glow{opacity:.75}.atmosphere-stars{opacity:.23}.atmosphere-haze{opacity:.4}.city-flicker{opacity:.2}.water-shimmer{opacity:.35}}