/* ── Mask animation ───────────────────────────────────── */
.mask-wrap { overflow: hidden; }
.mask-inner { transform: translateY(60px); opacity: 0; }

/* ── Sparkle cursor canvas ────────────────────────────── */
#sparkle-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 8999; }
/* ── Fairy cursor ────────────────────────────────────── */
/* js/fairy/ owns everything about her now -- size, transform, position.
   This rule only has to get her z-ordered and out of the hit-test path
   before its script runs. */
#fairy-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9000; }
@media (pointer: coarse) { #fairy-cursor { display: none; } }
/* ── Pointer mark ─────────────────────────────────────── */
/* The fairy trails the pointer on a spring and the sparkles are a scatter,
   so neither one is where a click actually lands. This is: no lag, no
   randomness, always exactly at the real coordinate, above everything else
   that draws near the cursor -- the one mark a reader can trust. */
#pointer-mark { position: fixed; top: 0; left: 0; width: 15px; height: 15px;
  pointer-events: none; z-index: 9001; transform: translate(-50%, -50%);
  /* It is a cursor mark, not a page ornament. Until a real pointing device has
     supplied a coordinate, its default 0,0 position must not nick the header. */
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, .9)) drop-shadow(0 0 7px rgba(255, 255, 255, .55)); }
@media (pointer: coarse) { #pointer-mark { display: none; } }

/* ── Chapter index nav ────────────────────────────────── */
#chapter-nav { background: var(--cream); }
.chapter-list { margin-top: 1.8rem; }
.chapter-row {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.1rem 0; text-decoration: none; color: var(--brown);
  border-bottom: 1px solid rgba(92,61,46,0.1); position: relative;
  transition: color 0.25s, gap 0.3s;
}
.chapter-row:first-child { border-top: 1px solid rgba(92,61,46,0.1); }
.chapter-row::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 0; height: 1px; background: var(--pink-d);
  transition: width 0.4s ease;
}
.chapter-row:hover { color: var(--pink-d); gap: 2rem; }
.chapter-row:hover::after { width: 100%; }
.chap-num {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1;
  color: var(--pink); opacity: 0.4; min-width: 2.6rem;
  transition: opacity 0.3s, transform 0.3s;
}
.chapter-row:hover .chap-num { opacity: 1; transform: scale(1.08); }
.chap-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(1.3rem, 3vw, 2.2rem); letter-spacing: 0.02em;
}
.chap-sub {
  font-family: 'Inter', sans-serif; font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brown2); display: none;
}
.chap-arrow {
  font-size: 1rem; color: var(--sage); margin-left: auto;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
}
.chapter-row:hover .chap-arrow { opacity: 1; transform: translateX(0); }
@media (min-width: 640px) { .chap-sub { display: block; } }

/* ══ Fairy Tale Garden - Ambient Layer ═══════════════════ */

/* Fixed ambient canvases */
#mist-canvas  { position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.5; }
#petal-canvas { position:fixed;inset:0;pointer-events:none;z-index:2; }
#fly-canvas   { position:fixed;inset:0;pointer-events:none;z-index:3; }

/* Ambient twinkling stars */
.ft-star {
  position:fixed;border-radius:50%;pointer-events:none;z-index:4;
  background:var(--gold);
  animation:starTwinkle var(--dur,3s) var(--delay,0s) ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100%{opacity:0;transform:scale(0.4);}
  50%{opacity:0.75;transform:scale(1.6);}
}

