/* ============================================================
   Gilded Quay — Motion / scroll reveal system
   ============================================================ */

/* ---------- reveal: opacity 0.18 → 1, translate ↑16px ---------- */

.reveal {
  opacity: 0.18;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- staggered children ---------- */

.reveal-stagger > * {
  opacity: 0.12;
  transform: translateY(20px);
  transition:
    opacity 1000ms var(--ease-out),
    transform 1000ms var(--ease-out);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* ---------- reveal variants ---------- */

.reveal--slow { --reveal-duration: 1400ms; }
.reveal--soft { --reveal-distance: 10px; }
.reveal--scale {
  transform: translateY(var(--reveal-distance)) scale(0.96);
}
.reveal--scale.is-visible {
  transform: translateY(0) scale(1);
}

/* ---------- gold hairline draw-in ---------- */

.draw-in {
  position: relative;
  display: inline-block;
}

.draw-in::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 1400ms var(--ease-out) 200ms;
}

.draw-in.is-visible::after {
  width: 100%;
}

/* ---------- centred hairline expand ---------- */

.line-expand {
  display: block;
  height: 1px;
  width: 0;
  background: var(--gold);
  margin: 0 auto;
  transition: width 1600ms var(--ease-out);
}

.line-expand.is-visible {
  width: min(180px, 30vw);
}

/* ---------- subtle parallax (background) ---------- */

.parallax-bg {
  transition: transform 0.2s linear;
  will-change: transform;
}

/* ---------- countdown digit flip animation ---------- */

.countdown-value {
  display: inline-block;
}

.countdown-value.flip {
  animation: flip-fade 480ms var(--ease-out);
}

@keyframes flip-fade {
  0%   { transform: translateY(0); opacity: 1; }
  40%  { transform: translateY(-6px); opacity: 0.35; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- prevent flicker before JS hydrates ---------- */

html.no-js .reveal,
html.no-js .reveal-stagger > * {
  opacity: 1;
  transform: none;
}

/* ============================================================
   ENHANCED MOTION — handwriting, hovers, slide-in variants
   ============================================================ */

/* ---------- Pinyon names: handwriting reveal ---------- */

.handwrite {
  display: inline-block;
  clip-path: inset(0 100% -10% 0);
  animation: handwrite 2.6s cubic-bezier(0.36, 0.04, 0.16, 1) forwards;
}

.handwrite-1 { animation-delay: 0.75s; }
.handwrite-2 { animation-delay: 1.55s; }
.handwrite-3 { animation-delay: 2.4s; }
.handwrite-amp { animation-delay: 1.35s; animation-duration: 1.1s; }

@keyframes handwrite {
  0%   { clip-path: inset(0 100% -10% 0); }
  100% { clip-path: inset(0 -2% -10% 0); }
}

/* ---------- Slide-in alternation ---------- */

.slide-left {
  opacity: 0.08;
  transform: translateX(-44px);
  transition:
    opacity 1700ms var(--ease-out),
    transform 1700ms var(--ease-out);
  will-change: opacity, transform;
}
.slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0.08;
  transform: translateX(44px);
  transition:
    opacity 1700ms var(--ease-out),
    transform 1700ms var(--ease-out);
  will-change: opacity, transform;
}
.slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Card hover lift ---------- */

.detail-card {
  transition:
    transform 480ms var(--ease-out),
    box-shadow 480ms var(--ease-out),
    border-color 480ms var(--ease-out);
}
.detail-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold);
}
.detail-card::before {
  transition: width 480ms var(--ease-out), background 480ms var(--ease-out);
}
.detail-card:hover::before {
  width: 96px;
  background: var(--gold-deep);
}

/* ---------- Deckled image zoom on hover ---------- */

.deckle {
  transition: transform 700ms var(--ease-out);
}
.deckle img {
  transition: transform 1400ms var(--ease-out);
  will-change: transform;
}
.deckle:hover {
  transform: translateY(-4px);
}
.deckle:hover img {
  transform: scale(1.04);
}

/* ---------- Ken-Burns on hero ---------- */

.masthead-bg img {
  animation: ken-burns 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ken-burns {
  0%   { transform: scale(1.0)   translate3d(0, 0, 0); }
  100% { transform: scale(1.06)  translate3d(-1%, -1%, 0); }
}

/* ---------- Gold hairline shimmer on hover ---------- */

.deco-rule svg {
  transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out);
}
.deco-rule:hover svg {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(191, 157, 84, 0.5));
}

