/* =============================================
   Animations & Scroll-Triggered Effects
   ============================================= */

/* --- Scroll-Triggered Entrance Animations --- */
[data-animate] {
  opacity: 0;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}

[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-left"] {
  transform: translateX(40px);
}

[data-animate="fade-right"] {
  transform: translateX(-40px);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="scale-in"] {
  transform: scale(0.92);
}

/* Visible state */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* --- Hero Entry Animations --- */
.hero__prelude {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 0.8s 0.3s ease-out forwards;
}

.hero__names {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  animation: heroNameIn 1.2s 0.5s ease-out forwards;
}

.hero__date {
  opacity: 0;
  transform: translateY(15px);
  animation: heroFadeIn 0.8s 1.0s ease-out forwards;
}

.hero__divider {
  opacity: 0;
  animation: heroFadeIn 0.8s 1.3s ease-out forwards;
}

.hero__venue {
  opacity: 0;
  transform: translateY(15px);
  animation: heroFadeIn 0.8s 1.5s ease-out forwards;
}

.hero__location {
  opacity: 0;
  transform: translateY(15px);
  animation: heroFadeIn 0.8s 1.7s ease-out forwards;
}

.hero__scroll {
  opacity: 0;
  animation: heroScrollFadeIn 0.8s 2.2s ease-out forwards;
}

@keyframes heroScrollFadeIn {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroNameIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Nav Entry Animation --- */
.nav {
  opacity: 0;
  animation: navFadeIn 0.6s 1.0s ease-out forwards;
}

@keyframes navFadeIn {
  to { opacity: 1; }
}

/* --- Section Divider Leaf Hover --- */
.leaf-divider {
  transition: transform var(--transition-base);
}

.section-divider:hover .leaf-divider,
.hero__divider:hover .leaf-divider {
  transform: scale(1.05);
}

/* --- Card Hover Glow --- */
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(184, 92, 56, 0.12), rgba(201, 150, 59, 0.08) 40%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: -1;
}

.card:hover::before {
  opacity: 1;
}

/* --- Button Click Effect --- */
.btn:active {
  transform: scale(0.97);
}

/* --- Form Input Focus Glow --- */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  animation: inputGlow 0.3s ease;
}

@keyframes inputGlow {
  0% { box-shadow: 0 0 0 0 rgba(201, 150, 59, 0); }
  50% { box-shadow: 0 0 0 6px rgba(201, 150, 59, 0.15); }
  100% { box-shadow: 0 0 0 3px rgba(201, 150, 59, 0.15); }
}

/* --- Form Error Shake --- */
.form-input.is-error,
.form-select.is-error {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* --- FAQ Accordion Animation --- */
.faq__answer {
  animation: faqSlideDown 0.3s ease-out;
}

@keyframes faqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Gallery Item Hover --- */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(201, 150, 59, 0.06);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: inherit;
}

.gallery-item:hover::after {
  opacity: 1;
}

/* --- Mobile Menu Link Stagger --- */
.nav__menu.is-mobile-visible .nav__link {
  opacity: 0;
  transform: translateY(20px);
}

.nav__menu.is-mobile-visible li:nth-child(1) .nav__link { animation: mobileNavIn 0.3s 0.05s ease forwards; }
.nav__menu.is-mobile-visible li:nth-child(2) .nav__link { animation: mobileNavIn 0.3s 0.1s ease forwards; }
.nav__menu.is-mobile-visible li:nth-child(3) .nav__link { animation: mobileNavIn 0.3s 0.15s ease forwards; }
.nav__menu.is-mobile-visible li:nth-child(4) .nav__link { animation: mobileNavIn 0.3s 0.2s ease forwards; }
.nav__menu.is-mobile-visible li:nth-child(5) .nav__link { animation: mobileNavIn 0.3s 0.25s ease forwards; }
.nav__menu.is-mobile-visible li:nth-child(6) .nav__link { animation: mobileNavIn 0.3s 0.3s ease forwards; }
.nav__menu.is-mobile-visible li:nth-child(7) .nav__link { animation: mobileNavIn 0.3s 0.35s ease forwards; }
.nav__menu.is-mobile-visible li:nth-child(8) .nav__link { animation: mobileNavIn 0.3s 0.4s ease forwards; }

