/* =================================================================
   Cielito Lindo — Cinema template
   Scene 1 (The Sky) + Scene 2 (Papel Picado Curtain)
   Mexican folk-cinema. Hand-crafted, intentional, premium.
   ================================================================= */

:root {
  /* ---- v5.5 palette tokens (default = modern-boy) ---- */
  --pal-primary:  #2c6fb8;
  --pal-accent:   #c4912b;
  --pal-text:     #1f2a3a;
  --pal-cream:    #fdf8ec;
  --pal-papel-1:  #2c6fb8;
  --pal-papel-2:  #e89f7a;
  --pal-papel-3:  #f4dca5;
  --pal-papel-4:  #7ec0e8;
  --pal-papel-5:  #c4912b;
  --pal-papel-6:  #d96a8c;

  /* Sky / sunset palette */
  --cielo:   #aac6e6;
  --peach:   #f4dca5;
  --ink:     var(--pal-text);
  --gold:    var(--pal-accent);
  --cream:   var(--pal-cream);

  /* Papel picado folk palette (mapped to active palette) */
  --pp-cobalt:   var(--pal-papel-1);
  --pp-peach:    var(--pal-papel-2);
  --pp-pink:     var(--pal-papel-6);
  --pp-marigold: var(--pal-papel-5);
  --pp-sky:      var(--pal-papel-4);
  --pp-cream:    var(--pal-papel-3);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */

  --serif:  'Cormorant Garamond', Georgia, serif;
  --script: 'Caveat', 'Brush Script MT', cursive;
  --sans:   'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cielo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- Skip link ---- */
.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: none;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 24px; }

/* ---- Letterboxing ---- */
.letterbox {
  position: fixed;
  left: 0;
  right: 0;
  height: 16px;
  background: #0c0e14;
  z-index: 60;
  pointer-events: none;
}
.letterbox--top { top: 0; box-shadow: 0 6px 14px rgba(0,0,0,0.28); }
.letterbox--bottom { bottom: 0; box-shadow: 0 -6px 14px rgba(0,0,0,0.28); }

/* =================================================================
   Cinema frame — vignette + film grain
   ================================================================= */
.cinema {
  position: relative;
  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.15);
}
.cinema::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =================================================================
   Scenes
   ================================================================= */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Sky layer ---- */
.sky-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sky-layer--gradient {
  background: linear-gradient(180deg, #c7dff5 0%, #aac6e6 35%, #f6dcb8 75%, #f4dca5 100%);
  background-size: 100% 130%;
  background-position-y: 0%;
}
.sky-layer--brighter {
  background: linear-gradient(180deg, #f4dca5 0%, #f6c178 60%, #e89f7a 100%);
}

/* ---- Lens flare (top-right sun spot) ---- */
.lens-flare {
  position: absolute;
  top: -8%;
  right: 6%;
  width: 42vw;
  height: 42vw;
  max-width: 540px;
  max-height: 540px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 250, 235, 0.95) 0%,
    rgba(255, 244, 210, 0.55) 18%,
    rgba(255, 238, 190, 0.18) 42%,
    rgba(255, 238, 190, 0) 70%);
  mix-blend-mode: screen;
}

/* ---- Particles canvas ---- */
.particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* =================================================================
   Clouds
   ================================================================= */
.cloud-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cloud {
  position: absolute;
  left: 0;
  filter: drop-shadow(0 8px 18px rgba(120, 140, 170, 0.16));
  will-change: transform;
}
.cloud-layer--back  .cloud { width: 8vw;  opacity: 0.6; }
.cloud-layer--mid   .cloud { width: 14vw; opacity: 0.85; }
.cloud-layer--front .cloud { width: 22vw; opacity: 1; }

/* =================================================================
   Dove
   ================================================================= */
.dove {
  position: absolute;
  z-index: 3;
  width: 64px;
  height: auto;
  left: -10%;
  top: 30%;
  filter: drop-shadow(0 6px 10px rgba(80, 100, 130, 0.22));
  pointer-events: none;
  will-change: transform, left, top;
}
.dove__wing {
  transform-origin: 40px 30px; /* shoulder */
}

/* =================================================================
   Scene 1 copy
   ================================================================= */
