/* ============================================================================
   AURORA  —  affordances.css
   The eight landscape affordances + frost labels + deep-page overlays + glyph.
   No chrome: SVG primitives, soft halos, frost text on hover only.
   ============================================================================ */

#affordances {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;                 /* children opt in via .aff-hit etc. */
  transition: opacity .8s ease;
}
#affordances.exhibit-active { opacity: 0.4; }   /* quieter when an exhibit owns the stage */

.affordance { position: absolute; }
.aff-svg { display: block; overflow: visible; }
.aff-hit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  pointer-events: auto;
}
.aff-svg [style*="cursor"], .aff-svg rect[fill="transparent"], .aff-svg ellipse[stroke="transparent"] { pointer-events: auto; }

/* frost-text hover label — Tiempos/serif, frost cream, above the object.
   A dark halo (not a box) keeps it readable over bright snow/aurora. */
.aff-label {
  position: absolute; left: 50%; top: 0; transform: translate(-50%,-100%) translateY(-18px);
  font-family: var(--font-frost); font-size: 14px; color: var(--frost-cream);
  white-space: nowrap; pointer-events: none; opacity: 0;
  text-shadow: 0 1px 3px rgba(4,6,12,0.9), 0 0 10px rgba(4,6,12,0.75), 0 0 18px rgba(255,232,184,0.25);
  transition: opacity .18s ease, transform .18s ease;
}
.affordance.hover .aff-label { opacity: 1; transform: translate(-50%,-100%) translateY(-22px); }

