/* ------------------------------------------------------------------
   The Third Ask — design tokens, layout, chrome
   ------------------------------------------------------------------ */

:root {
  /* daisy */
  --daisy-petal:  #FFFCF4;
  --daisy-shadow: #EDE3D2;
  --daisy-disc:   #F2C34A;

  /* sunflower */
  --sun-petal:    #F5C242;
  --sun-petal-lo: #DB9A17;
  --sun-disc:     #5C3D18;

  /* love / rose — accent only, never a wash */
  --rose-100:     #FBE0E7;
  --rose-300:     #F2AEC0;
  --rose-500:     #DB7C97;
  --rose-700:     #A94E68;

  /* green */
  --stem:         #6E8B5A;
  --stem-deep:    #3C5637;

  /* warm light */
  --light-warm:   #FFE7B8;
  --light-gold:   #FFD27A;

  /* the silence — chapters 05/06 only */
  --night-900:    #070B15;
  --night-700:    #101A2E;
  --night-500:    #1C2A44;
  --ash:          #7C8AA0;
  --ash-dim:      #4A576B;

  --ink:          #2A2320;
  --ink-soft:     #6B605A;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.65, 0, 0.35, 1);

  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans:  'Jost', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-hand:  'Caveat', 'Bradley Hand', cursive;
}

html {
  overflow-x: hidden;
  scroll-behavior: auto;
}

body {
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background: var(--night-900); /* first paint = the door */
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.is-locked { overflow: hidden; height: 100vh; height: 100svh; }
/* nothing behind the gate leaks through it — only the scene shows */
body.is-locked main { visibility: hidden; }

::selection { background: rgba(242, 195, 74, 0.35); }

/* ---------- fixed layers ---------- */

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.no-webgl #gl { display: none; }

/* CSS-gradient fallback backgrounds (no-WebGL / context lost) */
.bg-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
.no-webgl .bg-fallback { opacity: 1; }
.bg-fallback .bg-a, .bg-fallback .bg-b {
  position: absolute;
  inset: 0;
  transition: opacity 1.6s var(--ease);
}

/* glow overlay — plain painted gradient, NORMAL blend, opacity tuned by JS.
   Never backdrop-filter, never mix-blend-mode over the live canvas. */
#glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

/* easter-egg hit layer — behind the text blocks, above the canvas */
#egg-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.no-webgl #egg-layer, .reduced-motion #egg-layer { display: none; }

.egg-line {
  position: fixed;
  z-index: 3;
  max-width: 60vw;
  transform: translate(-50%, -100%);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(255, 252, 244, 0.8);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.egg-line.is-dark { color: #E9EDF5; text-shadow: 0 1px 12px rgba(7, 11, 21, 0.8); }
.egg-line.is-in { opacity: 1; }

/* ---------- scroll content sits above ---------- */
/* main is transparent to the pointer so the long-press layer works;
   text blocks and buttons re-enable hit-testing on themselves. */
main { position: relative; z-index: 4; pointer-events: none; }
.block, .beat, .letter, .letter-footer, .garden-hint { pointer-events: auto; }

/* ---------- chrome ---------- */

#ribbon {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, env(safe-area-inset-left));
  width: 2px;
  z-index: 8;
  pointer-events: none;
}
#ribbon .ribbon-i {
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: var(--daisy-disc);
  transition: background-color 1.2s var(--ease);
}

#chapter-no {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 8;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.9s var(--ease), color 1.2s var(--ease);
  pointer-events: none;
}
#chapter-no.is-in { opacity: 0.85; }
#chapter-no.is-dark { color: var(--ash); }

#mute {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 20;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-soft);
  opacity: 0.85;
  transition: opacity 0.6s var(--ease), color 1.2s var(--ease);
}
#mute.is-shown { display: flex; }
#mute.is-dark { color: var(--ash); }
#mute svg { width: 20px; height: 20px; }
#mute .ic-off { display: none; }
#mute[aria-pressed="true"] .ic-on { display: none; }
#mute[aria-pressed="true"] .ic-off { display: block; }

#hint {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  pointer-events: none;
}
#hint.is-in { opacity: 0.8; }
#hint .petal {
  width: 7px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--daisy-petal);
  box-shadow: 0 0 8px rgba(255, 231, 184, 0.55);
  animation: petal-fall 3.4s var(--ease) infinite;
}
@keyframes petal-fall {
  0%   { transform: translateY(-10px) rotate(-12deg); opacity: 0; }
  25%  { opacity: 0.95; }
  100% { transform: translateY(26px) rotate(16deg); opacity: 0; }
}

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #hint .petal { animation: none; }
}