.scene-1__copy {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 6vw;
  max-width: 820px;
}
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  margin-bottom: 0.6rem;
}
.title-mark { margin: 0; }
.title-svg {
  width: min(86vw, 700px);
  height: auto;
  overflow: visible;
}
.title-text {
  fill: transparent;
  stroke: var(--ink);
  stroke-width: 1.5;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 140px;
  paint-order: stroke;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.subtitle {
  margin: 0.4rem 0 0;
  font-family: var(--script);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  color: var(--gold);
  opacity: 0;
  transform: translateY(8px);
}
.scroll-cue {
  margin-top: clamp(1.6rem, 5vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink);
  opacity: 0;
}
.scroll-cue span {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.7;
}
.chev { width: 22px; height: 22px; }

/* =================================================================
   Scene 2 — Papel picado curtain
   ================================================================= */
.scene-2 { align-items: flex-end; }

.papel-curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 360px;
  pointer-events: none;
}
.papel-string {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 40px;
  z-index: 1;
}
.papel-string    { top: 4px; }
.papel-string--2 { top: 114px; }
.papel-string--3 { top: 224px; }

.papel-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
  padding: 0 2px;
}
.papel-row--1 { top: 0; }
.papel-row--2 { top: 110px; }
.papel-row--3 { top: 220px; }

.pennant {
  width: 80px;
  height: 100px;
  flex: 0 0 auto;
  transform: translateY(-150%);
  opacity: 0;
  transform-origin: 50% 4px; /* hangs from the string */
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.12));
  will-change: transform, opacity;
}
.pennant svg { display: block; width: 100%; height: 100%; }

