/* Clear glass pane over the visible window (operator 2026-10-18): no drops, no tint. The effect is the rim, a raised
 * edge catching the light, plus a slow sheen that moves with the scroll. Purely cosmetic: nothing here takes a click.
 * Layers: .glass-sheen (z 20) sits under the header (z 30); the map section (z 25) sits above the sheen, so the map
 * stays fully matte; .glass-rim (z 90) frames the window edge above everything except the skip link (z 100). */
.glass-sheen,.glass-rim{position:fixed;inset:0;pointer-events:none}
.glass-sheen{z-index:20;overflow:hidden}
.glass-sheen::before{content:'';position:absolute;left:-20%;right:-20%;top:0;height:300%;will-change:transform;
 background:
  linear-gradient(112deg,transparent 0 30%,rgba(255,255,255,.055) 36%,rgba(255,255,255,.012) 41%,transparent 47%,
   transparent 58%,rgba(255,255,255,.03) 62%,transparent 66%),
  radial-gradient(60% 22% at 18% 4%,rgba(255,255,255,.07),transparent 70%)}
.glass-rim{z-index:90;--r:clamp(14px,1.6vw,22px);border-radius:var(--r);
 box-shadow:
  0 0 0 40px #050308,
  inset 0 -18px 34px -14px rgba(0,0,0,.5),
  inset -10px 0 26px -16px rgba(0,0,0,.4)}
/* The map is one step down from the rest of the site. As the visitor scrolls toward it the floor drops: a lit lip,
 * a shadowed step face, and the map sinking inward. Leaving it, the floor steps back up. Driven by the scroll
 * position itself (scroll-driven animation; glass.js drives the same keyframes where that is unsupported). */
.arrival-view{position:relative;z-index:25;overflow:clip;--step:34px}
.arrival-view>.arrival-grid{transform-origin:50% 30%;will-change:transform}
.arrival-view::before,.arrival-view::after{content:'';position:absolute;left:0;right:0;pointer-events:none;z-index:4}
/* Step face under the upper floor's edge: a bright lip on top, falling into shadow. */
.arrival-view::before{top:0;height:var(--step);transform-origin:50% 0;will-change:transform,opacity;
 background:linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.08) 1px,#020103 2px,rgba(2,1,3,.92) 30%,rgba(2,1,3,0) 100%)}
/* Recess shade: the sunken floor is darker at its walls than at its centre. */
.arrival-view::after{top:0;bottom:0;will-change:opacity;
 background:
  linear-gradient(180deg,rgba(0,0,0,.55),transparent 120px),
  linear-gradient(0deg,rgba(0,0,0,.35),transparent 90px),
  radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.45))}
