/* enchanted.css – the "fairy tale" layer */

/* ---------- 1. Palette: more sage, purple as an accent ---------- */
:root {
  --sage-forest: #5a6650;   /* buttons, links – passes contrast with white */
  --forest:      #48523f;   /* deep green for countdown and footer */
  --sage-soft:   #eef1e8;   /* section tint */
  --sage-mist:   #f5f7f0;
  --sage-light:  #dfe5d3;
  --shadow: 0 12px 32px -14px rgba(72, 82, 63, .32);
}

::selection { background: var(--sage-light); color: var(--forest); }
:focus-visible { outline-color: var(--sage-forest); }
.skip-link { background: var(--sage-forest); }

/* Buttons and links go green */
.btn { background: var(--sage-forest); border-color: var(--sage-forest); }
.btn:hover { background: var(--forest); }
.btn--ghost { background: transparent; color: var(--sage-forest); }
.btn--ghost:hover { background: var(--sage-forest); color: #fff; }

.link { color: var(--sage-forest); border-bottom-color: var(--sage); }
.link:hover { border-color: var(--sage-forest); }

.site-nav .nav-cta { color: var(--sage-forest); }
@media (min-width: 60rem) {
  .site-nav .nav-cta { color: #fff; background: var(--sage-forest); }
}

/* Section backgrounds */
.hero {
  background:
    radial-gradient(ellipse at 50% 32%, rgba(255,255,255,.92), transparent 62%),
    linear-gradient(180deg, var(--sage-soft) 0%, var(--cream) 50%, var(--sage-mist) 100%);
}

.section--forest {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(165deg, #76825f 0%, var(--forest) 100%);
  color: #fff;
}
.section--sage { background: var(--sage-soft); }
.rsvp { background: linear-gradient(180deg, var(--cream), var(--sage-soft)); }

.countdown__title { color: #f1e6cc; }
.countdown__unit {
  border-color: rgba(241, 230, 204, .28);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(2px);
}
.countdown__unit small { color: var(--sage-light); }

.site-footer { background: var(--forest); color: var(--sage-light); }

/* Cards, forms and details pick up the green */
.card { border-color: rgba(168, 173, 143, .45); }
.card--event { border-top-color: var(--sage); }
.card__label { color: var(--sage-forest); }

.choice__option input:checked + span { background: var(--sage-forest); border-color: var(--sage-forest); }
input[type="text"], input[type="email"], select, textarea { border-color: rgba(90, 102, 80, .28); }
input:focus, select:focus, textarea:focus {
  border-color: var(--sage-forest);
  box-shadow: 0 0 0 3px rgba(168, 173, 143, .35);
}

.timeline::before { background: var(--sage); }
.timeline li::before { border-color: var(--sage-forest); }

.note { border-color: var(--sage); }
.scroll-cue { background: linear-gradient(var(--sage-forest), transparent); }

/* ---------- 2. Opening intro: two doors and a wax seal ---------- */
.intro { display: none; }

.js.intro-open { overflow: hidden; }
.js.intro-open .intro {
  display: block;
  position: fixed; inset: 0; z-index: 200;
  perspective: 1600px;
}

.intro__panel {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 50%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(180deg, var(--sage-soft), var(--cream) 55%, var(--sage-mist));
  transition: transform 1.5s cubic-bezier(.7, 0, .2, 1);
}
.intro__panel--left  { left: 0;  transform-origin: left center;  box-shadow: inset -12px 0 24px -18px rgba(72,82,63,.45); }
.intro__panel--right { right: 0; transform-origin: right center; box-shadow: inset 12px 0 24px -18px rgba(72,82,63,.45); }
.intro__panel--right { background:
    radial-gradient(ellipse at 0% 50%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(180deg, var(--sage-soft), var(--cream) 55%, var(--sage-mist)); }

/* fine gold frame, half on each door */
.intro__panel::before {
  content: ""; position: absolute; top: 14px; bottom: 14px;
  border: 1px solid rgba(195, 162, 106, .55);
}
.intro__panel--left::before  { left: 14px;  right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
.intro__panel--right::before { right: 14px; left: 0;  border-left: 0;  border-radius: 0 10px 10px 0; }

.intro__panel .sprig { color: var(--sage); }
.intro__panel--left  .sprig--a { width: 110px; height: 200px; top: -20px; left: -10px; transform: rotate(160deg); }
.intro__panel--left  .sprig--b { width: 120px; height: 220px; bottom: -30px; left: -20px; transform: rotate(20deg); }
.intro__panel--right .sprig--a { width: 110px; height: 200px; top: -20px; right: -10px; transform: rotate(-160deg) scaleX(-1); }
.intro__panel--right .sprig--b { width: 120px; height: 220px; bottom: -30px; right: -20px; transform: rotate(-20deg) scaleX(-1); }

.intro__content {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 1.4rem;
  text-align: center; padding: 2rem;
  transition: opacity .6s ease, transform .8s ease;
}
.intro__eyebrow {
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--sage-forest); margin: 0;
}
.intro__names {
  font-family: var(--font-script); font-size: clamp(2.6rem, 12vw, 4rem);
  color: var(--plum-deep); margin: 0; line-height: 1;
}
.intro__date {
  font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: .3em;
  color: var(--ink-soft); margin: 0;
}

/* the wax seal */
.intro__seal {
  position: relative;
  width: 118px; height: 118px;
  margin: .5rem 0;
  border: 0; cursor: pointer;
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.35), transparent 42%),
    radial-gradient(circle at 50% 55%, #6f7c62, #48523f 72%);
  box-shadow:
    0 14px 28px -10px rgba(48, 56, 40, .6),
    inset 0 -6px 12px rgba(0,0,0,.25),
    inset 0 4px 8px rgba(255,255,255,.18);
  animation: seal-float 4s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .5s ease;
}
.intro__seal::before {           /* stamped inner ring */
  content: ""; position: absolute; inset: 13px;
  border-radius: 50%;
  border: 1.5px dashed rgba(241, 230, 204, .55);
}
.intro__seal span {
  position: relative;
  font-family: var(--font-serif); font-size: 1.9rem; letter-spacing: .04em;
  color: #f1e6cc;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.intro__seal em { font-family: var(--font-script); font-style: normal; color: #e3cf9f; margin: 0 .05em; }
.intro__seal:hover { transform: scale(1.06); }
.intro__seal:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.intro__hint {
  font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
  animation: hint-pulse 2.4s ease-in-out infinite;
}

@keyframes seal-float {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50%      { translate: 0 -6px; rotate: 2deg; }
}
@keyframes hint-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* opening sequence */
.intro.is-opening .intro__seal    { transform: scale(1.25); opacity: 0; animation: none; }
.intro.is-opening .intro__content { opacity: 0; transform: scale(.96); transition-delay: .15s; }
.intro.is-opening .intro__panel--left  { transform: translateX(-102%) rotateY(14deg); transition-delay: .45s; }
.intro.is-opening .intro__panel--right { transform: translateX(102%) rotateY(-14deg); transition-delay: .45s; }

/* ---------- 3. Hero entrance ---------- */
.hero__content > :nth-child(1) { --i: 0; }
.hero__content > :nth-child(2) { --i: 1; }
.hero__content > :nth-child(3) { --i: 3; }
.hero__content > :nth-child(4) { --i: 4; }
.hero__content > :nth-child(5) { --i: 5; }

.js:not(.is-opened) .hero__content > *,
.js:not(.is-opened) .hero .sprig { opacity: 0; }

.is-opened .hero__content > * {
  animation: rise 1.4s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i) * .2s + .25s);
}
.is-opened .hero__names > span:not(.amp) {
  animation: ink-in 2s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: .45s;
}
.is-opened .hero__names > span:last-child { animation-delay: .8s; }
.is-opened .hero__names .amp {
  animation: amp-bloom 1.6s ease both, amp-glow 5s ease-in-out 2.4s infinite;
  animation-delay: .7s, 2.4s;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes ink-in {
  from { opacity: 0; letter-spacing: .45em; filter: blur(8px); }
  to   { opacity: 1; letter-spacing: .14em; filter: none; }
}
@keyframes amp-bloom {
  from { opacity: 0; transform: scale(.4) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes amp-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(195,162,106,0); }
  50%      { text-shadow: 0 0 18px rgba(195,162,106,.55); }
}

/* soft breathing light behind the names */
.hero__content::before {
  content: ""; position: absolute; z-index: -1;
  inset: -15% -25%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.85), rgba(241,230,204,.25) 45%, transparent 70%);
  animation: breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* sprigs grow in, then sway in a slow breeze */
.sprig {
  transition: opacity 1.8s ease .3s, scale 2s cubic-bezier(.2, .7, .2, 1) .3s;
  animation: sway 8s ease-in-out infinite alternate;
}
.js:not(.is-opened) .hero .sprig { scale: .6; }
.sprig--tr, .sprig--br, .sprig--rsvp-r { animation-duration: 9.5s; animation-delay: -3s; }
.sprig--bl { animation-duration: 7s; animation-delay: -1.5s; }
.note__sprig { animation: sway-small 6s ease-in-out infinite alternate; }

@keyframes sway {
  from { rotate: -3deg; }
  to   { rotate: 3deg; }
}
@keyframes sway-small {
  from { rotate: -4deg; }
  to   { rotate: 4deg; }
}

/* drifting petals (created by enchant.js) */
.petals {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.petal {
  position: absolute; top: -40px; left: var(--left);
  animation: petal-fall var(--dur) linear var(--delay) infinite;
}
.petal__shape {
  display: block;
  width: var(--size); height: calc(var(--size) * 1.25);
  border-radius: 150% 0 150% 0;
  opacity: .8;
  animation: petal-sway calc(var(--dur) / 3) ease-in-out var(--delay) infinite alternate;
}
.petal--blush    { background: linear-gradient(135deg, #fbe4e0, #f0c2bc); }
.petal--lavender { background: linear-gradient(135deg, #e7e0f1, #c9bedf); }
.petal--cream    { background: linear-gradient(135deg, #fffdf8, #efe4cf); }
.petal--leaf     { background: linear-gradient(135deg, #c8ccb3, #98a07f); border-radius: 0 150% 0 150%; opacity: .7; }

@keyframes petal-fall {
  from { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translateY(calc(100svh + 80px)); opacity: 0; }
}
@keyframes petal-sway {
  from { transform: translateX(calc(var(--sway) * -1)) rotate(-40deg) rotateY(0deg); }
  to   { transform: translateX(var(--sway)) rotate(70deg) rotateY(160deg); }
}

/* fireflies / fairy lights (created by enchant.js) */
.fireflies {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.firefly {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff6dc;
  box-shadow: 0 0 6px 2px rgba(241, 214, 150, .75), 0 0 16px 6px rgba(241, 214, 150, .25);
  animation:
    firefly-drift var(--dur) ease-in-out var(--delay) infinite alternate,
    firefly-glow calc(var(--dur) / 2.5) ease-in-out var(--delay) infinite alternate;
}
.hero .firefly { background: #fffaf0; box-shadow: 0 0 6px 2px rgba(195,162,106,.55), 0 0 14px 5px rgba(195,162,106,.18); }

@keyframes firefly-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}
@keyframes firefly-glow {
  from { opacity: .1; }
  to   { opacity: 1; }
}

.countdown, .site-footer { position: relative; overflow: hidden; }
.countdown > *:not(.fireflies),
.site-footer > *:not(.fireflies) { position: relative; z-index: 1; }

/* ---------- 4. Scroll reveals ---------- */
.reveal {
  filter: blur(6px);
  transform: translateY(26px);
  transition:
    opacity 1.1s ease,
    transform 1.2s cubic-bezier(.2, .7, .2, 1),
    filter 1.1s ease;
}
.reveal.is-visible { filter: none; }
.cards > .reveal:nth-child(2) { transition-delay: .15s; }
.cards > .reveal:nth-child(3) { transition-delay: .3s; }

/* dividers draw outward from a twinkling star */
.divider {
  position: relative;
  background: none;
}
.divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 40%, transparent 40% 60%, var(--gold) 60%, var(--gold) 88%, transparent);
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) .35s;
}
.divider::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle-star 3.6s ease-in-out infinite;
}
.reveal:not(.is-visible) .divider::before { transform: scaleX(0); }

@keyframes twinkle-star {
  0%, 100% { transform: scale(.8) rotate(0deg);  opacity: .75; }
  50%      { transform: scale(1.2) rotate(45deg); opacity: 1; }
}

/* timeline: the line grows down, dots and rows appear one by one */
.timeline::before { transform-origin: top; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .2s; }
.timeline li { transition: opacity .8s ease, transform .8s ease; }
.timeline li::before { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.timeline.reveal { filter: none; transform: none; opacity: 1; }   /* rows animate instead */
.timeline.reveal:not(.is-visible)::before { transform: scaleY(0); }
.timeline.reveal:not(.is-visible) li { opacity: 0; transform: translateX(-10px); }
.timeline.reveal:not(.is-visible) li::before { transform: scale(0); }
.timeline li:nth-child(1), .timeline li:nth-child(1)::before { transition-delay: .3s; }
.timeline li:nth-child(2), .timeline li:nth-child(2)::before { transition-delay: .55s; }
.timeline li:nth-child(3), .timeline li:nth-child(3)::before { transition-delay: .8s; }
.timeline li:nth-child(4), .timeline li:nth-child(4)::before { transition-delay: 1.05s; }
.timeline li:nth-child(5), .timeline li:nth-child(5)::before { transition-delay: 1.3s; }
.timeline li:nth-child(6), .timeline li:nth-child(6)::before { transition-delay: 1.55s; }

/* ---------- 5. Countdown, photos, buttons ---------- */
.countdown__unit span.is-ticking { animation: tick .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes tick {
  from { opacity: 0; transform: translateY(-35%); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* storybook arched photo frames */
.gallery__item {
  border-radius: 999px 999px var(--radius) var(--radius);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(160deg, var(--sage-light), var(--lavender-soft) 55%, var(--blush));
  outline: 1px solid rgba(195, 162, 106, .45);
  outline-offset: 5px;
}
.gallery { padding-top: 8px; padding-left: 6px; }   /* room for the gold outline */
.gallery__item img { transition: transform 6s ease; }
.gallery__item:hover img { transform: scale(1.06); }

.gallery.reveal { filter: none; transform: none; }
.gallery__item { transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.gallery.reveal:not(.is-visible) .gallery__item { opacity: 0; transform: translateY(24px) scale(.96); }
.gallery__item:nth-child(2) { transition-delay: .15s; }
.gallery__item:nth-child(3) { transition-delay: .3s; }
.gallery__item:nth-child(4) { transition-delay: .45s; }

/* a sweep of light across buttons */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .9s ease;
}
.btn:hover::after { transform: translateX(120%); }
.hero__btn::after { animation: glint 6s ease-in-out 3s infinite; }
@keyframes glint {
  0%, 70% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* ---------- 6. Sparkle burst (created by enchant.js) ---------- */
.sparkle {
  position: fixed; z-index: 300; pointer-events: none;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  animation: burst var(--dur) cubic-bezier(.15, .8, .3, 1) forwards;
}
.sparkle--star  { background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.sparkle--petal { border-radius: 150% 0 150% 0; height: calc(var(--s) * 1.25); }
.sparkle--blush    { background: linear-gradient(135deg, #fbe4e0, #f0c2bc); }
.sparkle--lavender { background: linear-gradient(135deg, #e7e0f1, #c9bedf); }
.sparkle--sage     { background: linear-gradient(135deg, #c8ccb3, #98a07f); }

@keyframes burst {
  0%   { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Song requests: blends into the sections around it ---------- */
.section--songs {
    background: var(--blush-soft);
}
.form--inline.card { text-align: left; }
@media (min-width: 60rem) {
  .form--inline.card { max-width: 52rem; padding: 2rem 2.25rem; }
}
.form__status:empty { display: none; }   /* no blank gap under the button until there's a message */

/* ---------- Gallery: more than 4 photos ---------- */
/* Stagger the fade-in for photos 5 onwards */
.gallery__item:nth-child(5) { transition-delay: .6s; }
.gallery__item:nth-child(6) { transition-delay: .75s; }
.gallery__item:nth-child(7) { transition-delay: .9s; }
.gallery__item:nth-child(n+8) { transition-delay: 1s; }

/* Desktop: use 8 narrow columns so every photo spans 2, which lets a
   lone photo on the last row sit in the middle instead of on the left */
@media (min-width: 60rem) {
  .gallery { grid-template-columns: repeat(8, 1fr); }
  .gallery__item { grid-column: span 2; }
  .gallery__item:nth-child(6n + 1):last-child { grid-column: 4 / span 2; }
}