/* Drop-in once the scene reveals */
.scene-2.is-revealed .pennant {
  animation: pennantDrop 700ms var(--ease-back) forwards;
  animation-delay: var(--drop-delay, 0ms);
}
@keyframes pennantDrop {
  0%   { transform: translateY(-150%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* After landing, continuous wind sway. Applied via .is-swaying on each pennant. */
.pennant.is-swaying {
  animation: sway var(--sway-dur, 3.4s) var(--ease-in-out) var(--sway-delay, 0s) infinite alternate;
}
@keyframes sway {
  0%   { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

/* =================================================================
   Scene 2 copy
   ================================================================= */
.scene-2__copy {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 6vw clamp(8vh, 14vh, 18vh);
  max-width: 900px;
}
.honoring {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.16em;
  color: var(--ink);
  opacity: 0;
}
.honoree-mark { margin: -0.2rem 0 0; }
.honoree-svg {
  width: min(90vw, 800px);
  height: auto;
  overflow: visible;
}
.honoree-text {
  fill: transparent;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-family: var(--script);
  font-weight: 600;
  font-size: 180px;
  paint-order: stroke;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.quote {
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 3.4vw, 2rem);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(95, 60, 40, 0.4), 0 0 16px rgba(255,255,255,0.15);
  opacity: 0;
}

/* =================================================================
   Scene 3 — The Details (sunset garden)
   ================================================================= */
.scene-3 { align-items: flex-end; }
.scene-3__sky {
  /* Top stop EXACTLY matches Scene 2 bottom (#e89f7a) — seamless join */
  background: linear-gradient(180deg, #e89f7a 0%, #d98a76 38%, #b07378 70%, #7a5470 100%);
}
.sun-low {
  position: absolute;
  bottom: 4%;
  right: 14%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,140,0.5) 0%, rgba(255,200,140,0) 70%);
  filter: blur(28px);
  pointer-events: none;
}

.garden-table {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(700px, 92vw);
  height: auto;
  z-index: 3;
  transform: translateX(-50%) translateY(110%);
  pointer-events: none;
  filter: drop-shadow(0 20px 30px rgba(40,20,10,0.3));
}
.scene-3.is-revealed .garden-table {
  transition: transform 1200ms var(--ease-out);
  transform: translateX(-50%) translateY(0);
}

.place-cards {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32px;
  width: min(960px, 94vw);
  perspective: 1000px;
}
.place-card {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  min-height: 200px;
  background: var(--cream);
  border-radius: 24px;
  padding: 24px 28px;
  text-align: center;
  transform-origin: bottom center;
  transform: translateY(60px) rotateX(-80deg);
  opacity: 0;
  box-shadow:
    inset 0 8px 14px -10px rgba(120,80,40,0.4),
    0 22px 36px -18px rgba(60,30,15,0.5);
  /* faux scalloped top edge */
  background-image:
    radial-gradient(circle at top, transparent 6px, var(--cream) 7px);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: top;
}
.place-card__icon {
  display: inline-flex;
  color: var(--gold);
  margin-bottom: 4px;
}
.place-card__icon svg { width: 26px; height: 26px; }
.place-card__label {
  display: block;
  font-family: var(--script);
  font-weight: 500;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 6px;
}
.place-card__big {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--ink);
}
.place-card__small {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  color: #5a4636;
}
.place-card__map {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.place-card__map:hover { border-bottom-color: var(--gold); }
.map-pin { width: 28px; height: 28px; overflow: visible; }
.map-pin__ring { opacity: 0; transform-origin: 20px 20px; }
.place-card.pin-active .map-pin__ring--1 { animation: pinPulse 2s var(--ease-out) infinite; }
.place-card.pin-active .map-pin__ring--2 { animation: pinPulse 2s var(--ease-out) 1s infinite; }
@keyframes pinPulse {
  0%   { opacity: 0.6; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(2.6); }
}

/* Hummingbird */
.hummingbird {
  position: absolute;
  top: 25%;
  left: 0;
  width: 50px;
  height: auto;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(40,30,60,0.3));
}
.hummingbird__wing { transform-origin: 38px 22px; }

/* =================================================================
   Scene 4 — The Photo Gallery
   ================================================================= */
.scene-4 { flex-direction: column; align-items: center; justify-content: flex-start; }
.scene-4__sky {
  /* Top stop EXACTLY matches Scene 3 bottom (#7a5470) — seamless join */
  background: linear-gradient(180deg, #7a5470 0%, #6a5273 35%, #58506e 70%, #4d5670 100%);
}
.table-grain {
  position: absolute;
  inset: 30% 0 0 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(180deg,
      rgba(80,50,30,0.10) 0px,
      rgba(80,50,30,0.10) 2px,
      rgba(120,80,50,0.04) 2px,
      rgba(120,80,50,0.04) 16px),
    linear-gradient(180deg, rgba(110,68,41,0) 0%, rgba(110,68,41,0.25) 30%, rgba(80,50,30,0.4) 100%);
}
.scene-4__header {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 100%;
  padding: clamp(5rem, 12vh, 8rem) 6vw 0;
}
.gallery-eyebrow {
  margin: 0;
  font-family: var(--script);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--gold);
  opacity: 0;
  transform: translateY(10px);
}
.gallery-sub {
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  color: var(--cream);
  opacity: 0;
  transform: translateY(10px);
}
.scene-4.is-revealed .gallery-eyebrow { animation: fadeUp 900ms var(--ease-out) 200ms forwards; }
.scene-4.is-revealed .gallery-sub     { animation: fadeUp 900ms var(--ease-out) 450ms forwards; }

.polaroid-pile {
  position: relative;
  z-index: 8;
  width: min(880px, 94vw);
  height: 560px;
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
}
.polaroid {
  position: absolute;
  width: 220px;
  height: 270px;
  margin: 0;
  padding: 10px 10px 0;
  background: #fffdf8;
  border-radius: 3px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(80px) rotate(var(--fr, 0deg)) scale(0.9);
  cursor: pointer;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
.scene-4.is-revealed .polaroid {
  animation: polaroidDrop 700ms var(--ease-back) forwards;
  animation-delay: var(--p-delay, 0ms);
}
@keyframes polaroidDrop {
  0%   { opacity: 0; transform: translateY(80px) rotate(var(--fr,0deg)) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--fr,0deg)) scale(1); }
}
.polaroid:hover, .polaroid:focus-visible {
  transform: translateY(-8px) rotate(0deg) scale(1.04);
  box-shadow: 0 30px 60px -16px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.22);
  z-index: 20 !important;
  outline: none;
}
.polaroid__photo {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 2px;
  background: #e9e2d2;
}
.polaroid__photo svg { display: block; width: 100%; height: 100%; }
.polaroid__cap {
  margin: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--script);
  font-weight: 500;
  font-size: 1.3rem;
  color: #4a3a2a;
}