@keyframes glass-sheen{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-66.6%,0)}}
@keyframes step-sink{
 0%{transform:translate3d(0,0,0) scale(1);animation-timing-function:cubic-bezier(.45,0,.2,1)}
 34%,66%{transform:translate3d(0,18px,0) scale(.962);animation-timing-function:cubic-bezier(.45,0,.2,1)}
 100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes step-face{
 0%{transform:scaleY(0);opacity:0;animation-timing-function:cubic-bezier(.45,0,.2,1)}
 34%,66%{transform:scaleY(1);opacity:1;animation-timing-function:cubic-bezier(.45,0,.2,1)}
 100%{transform:scaleY(0);opacity:0}}
/* The 3D storefront uses that depth: as the floor drops away it lifts, so it floats above the sunken map and its
 * shadow tightens under it. Individual translate/scale compose with diorama's own transform and fade-in. */
@keyframes diorama-float{
 0%{translate:0 0;scale:1;animation-timing-function:cubic-bezier(.45,0,.2,1)}
 34%,66%{translate:0 -30px;scale:1.045;animation-timing-function:cubic-bezier(.45,0,.2,1)}
 100%{translate:0 0;scale:1}}
@keyframes diorama-shadow-float{0%{scale:1;animation-timing-function:cubic-bezier(.45,0,.2,1)}34%,66%{scale:.78;animation-timing-function:cubic-bezier(.45,0,.2,1)}100%{scale:1}}
@keyframes step-shade{0%{opacity:0;animation-timing-function:cubic-bezier(.45,0,.2,1)}34%,66%{opacity:1;animation-timing-function:cubic-bezier(.45,0,.2,1)}100%{opacity:0}}
@supports (animation-timeline:view()){
 .glass-sheen::before{animation:glass-sheen linear both;animation-timeline:scroll(root)}
 .arrival-view>.arrival-grid{animation:step-sink linear both;animation-timeline:--arrival}
 .arrival-view::before{animation:step-face linear both;animation-timeline:--arrival}
 .arrival-view::after{animation:step-shade linear both;animation-timeline:--arrival}
 .arrival-view .arrival-diorama{animation:diorama-float linear both;animation-timeline:--arrival}
 .arrival-view .arrival-diorama-shadow{animation:diorama-shadow-float linear both;animation-timeline:--arrival}
 .arrival-view{view-timeline:--arrival block}}
/* Fallback (glass.js sets --p, 0..1, from the scroll position): the same keyframes, paused and scrubbed. */
.glass-scrub .glass-sheen::before{animation:glass-sheen 1s linear both paused;animation-delay:calc(var(--sheen-p,0) * -1s)}
.glass-scrub .arrival-view>.arrival-grid{animation:step-sink 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.glass-scrub .arrival-view::before{animation:step-face 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.glass-scrub .arrival-view::after{animation:step-shade 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.glass-scrub .arrival-view .arrival-diorama{animation:diorama-float 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
.glass-scrub .arrival-view .arrival-diorama-shadow{animation:diorama-shadow-float 1s linear both paused;animation-delay:calc(var(--p,0) * -1s)}
@media(max-width:700px){.arrival-view{--step:22px}.glass-rim{box-shadow:0 0 0 40px #050308,inset 0 -12px 24px -12px rgba(0,0,0,.45)}}
/* Reduced motion: the map keeps its recessed look, nothing moves. */
@media(prefers-reduced-motion:reduce){
 .glass-sheen::before,.arrival-view>.arrival-grid,.arrival-view::before,.arrival-view::after,.arrival-view .arrival-diorama,.arrival-view .arrival-diorama-shadow{animation:none!important}
 .arrival-view::before{transform:scaleY(1);opacity:1}.arrival-view::after{opacity:1}}
@media print{.glass-sheen,.glass-rim{display:none}}
/* Liquid glass (render.mjs glassLens). The bezel: the page behind the window's edge is frosted, saturated and lifted a
   touch, through a mask that is full at the rim and fades to nothing a bezel-width inside, so thick glass melts into the
   clear pane with no seam. */
.glass-lens,.glass-light{position:fixed;inset:0;pointer-events:none;border-radius:clamp(14px,1.6vw,22px)}
.glass-lens{z-index:85;--bz:clamp(18px,2.6vw,38px);
 -webkit-backdrop-filter:blur(7px) saturate(1.45) brightness(1.07);backdrop-filter:blur(7px) saturate(1.45) brightness(1.07);
 -webkit-mask-image:linear-gradient(180deg,#000,transparent var(--bz)),linear-gradient(0deg,#000,transparent var(--bz)),linear-gradient(90deg,#000,transparent var(--bz)),linear-gradient(270deg,#000,transparent var(--bz));
 mask-image:linear-gradient(180deg,#000,transparent var(--bz)),linear-gradient(0deg,#000,transparent var(--bz)),linear-gradient(90deg,#000,transparent var(--bz)),linear-gradient(270deg,#000,transparent var(--bz));
 -webkit-mask-composite:source-over;mask-composite:add}
/* The illumination border: a 3px band of light running round the window, brightest where the light source (top left)
   meets the glass, with a faint lilac and cyan cast for dispersion. It is blurred and kept faint, so it reads as light
   in the glass, never as a drawn line. The ring is the band minus its own content box. */
.glass-light{z-index:91;padding:3px;opacity:.55;filter:blur(1.4px);
 background:
  radial-gradient(42% 34% at 0 0,rgba(255,255,255,.95),transparent 72%),
  radial-gradient(30% 26% at 100% 100%,rgba(196,175,227,.55),transparent 70%),
  linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(214,198,240,.28) 28%,rgba(160,200,255,.12) 52%,rgba(214,198,240,.10) 74%,rgba(255,255,255,.26) 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media(max-width:700px){.glass-lens{--bz:14px}.glass-light{padding:2.5px}}
@media print{.glass-lens,.glass-light{display:none}}