/* ===========================================================================
   Fri & Caroline — sunset -> fall into the red sun -> the rest of the painting
   darkens to night while the sun holds red -> the real 1900 eclipse dissolves
   straight in over it. The moon is calibrated to land exactly where the sun
   stops (see .eclipse), so the red disc darkens seamlessly into the black moon.
   =========================================================================== */

:root {
  /* The sun disc's screen position + size are computed PER VIEWPORT in JS
     (placeScene), because object-fit:cover renders the painting's sun at a
     different spot/size on every aspect ratio. The eclipse moon and the form
     anchor to this same center, so disc + moon + questions line up on any
     device. These are just fallbacks until the script runs. */
  --sun-cx: 50%;
  --sun-cy: 47%;
  --sun-d: 9vmin;
  --sun-color: #e22917;     /* the painting's sun core (measured) */

  /* fine trims relative to the sun center (dial via #mooncal / #formcal) */
  --moon-trim-x: 0vmin;
  --moon-trim-y: 0vmin;
  --form-dx: 0vmin;
  --form-dy: 2vmin;

  --night: #05060a;         /* the eclipse field / night sky */
  --moon-text: #f3ece1;     /* questions on the moon */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--night);
  color: var(--moon-text);
}

/* ------------------------------- HERO ------------------------------- */
.hero { position: relative; height: 100vh; overflow: hidden; }

/* z-order: 1 painting -> 3 sun -> 4 eclipse -> 5 question -> 6 hint */

.painting {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}

/* The real 1900 eclipse, zoomed so its moon == the sun's final 45vmin disc and
   centered on the same point. Disc geometry MEASURED from the photo:
   center (0.4852, 0.5393), diameter 0.1882 of width.
   width = 45 / 0.1882 = 239.1vmin; height = width * (762/765).
   The offset constants below = fraction * dimension (116.0 / 128.5), PLUS a
   small empirical correction: the measured center sat a touch right/high, so we
   shift the image ~4vmin left (120.0) and ~4vmin down (124.5) to seat the moon
   exactly on the sun's resting point (and thus under the question). */
.eclipse {
  position: absolute;
  width: 239.1vmin; height: 238.2vmin;
  /* moon disc (frac 0.4852/0.5393) lands on the sun center; trims dial residual */
  left: calc(var(--sun-cx) - 116.0vmin + var(--moon-trim-x));
  top:  calc(var(--sun-cy) - 128.5vmin + var(--moon-trim-y));
  object-fit: fill;
  background: var(--night);
  opacity: 0; z-index: 4;
}

/* the red sun: flat fill placed exactly over the painting's sun (JS-computed),
   grows in place then darkens into the eclipse */
.sun {
  position: absolute;
  left: calc(var(--sun-cx) - var(--sun-d) / 2);
  top:  calc(var(--sun-cy) - var(--sun-d) / 2);
  width: var(--sun-d); height: var(--sun-d);
  border-radius: 50%;
  background-color: var(--sun-color);
  transform-origin: center center;
  z-index: 3;
}

/* the form lives on the moon: one step visible at a time, centered on the disc */
.moon-form {
  position: absolute;
  left: calc(var(--sun-cx) + var(--form-dx));
  top:  calc(var(--sun-cy) + var(--form-dy));
  transform: translate(-50%, -50%);
  width: min(82vw, 30rem); text-align: center;
  z-index: 5; opacity: 0;          /* the intro fades the container in */
}
/* a soft dark halo keeps text legible if it spills past the moon onto the corona */
.moon-form::before {
  content: "";
  position: absolute; inset: -10vmin -6vmin;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 78%);
  z-index: -1; pointer-events: none;
}

.step { display: grid; justify-items: center; gap: 1.1rem; }
.step[hidden] { display: none; }

.prompt {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  color: var(--moon-text);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  letter-spacing: 0.02em; line-height: 1.2;
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.85);
}

.line-input {
  width: 100%; max-width: 26rem;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(243, 236, 225, 0.4);
  color: var(--moon-text); caret-color: var(--moon-text);
  font-family: "Cormorant Garamond", serif; font-size: clamp(1.15rem, 3vw, 1.5rem);
  text-align: center; padding: 0.35rem 0.2rem;
  outline: none; resize: none; transition: border-color 0.3s ease;
}
.line-input:focus { border-bottom-color: rgba(243, 236, 225, 0.85); }
textarea.line-input { line-height: 1.5; }
.line-input.invalid { border-bottom-color: #c0563f; animation: nudge 0.3s ease; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.sub {
  font-family: "Inter", sans-serif; font-weight: 400;
  font-size: clamp(0.62rem, 2.3vw, 0.74rem); white-space: nowrap;
  color: rgba(243, 236, 225, 0.55); letter-spacing: 0.02em; margin-top: -0.3rem;
}

.advance {
  margin-top: 0.4rem; background: none; border: none; cursor: pointer;
  color: var(--moon-text); opacity: 0.6; font-size: 1.6rem; line-height: 1;
  transition: opacity 0.25s ease; animation: bob 1.8s ease-in-out infinite;
}
.advance:hover, .advance:focus-visible { opacity: 1; outline: none; }

/* back arrow (up) — secondary, sits above the prompt; also fired by shift+tab */
.back {
  background: none; border: none; cursor: pointer;
  color: var(--moon-text); opacity: 0.4; font-size: 1.3rem; line-height: 1;
  transition: opacity 0.25s ease;
}
.back:hover, .back:focus-visible { opacity: 0.85; outline: none; }

/* extra space below pulls the centered line up to where the questions sat */
.reveal { padding-bottom: 3.5rem; }
.reveal .closing {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  color: var(--moon-text); font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.04em; text-shadow: 0 0 30px rgba(0, 0, 0, 0.85);
}

/* scroll hint — in the sun's red */
.hint {
  position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%);
  z-index: 6; text-align: center;
  color: var(--sun-color);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: lowercase;
}
.chevron { display: block; font-size: 1.8rem; line-height: 1; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .chevron { animation: none; }
  html { scroll-behavior: auto; }
}