/* ---------- Schedule diamond marker draw-in ---------- */

.schedule-item.is-visible::before {
  animation: diamond-pop 600ms var(--ease-out) backwards;
  animation-delay: 200ms;
}

@keyframes diamond-pop {
  0%   { transform: translateX(-50%) rotate(45deg) scale(0); opacity: 0; }
  100% { transform: translateX(-50%) rotate(45deg) scale(1); opacity: 0.85; }
}

/* ---------- Button shimmer on hover ---------- */

.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
}
.btn:hover::after {
  transform: translateX(100%);
}

/* ---------- Music toggle subtle pulse when paused ---------- */

.music-toggle.is-muted {
  animation: subtle-pulse 3.2s ease-in-out infinite;
}

@keyframes subtle-pulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50%      { box-shadow: var(--shadow-card), 0 0 0 6px rgba(191, 157, 84, 0.10); }
}

/* ============================================================
   Lower-half ambient drift — gifts / RSVP / countdown / contact / footer
   gentle watercolour washes so the second half of the page is alive
   ============================================================ */

#gifts, #rsvp, #contact, footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#gifts::before,
#rsvp::before,
#contact::before,
footer::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 22% 28%, rgba(232, 210, 172, 0.22) 0%, transparent 65%),
    radial-gradient(34% 28% at 78% 70%, rgba(198, 139, 130, 0.14) 0%, transparent 70%),
    radial-gradient(40% 32% at 50% 50%, rgba(174, 185, 148, 0.10) 0%, transparent 70%);
  filter: blur(56px);
  animation: lower-wash-drift 36s ease-in-out infinite alternate;
}

/* Each section drifts in a slightly different rhythm so the page feels alive */
#rsvp::before    { animation-duration: 42s; animation-delay: -8s; }
#contact::before { animation-duration: 44s; animation-delay: -24s; }
footer::before   { animation-duration: 40s; animation-delay: -32s; }

/* RSVP is the only one of these sections whose content grows dynamically (the
   per-guest form expands when a guest accepts). iOS Safari clips an
   overflow:hidden section that contains an isolated, blurred ::before to its
   first-paint height — so the bottom of the form got cut off after "accepts"
   was tapped. Don't clip the RSVP section; keep its wash inside its own box
   (inset:0) so nothing needs clipping. */
#rsvp { overflow: visible; }
#rsvp::before { inset: 0; }

@keyframes lower-wash-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d( 2%,  2%, 0) scale(1.05); }
  100% { transform: translate3d(-1%,  2%, 0) scale(1.02); }
}

/* Faint gold shimmer on the footer H&E seal — quietly luminous */
footer .seal {
  position: relative;
  transition: filter 600ms var(--ease-out);
}
footer .seal::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(232, 210, 172, 0.35) 0%, transparent 65%);
  filter: blur(20px);
  z-index: -1;
  animation: seal-glow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes seal-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  #gifts::before,
  #rsvp::before,
  #contact::before,
  footer::before,
  footer .seal::before { animation: none !important; }
}

/* ============================================================
   FALLING ROSE PETALS — ambient layer over the whole page
   ============================================================ */

.petals {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 700ms ease;
}

.petals.is-active {
  opacity: 1;
}

.petals .petal {
  animation-play-state: paused;
}

.petals.is-active .petal {
  animation-play-state: running;
}

.petal {
  position: absolute;
  top: -8%;
  width: 22px;
  height: 28px;
  opacity: 0;
  will-change: transform, opacity;
  /* Rose petal teardrop in dusty rose */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'><defs><radialGradient id='g' cx='50%25' cy='35%25' r='65%25'><stop offset='0%25' stop-color='%23EAD2CB'/><stop offset='60%25' stop-color='%23C68B82'/><stop offset='100%25' stop-color='%23A0635A'/></radialGradient></defs><path d='M30 2 Q56 24 50 60 Q40 76 30 76 Q20 76 10 60 Q4 24 30 2 Z' fill='url(%23g)' opacity='0.85'/><path d='M30 8 Q28 36 30 70' stroke='%23A0635A' stroke-width='0.6' fill='none' opacity='0.45'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 3px rgba(43, 38, 32, 0.10));
}

