/* ─────────────────────────────────────────────────────────────
   The Heart Portal scene — flat backdrop + percentage hotspots.
   No element animation. Gentle hover glow + slight scale only.
   Two backdrops (desktop wide, mobile tall) swap via <picture>.
   Two zone sets (data-zones="desktop" vs "mobile") swap via CSS.
   ───────────────────────────────────────────────────────────── */

.scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--forest-deep);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The stage matches the IMAGE'S aspect ratio so percentage hotspots
   map perfectly onto the image with no cropping. We use min() across
   width and viewport-height-driven-width so the stage shrinks to fit
   whichever dimension is the binding constraint. */
.scene-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  overflow: hidden;
}
@media (max-width: 768px) {
  .scene-stage {
    width: min(100vw, calc(100vh * 941 / 1672));
    aspect-ratio: 941 / 1672;
  }
}

.scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* stage now matches image aspect, so cover = no cropping */
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

/* Soft bottom vignette for overlay legibility */
.scene-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(0,0,0,0)    52%,
              rgba(0,0,0,0.18) 72%,
              rgba(7,20,14,0.55) 100%);
  z-index: 2;
}

/* ── Two zone sets — pick the right one per breakpoint ──────── */
.zones { position: absolute; inset: 0; z-index: 5; }
.zones--desktop { display: block; }
.zones--mobile  { display: none; }

@media (max-width: 768px) {
  .zones--desktop { display: none; }
  .zones--mobile  { display: block; }
}

/* In tune mode, the breakpoint switcher in the HUD can force a
   particular zone set visible regardless of viewport size. This lets
   you tune mobile zones from a wide browser and vice versa. */
body.force-zones-desktop .zones--desktop { display: block !important; }
body.force-zones-desktop .zones--mobile  { display: none  !important; }
body.force-zones-mobile  .zones--mobile  { display: block !important; }
body.force-zones-mobile  .zones--desktop { display: none  !important; }

/* ── Hotspot (transparent, percentage-positioned) ───────────── */

.hotspot {
  position: absolute;
  left:   var(--x);
  top:    var(--y);
  width:  var(--w);
  height: var(--h);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: inherit;
  transition: transform .4s var(--ease-organic), background .4s var(--ease-organic);
  display: block;
}

.hotspot::before {
  /* The hover glow */
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  background: radial-gradient(closest-side,
              rgba(216, 190, 126, 0.32) 0%,
              rgba(216, 190, 126, 0)    72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease-organic);
}

.hotspot:hover::before,
.hotspot:focus-visible::before,
.hotspot.is-touched::before { opacity: 1; }

.hotspot:hover,
.hotspot:focus-visible,
.hotspot.is-touched { transform: scale(1.02); }

/* The hover label — small, soft, fades in */
.hotspot-label {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--gold-light);
  background: rgba(7, 20, 14, 0.78);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 97, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-organic);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  z-index: 1;
}
.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label,
.hotspot.is-touched .hotspot-label { opacity: 1; }

/* Heart zone has no hover label (its visible affordance is the wordmark + tagline) */
.hotspot--heart .hotspot-label { display: none; }

/* Stacking order: small targets win over the large catch-alls */
.zone-landscape-l, .zone-landscape-r, .zone-landscape,
.zone-soil { z-index: 1; }
.zone-canopy   { z-index: 2; }
.zone-heart    { z-index: 3; }
.zone-river,
.zone-mushrooms,
.zone-flowers,
.zone-butterfly-l,
.zone-butterfly-r,
.zone-butterfly  { z-index: 4; }

/* ─────────────────────────────────────────────────────────────
   Overlay layer — each element is independently positioned with
   CSS variables (--x, --y, --scale) so the visual tuner can drag
   them individually. Defaults are sensible-but-rough; the user
   places them by eye and saves the final values per breakpoint.
   ───────────────────────────────────────────────────────────── */

.overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

/* Each tunable element sits with its CENTRE at (--x, --y) of the stage
   and scales via --scale. The translate(-50%,-50%) keeps the
   centre-of-element on the centre-of-coordinate even as size changes. */
.overlay-el {
  position: absolute;
  left:  var(--x, 50%);
  top:   var(--y, 50%);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center;
  pointer-events: auto;
}

/* ── Heart CTA ─ the only moving thing on load.
   "Your Journey Home / Starts Here" — soft handwritten, sits over the
   heart and pulses with a real heart's lub-dub double beat. A dark red
   radial vignette behind the text pulses in sync — like blood moving
   through the heart.

   Three tuneable properties live as CSS vars on this element, so the
   visual tuner can adjust them per breakpoint:
     --heartbeat-duration  → cycle length (slower = lower BPM)
     --vignette-scale      → multiplier on the vignette size
     --vignette-opacity    → peak opacity of the vignette (cap)
   ── */
