/* ═══════════════════════════════════════════════════════════════════
   RED VELVET PRELUDE — prelude.css v3
   DAVINCI ASTRAL — Tulipán forma real (ref: styleR/tulipan1.png)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --dark-color: #0d0205;
  --font-script: 'Great Vibes', cursive;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Montserrat', sans-serif;
  --gold: #d4af37;
  --gold-light: #e8cc70;

  /* Petal — base is green-yellow at sepal, transitions to deep crimson */
  --p-sepal:  #2a4a12;   /* base verde donde pétalo sale del cáliz */
  --p-base:   #4a1a0a;   /* transición marrón-rojo baja */
  --p-low:    #6b0f1a;   /* rojo oscuro bajo */
  --p-mid:    #8b1020;   /* rojo medio */
  --p-rich:   #a81228;   /* rojo terciopelo */
  --p-bright: #c8102e;   /* rojo brillante centro */
  --p-tip:    #8b0a1e;   /* punta ligeramente más oscura */

  /* Stem */
  --s-dark:  #0a1f0a;
  --s-mid:   #1a3a1a;
  --s-green: #2d5a2d;
  --s-light: #3d7a3d;
}

html { -webkit-tap-highlight-color: transparent; }
body {
  cursor: pointer;
  touch-action: manipulation;
  background-color: var(--dark-color) !important;
  /* Override main.css: flex + overflow:hidden bloquea scroll */
  display: block !important;
  overflow: hidden !important; /* Empieza bloqueado durante el prelude */
}
/* Contenedor de flores — fijo al suelo del viewport */
#flowersScene {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  z-index: 10;
  pointer-events: none;
}
/* Cuando el prelude termina, el JS pone esta clase */
body.rv-scrollable {
  overflow: auto !important;
  overflow-x: hidden !important;
}
body * {
  -webkit-animation-play-state: running !important;
  animation-play-state: running !important;
}
.titulo, #lyrics { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   1. TULIP BUD — FORMA REAL
   ═══════════════════════════════════════════════════════════════════
   Un tulipán cerrado se construye con pétalos muy estrechos,
   casi verticales, que se solapan. El truco es:
   - width muy pequeño (capullo estrecho)
   - height muy grande (alargado)
   - border-radius asimétrico: punta arriba redondeada-puntiaguda,
     base estrecha
   - transform-origin: bottom center (giran desde la base del cáliz)
   - Pétalos exteriores: ligeramente inclinados hacia afuera
   - Pétalos interiores: más rectos, protegidos adentro
   ═══════════════════════════════════════════════════════════════════ */

/* BASE del pétalo */
.flower__leaf {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 4.5vmin !important;
  height: 16vmin !important;
  /* Punta redondeada arriba, estrecha abajo — forma tulipán */
  border-radius: 48% 48% 14% 14% / 55% 55% 10% 10% !important;
  transform-origin: bottom center !important;
  opacity: 0.94 !important;

  /* Gradiente: base verde-cáliz → rojo terciopelo → punta oscura */
  background:
    /* Highlight lateral sutil */
    linear-gradient(105deg, rgba(255,255,255,0.10) 0%, transparent 35%, rgba(0,0,0,0.08) 100%),
    /* Color principal */
    linear-gradient(
      to top,
      var(--p-sepal) 0%,
      var(--p-base)  8%,
      var(--p-low)  20%,
      var(--p-mid)  45%,
      var(--p-rich) 70%,
      var(--p-bright) 82%,
      var(--p-tip)  100%
    ) !important;

  box-shadow:
    inset 1px 0 3px rgba(255,180,180,0.12),
    inset -1px 0 4px rgba(0,0,0,0.3),
    inset 0 -3px 6px rgba(0,0,0,0.2) !important;
}