@keyframes mobileNavIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Timeline Node Pulse --- */
.timeline__node,
.day-timeline__node {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.timeline__item:hover .timeline__node {
  box-shadow: 0 0 0 4px rgba(201, 150, 59, 0.2);
}

.day-timeline__event:hover .day-timeline__node {
  box-shadow: 0 0 0 4px rgba(201, 150, 59, 0.2);
}

/* --- Smooth Page Transition on Load --- */
body {
  opacity: 1;
}

body.is-loading {
  overflow: hidden;
}

/* =============================================
   ADVANCED ANIMATIONS
   ============================================= */

/* --- 1. Letter-by-Letter Hero Names --- */
.hero__names {
  /* Override the old animation — we handle this in JS now.
     Must also reset opacity/transform since the earlier rule sets them to 0. */
  animation: none;
  opacity: 1;
  transform: none;
}

.hero__name .letter,
.hero__ampersand .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateX(-40deg);
  animation: letterReveal 0.6s ease forwards;
  transform-origin: center bottom;
}

@keyframes letterReveal {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

/* --- 2. Firefly Canvas --- */
.hero__fireflies {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* --- 3. Countdown Timer — Hanging Parchment Scrolls --- */

/*
  Physics: Parchment is wound around the dowel and unrolls DOWNWARD.
  New numbers emerge from behind the dowel at the top.
  At the bottom, the parchment passes through a narrow slit — like it's
  feeding through a slot in a wooden surface and continuing out of sight.
*/

.countdown-section {
  padding: var(--space-3xl) 0;
  padding-bottom: var(--space-2xl);
}

.countdown__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-parchment);
  margin-bottom: var(--space-2xl);
  font-weight: 400;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

/* --- Scrolls layout --- */
.countdown-scrolls {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 3.5vw, 40px);
}

/* --- Single scroll unit --- */
.scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: scrollSway var(--sway-duration, 7s) var(--sway-delay, 0s) ease-in-out infinite;
}

/* Stagger the sway so scrolls don't swing in unison */
.scroll:nth-child(1) { --sway-duration: 6.5s; --sway-delay: 0s; }
.scroll:nth-child(2) { --sway-duration: 7.2s; --sway-delay: -1.8s; }
.scroll:nth-child(3) { --sway-duration: 6.8s; --sway-delay: -3.5s; }
.scroll:nth-child(4) { --sway-duration: 7.5s; --sway-delay: -5.2s; }

@keyframes scrollSway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(0.8deg); }
  75%      { transform: rotate(-0.8deg); }
}

/* --- Dowel rod — parchment-wrapped center, dark wooden finials --- */
.scroll__dowel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 4;
  width: calc(100% + 14px); /* finials stick out past paper */
  height: 16px;
  margin-bottom: -3px;
}

/* The rod: same color as the parchment, because the scroll is wrapped around it.
   Uses a layered background: a repeating vertical-stripe texture (for the turning
   illusion) on top of the cylindrical top-to-bottom shading.
   The texture scrolls sideways on tick via background-position animation. */
.scroll__rod {
  /* Rod matches the paper width exactly.
     The dowel container is (100% + 14px) relative to the scroll unit.
     The viewport IS the scroll unit's width. So: rod = dowel - 14px = 100%. */
  width: calc(100% - 14px);
  flex: none;
  height: 12px;
  border-radius: 0;
  overflow: hidden;

  /* Layer 1 (top): diagonal stripes — texture that scrolls upward on tick.
     Layer 2 (bottom): cylindrical shading — fixed, matches parchment color. */
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0px,
      transparent 1.5px,
      transparent 5px,
      rgba(0, 0, 0, 0.06) 6.5px,
      transparent 8px,
      transparent 12px
    ),
    linear-gradient(
      180deg,
      hsl(33, 30%, 60%) 0%,
      hsl(33, 28%, 52%) 30%,
      hsl(33, 26%, 46%) 50%,
      hsl(33, 28%, 52%) 70%,
      hsl(33, 30%, 60%) 100%
    );
  background-size: 12px 12px, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* On tick — scroll the texture sideways to simulate the rod turning.
   The cylindrical shading layer stays fixed (it's 100% width). */
.scroll__rod.is-turning {
  animation: dowelTurn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dowelTurn {
  0%   { background-position: 0px 0px, 0 0; }
  100% { background-position: 0px -12px, 0 0; }
}

/* Finials — dark wood caps with warm rust tint */
.scroll__finial {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    hsl(18, 38%, 36%) 0%,
    hsl(20, 30%, 18%) 100%
  );
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* Shadow beneath the dowel — narrow contact shadow hugging the rod */
.scroll__dowel::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 15%;
  right: 15%;
  height: 6px;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 65%
  );
  z-index: -1;
}