/* =================================================================
   Scene 5 — The Finale (night fireworks + RSVP)
   ================================================================= */
.scene-5 {
  align-items: center;
  padding: clamp(4rem, 10vh, 7rem) 0;
}
.scene-5__sky {
  background: linear-gradient(180deg, #0c1738 0%, #14224a 35%, #2a1e3d 80%, #1a0e2a 100%);
}
.horizon-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center bottom, rgba(244,220,165,0.25), transparent 60%);
}
.starfield {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0.3;
}
.fireworks-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.fw-burst { position: absolute; overflow: visible; }
.fw-line {
  stroke-linecap: round;
  opacity: 0;
}
.fw-trail { stroke-linecap: round; }
.finale-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.scene-5__inner {
  position: relative;
  z-index: 10;
  width: min(620px, 92vw);
  text-align: center;
  padding: 0 4vw;
}
.finale-head { margin-bottom: 1.6rem; }
.finale-eyebrow {
  margin: 0;
  font-family: var(--script);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--gold);
  opacity: 0;
  transform: translateY(10px);
}
.finale-title {
  margin: 0.1rem 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  line-height: 1.05;
  color: var(--cream);
  opacity: 0;
  transform: translateY(10px);
}
.scene-5.is-revealed .finale-eyebrow { animation: fadeUp 700ms var(--ease-out) 150ms forwards; }
.scene-5.is-revealed .finale-title   { animation: fadeUp 700ms var(--ease-out) 350ms forwards; }

/* mini papel picado strip */
.mini-papel {
  display: flex;
  justify-content: center;
  gap: 2px;
  height: 34px;
  margin: 0 auto;
}
.mini-papel--top { margin-bottom: -6px; }
.mini-papel--bottom { margin-top: 1.4rem; }
.mini-pennant { width: 34px; height: 42px; flex: 0 0 auto; }
.mini-pennant svg { display: block; width: 100%; height: 100%; }

/* RSVP form card */
.rsvp {
  position: relative;
  background: var(--cream);
  border-radius: 36px;
  padding: 48px;
  max-width: 540px;
  margin: 0 auto;
  text-align: left;
  box-shadow: 0 30px 80px -30px rgba(196,145,43,0.4);
}
.rsvp__field { margin-bottom: 1.1rem; border: 0; padding: 0; }
.rsvp__field label,
.rsvp__field legend {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.86rem;
  color: #6a5640;
  margin-bottom: 0.4rem;
  padding: 0;
}
.rsvp input[type="text"],
.rsvp input[type="email"],
.rsvp input[type="number"],
.rsvp textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid #e0cfa8;
  border-radius: 12px;
  padding: 12px 14px;
  transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.rsvp textarea { resize: vertical; }
.rsvp input:focus,
.rsvp textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196,145,43,0.3);
}
.rsvp__radios { display: flex; flex-direction: column; }
.rsvp__radios legend { margin-bottom: 0.5rem; }
.radio-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid #e0cfa8;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.radio-pill input { accent-color: var(--gold); }
.radio-pill:has(input:checked) {
  border-color: var(--gold);
  background: rgba(196,145,43,0.10);
}
.radio-pill:focus-within {
  box-shadow: 0 0 0 3px rgba(196,145,43,0.3);
}
.rsvp__submit {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #e8a93d, #c4912b);
  cursor: pointer;
}
.rsvp-thanks {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  background: var(--cream);
  border-radius: 36px;
  padding: 48px;
  max-width: 540px;
  margin: 0 auto;
  box-shadow: 0 30px 80px -30px rgba(196,145,43,0.4);
}
.rsvp-thanks.is-shown { display: flex; }
.rsvp-thanks p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink);
}
.thanks-star { width: 40px; height: 40px; }

