/* ════════════════════════════════════════════
   Pour Lily · 04.27.MMXXVI
   ════════════════════════════════════════════ */

:root {
  /* — lavender — */
  --lavender-50:  #f5f0f9;
  --lavender-100: #e8dcef;
  --lavender-200: #d6c5e0;
  --lavender-300: #b8a8d8;
  --lavender-500: #8a6ec4;
  --lavender-700: #6a4e8a;

  /* — cream / parchment — */
  --cream-50:  #fffbf2;
  --cream-100: #fff8e0;
  --cream-150: #faf1de;
  --cream-200: #f5e6c8;
  --cream-300: #e8d8b0;

  /* — gold — */
  --gold-100: #fff1c4;
  --gold-300: #e8c474;
  --gold-500: #c58a3a;
  --gold-700: #8a5a1e;

  /* — sage (leaves, stems) — */
  --sage-400: #94a584;
  --sage-600: #6e8260;

  /* — ink (text) — */
  --ink:        #4a3820;
  --ink-soft:   #6e5a24;
  --ink-faint:  #a89478;
  --ink-whisper:#c9b795;

  /* — type — */
  --font-script: "Parisienne", "Brush Script MT", cursive;
  --font-serif:  "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-cn:     "Noto Serif SC", "Songti SC", "STSong", serif;

  /* — timing — */
  --ease-cubic: cubic-bezier(.16, .8, .3, 1);
  --ease-lily:  cubic-bezier(.22, 1, .36, 1);
}

/* ─────── reset ─────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-cn);
  color: var(--ink);
  line-height: 1.7;
  background: var(--cream-50);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }

/* ─────── grain overlay (everywhere) ─────── */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.28  0 0 0 0 0.15  0 0 0 0.35 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: .35;
}
/* subtle light flecks */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.82  0 0 0 0.25 0'/></filter><rect width='300' height='300' filter='url(%23m)'/></svg>");
  mix-blend-mode: screen;
  opacity: .6;
}