/* 1 · constellation crown */
.crown-star { transition: r .25s ease, opacity .6s ease; animation: crown-tw 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes crown-tw { 0%,100% { transform: scale(0.85); } 50% { transform: scale(1.1); } }
.aff-crown.hover .crown-star { filter: brightness(1.25); }
.aff-crown .aff-svg { cursor: default; }

/* 2 · moonlight ring */
/* 2 · moonlight ring — original size, dropped below the aurora band */
.aff-ring { pointer-events: none; }
.ring-svg { display: block; overflow: visible; }
.ring-spin { animation: ring-rot 21600s linear infinite; }
@keyframes ring-rot { to { transform: rotate(360deg); } }
.ring-line { transition: stroke-dasharray 1.2s ease, stroke-opacity .3s ease; filter: drop-shadow(0 0 4px rgba(255,183,102,0.55)); }
.ring-label { left: 50%; top: -10px; }
.aff-ring.hover .ring-label { opacity: 1; }

/* world-locked props are repositioned every frame — no CSS transition (would lag) */
.affordance.world-prop { transition: none; will-change: transform, top, left; }
/* the branches camp is a real 3D shack in the WebGL scene — hide its 2D glyph,
   keep only the hit target + label */
.aff-roots .roots-svg { display: none; }
.aff-roots .aff-hit { width: 70px; height: 70px; }

/* 3 · ski hut — the lodge camp is a real 3D shack in the WebGL scene now;
   hide its 2D cartoon glyph (like roots/forge), keep the hit target + label */
.aff-lodge .skihut-svg { display: none; }
.aff-lodge { transition: filter .3s ease; }
.aff-lodge.hover { filter: drop-shadow(0 0 16px rgba(255,183,102,0.35)); }
.skihut-win { fill: #1b2230; transition: fill .8s ease; }
.aff-lodge.lit .skihut-win { fill: #FFC074; filter: drop-shadow(0 0 3px rgba(255,183,102,0.9)); }
.aff-lodge.lit .skihut-loft { fill: #FFD89A; }
.aff-lodge.hover .skihut-win { filter: brightness(1.25); }
.lodge-smoke { animation: smoke-rise 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; opacity: 0; transition: opacity .8s ease; }
.aff-lodge.lit .lodge-smoke { opacity: 1; }
@keyframes smoke-rise { 0%,100% { transform: translateX(-1px); opacity: .14; } 50% { transform: translateX(1px); opacity: .22; } }
.lodge-wave .skihut-win { animation: lodge-wave 60s linear infinite; }
@keyframes lodge-wave { 0%,97%,100% { filter: brightness(1); } 98.5% { filter: brightness(1.5); } }

/* 4 · memory shelf */
.aff-shelf { position: fixed; right: 0; top: 30vh; bottom: 30vh; width: 32px; }
.shelf-seam { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--frost-glow); opacity: 0.25; transition: width .4s ease, opacity .3s ease; }
.aff-shelf.hover .shelf-seam { opacity: 1; }
.shelf-hit { position: absolute; right: 0; top: 0; bottom: 0; width: 32px; pointer-events: auto; }
.shelf-label { position: absolute; right: 14px; left: auto; top: 50%; transform: translateY(-50%); }
.aff-shelf.hover .shelf-label { opacity: 1; }

/* 5 · amber lanterns */
.lantern { animation: lantern-bob var(--bob,5s) ease-in-out infinite; animation-delay: var(--ph,0s); transform-box: fill-box; transform-origin: center; }
@keyframes lantern-bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.aff-lanterns.hover .lantern { filter: brightness(1.3); }
.aff-lanterns.urgent .lantern:nth-child(2) { animation: lantern-flicker .8s ease-in-out infinite; }
@keyframes lantern-flicker { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* 6 · forge */
.forge-mouth { transition: opacity .4s ease; }
.forge-exec .forge-mouth { animation: forge-pulse .6s ease-in-out infinite; }
@keyframes forge-pulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.forge-exec .forge-arm { animation: forge-hammer .6s ease-in-out infinite; transform-box: fill-box; transform-origin: 34px 42px; }
@keyframes forge-hammer { 0%,100% { transform: rotate(-20deg); } 45% { transform: rotate(-20deg); } 55% { transform: rotate(25deg); } 70% { transform: rotate(25deg); } }
.forge-cold .forge-mouth { fill: #5C7FB5; }
.forge-paused .forge-fig { display: none; }
.aff-forge.hover .forge-mouth, .aff-forge.hover .forge-fig { filter: brightness(1.25); }

/* 7 · glowing roots */
.roots-pulse, .root-trunk, .root-tip { animation: roots-pulse 4s ease-in-out infinite; }
@keyframes roots-pulse { 0%,100% { filter: brightness(0.85); } 50% { filter: brightness(1.15); } }
.root-tip { animation: root-tip 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes root-tip { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.aff-roots.hover .aff-svg { filter: brightness(1.25); }

/* 8 · fireplace gathering */
.aff-fire { pointer-events: none; }
.fire-svg { pointer-events: none; }
.fire-flame { pointer-events: auto; filter: drop-shadow(0 0 6px rgba(255,150,60,0.6)); }
.fire-fig { transition: opacity .4s ease; }
.fire-fig .fig-name { font-family: var(--font-mono); font-size: 6px; opacity: 0; transition: opacity .2s ease; }
.aff-fire.hover .fire-fig { filter: brightness(1.2); }
.aff-fire.hover .fire-fig .fig-name { opacity: 0.7; }
.fig-down { transform: translateY(2px); }
.fire-warn .fire-flame { animation: fire-warn 15s linear infinite; }
@keyframes fire-warn { 0%,98%,100% { filter: drop-shadow(0 0 6px rgba(255,150,60,0.6)); } 99% { filter: drop-shadow(0 0 8px rgba(255,92,60,0.9)) brightness(1.2); } }
.fire-label { top: auto; bottom: -16px; transform: translate(-50%, 0); }
.aff-fire.hover .fire-label { opacity: 1; }

/* ============================ DEEP-PAGE OVERLAY ========================== */
#deep-overlay {
  position: fixed; inset: 0; z-index: 24;
  display: none; opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;                 /* the live scene shows through; only the glyph is interactive */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#deep-overlay.show { display: block; opacity: 1; }

/* depth fog — the night thickens behind the frost text so it reads over the
   live shader; the world stays visible at the edges. Fog, never a card. */
#deep-overlay::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(140% 100% at 50% 38%,
    rgba(6, 9, 18, 0.68) 0%, rgba(6, 9, 18, 0.58) 52%,
    rgba(6, 9, 18, 0.26) 78%, rgba(6, 9, 18, 0.06) 100%);
  opacity: 0; transition: opacity .8s ease;
}
#deep-overlay.show::before { opacity: 1; }
/* the fire clearing IS the page — keep its fog thin so the cast glows through */
#deep-overlay.dp-light::before {
  background: radial-gradient(140% 100% at 50% 30%,
    rgba(6, 9, 18, 0.42) 0%, rgba(6, 9, 18, 0.3) 50%,
    rgba(6, 9, 18, 0.1) 75%, rgba(6, 9, 18, 0) 100%);
}

/* the home greeting / footprints / capture line yield to a summoned surface */
body.deep-open #frost-replies,
body.deep-open #footprints,
body.deep-open #capture,
body.flying #frost-replies {
  opacity: 0 !important; pointer-events: none; transition: opacity .45s ease;
}
/* the 3D cast belongs to the home world + the pulse clearing only; on other
   summoned surfaces (and 2D-zoomed sky routes, where the stage scales but the
   fixed cast layer can't) it fades out instead of floating off the terrain */
#cast-scene { transition: opacity .45s ease; }
body.cast-hidden #cast-scene { opacity: 0; }
body.cast-hidden #cast-scene .cs-item { pointer-events: none !important; }

.aurora-glyph {
  position: fixed; top: 16px; left: 16px; z-index: 50;
  width: 32px; height: 32px; padding: 0; border: none; background: none; cursor: default;
  animation: glyph-breathe 2.5s ease-in-out infinite;
  pointer-events: auto;
}
.aurora-glyph svg { display: block; }
.aurora-glyph:hover { filter: brightness(1.3) drop-shadow(0 0 16px rgba(123,255,176,0.4)); }
@keyframes glyph-breathe { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

.dp { max-width: 620px; margin: 0 auto; padding: 16vh 32px 12vh; pointer-events: auto; } /* content column opts back in (overlay is pointer-events:none so the scene shows through the margins) */
.dp-head { margin-bottom: 26px; }
.dp-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(201,213,232,0.72); margin-bottom: 10px; text-shadow: 0 1px 6px rgba(4,6,12,0.8); }
.dp-title { font-family: var(--font-body); font-weight: 200; font-size: 46px; letter-spacing: -0.01em; color: var(--snow-bright); text-shadow: 0 2px 20px rgba(4,6,12,0.85); }
.dp-lede { font-family: var(--font-frost); font-size: 17px; line-height: 1.6; color: rgba(244,239,227,0.9); margin-bottom: 22px; text-shadow: 0 1px 10px rgba(4,6,12,0.85); }
.dp-narr { font-family: var(--font-frost); font-size: 19px; line-height: 1.65; color: var(--frost-cream); border-left: 1px solid rgba(255,197,128,0.4); padding-left: 18px; text-shadow: 0 1px 10px rgba(4,6,12,0.85); }
.dp-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(201,213,232,0.12); font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--snow-bright); text-shadow: 0 1px 8px rgba(4,6,12,0.8); }
.dp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.dp-card { border: 1px solid rgba(180,236,255,0.2); background: rgba(7,11,22,0.52); padding: 18px 20px; margin-bottom: 14px; }
.dp-card-t { font-family: var(--font-body); font-weight: 300; font-size: 18px; color: var(--snow-bright); margin-bottom: 12px; text-shadow: 0 1px 8px rgba(4,6,12,0.8); }
.dp-actions { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--aurora-ice); }
.dp-log { font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: rgba(201,213,232,0.78); }
.dp-log div::before { content: ""; }