/* signature footer */
.finale-foot { margin-top: 2rem; }
.foot-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0.8rem;
}
.foot-divider__line {
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.foot-star { width: 22px; height: 22px; }
.signature {
  margin: 0;
  font-family: var(--script);
  font-style: italic;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--gold);
}
.signature--names { font-size: 2.2rem; }
.made-with {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.made-with a {
  color: rgba(253,248,236,0.6);
  text-decoration: none;
}
.made-with a:hover { color: rgba(253,248,236,0.9); }

/* =================================================================
   MOTION — only when the user allows it
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Sky drift */
  .sky-layer--gradient { animation: skyShift 45s var(--ease-in-out) infinite alternate; }
  @keyframes skyShift {
    from { background-position-y: 0%; }
    to   { background-position-y: 100%; }
  }

  /* Clouds drift left→right */
  .cloud { animation: drift linear infinite; animation-delay: var(--d, 0s); }
  .cloud-layer--back  .cloud { animation-duration: 90s; }
  .cloud-layer--mid   .cloud { animation-duration: 60s; }
  .cloud-layer--front .cloud { animation-duration: 40s; }
  @keyframes drift {
    from { transform: translateX(-20vw); }
    to   { transform: translateX(120vw); }
  }

  /* Dove flight — triggered by JS adding .dove--flying */
  .dove--flying { animation: doveFly 5s var(--ease-in-out) forwards; }
  @keyframes doveFly {
    0%   { left: -10%;  top: 30%; transform: rotate(-6deg) scale(0.9); }
    35%  { top: 16%;            transform: rotate(2deg) scale(1); }
    70%  { top: 22%;            transform: rotate(-3deg) scale(1.02); }
    100% { left: 110%;  top: 15%; transform: rotate(4deg) scale(1); }
  }
  .dove--flying .dove__wing { animation: wingFlap 0.36s ease-in-out infinite; }
  @keyframes wingFlap {
    0%, 100% { transform: rotate(-20deg); }
    50%      { transform: rotate(20deg); }
  }

  /* Title stroke draw */
  .title-text--top { animation: drawStroke 1.8s var(--ease-out) 600ms forwards; }
  .title-text--bot { animation: drawStroke 1.8s var(--ease-out) 1400ms forwards; }
  @keyframes drawStroke {
    0%   { stroke-dashoffset: 1200; fill: transparent; }
    70%  { fill: transparent; }
    100% { stroke-dashoffset: 0; fill: var(--ink); }
  }

  /* Eyebrow + subtitle + scroll cue */
  .eyebrow   { animation: fadeUp 900ms var(--ease-out) 200ms forwards; }
  .subtitle  { animation: fadeUp 900ms var(--ease-out) 3200ms forwards; }
  .scroll-cue{ animation: fadeIn 800ms var(--ease-out) 4000ms forwards; }
  .scroll-cue .chev { animation: bounce 1.6s var(--ease-in-out) 4400ms infinite; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }

  /* Scene 2 copy — gated by .is-revealed */
  .scene-2.is-revealed .honoring { animation: fadeUp 800ms var(--ease-out) 800ms forwards; }
  .scene-2.is-revealed .honoree-text {
    animation: drawScript 2.5s var(--ease-out) 1600ms forwards;
  }
  @keyframes drawScript {
    0%   { stroke-dashoffset: 2000; fill: transparent; }
    80%  { fill: transparent; }
    100% { stroke-dashoffset: 0; fill: var(--ink); }
  }
  .scene-2.is-revealed .quote { animation: fadeUp 900ms var(--ease-out) 4500ms forwards; }

  /* ---- Scene 3 ---- */
  .scene-3.is-revealed .place-card {
    animation: cardFlip 700ms var(--ease-back) forwards;
    animation-delay: var(--card-delay, 1000ms);
  }
  @keyframes cardFlip {
    0%   { opacity: 0; transform: translateY(60px) rotateX(-80deg); }
    100% { opacity: 1; transform: translateY(0) rotateX(0deg); }
  }
  /* hummingbird flight (JS adds .hummingbird--flying) */
  .hummingbird--flying {
    offset-path: path('M -50,180 Q 300,40 600,120 Q 800,200 950,90');
    animation: hbFly 7s var(--ease-in-out) forwards;
  }
  @keyframes hbFly {
    0%   { offset-distance: 0%;   opacity: 0; }
    8%   { opacity: 1; }
    40%  { offset-distance: 46%; }
    46%  { offset-distance: 50%; }       /* hover near WHERE card */
    52%  { offset-distance: 50%; }
    58%  { offset-distance: 54%; }
    92%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  .hummingbird--flying .hummingbird__wing { animation: wingFlutter 90ms linear infinite; }
  @keyframes wingFlutter {
    0%, 100% { transform: rotate(-25deg); }
    50%      { transform: rotate(25deg); }
  }

  /* ---- Scene 5 ---- */
  .star { animation: twinkle var(--tw-dur, 3s) var(--ease-in-out) var(--tw-delay, 0s) infinite; }
  @keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
  }
  .fw-line.is-bursting { animation: fireworkBurst 1100ms var(--ease-out) forwards; }
  @keyframes fireworkBurst {
    0%   { stroke-dashoffset: var(--len); opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  .fw-trail.is-rising { animation: fireworkTrail 600ms var(--ease-out) forwards; }
  @keyframes fireworkTrail {
    0%   { stroke-dashoffset: var(--tlen); opacity: 0.9; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  .rsvp__submit { animation: ctaGlow 2s var(--ease-in-out) infinite; }
  @keyframes ctaGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196,145,43,0.0), 0 8px 20px -8px rgba(196,145,43,0.5); }
    50%      { box-shadow: 0 0 0 10px rgba(196,145,43,0.0), 0 10px 28px -6px rgba(196,145,43,0.7); }
  }

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

/* =================================================================
   REDUCED MOTION — static, instantly readable
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .eyebrow, .subtitle, .scroll-cue,
  .honoring, .quote { opacity: 1 !important; transform: none !important; }
  .title-text, .honoree-text {
    stroke-dashoffset: 0 !important;
    fill: var(--ink) !important;
  }
  .dove { left: 8%; top: 24%; }
  .pennant { transform: none !important; opacity: 1 !important; }
  .particles { display: none; }
  .garden-table { transform: translateX(-50%) translateY(0) !important; }
  .place-card { transform: none !important; opacity: 1 !important; }
  .gallery-eyebrow, .gallery-sub,
  .finale-eyebrow, .finale-title { opacity: 1 !important; transform: none !important; }
  .polaroid { opacity: 1 !important; transform: rotate(var(--fr,0deg)) !important; }
  .hummingbird { display: none; }
  .star { opacity: 0.85 !important; }
  .finale-canvas { display: none; }
}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 720px) {
  .papel-curtain { height: 300px; }
  .pennant { width: 56px; height: 70px; }
  .papel-string--2 { top: 84px; }
  .papel-string--3 { top: 164px; }
  .papel-row--2 { top: 80px; }
  .papel-row--3 { top: 160px; }
  .cloud-layer--back  .cloud { width: 22vw; }
  .cloud-layer--mid   .cloud { width: 34vw; }
  .cloud-layer--front .cloud { width: 48vw; }
  .title-text   { font-size: 150px; }
  .honoree-text { font-size: 175px; }
}

/* ---- Scene 3/4/5 responsive (tablet & mobile) ---- */
@media (max-width: 900px) {
  .place-cards {
    flex-direction: column;
    align-items: center;
    bottom: auto;
    top: 16%;
    gap: 16px;
    max-height: 70vh;
    overflow: visible;
  }
  .place-card { width: min(300px, 84vw); min-height: 0; padding: 18px 22px; }
  .place-card__big { font-size: 1.25rem; }
  .garden-table { display: none; }
  .scene-3 { align-items: center; }
}
@media (max-width: 760px) {
  .polaroid-pile {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    padding: 0 4vw 4vh;
  }
  .polaroid {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 44vw;
    max-width: 200px;
    height: auto;
  }
  .polaroid__photo { width: 100%; height: 0; padding-bottom: 100%; position: relative; }
  .polaroid__photo svg { position: absolute; inset: 0; }
  .scene-4 { min-height: auto; padding-bottom: 6vh; }
  .rsvp, .rsvp-thanks { padding: 32px 24px; }
}
@media (max-width: 420px) {
  .place-card__label { font-size: 1.3rem; }
  .mini-pennant { width: 28px; height: 34px; }
}

/* =================================================================
   v5.5 — Palette overrides (3 styles x 2 genders)
   Applied via data-palette on <html> (set by cinema.js from ?palette=)
   ================================================================= */
[data-palette="pastel-boy"] {
  --pal-primary: #5b8bbf; --pal-accent: #c4912b; --pal-text: #2c3e52; --pal-cream: #fdf8ec;
  --pal-papel-1: #cfe0ee; --pal-papel-2: #b9d2e8; --pal-papel-3: #fdf8ec;
  --pal-papel-4: #e6d3a8; --pal-papel-5: #c4912b; --pal-papel-6: #9ec1e0;
}
[data-palette="pastel-girl"] {
  --pal-primary: #c87a86; --pal-accent: #c4912b; --pal-text: #5a3540; --pal-cream: #fdf8ec;
  --pal-papel-1: #f4d3d8; --pal-papel-2: #efc1c8; --pal-papel-3: #fdf8ec;
  --pal-papel-4: #e6d3a8; --pal-papel-5: #c4912b; --pal-papel-6: #e0a3ad;
}
[data-palette="modern-boy"] {
  --pal-primary: #2c6fb8; --pal-accent: #c4912b; --pal-text: #1f2a3a; --pal-cream: #fdf8ec;
  --pal-papel-1: #2c6fb8; --pal-papel-2: #e89f7a; --pal-papel-3: #f4dca5;
  --pal-papel-4: #7ec0e8; --pal-papel-5: #c4912b; --pal-papel-6: #d96a8c;
}
[data-palette="modern-girl"] {
  --pal-primary: #b46a55; --pal-accent: #c9a878; --pal-text: #4a2c24; --pal-cream: #fdf8ec;
  --pal-papel-1: #b46a55; --pal-papel-2: #e8c4b8; --pal-papel-3: #fdf8ec;
  --pal-papel-4: #d99a82; --pal-papel-5: #c9a878; --pal-papel-6: #cf8a78;
}
[data-palette="folk-boy"] {
  --pal-primary: #1d4f8f; --pal-accent: #e8a93d; --pal-text: #14365f; --pal-cream: #fdf8ec;
  --pal-papel-1: #d96a8c; --pal-papel-2: #e89f7a; --pal-papel-3: #fdf8ec;
  --pal-papel-4: #e8a93d; --pal-papel-5: #1d4f8f; --pal-papel-6: #f4d26a;
}
[data-palette="folk-girl"] {
  --pal-primary: #c43d6e; --pal-accent: #e8a93d; --pal-text: #6e2342; --pal-cream: #fdf8ec;
  --pal-papel-1: #c43d6e; --pal-papel-2: #e89f7a; --pal-papel-3: #f4d26a;
  --pal-papel-4: #fdf8ec; --pal-papel-5: #e8a93d; --pal-papel-6: #f08aae;
}

/* =================================================================
   v5.5 — Floral papel-picado border framing the Cinema canvas
   Fixed frame on all four edges; palette-aware via --pal-border.
   ================================================================= */
.cinema-frame {
  position: fixed;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  color: var(--pal-cream);
}
.cinema-frame .papel-border { display: block; color: var(--pal-cream); }
.cinema-frame .papel-border { --pb-size: 16px; --pb-corner: 34px; }
@media (max-width: 720px) {
  .cinema-frame .papel-border { --pb-size: 11px; --pb-corner: 24px; }
}

/* Papel-border base (shared component, inlined for cinema) */
.papel-border { position: absolute; inset: 0; pointer-events: none; color: var(--pal-cream); z-index: 3; }
.papel-border svg { position: absolute; display: block; }
.papel-border .pb-edge { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.10)); }
.papel-border { --pb-size: 14px; --pb-corner: 30px; }
.papel-border .pb-top    { top: 0;    left: 0; width: 100%; height: var(--pb-size); }
.papel-border .pb-bottom { bottom: 0; left: 0; width: 100%; height: var(--pb-size); transform: scaleY(-1); }
.papel-border .pb-left   { top: 0;    left: 0; height: 100%; width: var(--pb-size); }
.papel-border .pb-right  { top: 0;    right: 0; height: 100%; width: var(--pb-size); transform: scaleX(-1); }
.papel-border .pb-corners { position: absolute; inset: 0; }
.papel-border .pb-c { position: absolute; width: var(--pb-corner); height: var(--pb-corner); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.10)); }
.papel-border .pb-c svg { width: 100%; height: 100%; display: block; }
.papel-border .pb-c--tl { top: 0; left: 0; }
.papel-border .pb-c--tr { top: 0; right: 0; transform: scaleX(-1); }
.papel-border .pb-c--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.papel-border .pb-c--br { bottom: 0; right: 0; transform: scale(-1, -1); }