/* ————————————————————————————————
   the letter behind the moon — flip + parchment face + nudge
   ———————————————————————————————— */

/* the moon becomes a quiet button */
.moon.letter-ready {
  cursor: pointer;
  perspective: 60rem;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.moon.letter-ready:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 8px;
}

/* the flipper — rotates INSIDE .moon so the stage float
   and halo breathing keep running untouched */
.moon-flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.36, 0.06, 0.16, 1);
  will-change: transform;
}

.moon.flipped .moon-flipper { transform: rotateY(180deg); }

/* reduced motion: instant swap, no rotation ride */
.moon-flipper.instant { transition: none; }

.moon-front,
.moon-back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.moon-front { transform: translateZ(0); }

/* ——— the letter face: moonlit parchment ——— */

.moon-back {
  /* slightly larger than the moon so the promise can breathe */
  transform: rotateY(180deg) scale(1.2);
  text-align: center;
  background: radial-gradient(
    circle at 36% 28%,
    rgba(26, 36, 72, 0.98) 0%,
    rgba(15, 23, 48, 1) 34%,
    rgba(11, 18, 38, 1) 58%,
    rgba(4, 6, 15, 1) 100%
  );
  border: 1.5px solid rgba(231, 201, 130, 0.55);
  box-shadow:
    inset 0 0 2.8rem rgba(231, 201, 130, 0.10),
    inset 0 0 0.8rem rgba(242, 227, 184, 0.14),
    0 0 3rem rgba(1, 1, 2, 0.6);
}

/* circle-shaped text: two invisible floats carve away everything
   outside the disc, so each line hugs the moon's curve */
.letter-inner {
  width: 100%;
  height: 100%;
}

.letter-shape {
  width: 50%;
  height: 100%;
  shape-image-threshold: 0.5;
}

.letter-shape-l {
  float: left;
  shape-outside: radial-gradient(farthest-side at 100% 50%, transparent 86%, #000 87%);
}

.letter-shape-r {
  float: right;
  shape-outside: radial-gradient(farthest-side at 0% 50%, transparent 86%, #000 87%);
}

.letter-eyebrow {
  padding-top: 12%;
  font-family: var(--font-utility);
  font-size: clamp(0.42rem, 1vw, 0.54rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.26em; /* re-centres tracked uppercase */
  text-transform: uppercase;
  color: var(--gold);
}

.letter-text {
  margin-top: 0.55em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.6rem, 1.35vw, 0.72rem);
  line-height: 1.5;
  color: var(--moon);
}

.letter-signoff {
  margin-top: 0.4em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.54rem, 1.3vw, 0.7rem);
  color: var(--gold-soft);
  text-align: right;
  white-space: nowrap;
  padding-right: 5%;
}

/* the smallest moon (10rem) needs a touch more room */
@media (max-width: 640px) {
  .moon-back { transform: rotateY(180deg) scale(1.44); }
  .letter-text { font-size: 0.56rem; line-height: 1.42; }
  .letter-signoff { font-size: 0.52rem; }
  .letter-eyebrow { font-size: 0.4rem; }
}

/* ——— the nudge: "click me ✦" ———
   lives inside .moon-stage, floating gently along with the moon,
   tucked into the gap above the "time left" eyebrow */
.moon-nudge {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: rgba(231, 201, 130, 0.75);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

.moon-nudge.visible {
  opacity: 1;
  animation: nudgeGlow 2.1s ease-in-out infinite alternate;
}

@keyframes nudgeGlow {
  from { text-shadow: 0 0 6px rgba(231, 201, 130, 0.2); }
  to   { text-shadow: 0 0 14px rgba(231, 201, 130, 0.65), 0 0 30px rgba(231, 201, 130, 0.3); }
}

/* ——— reduced motion (media query belt for the JS suspenders) ——— */
@media (prefers-reduced-motion: reduce) {
  .moon-flipper { transition: none; }
  .moon-nudge { transition: opacity 0.2s linear; }
  .moon-nudge.visible { animation: none; }
}