/* Marigold variant — warmer */
.petal.petal--marigold {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'><defs><radialGradient id='g' cx='50%25' cy='35%25' r='65%25'><stop offset='0%25' stop-color='%23F0C572'/><stop offset='55%25' stop-color='%23C97E37'/><stop offset='100%25' stop-color='%238C4F1F'/></radialGradient></defs><path d='M30 2 Q56 24 50 60 Q40 76 30 76 Q20 76 10 60 Q4 24 30 2 Z' fill='url(%23g)' opacity='0.82'/><path d='M30 8 Q28 36 30 70' stroke='%238C4F1F' stroke-width='0.6' fill='none' opacity='0.45'/></svg>");
}

/* Sage leaf variant */
.petal.petal--sage {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'><defs><radialGradient id='g' cx='50%25' cy='30%25' r='70%25'><stop offset='0%25' stop-color='%23C3CCA8'/><stop offset='60%25' stop-color='%23AEB994'/><stop offset='100%25' stop-color='%237D8966'/></radialGradient></defs><path d='M30 2 Q52 22 48 56 Q38 74 30 76 Q22 74 12 56 Q8 22 30 2 Z' fill='url(%23g)' opacity='0.75'/><path d='M30 8 Q28 36 30 70' stroke='%235E6A45' stroke-width='0.7' fill='none' opacity='0.5'/></svg>");
}

/* 14 petals scattered across the viewport width with varied durations */

.petal:nth-child(1)  { left:  4%; width: 22px; height: 28px; animation: petal-fall  18s linear -2s infinite; }
.petal:nth-child(2)  { left: 11%; width: 16px; height: 20px; animation: petal-fall  24s linear -5s infinite; }
.petal:nth-child(3)  { left: 19%; width: 28px; height: 34px; animation: petal-fall  16s linear -9s infinite; }
.petal:nth-child(4)  { left: 27%; width: 18px; height: 22px; animation: petal-fall  22s linear -12s infinite; }
.petal:nth-child(5)  { left: 36%; width: 24px; height: 30px; animation: petal-fall  20s linear -3s infinite; }
.petal:nth-child(6)  { left: 44%; width: 14px; height: 18px; animation: petal-fall  26s linear -7s infinite; }
.petal:nth-child(7)  { left: 53%; width: 22px; height: 28px; animation: petal-fall  17s linear -14s infinite; }
.petal:nth-child(8)  { left: 61%; width: 20px; height: 26px; animation: petal-fall  21s linear -1s infinite; }
.petal:nth-child(9)  { left: 70%; width: 26px; height: 32px; animation: petal-fall  19s linear -10s infinite; }
.petal:nth-child(10) { left: 78%; width: 16px; height: 22px; animation: petal-fall  23s linear -6s infinite; }
.petal:nth-child(11) { left: 86%; width: 24px; height: 30px; animation: petal-fall  18s linear -4s infinite; }
.petal:nth-child(12) { left: 92%; width: 18px; height: 22px; animation: petal-fall  25s linear -11s infinite; }
.petal:nth-child(13) { left: 50%; width: 14px; height: 18px; animation: petal-fall  28s linear -15s infinite; }
.petal:nth-child(14) { left: 32%; width: 26px; height: 32px; animation: petal-fall  21s linear -8s infinite; }

@keyframes petal-fall {
  0%   { transform: translate3d(0,      -10vh, 0) rotate(0deg)   scale(0.92); opacity: 0; }
  8%   { opacity: 0.85; }
  25%  { transform: translate3d(28px,   25vh,  0) rotate(120deg)  scale(1); }
  50%  { transform: translate3d(-18px,  55vh,  0) rotate(220deg)  scale(0.96); }
  75%  { transform: translate3d(22px,   85vh,  0) rotate(310deg)  scale(1.02); }
  92%  { opacity: 0.78; }
  100% { transform: translate3d(-12px, 115vh,  0) rotate(420deg)  scale(0.94); opacity: 0; }
}

/* ---------- Reduced motion overrides ---------- */

@media (prefers-reduced-motion: reduce) {
  .handwrite,
  .schedule-item,
  .slide-left,
  .slide-right { animation: none !important; transition: none !important; }
  .handwrite,
  .schedule-item,
  .slide-left,
  .slide-right { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .masthead-bg img,
  .music-toggle.is-muted { animation: none !important; }
  .petals { display: none !important; }
}