/* ─────── chapter shell ─────── */
.chapter {
  position: relative;
  min-height: 100svh;
  padding: 12svh 28px 10svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.chapter-label {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  letter-spacing: .32em;
  color: var(--ink-faint);
  text-transform: lowercase;
}

.chapter-inner {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* ─────── shared bits: smallcap / dot / fleuron ─────── */
.smallcap {
  font-family: var(--font-serif);
  font-variant-caps: all-small-caps;
  letter-spacing: .28em;
  font-style: normal;
}
.roman { letter-spacing: .32em; }

.dot {
  display: inline-block;
  margin: 0 .5em;
  color: var(--gold-500);
  opacity: .7;
  transform: translateY(-.12em);
}

.fleuron {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin: 28px auto;
  color: var(--gold-500);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .4em;
}
.fleuron span {
  flex: 0 0 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
}
.fleuron--small {
  gap: 10px;
  margin: 20px auto;
}
.fleuron--small span { flex: 0 0 30px; }

/* ═════════════════════════════════════════════════════
   I · Bonjour
   ═════════════════════════════════════════════════════ */
.chapter--i {
  background:
    radial-gradient(ellipse 140% 90% at 50% 25%, var(--cream-100) 0%, var(--cream-150) 30%, transparent 65%),
    radial-gradient(ellipse 120% 110% at 50% 110%, var(--lavender-100) 0%, transparent 55%),
    linear-gradient(180deg, #fdf6e4 0%, #f1e4d5 100%);
}

.ornament-lily {
  width: 58px; height: 58px;
  margin: 0 auto 42px;
  opacity: 0;
  animation: fade-up 1.6s var(--ease-cubic) .3s forwards;
}

.cover-title {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  color: var(--ink-soft);
  font-size: clamp(58px, 17vw, 82px);
  letter-spacing: .01em;
}
.cover-title__line {
  display: block;
}
.cover-title__line:nth-child(2) {
  margin-top: -.08em;
  margin-left: .5em;            /* slight offset, handwritten feel */
  color: var(--gold-700);
  font-size: .78em;
}

.cover-name {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: .04em;
}

.cover-date {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-soft);
}

.cover-seal {
  margin-top: 28px;
  font-family: var(--font-cn);
  font-size: 13px;
  color: var(--gold-500);
  letter-spacing: .3em;
  padding: 4px 14px;
  display: inline-block;
  border: 1px solid var(--gold-300);
  border-radius: 2px;
  transform: rotate(-1.5deg);
  background: rgba(255, 248, 224, 0.5);
}

.scroll-hint {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: fade-in 2s ease 2s forwards;
}
.scroll-hint__line {
  width: 1px; height: 28px;
  background: linear-gradient(180deg, transparent, var(--gold-500));
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
.scroll-hint__text {
  font-family: var(--font-cn);
  font-size: 10px;
  letter-spacing: .6em;
  padding-left: .6em;
  color: var(--ink-faint);
}

@keyframes scroll-pulse {
  0%, 100% { opacity: .4; transform: translateY(-8px); }
  50%      { opacity: 1;  transform: translateY(8px); }
}

/* ═════════════════════════════════════════════════════
   II · Une lettre
   ═════════════════════════════════════════════════════ */
.chapter--ii {
  background:
    radial-gradient(ellipse 100% 60% at 50% 30%, var(--cream-150) 0%, transparent 55%),
    linear-gradient(178deg, #f3e4c4 0%, #dcc8e0 45%, #b8a8d8 100%);
}
/* subtle "lavender field" horizontal bands on bottom half */
.chapter--ii::before {
  content: '';
  position: absolute;
  inset: 48% 0 0 0;
  background: repeating-linear-gradient(94deg,
    transparent 0 12px,
    rgba(106, 78, 138, .14) 12px 14px);
  mix-blend-mode: multiply;
  opacity: .7;
  pointer-events: none;
  animation: wind-drift 14s linear infinite alternate;
}
@keyframes wind-drift {
  from { background-position: 0 0; }
  to   { background-position: 12px 0; }
}

.lavender-stalk {
  position: absolute;
  width: 40px;
  height: 38vh;
  top: 22vh;
  opacity: 0;
  animation: fade-in 2s ease .6s forwards;
}
.lavender-stalk--left  { left: 6px; }
.lavender-stalk--right { right: 6px; top: 30vh; transform: scaleX(-1); }

.letter-salutation {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.letter-salutation em { font-style: italic; color: var(--ink-soft); }
.script-inline {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 30px;
  color: var(--gold-700);
  letter-spacing: .02em;
}

.letter-body {
  margin-top: 12px;
  font-family: var(--font-cn);
  font-size: 17px;
  line-height: 2;
  color: var(--ink);
}
.letter-body p + p { margin-top: 26px; }
.letter-body__accent {
  color: var(--lavender-700);
  font-weight: 500;
}
.letter-body__coda em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold-700);
  letter-spacing: .05em;
}

/* ═════════════════════════════════════════════════════
   III · Pour Lily
   ═════════════════════════════════════════════════════ */
.chapter--iii {
  background:
    radial-gradient(ellipse 80% 50% at 50% 45%, var(--cream-100) 0%, var(--cream-150) 45%, transparent 72%),
    radial-gradient(ellipse 120% 80% at 50% 110%, var(--lavender-100) 0%, transparent 55%),
    linear-gradient(170deg, #b8a8d8 0%, #e8d8b0 55%, #fff8e0 100%);
}

.gift-preamble {
  font-family: var(--font-script);
  font-size: 30px;
  color: var(--gold-700);
  margin-bottom: 4px;
}
.gift-preamble em { font-style: normal; }

.lily-stage {
  position: relative;
  width: 220px; height: 260px;
  margin: 24px auto 28px;
}
.lily-glow {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    rgba(255, 230, 150, .85) 0%,
    rgba(255, 210, 120, .4) 30%,
    rgba(255, 200, 100, 0) 65%);
  opacity: 0;
  filter: blur(4px);
}
.lily-svg {
  width: 100%; height: 100%;
  position: relative;
  filter: drop-shadow(0 14px 32px rgba(180, 120, 40, .28));
}

/* lily initial state (hidden) */
.lily-svg .lily-stem {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.lily-svg .lily-leaf {
  opacity: 0;
  transform-origin: 110px 230px;
  transform: scale(.5);
  transform-box: view-box;
}
.lily-svg .lily-petal {
  opacity: 0;
  transform-origin: 110px 115px;
  transform: scale(0);
  transform-box: view-box;
}
.lily-svg .lily-center {
  opacity: 0;
  transform-origin: 110px 115px;
  transform: scale(.2);
  transform-box: view-box;
}
.lily-svg .lily-stamens { opacity: 0; }
.lily-svg .lily-particles circle { opacity: 0; }

/* bloom sequence (triggered by .revealed on .lily-stage) */
.lily-stage.revealed .lily-stem {
  animation: draw-stem 1.6s var(--ease-lily) .1s forwards;
}
.lily-stage.revealed .lily-leaf--left  { animation: leaf-in 1.0s var(--ease-lily) 1.1s forwards; }
.lily-stage.revealed .lily-leaf--right { animation: leaf-in 1.0s var(--ease-lily) 1.3s forwards; }

/* back row blooms first (deeper tone, creates depth) */
.lily-stage.revealed .lily-petal--b1 { animation: petal-bloom-back 1.3s var(--ease-lily) 1.5s forwards; }
.lily-stage.revealed .lily-petal--b2 { animation: petal-bloom-back 1.3s var(--ease-lily) 1.62s forwards; }
.lily-stage.revealed .lily-petal--b3 { animation: petal-bloom-back 1.3s var(--ease-lily) 1.74s forwards; }
.lily-stage.revealed .lily-petal--b4 { animation: petal-bloom-back 1.3s var(--ease-lily) 1.86s forwards; }
.lily-stage.revealed .lily-petal--b5 { animation: petal-bloom-back 1.3s var(--ease-lily) 1.98s forwards; }

/* front row on top */
.lily-stage.revealed .lily-petal--1 { animation: petal-bloom 1.3s var(--ease-lily) 2.15s forwards; }
.lily-stage.revealed .lily-petal--2 { animation: petal-bloom 1.3s var(--ease-lily) 2.27s forwards; }
.lily-stage.revealed .lily-petal--3 { animation: petal-bloom 1.3s var(--ease-lily) 2.39s forwards; }
.lily-stage.revealed .lily-petal--4 { animation: petal-bloom 1.3s var(--ease-lily) 2.51s forwards; }
.lily-stage.revealed .lily-petal--5 { animation: petal-bloom 1.3s var(--ease-lily) 2.63s forwards; }

.lily-stage.revealed .lily-center  { animation: center-in 1s var(--ease-lily) 3.0s forwards; }
.lily-stage.revealed .lily-stamens { animation: fade-in 1s ease 3.2s forwards; }

.lily-stage.revealed .lily-particles .p1 { animation: sparkle 3.2s ease-in-out 3.3s infinite; }
.lily-stage.revealed .lily-particles .p2 { animation: sparkle 3.2s ease-in-out 3.55s infinite; }
.lily-stage.revealed .lily-particles .p3 { animation: sparkle 3.2s ease-in-out 3.8s infinite; }
.lily-stage.revealed .lily-particles .p4 { animation: sparkle 3.2s ease-in-out 4.05s infinite; }
.lily-stage.revealed .lily-particles .p5 { animation: sparkle 3.2s ease-in-out 4.3s infinite; }
.lily-stage.revealed .lily-particles .p6 { animation: sparkle 3.2s ease-in-out 4.55s infinite; }

.lily-stage.revealed .lily-glow {
  animation: glow-in 2.4s ease 2.6s forwards;
}

@keyframes draw-stem {
  to { stroke-dashoffset: 0; }
}
@keyframes leaf-in {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: .85; transform: scale(1); }
}
@keyframes petal-bloom-back {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: .9; transform: scale(1.06); }
  100% { opacity: .85; transform: scale(1); }
}
@keyframes petal-bloom {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes center-in {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes glow-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.6); }
  50%      { opacity: 1; transform: scale(1.4); }
}

.gift-verse {
  font-family: var(--font-cn);
  font-size: 17px;
  line-height: 2;
  color: var(--ink);
}
.gift-verse__accent em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-700);
  font-size: 19px;
  letter-spacing: .04em;
}
.gift-verse p + p { margin-top: 2px; }

