:root {
  color-scheme: dark;
  --ink: #eef7ff;
  --cyan: #8eefff;
  --violet: #d783ff;
  --pink: #ff65cf;
  --panel: rgba(5, 7, 18, .58);
  --line: rgba(205, 150, 255, .28);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #05020a; }
body { overflow: hidden; color: var(--ink); font-family: Orbitron, system-ui, sans-serif; }
a { color: inherit; }
.location-scene { position: relative; width: 100vw; height: 100svh; min-height: 620px; isolation: isolate; overflow: hidden; background: #080313; }
.location-scene__image { position: absolute; inset: -2.6%; z-index: -8; background: url('assets/locations/vespera-archive.png') center center / cover no-repeat; transform: scale(1.035); animation: scene-breathe 24s ease-in-out infinite alternate; will-change: transform, background-position; }
.location-scene__grade { position: absolute; inset: 0; z-index: -7; pointer-events:none; background: linear-gradient(180deg, rgba(4,3,18,.10), rgba(7,1,17,.04) 48%, rgba(2,2,10,.46) 100%), radial-gradient(circle at 53% 28%, rgba(255,78,224,.07), transparent 22%), radial-gradient(circle at 50% 80%, transparent 35%, rgba(0,0,0,.22) 100%); }
.location-scene__haze { position:absolute; z-index:-3; left:-8%; right:-8%; bottom:8%; height:28%; opacity:.24; filter: blur(20px); background: repeating-linear-gradient(172deg, transparent 0 8%, rgba(219,122,255,.14) 11%, transparent 19%); animation: haze-drift 20s linear infinite alternate; pointer-events:none; }
.location-scene__cloud { position:absolute; z-index:-5; width:72vw; height:24vh; border-radius:50%; pointer-events:none; filter:blur(38px); opacity:.13; background: radial-gradient(ellipse at center, rgba(226,171,255,.78) 0 18%, rgba(167,76,210,.38) 37%, transparent 68%); will-change:transform; }
.location-scene__cloud--far { top:25%; left:-28%; animation: cloud-far 34s ease-in-out infinite alternate; }
.location-scene__cloud--near { top:44%; right:-32%; opacity:.10; transform:scale(1.25); animation: cloud-near 27s ease-in-out infinite alternate; }
.location-scene__lights { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.city-light { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff2ff; box-shadow:0 0 6px #ff79dd,0 0 15px #ff41c8; opacity:.15; animation: blink var(--dur,3s) steps(2,end) infinite; animation-delay:var(--delay,0s); }
.city-light.cyan { background:#e8ffff; box-shadow:0 0 6px #88efff,0 0 15px #48bfff; }
.city-light.large { width:5px; height:5px; }
.location-scene__petals { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.petal { position:absolute; top:-6vh; width:9px; height:5px; border-radius:80% 15% 70% 30%; background:linear-gradient(135deg,#ff9bd8,#d52b98); opacity:.48; filter:blur(.2px); animation: petal-fall var(--fall,15s) linear infinite; animation-delay:var(--delay,0s); }
.location-hud { position:absolute; z-index:10; top:0; left:0; right:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:22px; padding:22px 28px; background:linear-gradient(180deg,rgba(2,3,11,.70),rgba(2,3,11,0)); text-shadow:0 2px 12px #000; }
.location-brand { justify-self:start; text-decoration:none; letter-spacing:.22em; font-weight:800; font-size:13px; color:#f4eaff; }
.location-readout { text-align:center; line-height:1.12; }
.location-readout span,.location-readout small { display:block; font-family:VT323,monospace; letter-spacing:.13em; font-size:15px; color:#d6a9ee; }
.location-readout strong { display:block; margin:3px 0 2px; font-size:24px; letter-spacing:.22em; color:#fff; }
.location-return { justify-self:end; text-decoration:none; font-size:10px; letter-spacing:.16em; color:#d7c6df; padding:8px 10px; border:1px solid rgba(238,205,255,.16); background:rgba(4,5,13,.26); }
.location-return:hover { border-color:rgba(230,158,255,.58); color:#fff; }
.location-status { position:absolute; z-index:9; top:92px; left:28px; padding:7px 10px; font:14px/1 VT323,monospace; letter-spacing:.09em; color:#d9c6e8; background:rgba(3,4,12,.35); border-left:1px solid rgba(217,140,255,.42); }
.location-status__dot { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:#b9ffda; box-shadow:0 0 10px #67ffaf; animation:status-pulse 2.2s ease-in-out infinite; }
.archive-hotspot { position:absolute; z-index:8; left:50.8%; top:10.5%; width:15.5%; height:35%; min-width:150px; min-height:190px; transform:translateX(-50%); text-decoration:none; outline:none; cursor:pointer; }
.archive-hotspot::before { content:""; position:absolute; left:35%; top:14%; width:30%; height:46%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,129,236,.17),rgba(216,64,255,.06) 42%,transparent 70%); filter:blur(7px); opacity:.18; transition:.25s ease; animation:tower-aura 3.7s ease-in-out infinite; }
.archive-hotspot__beam { position:absolute; left:49%; top:2%; width:2px; height:52%; transform:translateX(-50%); background:linear-gradient(180deg,rgba(255,238,255,0),rgba(255,169,244,.76),rgba(211,74,255,0)); filter:blur(.4px); opacity:.22; animation:beam-pulse 4.6s ease-in-out infinite; }
.archive-hotspot__ring { position:absolute; left:50%; top:30%; width:58px; height:22px; transform:translate(-50%,-50%); border:1px solid rgba(255,194,246,.0); border-radius:50%; transition:.28s ease; }
.archive-hotspot__ring--b { width:84px; height:34px; }
.archive-hotspot__target { position:absolute; left:50%; top:31%; width:9px; height:9px; transform:translate(-50%,-50%); border:1px solid rgba(255,223,252,.30); border-radius:50%; background:rgba(255,116,226,.08); box-shadow:0 0 18px rgba(255,55,204,.25); transition:.25s ease; }
.archive-hotspot__label { position:absolute; left:50%; top:70%; min-width:230px; transform:translate(-50%,9px); padding:10px 12px 11px; opacity:0; pointer-events:none; text-align:center; background:rgba(4,4,13,.72); border:1px solid rgba(237,151,255,.32); backdrop-filter:blur(8px); transition:.25s ease; }
.archive-hotspot__label::before { content:""; position:absolute; top:-27px; left:50%; height:26px; border-left:1px solid rgba(236,149,255,.38); }
.archive-hotspot__label small,.archive-hotspot__label em { display:block; font:14px/1.1 VT323,monospace; letter-spacing:.10em; font-style:normal; color:#dba7ef; }
.archive-hotspot__label strong { display:block; margin:4px 0 6px; font-size:13px; letter-spacing:.12em; color:#fff; }
.archive-hotspot__label em { color:#9ef7ff; }
.archive-hotspot:hover::before,.archive-hotspot:focus-visible::before { opacity:.9; }
.archive-hotspot:hover .archive-hotspot__ring,.archive-hotspot:focus-visible .archive-hotspot__ring { border-color:rgba(255,206,249,.7); box-shadow:0 0 16px rgba(255,89,219,.20); }
.archive-hotspot:hover .archive-hotspot__ring--a,.archive-hotspot:focus-visible .archive-hotspot__ring--a { animation:ring-spin 5s linear infinite; }
.archive-hotspot:hover .archive-hotspot__ring--b,.archive-hotspot:focus-visible .archive-hotspot__ring--b { animation:ring-spin-rev 8s linear infinite; }
.archive-hotspot:hover .archive-hotspot__target,.archive-hotspot:focus-visible .archive-hotspot__target { background:#fff0fb; border-color:#fff; box-shadow:0 0 8px #fff,0 0 23px #ff4bd1,0 0 44px #c543ff; }
.archive-hotspot:hover .archive-hotspot__label,.archive-hotspot:focus-visible .archive-hotspot__label { opacity:1; transform:translate(-50%,0); }
.location-caption { position:absolute; z-index:6; left:28px; bottom:31px; max-width:460px; padding:13px 15px 14px; color:#f5ebff; background:linear-gradient(90deg,rgba(4,5,14,.68),rgba(4,5,14,.18)); border-left:1px solid rgba(232,144,255,.52); text-shadow:0 2px 10px #000; }
.location-caption span { font-size:11px; letter-spacing:.18em; color:#dfa5f6; }
.location-caption p { margin:7px 0 0; font:17px/1.15 VT323,monospace; letter-spacing:.03em; color:#ddd3e8; }
.location-hint { position:absolute; z-index:6; right:28px; bottom:31px; font:14px/1 VT323,monospace; letter-spacing:.08em; color:rgba(239,225,247,.68); text-shadow:0 2px 8px #000; }
@keyframes scene-breathe { 0%{transform:scale(1.035) translate3d(-.4%,0,0)} 100%{transform:scale(1.055) translate3d(.6%,-.35%,0)} }
@keyframes cloud-far { from{transform:translate3d(-4vw,0,0) scale(1)} to{transform:translate3d(58vw,2vh,0) scale(1.15)} }
@keyframes cloud-near { from{transform:translate3d(5vw,0,0) scale(1.25)} to{transform:translate3d(-57vw,-2vh,0) scale(1.4)} }
@keyframes haze-drift { from{transform:translateX(-2%)} to{transform:translateX(6%)} }
@keyframes blink { 0%,36%,100%{opacity:.10} 38%,49%{opacity:.9} 50%,78%{opacity:.26} 80%,88%{opacity:.85} }
@keyframes status-pulse { 50%{opacity:.48;box-shadow:0 0 4px #67ffaf} }
@keyframes beam-pulse { 0%,100%{opacity:.18;transform:translateX(-50%) scaleY(.9)} 50%{opacity:.52;transform:translateX(-50%) scaleY(1.07)} }
@keyframes tower-aura { 0%,100%{transform:scale(.9);opacity:.16} 50%{transform:scale(1.15);opacity:.43} }
@keyframes ring-spin { to{transform:translate(-50%,-50%) rotate(360deg) scaleX(1.1)} }
@keyframes ring-spin-rev { to{transform:translate(-50%,-50%) rotate(-360deg) scaleX(.95)} }
@keyframes petal-fall { 0%{transform:translate3d(0,-6vh,0) rotate(0deg)} 35%{transform:translate3d(5vw,35vh,0) rotate(170deg)} 70%{transform:translate3d(-3vw,73vh,0) rotate(320deg)} 100%{transform:translate3d(8vw,112vh,0) rotate(510deg)} }
@media (max-width: 760px) {
  .location-hud { grid-template-columns:1fr auto; padding:15px; }
  .location-readout { grid-column:1 / -1; grid-row:2; text-align:left; margin-top:2px; }
  .location-return { grid-column:2; grid-row:1; }
  .location-readout strong { font-size:20px; }
  .location-status { top:122px; left:15px; }
  .archive-hotspot { left:51%; top:11%; width:28%; height:34%; }
  .archive-hotspot__label { min-width:205px; top:73%; }
  .location-caption { left:15px; right:15px; bottom:42px; max-width:none; }
  .location-hint { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:1ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}