/* ================================================================
   LOVE IS A BLESSING — Elegant Gothic reading experience
   Extends style.css. Scoped to body.love-page.
   Signature: living candlelight. No threads. No horror clichés.
   ================================================================ */

body.love-page{
  --candle-ivory: #efe6cf;
  --candle-ivory-dim: #c9bd9d;
  --gold: #ad8a4e;        /* aged gold leaf, not bright metallic */
  --gold-bright: #c9a664;
  --burgundy: #4a1119;
  --burgundy-bright: #641a26;
  --crimson-accent: #3a0d14; /* very dark crimson, used sparingly */
  --velvet: #16121a;      /* charcoal black, velvet undertone — not pure black */
  --velvet-2: #1c1720;
  background: var(--velvet);
  color: var(--candle-ivory);
}

/* ---------- header ---------- */
body.love-page header.site-nav{
  position: fixed; width: 100%;
  transition: background .5s ease, border-color .5s ease, opacity .6s ease;
}
body.love-page header.site-nav.hero-mode{ background: transparent; border-bottom-color: transparent; }
body.love-page header.site-nav.nav-enter{ opacity: 0; }
body.love-page header.site-nav.nav-enter.nav-in{ opacity: 1; }
body.love-page .brand span{ color: var(--gold); }
body.love-page .links a:hover{ color: var(--gold); }
body.love-page .links a.active{ color: var(--gold); border-color: var(--gold); }

/* ================================================================
   AMBIENT LAYERS
   ================================================================ */

/* base velvet — clean, smooth gradient. No texture, no lines. */
.gothic-bg{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(173,138,78,0.06), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(74,17,25,0.22), transparent 75%),
    linear-gradient(180deg, var(--velvet-2), var(--velvet) 55%);
}
.gothic-bg::before{
  /* faint suggestion of a gothic arch, top center, barely visible */
  content: "";
  position: absolute; top: -6%; left: 50%; width: 46%; height: 34%;
  transform: translateX(-50%);
  border: 1px solid rgba(173,138,78,0.06);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  opacity: .6;
}

/* fireflies — glowing, wandering points of light.
   Two identical layers: one behind the content (z-index 3), one in front,
   over images and text (z-index 9), both non-interactive. */
.firefly-layer{ position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.firefly-layer-back{ z-index: 3; }
.firefly-layer-front{ z-index: 9; mix-blend-mode: screen; }

.firefly-layer .firefly{
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px 2px rgba(201,166,100,0.9), 0 0 14px 5px rgba(201,166,100,0.35);
  animation-name: fireflyDrift, fireflyFlicker;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  opacity: 0;
}
@keyframes fireflyDrift{
  0%{ transform: translate(0, 0); }
  25%{ transform: translate(var(--fx1, 40px), var(--fy1, -30px)); }
  50%{ transform: translate(var(--fx2, -20px), var(--fy2, -60px)); }
  75%{ transform: translate(var(--fx3, 30px), var(--fy3, -20px)); }
  100%{ transform: translate(var(--fx4, -10px), var(--fy4, -80px)); }
}
@keyframes fireflyFlicker{
  0%, 100%{ opacity: 0; }
  10%{ opacity: .85; }
  30%{ opacity: .25; }
  45%{ opacity: .95; }
  60%{ opacity: .2; }
  80%{ opacity: .8; }
}

/* falling rose petals — dark, sparse, each one animated independently.
   They drift down from near the header and fade out well before the
   footer, each with its own size, sway, tumble, speed and timing. */
.petal-layer{ position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.petal-layer.petal-layer-back{ z-index: 3; }
.petal-layer.petal-layer-front{ z-index: 9; }
.petal-layer .petal{
  position: absolute;
  top: -8vh;
  width: 40px; height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: petalFall, petalSway, petalTumble;
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite;
  will-change: transform, opacity;
}
.petal-layer .petal.tone-black-1{ background-image: url("images/effects/petal-black-1.png"); }
.petal-layer .petal.tone-black-2{ background-image: url("images/effects/petal-black-2.png"); }
.petal-layer .petal.tone-red-1{ background-image: url("images/effects/petal-red-1.png"); }
.petal-layer .petal.tone-red-2{ background-image: url("images/effects/petal-red-2.png"); }

/* fall + fade only — kept on its own axis so it never fights the tumble */
@keyframes petalFall{
  0%{ top: -8vh; opacity: 0; }
  8%{ opacity: var(--pmax, .7); }
  70%{ opacity: var(--pmax, .7); }
  100%{ top: 112vh; opacity: 0; }
}
/* gentle side-to-side drift, like air currents catching the petal */
@keyframes petalSway{
  0%{ margin-left: 0; }
  20%{ margin-left: var(--psway1, 26px); }
  45%{ margin-left: var(--psway2, -18px); }
  70%{ margin-left: var(--psway3, 22px); }
  90%{ margin-left: var(--psway4, -10px); }
  100%{ margin-left: var(--psway5, 6px); }
}
/* irregular tumble — petals rotate unevenly, sometimes speeding up,
   sometimes almost pausing, the way real light debris turns in the air */
@keyframes petalTumble{
  0%{ transform: rotate(var(--prot0, 0deg)) scale(var(--pscale, 1)); }
  30%{ transform: rotate(var(--prot1, 95deg)) scale(var(--pscale, 1)); }
  55%{ transform: rotate(var(--prot2, 210deg)) scale(var(--pscale, 1)); }
  80%{ transform: rotate(var(--prot3, 300deg)) scale(var(--pscale, 1)); }
  100%{ transform: rotate(var(--prot4, 430deg)) scale(var(--pscale, 1)); }
}

/* soft vignette — no noise, just a gentle edge darkening for depth */
.grain{
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.45) 100%);
}