/* --- Parchment viewport --- */
.scroll__viewport {
  position: relative;
  width: clamp(68px, 14vw, 114px);
  height: clamp(180px, 34vw, 300px);
  overflow: hidden;
  border-radius: 0;

  /* Warm parchment background with grain texture */
  background:
    /* Layer 1: fine grain noise (simulated with tiny repeating gradients) */
    repeating-conic-gradient(
      hsla(33, 20%, 45%, 0.03) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px,
    /* Layer 2: larger fiber texture */
    repeating-linear-gradient(
      175deg,
      transparent 0px,
      transparent 8px,
      hsla(30, 25%, 40%, 0.04) 8px,
      hsla(30, 25%, 40%, 0.04) 9px,
      transparent 9px,
      transparent 18px
    ),
    /* Layer 3: subtle age variation — warmer toward edges */
    radial-gradient(
      ellipse at 30% 40%,
      hsla(28, 35%, 48%, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 70%,
      hsla(25, 30%, 42%, 0.06) 0%,
      transparent 50%
    ),
    /* Base parchment color */
    hsl(33, 28%, 52%);

  /* Bright side edges — light catches the curling edges of hanging parchment */
  border-left: 1px solid rgba(255, 240, 210, 0.18);
  border-right: 1px solid rgba(255, 240, 210, 0.18);

  box-shadow:
    3px 0 8px rgba(0, 0, 0, 0.12),
    -3px 0 8px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Concave shading + aged edge darkening */
.scroll__viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Concave hanging sag — center recessed, edges lit */
    linear-gradient(90deg,
      rgba(255, 240, 210, 0.14) 0%,
      rgba(255, 240, 210, 0.06) 8%,
      rgba(0, 0, 0, 0.08) 35%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.08) 65%,
      rgba(255, 240, 210, 0.06) 92%,
      rgba(255, 240, 210, 0.14) 100%
    ),
    /* Aged darkening at top/bottom edges */
    linear-gradient(180deg,
      rgba(80, 50, 20, 0.06) 0%,
      transparent 15%,
      transparent 85%,
      rgba(80, 50, 20, 0.06) 100%
    );
  pointer-events: none;
  z-index: 2;
}

/* --- Number strip (translates downward on tick) --- */
.scroll__strip {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* --- Gold foil text — illuminated manuscript style --- */
/* Every number is gold foil — this is ink on parchment, not a UI. */
.scroll__number {
  width: 100%;
  height: clamp(40px, 7.5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  position: relative;

  /* Iron gall ink — dark manuscript lettering, highly legible on parchment */
  background: linear-gradient(
    170deg,
    hsl(28, 25%, 22%) 0%,
    hsl(25, 20%, 18%) 30%,
    hsl(30, 28%, 20%) 50%,
    hsl(22, 18%, 16%) 70%,
    hsl(26, 22%, 19%) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* The current number — illuminated: larger, warm rust-gold ink */
.scroll__number.is-current {
  font-size: clamp(1.6rem, 4.2vw, 2.8rem);
  background: linear-gradient(
    170deg,
    hsl(25, 55%, 30%) 0%,
    hsl(20, 50%, 26%) 30%,
    hsl(28, 60%, 32%) 50%,
    hsl(22, 48%, 28%) 70%,
    hsl(26, 55%, 30%) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(184, 92, 56, 0.15));
}

/* Subtle divider lines between numbers */
.scroll__number::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}

/* --- Top fade — numbers emerging from behind the rolled-up scroll --- */
.scroll__fade {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.scroll__fade--top {
  top: 0;
  height: 22%;
  background: linear-gradient(
    180deg,
    hsl(33, 28%, 52%) 0%,
    hsla(33, 28%, 52%, 0.92) 35%,
    hsla(33, 28%, 52%, 0) 100%
  );
}

/* --- Bottom of scroll — hidden, parchment disappears behind botanical divider --- */
.scroll__slit {
  display: none;
}

/* Bottom fade — numbers dissolve before leaving the viewport */
.scroll__fade--bottom {
  bottom: 0;
  height: 20%;
  background: linear-gradient(
    0deg,
    hsl(33, 28%, 52%) 0%,
    hsla(33, 28%, 52%, 0.85) 40%,
    hsla(33, 28%, 52%, 0) 100%
  );
}


/* --- Bottom dowel bar — dark wood weight at scroll bottom (jiku) --- */
.scroll__bottom-dowel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 4;
  width: calc(100% + 10px);   /* slightly narrower protrusion than top */
  height: 13px;
  margin-top: -3px;            /* tuck up against viewport bottom */
}

/* Bottom rod — bare dark wood, not parchment-wrapped */
.scroll__bottom-rod {
  width: calc(100% - 10px);    /* finials stick out past rod */
  flex: none;
  height: 8px;
  border-radius: 0;
  overflow: hidden;

  /* Dark stained wood — cylindrical shading */
  background: linear-gradient(
    180deg,
    hsl(25, 28%, 34%) 0%,
    hsl(25, 24%, 28%) 25%,
    hsl(25, 20%, 22%) 50%,
    hsl(25, 24%, 28%) 75%,
    hsl(25, 28%, 34%) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Bottom finials — smaller dark wood caps */
.scroll__bottom-finial {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    hsl(25, 30%, 36%) 0%,
    hsl(25, 25%, 16%) 100%
  );
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Shadow beneath the bottom dowel */
.scroll__bottom-dowel::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 18%;
  right: 18%;
  height: 5px;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 60%
  );
  z-index: -1;
}

/* --- Unit label above the dowel — rust accent --- */
.scroll__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-rust-light);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-xs);
  opacity: 0.7;
}

/* --- 4. Confetti Canvas --- */
.confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.rsvp-success {
  position: relative;
  overflow: hidden;
}

/* --- 5. Scroll Progress Vine --- */
.scroll-vine {
  position: fixed;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.scroll-vine.is-visible {
  opacity: 1;
}

.scroll-vine__svg {
  width: 100%;
  height: 100%;
}

.scroll-vine__path {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  transition: stroke-dashoffset 0.05s linear;
}

.scroll-vine__leaves path {
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform-origin: center;
}

.scroll-vine__leaves path.is-grown {
  opacity: 0.7;
}

/* --- 6. Timeline Draw-on-Scroll --- */
[data-draw-line] {
  background: none !important;
}

.timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  overflow: hidden;
}

.timeline__line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-amber), var(--color-amber));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.05s linear;
}