/* ── PÉTALO 1: Exterior izquierdo — inclinado ~-30deg, más visible ── */
.flower__leaf--1 {
  --petal-base-transform: translateX(-50%) rotate(-28deg) rotateY(18deg);
  width: 5vmin !important;
  height: 15.5vmin !important;
  transform: translateX(-50%) rotate(-28deg) rotateY(18deg);
  background:
    linear-gradient(110deg, rgba(255,255,255,0.08) 0%, transparent 30%),
    linear-gradient(to top, var(--p-sepal) 0%, var(--p-base) 10%, var(--p-low) 25%, var(--p-mid) 50%, var(--p-rich) 75%, var(--p-tip) 100%) !important;
  z-index: 1 !important;
}

/* ── PÉTALO 2: Exterior derecho — inclinado ~+28deg ── */
.flower__leaf--2 {
  --petal-base-transform: translateX(-50%) rotate(28deg) rotateY(-18deg);
  width: 5vmin !important;
  height: 15.5vmin !important;
  transform: translateX(-50%) rotate(28deg) rotateY(-18deg);
  background:
    linear-gradient(70deg, rgba(255,255,255,0.07) 0%, transparent 35%),
    linear-gradient(to top, var(--p-sepal) 0%, var(--p-base) 10%, var(--p-low) 25%, var(--p-mid) 50%, var(--p-rich) 72%, var(--p-tip) 100%) !important;
  z-index: 1 !important;
}

/* ── PÉTALO 3: Exterior trasero central — ligeramente inclinado atrás ── */
.flower__leaf--3 {
  --petal-base-transform: translateX(-50%) rotate(0deg) rotateX(-20deg);
  width: 4.8vmin !important;
  height: 16.5vmin !important;
  transform: translateX(-50%) rotate(0deg) rotateX(-20deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%),
    linear-gradient(to top, var(--p-sepal) 0%, var(--p-base) 8%, var(--p-low) 22%, var(--p-mid) 48%, var(--p-rich) 78%, var(--p-tip) 100%) !important;
  z-index: 2 !important;
}

/* ── PÉTALO 4: Interior izquierdo — más cerrado, -12deg ── */
.flower__leaf--4 {
  --petal-base-transform: translateX(-50%) rotate(-12deg);
  width: 4vmin !important;
  height: 15vmin !important;
  transform: translateX(-50%) rotate(-12deg);
  background:
    linear-gradient(95deg, rgba(255,255,255,0.10) 0%, transparent 45%),
    linear-gradient(to top, var(--p-sepal) 0%, var(--p-base) 12%, var(--p-low) 28%, var(--p-mid) 55%, var(--p-bright) 80%, var(--p-tip) 100%) !important;
  z-index: 3 !important;
  opacity: 0.92 !important;
}

/* ── PÉTALO 5: Interior derecho — +12deg, el más brillante interior ── */
.flower__leaf--5 {
  --petal-base-transform: translateX(-50%) rotate(12deg);
  width: 4vmin !important;
  height: 15vmin !important;
  transform: translateX(-50%) rotate(12deg);
  background:
    linear-gradient(85deg, rgba(255,255,255,0.12) 0%, transparent 40%),
    linear-gradient(to top, var(--p-sepal) 0%, var(--p-base) 12%, var(--p-low) 28%, var(--p-mid) 55%, var(--p-bright) 80%, var(--p-tip) 100%) !important;
  z-index: 3 !important;
  opacity: 0.90 !important;
}

/* ── CÁLIZ (base verde del tulipán) — replace white-circle ── */
.flower__white-circle {
  position: absolute !important;
  left: -3.5vmin !important;
  top: -1.5vmin !important;
  width: 9vmin !important;
  height: 3.5vmin !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at top,
    rgba(45,90,45,0.7) 0%,
    rgba(30,60,30,0.4) 50%,
    transparent 80%
  ) !important;
  z-index: 0 !important;
}
.flower__white-circle::after {
  display: none !important;
}

/* Glow: rojo sutil emanando del capullo */
.flower__leafs::after {
  width: 8vmin !important;
  height: 8vmin !important;
  background-color: rgba(168,18,40,0.35) !important;
  filter: blur(7vmin) !important;
}