.heart-cta {
  --x: 50%;
  --y: 47%;
  --scale: 1;
  /* Heart-CTA-specific defaults (overridable per breakpoint + by tuner) */
  --heartbeat-duration: 2.4s;     /* 25 BPM */
  --vignette-scale: 0.85;
  --vignette-opacity: 0.425;      /* was 0.5, reduced 15% */

  /* Own stacking context so the vignette stays behind the text without
     falling behind the scene image. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: 'Caveat', 'Patrick Hand', 'Comic Sans MS', cursive;
  font-weight: 500;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0,0,0,0.7), 0 0 28px rgba(0,0,0,0.5);
  text-align: center;
  white-space: nowrap;
  line-height: 1.05;
  padding: 0.3em 0.6em;
  letter-spacing: 0.005em;
  animation: heart-cta-pulse var(--heartbeat-duration, 1.5s) ease-in-out infinite;
}

/* Blood vignette — radial gradient of deep crimson behind the text.
   Pulses on the same beat as the text. Peak opacity is capped by
   --vignette-opacity so the heart art always shows through.
   Size is multiplied by --vignette-scale. */
.heart-cta__vignette {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240%;
  height: 280%;
  transform: translate(-50%, -50%) scale(var(--vignette-scale, 1));
  transform-origin: center;
  background: radial-gradient(ellipse at center,
              rgba(122, 20, 24, 1)    0%,
              rgba(122, 20, 24, 0.92) 25%,
              rgba(122, 20, 24, 0.55) 50%,
              rgba(122, 20, 24, 0.18) 72%,
              rgba(122, 20, 24, 0)    92%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: heart-cta-vignette var(--heartbeat-duration, 1.5s) ease-in-out infinite;
}

/* The two text lines sit ABOVE the vignette in the local stacking context. */
.heart-cta__line { position: relative; z-index: 1; }
/* Both lines render at the same size so "Starts Here" doesn't read as
   a subtitle to "Your Journey Home". Two equal beats. */
.heart-cta__line { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }

.heart-cta:hover,
.heart-cta:focus-visible {
  outline: none;
  color: var(--gold-light);
  text-shadow: 0 2px 14px rgba(0,0,0,0.7),
               0 0 28px rgba(216, 190, 126, 0.55);
}

/* Lub-dub-rest pattern, 1.5s cycle (40bpm — calm).
   Same shape for the text pulse and the vignette pulse; the vignette
   keyframes (heart-cta-vignette) cap at 0.5 opacity. */
@keyframes heart-cta-pulse {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 0.97)); }
  8%   { opacity: 1;    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 1.02)); }
  14%  { opacity: 1;    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 1.0));  }
  18%  { opacity: 0.55; transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 0.99)); }
  24%  { opacity: 1;    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 1.03)); }
  32%  { opacity: 0.9;  transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 1.0));  }
  46%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 0.97));
  }
}

/* Blood vignette — same rhythm. Peak opacity is set by the
   --vignette-opacity CSS var so the tuner can adjust it. */
@keyframes heart-cta-vignette {
  0%   { opacity: 0; }
  8%   { opacity: var(--vignette-opacity, 0.425); }
  14%  { opacity: calc(var(--vignette-opacity, 0.425) * 0.90); }
  18%  { opacity: calc(var(--vignette-opacity, 0.425) * 0.44); }
  24%  { opacity: var(--vignette-opacity, 0.425); }
  32%  { opacity: calc(var(--vignette-opacity, 0.425) * 0.80); }
  46%, 100% { opacity: 0; }
}

/* Pause the pulse when reduced-motion is preferred — show steady. */
@media (prefers-reduced-motion: reduce) {
  .heart-cta,
  .heart-cta__vignette {
    animation: none;
  }
  .heart-cta           { opacity: 0.9; }
  .heart-cta__vignette { opacity: calc(var(--vignette-opacity, 0.425) * 0.7); }
}

/* In tune mode both pulses pause so the CTA stays put while you drag. */
body.tune-mode .heart-cta,
body.tune-mode .heart-cta__vignette { animation: none; }
body.tune-mode .heart-cta            { opacity: 1; }
body.tune-mode .heart-cta__vignette  { opacity: var(--vignette-opacity, 0.425); }


/* ── Logo medallion (PNG with transparent background) ── */
.logo-medallion {
  --x: 50%;
  --y: 71%;
  --scale: 1;
  width: clamp(40px, 5vw, 90px);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55))
          drop-shadow(0 0 14px rgba(216, 190, 126, 0.28));
  user-select: none;
}

/* ── Wordmark ─ ONE continuous word, two invisible click halves ── */
.wordmark {
  --x: 50%;
  --y: 80%;
  --scale: 1;
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: clamp(0.16em, 0.64vw, 0.36em);   /* doubled — luxurious tracking */
  color: var(--cream);
  text-shadow: var(--shadow-text);
  white-space: nowrap;
}

.wordmark-half {
  color: inherit;
  text-decoration: none;
  padding: 0.2em 0;
  display: inline-block;
  transition: color .3s var(--ease-organic), text-shadow .3s var(--ease-organic);
}
.wordmark-half:hover,
.wordmark-half:focus-visible {
  color: var(--gold-light);
  text-shadow: var(--shadow-text), 0 0 22px rgba(216, 190, 126, 0.55);
  outline: none;
}