.day-timeline__line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  overflow: hidden;
}

.day-timeline__line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-moss), var(--color-moss));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.05s linear;
}

/* --- 7. Text Reveal Clip-Path --- */
.text-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

.text-reveal.is-revealed {
  clip-path: inset(0 0% 0 0);
}

/* --- 8. Floating Botanicals --- */
.floating-botanicals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-botanical {
  position: absolute;
  opacity: 0;
  will-change: transform;
  animation: floatBotanical var(--float-duration, 8s) var(--float-delay, 0s) ease-in-out infinite;
  color: var(--color-moss);
}

@keyframes floatBotanical {
  0%, 100% {
    transform: translate(0, 0) rotate(var(--float-start-rot, 0deg));
    opacity: var(--float-opacity, 0.08);
  }
  25% {
    transform: translate(var(--float-x1, 10px), var(--float-y1, -20px)) rotate(calc(var(--float-start-rot, 0deg) + 5deg));
  }
  50% {
    transform: translate(var(--float-x2, -5px), var(--float-y2, -35px)) rotate(calc(var(--float-start-rot, 0deg) + 10deg));
    opacity: calc(var(--float-opacity, 0.08) * 1.3);
  }
  75% {
    transform: translate(var(--float-x3, 8px), var(--float-y3, -15px)) rotate(calc(var(--float-start-rot, 0deg) + 3deg));
  }
}


/* --- 9. Section Mist Drift --- */
.section-mist svg path {
  animation: mistDrift var(--mist-speed, 12s) ease-in-out infinite alternate;
}

.section-mist svg path:nth-child(1) {
  --mist-speed: 14s;
  animation-delay: 0s;
}

.section-mist svg path:nth-child(2) {
  --mist-speed: 11s;
  animation-delay: -3s;
}

.section-mist svg path:nth-child(3) {
  --mist-speed: 16s;
  animation-delay: -7s;
}

@keyframes mistDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(30px); }
}

/* --- 10. Page-Wide Starfield --- */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.star {
  position: fixed;
  border-radius: 50%;
  background: currentColor;
  will-change: transform;
}

.star--twinkle {
  animation: twinkle var(--twinkle-duration, 4s) var(--twinkle-delay, 0s) ease-in-out infinite;
}

.star--static {
  opacity: 0.25;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.7; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none;
  }

  .hero__monogram,
  .hero__prelude,
  .hero__names,
  .hero__date,
  .hero__divider,
  .hero__venue,
  .hero__location,
  .hero__scroll,
  .nav {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__name .letter,
  .hero__ampersand .letter {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .text-reveal {
    clip-path: none;
  }

  .scroll-vine,
  .floating-botanicals,
  .starfield,
  .hero__fireflies,
  .hero__mist {
    display: none;
  }

  .scroll {
    animation: none;
  }

  .section-mist svg path {
    animation: none;
  }

  .scroll__strip {
    transition-duration: 0.01ms !important;
  }

  .scroll__number {
    transition: none;
  }

  [data-draw-line]::after {
    transform: scaleY(1);
  }

  html {
    scroll-behavior: auto;
  }
}