/* style.css — a quiet shell: full-bleed canvas, a whisper of a caption,
   a soft loading veil, and an authored still-view fallback. */

:root {
  --ink: #5c4a52;
  --ink-soft: rgba(92, 74, 82, 0.78);
  --paper: rgba(255, 250, 246, 0.66);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #f2e2c8;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed;
  inset: 0;
}

#stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

/* ---------------------------------------------------------------- caption */
.caption {
  position: fixed;
  left: clamp(14px, 3.4vw, 40px);
  bottom: clamp(14px, 4.5vh, 34px);
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(255, 246, 236, 0.65);
}

.caption h1 {
  margin: 0 0 6px;
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.caption p {
  margin: 0;
  font-size: clamp(12px, 1.5vw, 14.5px);
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  transition: opacity 2.4s ease;
}

.caption p.hint-hidden {
  opacity: 0;
}

/* ---------------------------------------------------------------- veil */
#veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: linear-gradient(180deg, #f6e7cd 0%, #f2dcbc 55%, #eccfb4 100%);
  display: grid;
  place-items: center;
  transition: opacity 1.1s ease;
}

#veil.veil-hidden {
  opacity: 0;
  pointer-events: none;
}

.veil-petal {
  width: 14px;
  height: 14px;
  border-radius: 60% 60% 60% 10%;
  background: #ffb9d2;
  box-shadow: 0 0 18px rgba(255, 185, 210, 0.8);
  animation: veil-breath 2.2s ease-in-out infinite;
}

@keyframes veil-breath {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.85; }
  50% { transform: translateY(-8px) rotate(14deg) scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .veil-petal { animation: none; }
  .caption p { transition: none; }
}

/* ---------------------------------------------------------------- fallback */
#fallback {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: linear-gradient(180deg, #f6e7cd 0%, #f2dcbc 100%);
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
}

#fallback[hidden] { display: none; }

#fallback svg {
  width: min(96vw, 900px);
  height: auto;
  align-self: center;
}

.fallback-text {
  text-align: center;
  padding: 0 20px clamp(20px, 6vh, 44px);
}

.fallback-text h2 {
  margin: 0 0 6px;
  font-size: clamp(17px, 2.4vw, 24px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.fallback-text p {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

.noscript-note {
  position: fixed;
  inset: auto 0 18px 0;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  z-index: 30;
  background: rgba(255, 250, 246, 0.8);
  padding: 8px;
}