/* Luciérnagas → partículas doradas */
.flower__light {
  background-color: rgba(212,175,55,0.65) !important;
  width: 0.7vmin !important; height: 0.7vmin !important;
}
.flower__light:nth-child(odd) { background-color: rgba(245,230,179,0.55) !important; }

/* ═══════════════════════════════════════════════════════════════════
   2. STEM + HOJAS
   ═══════════════════════════════════════════════════════════════════ */
.flower__line {
  width: 2vmin !important;
  border-radius: 0.8vmin !important;
  background-image:
    linear-gradient(to left, rgba(0,0,0,0.28), transparent 40%, rgba(255,255,255,0.04)),
    linear-gradient(to top, var(--s-dark) 0%, var(--s-dark) 15%, var(--s-mid) 50%, var(--s-green) 100%) !important;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.55) !important;
}
.flower__line__leaf {
  background-image: linear-gradient(to top, rgba(10,31,10,0.5), var(--s-mid), var(--s-green)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. FOLIAGE → DARK FOREST GREEN
   ═══════════════════════════════════════════════════════════════════ */
.flower__grass { --c: var(--s-mid) !important; }
.flower__grass--top { border-right-color: var(--s-green) !important; }
.flower__grass--bottom { background-image: linear-gradient(to top, transparent, var(--s-mid)) !important; }
.flower__grass__leaf { background-image: linear-gradient(to top, transparent, transparent 30%, var(--s-green)) !important; }
.flower__g-long { --c: var(--s-mid) !important; }
.flower__g-long__top { border-right-color: var(--s-green) !important; }
.flower__g-long__bottom { background-image: linear-gradient(to top, transparent 30%, var(--s-mid)) !important; }
.flower__g-right .leaf {
  border-left: 2vmin solid var(--s-dark) !important;
  background-image: linear-gradient(to bottom, transparent, var(--dark-color) 60%) !important;
  -webkit-mask-image: linear-gradient(to top, transparent 30%, var(--s-green) 60%) !important;
  mask-image: linear-gradient(to top, transparent 30%, var(--s-green) 60%) !important;
}
.flower__g-front__leaf {
  box-shadow: inset 0 2px 1vmin rgba(30,80,30,0.2) !important;
  background-image:
    linear-gradient(to bottom left, transparent, var(--dark-color)),
    linear-gradient(to bottom right, var(--s-green) 50%, transparent 50%) !important;
  -webkit-mask-image: linear-gradient(to bottom right, var(--s-green) 50%, transparent 50%) !important;
  mask-image: linear-gradient(to bottom right, var(--s-green) 50%, transparent 50%) !important;
}
.flower__g-front__line { background-image: linear-gradient(to top, transparent, var(--s-mid), transparent 100%) !important; }
.flower__g-fr .leaf {
  border-left: 2vmin solid var(--s-dark) !important;
  -webkit-mask-image: linear-gradient(to top, transparent 25%, var(--s-mid) 50%) !important;
  mask-image: linear-gradient(to top, transparent 25%, var(--s-mid) 50%) !important;
}
.flower__g-fr__leaf {
  box-shadow: inset 0 2px 1vmin rgba(30,80,30,0.2) !important;
  background-image:
    linear-gradient(to bottom left, transparent, var(--dark-color) 98%),
    linear-gradient(to bottom right, var(--s-green) 45%, transparent 50%) !important;
}
.long-g .leaf { border-left-color: var(--s-mid) !important; }

/* ═══════════════════════════════════════════════════════════════════
   4. NIGHT → RED VELVET ABYSS
   ═══════════════════════════════════════════════════════════════════ */
.night {
  background-image:
    radial-gradient(ellipse at top, transparent 0%, var(--dark-color)),
    radial-gradient(ellipse at bottom, var(--dark-color), rgba(100,8,25,0.1)),
    linear-gradient(90deg, #1a0508, #0d0205) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. POSICIONAMIENTO GLOBAL DE LAS 6 FLORES
   Todas absolutas dentro de #flowersScene (fixed 100vw)
   Distribuidas para verse centradas en móvil
   ═══════════════════════════════════════════════════════════════════ */

/* FLOR 1 — Bajita, curva elegante a la extrema izquierda */
.flower--1 {
  left: 56% !important;
  transform: rotate(-24deg) !important;
  animation: moving-flower-1 4s linear infinite !important;
  z-index: 12;
}
.flower--1 .flower__line { height: 56vmin !important; }

/* FLOR 2 — Alta, cruzando hacia la izquierda */
.flower--2 {
  left: 54% !important;
  transform: rotate(-12deg) !important;
  animation: moving-flower-2 4.5s linear infinite !important;
  z-index: 13;
}
.flower--2 .flower__line { height: 75vmin !important; }

/* FLOR 3 — Altura media, inclinada a la derecha */
.flower--3 {
  left: 42% !important;
  transform: rotate(14deg) !important;
  animation: moving-flower-3 4.2s linear infinite !important;
  z-index: 11;
}
.flower--3 .flower__line { height: 68vmin !important; }

/* FLOR 6 — La más alta, protagonista, casi recta pero ligeramente derecha */
.flower--6 {
  left: 46% !important;
  transform: rotate(6deg) !important;
  animation: moving-flower-1 6s linear infinite !important;
  z-index: 15;
}
.flower--6 .flower__line { height: 82vmin !important; }
.flower__leafs--6 { animation: none !important; }
/* Sus pétalos son ligeramente más grandes */
.flower--6 .flower__leaf--1,
.flower--6 .flower__leaf--2 { width: 5.5vmin !important; height: 17vmin !important; }
.flower--6 .flower__leaf--3  { width: 5.2vmin !important; height: 18vmin !important; }
.flower--6 .flower__leaf--4,
.flower--6 .flower__leaf--5  { width: 4.5vmin !important; height: 16vmin !important; }

/* FLOR 4 — Baja, centro-izquierda */
.flower--4 {
  left: 48% !important;
  transform: rotate(4deg) !important;
  animation: moving-flower-2 5.5s linear infinite !important;
  z-index: 14;
}
.flower--4 .flower__line { height: 50vmin !important; }
.flower__leafs--4 { animation: none !important; }

/* FLOR 5 — Extremo derecho, baja y en el fondo */
.flower--5 {
  left: 36% !important;
  transform: rotate(26deg) scale(0.85) !important;
  filter: blur(0.5px);
  opacity: 0.85;
  animation: moving-flower-3 4.8s linear infinite !important;
  z-index: 10;
}
.flower--5 .flower__line { height: 52vmin !important; }
.flower__leafs--5 { animation: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   6. SKIP INICIAL GROW (flores ya visibles)
   ═══════════════════════════════════════════════════════════════════ */
.flower__line        { animation: none !important; }
.flower__leafs       { animation: none !important; transform: scale(1) !important; }
.flower__line__leaf  { animation: none !important; }
.grow-ans            { animation: none !important; transform: scale(1) !important; opacity: 1 !important; }
.flower__grass__leaf { animation: none !important; }
.flower__g-front__leaf-wrapper { animation: none !important; }
.flower__g-fr__leaf  { animation: none !important; }
.growing-grass       { animation: none !important; transform: scale(1) !important; }

/* Sway de originales */
.flower--1 { animation: moving-flower-1 4s linear infinite !important; }
.flower--2 { animation: moving-flower-2 4s linear infinite !important; }
.flower--3 { animation: moving-flower-3 4s linear infinite !important; }
.flower__grass--1  { animation: moving-grass 2s linear infinite !important; }
.flower__grass--2  { animation: moving-grass--2 1.5s linear infinite !important; }
.flower__g-long    { animation: flower-g-long-ans 3s linear infinite !important; }
.flower__g-right--1{ animation: flower-g-right-ans 2.5s linear infinite !important; }
.flower__g-right--2{ animation: flower-g-right-ans--2 3s linear infinite !important; }
.flower__g-front   { animation: flower__g-front-ans 2s linear infinite !important; }
.flower__g-fr      { animation: flower__g-fr-ans 2s linear infinite !important; }
.flower__light     { animation: light-ans 4s linear infinite backwards !important; }

/* ═══════════════════════════════════════════════════════════════════
   7. PRELUDE OVERLAY
   ═══════════════════════════════════════════════════════════════════ */
#prelude-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: all;
  transition: opacity 1.5s ease, transform 1.5s ease;
}
#prelude-screen.is-exiting { opacity:0; transform:scale(1.05); pointer-events:none; }

.prelude-content {
  position:relative; z-index:110;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; padding:0 24px; margin-bottom:20vh;
  animation: pContentIn 1.5s ease 0.5s both;
}
@keyframes pContentIn { from{opacity:0;transform:translateY(18px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

.prelude-ornament { display:flex; align-items:center; gap:8px; }
.orn-line { display:block; width:50px; height:.5px; background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent); }
.orn-gem  { font-size:.35rem; color:var(--gold); opacity:.8; }
.prelude-eyebrow {
  font-family:var(--font-sans); font-size:.5rem; font-weight:300;
  letter-spacing:.35em; text-transform:uppercase; color:var(--gold-light); opacity:.7; margin-bottom:4px;
}
.prelude-names { display:flex; flex-direction:column; align-items:center; }
.prelude-name {
  font-family:var(--font-script); font-size:3rem; line-height:1.05; color:#fffdf7;
  text-shadow:0 2px 20px rgba(168,18,40,.5),0 4px 40px rgba(0,0,0,.5);
}
.prelude-amp  { font-family:var(--font-serif); font-size:.85rem; font-style:italic; color:var(--gold); line-height:1.4; }
.prelude-date { font-family:var(--font-serif); font-size:.55rem; letter-spacing:.16em; color:var(--gold-light); font-style:italic; opacity:.8; margin-top:6px; }

.prelude-cta {
  position:absolute; bottom:55px; left:0; right:0; z-index:110;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:ctaIn 1s ease 2s both;
}
@keyframes ctaIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.shake-icon { position:relative; width:28px; height:42px; animation:shakeHint 2.2s ease-in-out infinite; }
@keyframes shakeHint {
  0%,100%{transform:rotate(0)} 15%{transform:rotate(-12deg)} 30%{transform:rotate(10deg)}
  45%{transform:rotate(-8deg)} 60%{transform:rotate(5deg)} 75%{transform:rotate(0)}
}
.shake-phone { width:22px; height:36px; border:1.5px solid var(--gold); border-radius:4px; margin:0 auto; opacity:.7; position:relative; }
.shake-phone-screen { position:absolute; inset:3px; background:rgba(212,175,55,.08); border-radius:2px; }
.shake-lines { position:absolute; top:50%; left:-8px; transform:translateY(-50%); display:flex; flex-direction:column; gap:3px; }
.shake-line { display:block; height:1px; background:var(--gold); opacity:0; animation:shakeL 2.2s ease-in-out infinite; }
.shake-line--1{width:6px;animation-delay:.15s} .shake-line--2{width:9px;animation-delay:.3s} .shake-line--3{width:5px;animation-delay:.45s}
@keyframes shakeL { 0%,70%,100%{opacity:0;transform:translateX(0)} 15%,50%{opacity:.7;transform:translateX(-3px)} }
.cta-text  { font-family:var(--font-sans); font-size:.55rem; font-weight:300; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-light); opacity:.8; }
.cta-sub   { font-family:var(--font-sans); font-size:.36rem; font-weight:300; letter-spacing:.25em; color:rgba(212,175,55,.4); text-transform:uppercase; }

.studio-watermark {
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; justify-content:center; align-items:center; gap:8px;
  z-index:110; opacity:0; animation:fadeInW 1s ease 2.5s both;
}
@keyframes fadeInW { from{opacity:0} to{opacity:1} }
.watermark-gem  { font-size:.3rem; color:rgba(212,175,55,.3); }
.watermark-text { font-family:var(--font-sans); font-size:.36rem; letter-spacing:.38em; text-transform:uppercase; color:rgba(212,175,55,.28); }

/* ═══════════════════════════════════════════════════════════════════
   8. DEPARTING
   ═══════════════════════════════════════════════════════════════════ */
body.is-departing .flower--1,
body.is-departing .flower--2,
body.is-departing .flower--3,
body.is-departing .flower--4,
body.is-departing .flower--5,
body.is-departing .flower--6 { animation: none !important; }
body.is-departing .flower__g-long,
body.is-departing .flower__g-right--1,
body.is-departing .flower__g-right--2,
body.is-departing .flower__g-front,
body.is-departing .flower__g-fr,
body.is-departing .flower__grass--1,
body.is-departing .flower__grass--2 { animation:none !important; }

/* bloom-fall removido — JS petal physics engine maneja animaciones individuales */

/* stem/leaf/light animations manejados por JS physics engine */

body.is-departing .grow-ans    { animation:foliage-out 1.8s ease-in .4s forwards !important; transform:scale(1) !important; }
body.is-departing .growing-grass{ animation:foliage-out 1.5s ease-in .3s forwards !important; transform:scale(1) !important; }
body.is-departing .long-g      { animation:foliage-out 1.8s ease-in .5s forwards !important; }
@keyframes foliage-out { to{transform:scale(0) !important;opacity:0 !important} }

body.is-departing .night { transition:opacity 2.5s ease; opacity:.2; }
body.is-departing .prelude-cta { opacity:0 !important; transition:opacity .3s ease; }

/* ═══════════════════════════════════════════════════════════════════
   9. MAIN INVITATION
   ═══════════════════════════════════════════════════════════════════ */
.main-inv--hidden { display:none !important; }
#main-invitation {
  min-height:100vh; background:var(--dark-color);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:invReveal 1.2s ease both;
}
@keyframes invReveal { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
.invitation-hero { text-align:center; padding:40px 24px; }
.inv-title {
  font-family:var(--font-script); font-size:3.4rem; color:#fffdf7;
  display:flex; flex-direction:column; align-items:center;
}
.inv-title em { font-family:var(--font-serif); font-size:1.1rem; color:var(--gold); font-style:italic; }
.inv-sub { font-family:var(--font-sans); font-size:.58rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-top:12px; }

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:375px) { .prelude-name{font-size:2.5rem} .prelude-cta{bottom:45px} }
@media (min-width:480px) { .prelude-name{font-size:3.4rem} }

/* ═══════════════════════════════════════════════════════════════════
   10. GROUND FOG
   ═══════════════════════════════════════════════════════════════════ */
.ground-fog {
  position:fixed; bottom:0; left:0; right:0;
  height:28vh; z-index:12; pointer-events:none;
  overflow:clip;
  animation:fogBreathe 8s ease-in-out infinite;
}
/* La niebla se pinta 10% más ancha que el viewport, recortada por el contenedor */
.ground-fog::before {
  content:''; position:absolute; inset:0 -10%;
  background:
    radial-gradient(ellipse 120% 100% at 50% 100%, rgba(13,2,5,0) 0%, rgba(20,8,12,.15) 20%, rgba(30,15,20,.08) 50%, transparent 80%),
    radial-gradient(ellipse 80% 60% at 30% 100%, rgba(45,30,35,.12) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 70% 100%, rgba(45,30,35,.10) 0%, transparent 70%);
}
@keyframes fogBreathe {
  0%,100%{opacity:.6;transform:translateY(0)} 50%{opacity:.85;transform:translateY(-5px)}
}
body.is-departing .ground-fog { transition:opacity 2.5s ease; opacity:0 !important; animation:none !important; }

/* ═══════════════════════════════════════════════════════════════════
   11. GOLDEN DUST PARTICLES
   ═══════════════════════════════════════════════════════════════════ */
.gold-dust { position:fixed; inset:0; z-index:11; pointer-events:none; overflow:hidden; }
.dust {
  position:absolute; left:var(--x,50%); top:var(--y,50%);
  width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,230,179,.9),rgba(212,175,55,.4));
  box-shadow:0 0 4px 1px rgba(212,175,55,.3);
  opacity:0; animation:dustFloat var(--dur,7s) ease-in-out var(--d,0s) infinite;
}
.dust:nth-child(3n)   { width:4px; height:4px; box-shadow:0 0 6px 2px rgba(212,175,55,.2); }
.dust:nth-child(3n+1) { width:2px; height:2px; }
@keyframes dustFloat {
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  15%{opacity:.7}
  25%{transform:translate(8px,-12px) scale(1)}
  50%{opacity:.5;transform:translate(-6px,-25px) scale(.8)}
  75%{transform:translate(10px,-15px) scale(1.1);opacity:.6}
  90%{opacity:.2}
  100%{opacity:0;transform:translate(3px,-35px) scale(.4)}
}
body.is-departing .dust { animation:dustScatter 1.5s ease-out forwards !important; }
@keyframes dustScatter {
  0%{opacity:.7} 30%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--x) - 50%),-80vh) scale(0)}
}

