/* ─── Root variables ───────────────────────────────────────────────── */
:root {
  --bg:                 #09000d;

  /* Anchor position — overridden by forest.js once stage is known */
  --anchor-x:           50vw;
  --anchor-y:           50vh;

  /* Stage bounds — set by forest.js; fallback = full viewport */
  --stage-x:            0px;
  --stage-y:            0px;
  --stage-w:            100vw;
  --stage-h:            100vh;

  /* Welcome words — all overridden per style set in JS via data-set attr */
  --ww-font:            'Nunito', cursive;
  --ww-size:            clamp(3rem, 9vw, 7.5rem);
  --ww-color:           #fff8f0;
  --ww-weight:          700;
  --ww-style:           normal;
  --ww-spacing:         0.02em;
  /* Orbit / scene palette */
  --orbit-color:        rgba(160, 80, 255, 0.22);
  --anchor-glow:        rgba(200, 120, 255, 0.8);
  --trail-color:        rgba(180, 100, 255, 0.55);
}

/* ─── Reset / base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ─── Renderer mounts ──────────────────────────────────────────────── */
#renderer-mount {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#css2d-mount {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ─── Stage clip (clips edge-wrap preview to stage bounds) ─────────── */
#stage-clip {
  position: fixed;
  left:   var(--stage-x);
  top:    var(--stage-y);
  width:  var(--stage-w);
  height: var(--stage-h);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

/* ─── Forest silhouette overlay ────────────────────────────────────── */
#forest-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#forest-frame svg {
  width: 100%;
  height: 100%;
  display: block;
}

#renderer-mount canvas {
  display: block;
  pointer-events: none;   /* WebGL canvas never captures input */
}

/* Three.js CSS2DRenderer appends a <div> into #css2d-mount */
#css2d-mount > div {
  pointer-events: none;   /* container is transparent; only #welcome-card captures */
}

/* ─── Welcome card (CSS2DObject target) ────────────────────────────── */
#welcome-card {
  pointer-events: auto;
  cursor: grab;
  white-space: nowrap;
  padding: 0 30px;

  font-family:      var(--ww-font);
  font-size:        var(--ww-size);
  font-weight:      var(--ww-weight);
  font-style:       var(--ww-style);
  letter-spacing:   var(--ww-spacing);
  color:            var(--ww-color);

  /* Keep card centred on its own origin (CSS2D places it at world pos) */
  transform: translate(-50%, -50%);
  transition: font-family 0.4s ease, color 0.4s ease;
}

#welcome-card.grabbing { cursor: grabbing; }

/* Load jiggle */
@keyframes jiggle {
  0%   { transform: translate(-50%, -50%) rotate(0deg)    translateX(0px); }
  12%  { transform: translate(-50%, -50%) rotate(-4deg)   translateX(-8px); }
  25%  { transform: translate(-50%, -50%) rotate(4deg)    translateX(8px); }
  38%  { transform: translate(-50%, -50%) rotate(-3deg)   translateX(-5px); }
  52%  { transform: translate(-50%, -50%) rotate(3deg)    translateX(5px); }
  65%  { transform: translate(-50%, -50%) rotate(-1.5deg) translateX(-3px); }
  78%  { transform: translate(-50%, -50%) rotate(1.5deg)  translateX(3px); }
  90%  { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-1px); }
  100% { transform: translate(-50%, -50%) rotate(0deg)    translateX(0px); }
}

#welcome-card.jiggle {
  animation: jiggle 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Double-click pulse */
@keyframes pulse-pop {
  0%   { scale: 1; }
  12%  { scale: 1.2; }
  30%  { scale: 0.92; }
  50%  { scale: 1.08; }
  70%  { scale: 0.97; }
  100% { scale: 1; }
}

#welcome-card.pulse-pop {
  animation: pulse-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Style set overrides ──────────────────────────────────────────── */

/* Set 1 — Bubbly / welcoming */
#welcome-card[data-set="1"] {
  --ww-font:    'Nunito', cursive;
  --ww-weight:  700;
  --ww-style:   normal;
  --ww-color:   #fff8f0;
}

/* Set 2 — Alluring / intriguing */
#welcome-card[data-set="2"] {
  --ww-font:    'Cormorant Garamond', serif;
  --ww-weight:  300;
  --ww-style:   italic;
  --ww-color:   #e4e0f8;
}

/* Set 3 — Sparkling / exciting — shimmer pulses the color between white and pale violet */
#welcome-card[data-set="3"] {
  --ww-font:    'Dela Gothic One', sans-serif;
  --ww-weight:  400;
  --ww-style:   normal;
  --ww-color:   #ffffff;
  font-size:    calc(var(--ww-size) * 0.75);
}

@keyframes shimmer {
  0%, 100% { color: #ffffff; }
  50%       { color: #d8b4fe; }
}

#welcome-card[data-set="3"]:not(.jiggle) {
  animation: shimmer 2.4s ease-in-out infinite;
}

/* ─── Welcome-next (edge peek card) ───────────────────────────────── */
#welcome-next {
  position: absolute;   /* relative to #stage-clip; overflow:hidden clips it */
  pointer-events: none;
  white-space: nowrap;

  font-family:    var(--ww-font);
  font-size:      var(--ww-size);
  font-weight:    var(--ww-weight);
  font-style:     var(--ww-style);
  letter-spacing: var(--ww-spacing);
  color:          var(--ww-color);

  /* position set entirely by JS */
  opacity: 0;
  transform: translateY(-50%);
}

body[data-mode="light"] #welcome-card[data-set="2"],
body[data-mode="light"] #welcome-next[data-set="2"] {
  --ww-color: #4a30a8;
  color: #4a30a8;
}