/* Flying birds */
.ft-birds { position:fixed;inset:0;pointer-events:none;z-index:5; }
.ft-bird {
  position:absolute;
  animation:birdPath var(--dur,20s) linear infinite;
  animation-delay:var(--delay,0s);
  will-change:transform;
}
@keyframes birdPath {
  0%   { transform:translateX(-140px); opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { transform:translateX(calc(100vw + 140px)) translateY(-50px); opacity:0; }
}

/* Squirrel corner */
.ft-squirrel {
  position:fixed;bottom:5.5rem;right:1.6rem;
  width:52px;pointer-events:none;z-index:6;opacity:0.55;
  animation:squirrelBob 4s ease-in-out infinite;
}
@keyframes squirrelBob {
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%{transform:translateY(-6px) rotate(3deg);}
}
@media (pointer:coarse){ .ft-squirrel,.ft-birds,.ft-star{display:none;} }

/* Page-wide ambient particles default OFF (birds/stars/squirrel/mist/petals/fireflies) */
/* Mouse cursor (#fairy-cursor) and its sparkle trail (#sparkle-canvas) stay on - not ambient */
.ft-squirrel, .ft-birds, .ft-star,
#mist-canvas, #petal-canvas, #fly-canvas { display:none; }

/* Vine decorations */
.ft-vine {
  position:absolute;pointer-events:none;z-index:0;
  opacity:0.15;width:130px;top:0;
  animation:vineSway 9s ease-in-out infinite;
}
.ft-vine-l{left:-10px;transform-origin:left top;}
.ft-vine-r{right:-10px;transform-origin:right top;transform:scaleX(-1);}
@keyframes vineSway {
  0%,100%{transform:rotate(-2deg);}
  50%{transform:rotate(2deg);}
}
.ft-vine-r { animation:vineSwayR 9s ease-in-out infinite; }
@keyframes vineSwayR {
  0%,100%{transform:scaleX(-1) rotate(-2deg);}
  50%{transform:scaleX(-1) rotate(2deg);}
}

/* ── Whimsy lace dividers ─────────────────────────────── */
/* Full-bleed scallop strip between sections */
.lace-div {
  position: relative; width: 100%; height: 32px; overflow: hidden; line-height: 0;
}
.lace-div svg { display: block; width: 100%; height: 100%; }
/* Legacy fairy-div (kept for dark-bg variants) */
.fairy-div {
  display:flex;align-items:center;justify-content:center;
  gap:1.2rem;padding:0.2rem 2.4rem;max-width:1200px;margin:0 auto;
}
.fairy-div-line {
  flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--sage) 30%,var(--sage) 70%,transparent);
  opacity:0.28;
}
.fairy-div-ornament {
  font-family:'Dancing Script',cursive;font-size:0.95rem;
  color:var(--pink-d);opacity:0.55;letter-spacing:0.25em;white-space:nowrap;
}

/* Section vignette + garden glow */
body::before {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 0% 100%,rgba(74,103,65,0.05),transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%,rgba(212,160,168,0.05),transparent);
}
#hero::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:200px;
  background:linear-gradient(to top,rgba(74,103,65,0.08),transparent);
  pointer-events:none;z-index:1;
}

/* Scattered flower clusters */
.ft-flowers {
  position:absolute;pointer-events:none;z-index:0;
  display:flex;gap:0.8rem;align-items:flex-end;opacity:0.22;
}
.ft-flowers svg { animation:leafFloat 4s ease-in-out infinite; }
.ft-flowers svg:nth-child(2) { animation-delay:-1.2s; }
.ft-flowers svg:nth-child(3) { animation-delay:-2.5s; }
@keyframes leafFloat {
  0%,100%{transform:translateY(0) rotate(0deg);}
  33%{transform:translateY(-7px) rotate(4deg);}
  66%{transform:translateY(3px) rotate(-3deg);}
}

/* Ornamental book-chapter header */
.ft-chapter-mark {
  display:flex;align-items:center;gap:0.7rem;
  font-family:'Dancing Script',cursive;font-size:0.8rem;
  color:var(--gold);opacity:0.55;letter-spacing:0.18em;
  margin-bottom:0.6rem;
}
.ft-chapter-mark::before,.ft-chapter-mark::after {
  content:'';flex:0 0 18px;height:1px;background:var(--gold);opacity:0.6;
}

/* Glow hover on cards */
.tete-card:hover { box-shadow:0 0 28px rgba(200,168,75,0.1); }
.ps-piece:hover { filter:drop-shadow(0 0 12px rgba(200,168,75,0.08)); }

/* Nav logo sparkle */
/* The ✦ that used to sit here was a stand-in for exactly what the drawing supplies: her lockup
   carries its own sparkles. Two of them beside each other read as a typo, not as ornament. */

/* Preloader fairy glow */
#preloader {
  background:radial-gradient(ellipse at 30% 60%,#1e1408,#0e0a04) !important;
}

/* Mushroom decorative element */
.ft-shroom {
  position:absolute;pointer-events:none;z-index:0;opacity:0.18;
  animation:leafFloat 5s ease-in-out infinite;
}