/* ── Tagline row ─ short rule, text, short rule ── */
.tagline-row {
  --x: 50%;
  --y: 87%;
  --scale: 1;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  width: min(86%, 760px);
}

.rule--h {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
              rgba(216, 190, 126, 0)    0%,
              rgba(216, 190, 126, 0.55) 60%,
              rgba(216, 190, 126, 0.7)  100%);
}
.tagline-row .rule--h:last-child {
  background: linear-gradient(to right,
              rgba(216, 190, 126, 0.7)  0%,
              rgba(216, 190, 126, 0.55) 40%,
              rgba(216, 190, 126, 0)    100%);
}

.tagline {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.05vw, 0.88rem);
  letter-spacing: 0.36em;                          /* doubled */
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: var(--shadow-text);
  white-space: nowrap;
}

/* ── Sigils — independent overlay elements.
   PNGs include both the glyph AND the word label, so we render a single
   image per sigil — no separate text element. ── */
.sigil {
  --scale: 1;
  display: block;
  text-decoration: none;
  color: inherit;
  background: none !important;
  transition: filter .3s var(--ease-organic);
}

.sigil-img {
  display: block;
  width: clamp(64px, 8vw, 130px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  transition: transform .3s var(--ease-organic), filter .3s var(--ease-organic);
}
.sigil:hover .sigil-img,
.sigil:focus-visible .sigil-img {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55))
          drop-shadow(0 0 14px rgba(216, 190, 126, 0.55));
}

/* Default sigil X positions — evenly spaced across the bottom band.
   Selectors are kept low-specificity (just the attr) so that
   overlay-layout.css can override them without needing !important. */
[data-tune="sigil-sovereignty"]  { --x: 22%; --y: 94%; }
[data-tune="sigil-coherence"]    { --x: 36%; --y: 94%; }
[data-tune="sigil-regeneration"] { --x: 50%; --y: 94%; }
[data-tune="sigil-reciprocity"]  { --x: 64%; --y: 94%; }
[data-tune="sigil-belonging"]    { --x: 78%; --y: 94%; }

/* ── Tune-mode visual cues ────────────────────────────────────
   Selected element gets an outline + grab cursor. */
body.tune-mode .overlay-el {
  outline: 1px dashed rgba(216, 190, 126, 0.35);
  outline-offset: 4px;
  cursor: move;
}
body.tune-mode .overlay-el:hover {
  outline-color: rgba(216, 190, 126, 0.75);
}
body.tune-mode .overlay-el.is-selected {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
body.tune-mode .overlay-el.is-dragging {
  outline: 2px solid var(--gold-light);
  opacity: 0.85;
}
body.tune-mode .wordmark-half,
body.tune-mode .sigil,
body.tune-mode a {
  pointer-events: none; /* prevent navigation while tuning */
}
body.tune-mode .overlay-el { pointer-events: auto; }

/* ── Sigils row at the base ─────────────────────────────────── */

.sigils {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: none; /* the sigils ARE hotspots — positioned via percentage zones below */
}

/* (sigils moved into .overlay-stack as direct links — see above) */

/* ── Debug toggle — outlines every zone for live tuning ─────── */

body.debug-zones .hotspot {
  outline: 2px solid rgba(216, 190, 126, 0.85);
  background: rgba(216, 190, 126, 0.10);
}
body.debug-zones .hotspot::after {
  content: attr(data-target);
  position: absolute;
  top: 2px; left: 4px;
  font: 11px/1 var(--font-body);
  color: var(--cream);
  background: rgba(0,0,0,0.7);
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Debug toggle pill */
.debug-toggle {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 999;
  background: rgba(7, 20, 14, 0.85);
  color: var(--cream);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 999px;
  padding: 6px 14px;
  font: 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.debug-toggle:hover { background: rgba(13, 31, 23, 0.95); }

/* ── Mobile tweaks ──────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Mobile aspect is 9:16 — taller, more room at the bottom.
     The stack scales naturally; we just nudge a few proportions. */
  .overlay-stack {
    width: min(94%, 460px);
    bottom: 4%;
  }
  .logo-medallion {
    width: var(--medallion-size, clamp(32px, 8vw, 56px));
    margin-bottom: 0.5em;
  }
  .wordmark {
    font-size: var(--wordmark-size, clamp(1.8rem, 9vw, 3rem));
    letter-spacing: 0.12em;
    margin-bottom: 0.55em;
  }
  .tagline {
    font-size: clamp(0.5rem, 2.2vw, 0.7rem);
    letter-spacing: 0.14em;
  }
  .tagline-row { width: 94%; gap: 10px; margin-bottom: clamp(16px, 4vw, 24px); }
  .sigil-row   { gap: clamp(6px, 1.4vw, 14px); }
  .sigil-img   { width: clamp(24px, 7vw, 38px); }
  .sigil-name  { font-size: clamp(0.46rem, 1.6vw, 0.6rem); letter-spacing: 0.14em; }
  .rule--v     { height: clamp(20px, 5vw, 30px); }
  .hotspot-label {
    font-size: 0.78rem;
    bottom: -26px;
    padding: 4px 10px;
  }
}