/* ============================================
   The Feeling — The Final Goodbye (Milestone 4.0)
   ============================================
   The quiet ending after the last page. The
   letter fades away and the experience settles
   into a single warm cream composition.

   - Warm ivory stationery with a whisper of grain
   - Words arrive one thought at a time
   - Handcrafted wax seal closes the letter forever
   - Edge botanicals; one or two petals drift by,
     every 10–20 seconds, nothing busy
   - The visitor may stay here as long as they like
   ============================================ */

/* --------------------------------------------------
   Scene — sits inside .experience (z500 context),
   above the fullscreen paper (z400) and desk grain
   (z500), so the paper crossfades into the cream.
   -------------------------------------------------- */
.finale {
  position: fixed;
  inset: 0;
  z-index: 600;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.4s ease, visibility 1.4s ease;
  background:
    radial-gradient(120% 95% at 50% 28%, #FFFDF8 0%, #FBF6EF 55%, #F2E9D7 100%);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.finale--active {
  opacity: 1;
  visibility: visible;
}

/* Paper grain — the same faint cotton character as the letter pages */
.finale::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='fg'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23fg)' opacity='0.05'/></svg>");
  background-size: 220px 220px;
}

/* Soft warm vignette — the page closes in gently */
.finale__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 100% at 50% 42%,
    transparent 52%,
    rgba(120, 90, 55, 0.09) 88%,
    rgba(96, 66, 34, 0.15) 100%
  );
}

/* Edge botanicals — pressed at the margins, centre stays clean */
.finale__botanicals {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.finale__botanicals .botanical-layer {
  z-index: 0;
}

/* --------------------------------------------------
   Composition — centered, large breathing room
   -------------------------------------------------- */
.finale__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.finale__content::-webkit-scrollbar {
  display: none;
}

/* Lines — thoughts arriving, not UI loading */
.finale__line {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.9s ease, transform 1.9s ease;
}

.finale__line--visible {
  opacity: 1;
  transform: translateY(0);
}

.finale__line--main {
  font-size: clamp(1.9rem, 5.6vw, 3.4rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #33281C;
}

.finale__line--sub {
  margin-top: 1.4rem;
  max-width: 30em;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-style: italic;
  color: #6B5D4B;
}

.finale__closing {
  margin-top: 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.finale__line--made {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-style: italic;
  color: #8B7355;
}

.finale__line--name {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #3A3329;
}

.finale__line--gabriela {
  font-style: italic;
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  color: #5A4433;
}

/* The heart — soft blush, arrives with a gentle breath */
.finale__heart {
  margin: 0.9rem 0 0.5rem;
  width: 30px;
  height: 30px;
  color: #C98D7D;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 1.6s ease, transform 1.6s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.finale__heart--visible {
  opacity: 0.9;
  transform: scale(1);
}

.finale__heart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------
   Wax seal — the same hand-poured language as the
   envelope. It settles beneath the names and stays:
   the letter is closed forever.
   -------------------------------------------------- */
.finale__seal {
  position: relative;
  margin-top: 3.4rem;
  width: clamp(64px, 14vw, 84px);
  height: clamp(64px, 14vw, 84px);
  opacity: 0;
  transform: scale(0.9) rotate(-3deg);
  transition: opacity 1.8s ease, transform 1.8s cubic-bezier(0.34, 1.22, 0.5, 1);
}

.finale__seal--settled {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  /* the sealed letter rests — an almost imperceptible breath */
  animation: finale-seal-breathe 9s ease-in-out 2.4s infinite;
}

.finale__seal-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 47% 53% 52% 48% / 52% 47% 53% 48%;
  background:
    radial-gradient(
      62% 56% at 32% 28%,
      #DE5E50 0%,
      #C44538 32%,
      #A53026 62%,
      #851F16 100%
    );
  box-shadow:
    /* a hair of warm wax pressed out around the organic edge */
    0 0 0 1.5px rgba(216, 132, 108, 0.22),
    /* the wax presses into the paper beneath it */
    0 0 0 5px rgba(96, 62, 30, 0.07),
    /* it floats above the page with a soft contact shadow */
    0 18px 34px -12px rgba(80, 45, 20, 0.45),
    inset -3px -5px 12px rgba(70, 12, 8, 0.35),
    inset 3px 4px 10px rgba(255, 190, 170, 0.35);
}

/* Wet highlight — the wax catches the warm light */
.finale__seal-inner::before {
  content: '';
  position: absolute;
  top: 12%;
  left: 18%;
  width: 20%;
  height: 14%;
  border-radius: 50%;
  background: rgba(255, 220, 200, 0.5);
  filter: blur(1px);
}

/* Embossed ring — the pressed mark left in the wax */
.finale__seal-inner::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1.5px solid rgba(120, 30, 20, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 170, 0.12),
    0 1px 2px rgba(255, 200, 180, 0.25);
}

/* A single drip where the wax cooled */
.finale__seal-drip {
  position: absolute;
  bottom: -16%;
  left: 30%;
  width: 30%;
  height: 22%;
  border-radius: 50%;
  background:
    radial-gradient(
      70% 70% at 40% 30%,
      #C94A40 0%,
      #A8322B 55%,
      #8B241E 100%
    );
  box-shadow: 0 4px 8px -3px rgba(80, 20, 10, 0.5);
}

@keyframes finale-seal-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

/* --------------------------------------------------
   Drifting petals — one or two every 10–20s
   -------------------------------------------------- */
.finale__petals {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.finale__petal {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  /* `both` keeps the petal at opacity 0 during its delay, so it never
     flashes at full opacity before the drift begins */
  animation: finale-petal-drift linear both;
}

.finale__petal svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes finale-petal-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot-start, 0deg));
    opacity: 0;
  }
  10% { opacity: var(--petal-peak, 0.4); }
  80% { opacity: var(--petal-peak, 0.4); }
  100% {
    transform: translate3d(var(--drift-x, 60vw), var(--drift-y, 8vh), 0)
      rotate(var(--rot-end, 160deg));
    opacity: 0;
  }
}

/* --------------------------------------------------
   The letter's last moment — the paper lets go
   (the fade itself is driven inline by finale.js)
   -------------------------------------------------- */
.paper--final.paper--closing,
.paper--final.paper--closing .paper__pages,
.paper--final.paper--closing .paper__indicator,
.paper--final.paper--closing .paper__nav {
  pointer-events: none;
}

/* --------------------------------------------------
   Reduced motion — the words may still arrive, but
   the scene holds perfectly still
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .finale {
    transition: none;
  }
  .finale__line,
  .finale__heart,
  .finale__seal {
    transition: none;
  }
  .finale__seal--settled {
    animation: none;
  }
  .finale__petal {
    display: none;
  }
}