/* ═══════════════════════════════════════════════════════════════════
   12. PETAL TIP GLOW
   ═══════════════════════════════════════════════════════════════════ */
.flower__leaf::after {
  content:''; position:absolute; top:-1px; left:25%; right:25%;
  height:35%; border-radius:50% 50% 30% 30%;
  background:radial-gradient(ellipse at center top, rgba(255,200,200,.12) 0%, rgba(200,16,46,.06) 40%, transparent 70%);
  pointer-events:none; animation:tipGlow 4s ease-in-out infinite alternate;
}
@keyframes tipGlow { 0%{opacity:.4} 100%{opacity:.8} }

/* ═══════════════════════════════════════════════════════════════════
   13. BREATHING VIGNETTE
   ═══════════════════════════════════════════════════════════════════ */
.vignette {
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse 70% 65% at 50% 45%, transparent 0%, rgba(13,2,5,.2) 55%, rgba(13,2,5,.65) 80%, rgba(13,2,5,.9) 100%);
  animation:vignetteBreathe 6s ease-in-out infinite;
}
@keyframes vignetteBreathe { 0%,100%{opacity:.85} 50%{opacity:1} }
body.is-departing .vignette { animation:vignetteClose 2.5s ease-in forwards !important; }
@keyframes vignetteClose { 0%{opacity:.85} 60%{opacity:1} 100%{opacity:0} }

/* ═══════════════════════════════════════════════════════════════════
   14. STEM GROUND SHADOWS
   ═══════════════════════════════════════════════════════════════════ */
.stem-shadows {
  position:fixed; bottom:0; left:0; right:0;
  height:8vh; z-index:6; pointer-events:none;
}
.stem-shadow {
  position:absolute; bottom:0; width:3vmin; height:100%;
  background:radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0,0,0,.15) 0%, transparent 70%);
  filter:blur(4px); animation:shadowSway 4s ease-in-out infinite;
}
.stem-shadow--1 { left:18%; }
.stem-shadow--2 { left:32%; animation-delay:.3s; width:2.5vmin; }
.stem-shadow--3 { left:48%; animation-delay:.6s; }
.stem-shadow--4 { left:62%; animation-duration:5s; width:2vmin; }
.stem-shadow--5 { left:8%; animation-delay:.2s; width:2vmin; opacity:.6; }
.stem-shadow--6 { left:50%; animation-duration:6s; width:3.5vmin; }
@keyframes shadowSway { 0%,100%{transform:skewX(-2deg)} 50%{transform:skewX(3deg)} }
body.is-departing .stem-shadows { transition:opacity 2s ease .5s; opacity:0; }