.gift-spec {
  margin-top: 32px;
  font-size: 12px;
  color: var(--gold-500);
  padding: 8px 18px;
  display: inline-block;
  border-top: 1px solid var(--gold-300);
  border-bottom: 1px solid var(--gold-300);
}

.gift-footnote {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ═════════════════════════════════════════════════════
   IV · À bientôt
   ═════════════════════════════════════════════════════ */
.chapter--iv {
  background:
    radial-gradient(ellipse 100% 60% at 50% 80%, var(--cream-100) 0%, transparent 55%),
    linear-gradient(175deg, #b8a8d8 0%, #d6c5e0 30%, #f5e6c8 65%, #fff8e0 100%);
}

.chapter-inner--coda {
  padding: 6svh 0;
}

.coda-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  color: var(--lavender-700);
  font-size: clamp(48px, 13vw, 64px);
  letter-spacing: .01em;
}
.coda-script__line {
  display: block;
}
.coda-script__line:nth-child(2) {
  margin-top: .06em;
  margin-left: 1.5em;
  color: var(--gold-700);
  font-size: .9em;
}

.coda-zh {
  font-family: var(--font-cn);
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
  letter-spacing: .2em;
}

.coda-stamp {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--ink-whisper);
  letter-spacing: .3em;
}

/* ═════════════════════════════════════════════════════
   Reveal animations (observer-driven)
   ═════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1.3s var(--ease-cubic),
    transform 1.3s var(--ease-cubic);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* initial keyframes used by header-only items */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═════════════════════════════════════════════════════
   Reduced motion
   ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .lily-svg .lily-stem { stroke-dashoffset: 0; }
  .lily-svg .lily-leaf { opacity: .85; transform: none; }
  .lily-svg .lily-petal { opacity: 1; transform: none; }
  .lily-svg .lily-center { opacity: 1; transform: none; }
  .lily-svg .lily-stamens { opacity: 1; }
  .lily-svg .lily-particles circle { opacity: .8; }
  .lily-glow { opacity: 1; }
}

/* small-screen refinement for narrow phones */
@media (max-width: 360px) {
  .chapter { padding-left: 20px; padding-right: 20px; }
  .cover-title { font-size: clamp(50px, 16vw, 70px); }
  .letter-body { font-size: 16px; }
  .gift-verse { font-size: 16px; }
}