/* pulse close-up: the detailed fire in its clearing */
.dp-pulse-fire { padding-top: 10vh; text-align: center; }
.fire-scene { position: relative; width: 520px; max-width: 92vw; margin: 0 auto 8px; }
.fire-scene-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 40px rgba(255,140,70,0.35)); }
.fs-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.fs-core { animation: fs-flick 0.5s ease-in-out infinite alternate; }
.fs-mid  { animation: fs-flick 0.7s ease-in-out infinite alternate; }
.fs-outer{ animation: fs-flick 0.9s ease-in-out infinite alternate; }
@keyframes fs-flick { 0% { transform: scaleY(0.94) scaleX(1.03) skewX(-2deg); } 100% { transform: scaleY(1.06) scaleX(0.97) skewX(3deg); } }
.dp-pulse-fire .dp-head, .dp-pulse-fire .dp-lede { max-width: 560px; margin-left: auto; margin-right: auto; }
.dp-pulse-fire .dp-head { text-align: center; }

/* the 3D cast scene (flown-in /pulse clearing) */
#cast-scene .cs-item { transform-origin: 50% 100%; }
.cs-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.cs-core { animation: cs-flick 0.45s ease-in-out infinite alternate; }
.cs-mid  { animation: cs-flick 0.65s ease-in-out infinite alternate; }
.cs-outer{ animation: cs-flick 0.85s ease-in-out infinite alternate; }
@keyframes cs-flick { 0% { transform: scaleY(0.93) scaleX(1.04) skewX(-3deg); } 100% { transform: scaleY(1.07) scaleX(0.96) skewX(4deg); } }
.cs-fire { filter: drop-shadow(0 0 26px rgba(255,140,70,0.4)); }
.cs-smoke { animation: smoke-rise 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
.cs-fig { transition: opacity .2s ease; }
.cs-fig:hover { filter: brightness(1.25); }

/* while flying, the sky/edge glyphs fade; the world-locked ground props
   (lodge / forge / roots) stay — they're permanent 3D-plane geometry */
body.flying #affordances .affordance:not(.world-prop),
body.flying #peaks { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
#stage { transform-origin: 50% 50%; }