/* ================================================================
   HERO
   ================================================================ */
.love-hero{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  position: relative; z-index: 5;
  padding: 0 24px;
}
.love-hero h1{
  font-family: 'Cormorant SC', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(28px, 4.6vw, 52px);
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--candle-ivory);
  text-shadow: 0 0 60px rgba(201,161,92,0.12);
  max-width: 20ch;
  margin: 0 auto;
  opacity: 0;
  animation: loveFade 2.2s ease forwards;
  animation-delay: .2s;
}
.love-hero h1 em{
  font-style: italic;
  color: var(--gold-bright);
  display: block;
  margin-top: .7em;
  font-size: .78em;
}
@keyframes loveFade{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

/* ================================================================
   STORY SECTIONS — narrow, novel-like reading column
   ================================================================ */
.l-story{
  padding: 130px 0;
  position: relative; z-index: 5;
}
.l-story .wrap{
  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.l-story .l-eyebrow{
  font-family: 'Inter', sans-serif;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.l-story.in-view .l-eyebrow{ opacity: 1; transform: none; }

.l-media{
  position: relative;
  margin: 0 auto 54px;
  opacity: 0; transform: translateY(22px) scale(.985);
  transition: opacity 1.5s ease .1s, transform 1.5s ease .1s;
}
.l-story.in-view .l-media{ opacity: 1; transform: none; }
.l-media img{
  width: 100%;
  max-height: 88vh;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.04) sepia(.06);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 97%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 97%);
}
.l-media::before{
  content: "";
  position: absolute; inset: -14%;
  z-index: -1;
  background: radial-gradient(ellipse 65% 65% at 50% 50%, rgba(201,161,92,0.14), transparent 76%);
  filter: blur(42px);
}

.l-story p{
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  line-height: 2.05;
  color: var(--candle-ivory-dim);
  text-align: left;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1.3s ease .2s, transform 1.3s ease .2s;
}
.l-story.in-view p{ opacity: 1; transform: none; }

/* decorative illuminated initial — every section paragraph */
.l-story p.drop-cap::first-letter{
  font-family: 'Cormorant SC', serif;
  font-size: 4.4em;
  line-height: .78;
  float: left;
  padding: .04em .1em 0 0;
  margin-top: .03em;
  color: var(--gold-bright);
  font-weight: 600;
  text-shadow: 0 0 24px rgba(173,138,78,0.35);
  border-bottom: 1px solid rgba(173,138,78,0.3);
}

.l-story h2{
  font-family: 'Cormorant SC', serif;
  font-weight: 500;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: .06em;
  color: var(--candle-ivory);
  margin-bottom: 40px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 1.3s ease .05s, transform 1.3s ease .05s;
}
.l-story.in-view h2{ opacity: 1; transform: none; }

.l-divider{
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 46px auto 0;
  opacity: 0; transition: opacity 1.6s ease .4s;
}
.l-story.in-view .l-divider{ opacity: .6; }

/* Section 5 — THE PRICE — no image, pure typographic weight.
   The one place the burgundy is allowed to breathe: emotional warmth
   tipping toward unsettling, then gone. */
.l-price{
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(74,17,25,0.28), transparent 75%);
}
.l-price p{
  font-family: 'Cormorant SC', serif;
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.75;
  text-align: center;
  color: var(--candle-ivory);
}
.l-price p em{ color: var(--gold-bright); font-style: italic; }

/* ================================================================
   ENDING — generous silence, then fade to nothing
   ================================================================ */
.l-ending{
  min-height: 100vh;
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 140px 24px;
  gap: 40px;
}
.l-line{
  font-family: 'Cormorant SC', serif;
  font-style: italic;
  font-size: clamp(24px, 3.6vw, 38px);
  color: var(--candle-ivory);
  opacity: 0; transform: translateY(10px);
  transition: opacity 2s ease, transform 2s ease;
}
.l-ending.in-view .l-line.l1{ transition-delay: .2s; opacity: 1; transform: none; }
.l-ending.in-view .l-line.l2{ transition-delay: 2.4s; opacity: 1; transform: none; color: var(--gold-bright); text-shadow: 0 0 30px rgba(58,13,20,0.7); }
.l-ending.in-view .l-line.coming-soon{
  transition-delay: 4.8s;
  opacity: 1; transform: none;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 20px;
}

@media (max-width: 640px){
  .love-hero{ padding: 0 20px; }
  .l-story{ padding: 90px 0; }
  .l-story .wrap{ padding: 0 20px; }
  .l-media img{ max-height: 52vh; }
  .l-story p{ font-size: 17px; line-height: 1.95; }
  .l-ending{ padding: 100px 20px; gap: 30px; }
}

@media (prefers-reduced-motion: reduce){
  .firefly-layer .firefly{ animation: none; opacity: .3; }
  .petal-layer .petal{ animation: none; opacity: 0; }
  .l-story h2, .l-media, .l-story p, .l-eyebrow, .l-divider, .l-line{
    opacity: 1 !important; transform: none !important; transition-delay: 0s !important;
  }
}