/* THEME: Adat Papua — Ukiran Asmat & Cendrawasih — tanah okre. Okre tanah, terakota, dan arang dengan ukiran Asmat, rumah honai, burung cendrawasih, tifa, serta noken khas Papua. */
:root{
  --color-bg: #fdf6ea;
  --color-surface: #fffbf3;
  --color-text: #342620;
  --color-text-soft: #6b574a;
  --color-primary: #c98a2e;
  --color-secondary: #a8402a;
  --color-accent: #2e2520;
  --color-line: rgba(46,37,32,0.22);
  --font-heading: 'Fraunces', serif;
  --font-script: 'Yellowtail', cursive;
  --font-body: 'Jost', sans-serif;

  /* Text-only companions: the palette above keeps its values everywhere it
     fills, borders or backs something — only the type moves onto these, which
     are tuned for contrast against the paper as it actually renders (frame
     tint + section wash + motif stacked). */
  --ink-primary: #85591a;
  --ink-accent: #8c3421;
  --on-accent: #fdf6ea;

  --deco-shadow: rgba(140,52,33,0.28);
  --halo-color: rgba(201,138,46,0.16);
  --arrow-bg: rgba(255,255,255,.9);
  --reveal-from: scale(.92) translateY(26px);
  --reveal-dur: 1.4s;
}

body{ background: #d9c1a1; }

.frame{
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 6%, rgba(201,138,46,0.10), transparent 38%),
    radial-gradient(circle at 95% 16%, rgba(168,64,42,0.12), transparent 36%),
    radial-gradient(circle at 4% 34%, rgba(168,64,42,0.12), transparent 34%),
    radial-gradient(circle at 96% 48%, rgba(201,138,46,0.10), transparent 36%),
    radial-gradient(circle at 6% 64%, rgba(201,138,46,0.10), transparent 34%),
    radial-gradient(circle at 94% 78%, rgba(168,64,42,0.12), transparent 36%),
    radial-gradient(circle at 10% 92%, rgba(168,64,42,0.12), transparent 34%),
    radial-gradient(circle at 92% 96%, rgba(201,138,46,0.10), transparent 36%),
    var(--color-bg);
}

/* The woven motif this adat is known for, repeated as the paper's own
   texture — two layers so the weave never lines up into a visible grid. */
.frame::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22110%22 height=%22110%22%3E %3Cg fill=%22none%22 stroke=%22%232e2520%22 stroke-width=%221.2%22 opacity=%22.45%22%3E%3Cpath d=%22M10 40 C10 28 18 22 26 24 C30 25 30 31 26 32%22/%3E%3Cpath d=%22M76 96 C76 84 84 78 92 80 C96 81 96 87 92 88%22/%3E%3C/g%3E %3Cg fill=%22none%22 stroke=%22%23a8402a%22 stroke-width=%221.2%22 opacity=%22.45%22%3E%3Cpath d=%22M0 62 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10%22/%3E%3C/g%3E %3Cg fill=%22%23c98a2e%22 opacity=%22.4%22%3E%3Ccircle cx=%2226%22 cy=%2232%22 r=%222.4%22/%3E%3Ccircle cx=%2292%22 cy=%2288%22 r=%222.4%22/%3E%3Ccircle cx=%2260%22 cy=%2218%22 r=%222.4%22/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2276%22 height=%2276%22%3E %3Cg fill=%22none%22 stroke=%22%23c98a2e%22 stroke-width=%221.4%22 opacity=%22.45%22%3E%3Cpath d=%22M30 22 l8 -9 l8 9%22/%3E%3C/g%3E %3Ccircle cx=%2210%22 cy=%2258%22 r=%221.8%22 fill=%22%23a8402a%22 opacity=%22.5%22/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 120px 120px, 76px 76px;
  background-position: 0 0, 45px 20px;
}

.cover{
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(201,138,46,0.10), transparent 42%),
    radial-gradient(circle at 85% 88%, rgba(168,64,42,0.12), transparent 45%),
    var(--color-bg);
}
.cover::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22110%22 height=%22110%22%3E %3Cg fill=%22none%22 stroke=%22%232e2520%22 stroke-width=%221.2%22 opacity=%22.45%22%3E%3Cpath d=%22M10 40 C10 28 18 22 26 24 C30 25 30 31 26 32%22/%3E%3Cpath d=%22M76 96 C76 84 84 78 92 80 C96 81 96 87 92 88%22/%3E%3C/g%3E %3Cg fill=%22none%22 stroke=%22%23a8402a%22 stroke-width=%221.2%22 opacity=%22.45%22%3E%3Cpath d=%22M0 62 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10 l9 -10 l9 10%22/%3E%3C/g%3E %3Cg fill=%22%23c98a2e%22 opacity=%22.4%22%3E%3Ccircle cx=%2226%22 cy=%2232%22 r=%222.4%22/%3E%3Ccircle cx=%2292%22 cy=%2288%22 r=%222.4%22/%3E%3Ccircle cx=%2260%22 cy=%2218%22 r=%222.4%22/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
}

/* The cover names are a centred flex child, so on a narrow phone they take
   their max-content width and spill past the paper's edge. Holding the box
   to the cover's own width makes a long pair wrap at its "&" instead. */
.cover__names{ max-width: 100%; }

.section{ border-bottom: none; }

.section__title::after{
  content: '✶';
  display: inline-block;
  font-size: 17px;
  color: var(--color-primary);
  margin-top: 10px;
}

/* Soft corner blooms of colour behind each section, drifting slowly. */
.section::before, .section::after{
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(201,138,46,0.22), transparent 70%);
  border-radius: 50%;
}
.section::before{ top: 10px; left: -10px; }
.section::after{ bottom: 10px; right: -10px; background: radial-gradient(circle, rgba(168,64,42,0.26), transparent 70%); }
.section:nth-of-type(even)::before{ background: radial-gradient(circle, rgba(168,64,42,0.26), transparent 70%); }
.section:nth-of-type(even)::after{ background: radial-gradient(circle, rgba(201,138,46,0.22), transparent 70%); }

@keyframes decoDrift{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(6px, -10px) rotate(6deg); }
}
.section::before, .section::after,
.footer::before, .footer::after{ animation: decoDrift 13s ease-in-out infinite; }
.section::after, .footer::after{ animation-delay: -6s; }

@keyframes ornamentSpin{
  0%, 100%{ transform: rotate(-8deg) scale(1); }
  50%{ transform: rotate(8deg) scale(1.15); }
}
.section__title::after{ animation: ornamentSpin 6.5s ease-in-out infinite; }

.countdown__item{ box-shadow: 0 12px 30px -18px rgba(140,52,33,0.34); }

/* Several of these themes hang a woven border or a carved band off a card's
   own edge. The panel above them carries `perspective`, which otherwise
   becomes the containing block for those layers and throws them to the top
   of the section — so each card is made its own positioning context. */
.event-card, .gift-card, .wish-card, .countdown__item{ position: relative; }

/* Stacked-paper depth: two extra shadow layers read as sheets sitting behind
   the card, with no extra elements and no clipping of corner ornaments. */
.event-card, .gift-card, .wish-card{
  box-shadow:
    0 12px 30px -18px rgba(140,52,33,0.34),
    5px 7px 0 -3px rgba(255,251,243,0.80),
    9px 12px 0 -3px rgba(168,64,42,0.26);
}

.couple__photo{ border-color: #fff; box-shadow: 0 14px 34px -14px rgba(140,52,33,0.34); }
.gallery__item{ border-radius: 14px; box-shadow: 0 8px 20px -12px rgba(140,52,33,0.34); }
.video-box{ border-radius: 14px; }
.btn-open{ border-color: var(--color-accent); }

.footer{
  background: linear-gradient(180deg, transparent, rgba(201,138,46,0.10));
  position: relative;
}
.footer::before, .footer::after{
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}
.footer::before{ top: -10px; left: 6%; background: radial-gradient(circle, rgba(168,64,42,0.26), transparent 70%); }
.footer::after{ top: 10%; right: 6%; background: radial-gradient(circle, rgba(201,138,46,0.22), transparent 70%); }

/* ==========================================================================
   SECTION-TO-SECTION COLOUR GRADATION — each section's gradient starts where
   the previous one ended, so the wash flows continuously down the whole page.
   nth-of-type(5) is the rundown and nth-of-type(7) the video; main.js hides
   either one when its content is empty, so both stay flat continuations and
   the wash survives whichever way they render.
   ========================================================================== */
.section:nth-of-type(1){ background: linear-gradient(180deg, transparent, rgba(201,138,46,0.10)); }
.section:nth-of-type(2){ background: linear-gradient(180deg, rgba(201,138,46,0.10), rgba(168,64,42,0.12)); }
.section:nth-of-type(3){ background: linear-gradient(180deg, rgba(168,64,42,0.12), rgba(201,138,46,0.10)); }
.section:nth-of-type(4){ background: linear-gradient(180deg, rgba(201,138,46,0.10), rgba(168,64,42,0.12)); }
.section:nth-of-type(5){ background: rgba(168,64,42,0.12); }
.section:nth-of-type(6){ background: linear-gradient(180deg, rgba(168,64,42,0.12), rgba(201,138,46,0.10)); }
.section:nth-of-type(7){ background: rgba(201,138,46,0.10); }
.section:nth-of-type(8){ background: linear-gradient(180deg, rgba(201,138,46,0.10), rgba(168,64,42,0.12)); }
.section:nth-of-type(9){ background: linear-gradient(180deg, rgba(168,64,42,0.12), transparent); }

/* ==========================================================================
   READABILITY — every text role moves onto the --ink-* companions so no line
   of copy is left sitting on the decoration at a low contrast ratio.
   ========================================================================== */
.section__eyebrow,
.hero__quote-src,
.hero__amp,
.couple__ig,
.couple__divider,
.story__date,
.rundown__time,
.gift-card__bank,
.wish-card__status,
.footer__hashtag{ color: var(--ink-primary); }

.section__title,
.hero__names,
.cover__names,
.couple__name,
.event-card__name,
.story__title,
.rundown__title,
.countdown__num,
.gift-card__num,
.wish-card__name,
.footer__names{ color: var(--ink-accent); }

/* Hero names shimmer — the sweep stays inside the theme family and never
   rises above the paper, so the letters are readable at every frame. */
.hero__names span{
  background-image: linear-gradient(100deg,
    #511e13 30%,
    #782c1c 42%,
    var(--ink-accent) 50%,
    #782c1c 58%,
    #511e13 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 7.5s linear infinite;
}
@keyframes shimmerText{
  0%{ background-position: 200% 0; }
  100%{ background-position: -50% 0; }
}

/* ==========================================================================
   SIGNATURE — what makes this one read as Papua and not as any other
   template in the set: its own watermark, card treatment and lettering.
   ========================================================================== */
.hero::after{
  content: '';
  position: absolute;
  top: 44%; left: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  z-index: -1;
  opacity: .07;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 96%22 fill=%22none%22 stroke=%22%23a8402a%22 stroke-width=%225%22 stroke-linecap=%22round%22%3E %3Cpath d=%22M32 92 V8%22/%3E%3Cpath d=%22M32 20 C20 20 14 28 16 38 C18 44 26 44 26 38%22/%3E%3Cpath d=%22M32 20 C44 20 50 28 48 38 C46 44 38 44 38 38%22/%3E %3Cpath d=%22M32 52 C22 52 17 58 18 66 C20 71 27 71 27 66%22/%3E%3Cpath d=%22M32 52 C42 52 47 58 46 66 C44 71 37 71 37 66%22/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Papua signature: bark-cloth grain under every card, with the Asmat zig-zag
   carved along the top edge. */
.event-card, .gift-card, .wish-card{
  border: 1px solid rgba(46,37,32,.35);
  border-top: 4px solid var(--color-secondary);
  border-radius: 10px;
  background-image:
    repeating-linear-gradient(0deg, rgba(46,37,32,.045) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(201,138,46,.08), transparent 150px);
}
.event-card::before, .gift-card::before, .wish-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  pointer-events: none;
  background: linear-gradient(135deg, var(--color-primary) 50%, transparent 51%) 0 0 / 12px 8px repeat-x;
  opacity: .7;
}
.countdown__item{ border: 1px solid rgba(46,37,32,.3); border-radius: 12px 12px 3px 3px; }
.section__title{ font-weight: 600; }
.cover__eyebrow{ color: var(--ink-accent); letter-spacing: .26em; }
.greeting{ font-family: var(--font-script); font-size: clamp(17px, 4.6vw, 21px); color: var(--ink-accent); }
.footer__closing{ font-family: var(--font-script); font-size: clamp(16px, 4.4vw, 20px); }
/* ==========================================================================
   SHARED MECHANICS — reveal choreography, floating sprites, falling particles,
   the photo carousel and the small depth/interaction touches. Everything here
   is driven by the palette + tuning variables declared at the top of this
   file's theme block above, so the same machinery reads differently per theme.
   ========================================================================== */

/* 3D viewing context — lets transformed descendants render with real
   foreshortening instead of a flat 2D pop. */
.section, .footer{ perspective: 1200px; }
.couple__person{ perspective: 800px; }
.gallery{ perspective: 900px; }

/* ---------- Greeting line above the hero quote ---------- */
.greeting{
  font-family: var(--font-heading);
  font-size: clamp(14px, 3.8vw, 17px);
  letter-spacing: .04em;
  color: var(--ink-primary, var(--color-primary));
  margin: 0 0 14px;
}
.greeting:empty{ display: none; }
.gift__intro{ font-size: 14px; color: var(--color-text-soft); margin: -10px 0 22px; }
.footer__closing{
  font-family: var(--font-heading);
  font-size: clamp(13px, 3.6vw, 16px);
  color: var(--ink-primary, var(--color-primary));
  margin: 14px 0 0;
}
.footer__closing:empty{ display: none; }

/* ==========================================================================
   THEMED REVEAL — the base entrance every .reveal element shares. Themes
   override --reveal-from / --reveal-dur to change its character.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: var(--reveal-from, scale(.92) translateY(24px));
  transition: opacity var(--reveal-dur, 1.4s) cubic-bezier(.22,1,.36,1),
              transform var(--reveal-dur, 1.4s) cubic-bezier(.22,1,.36,1);
}
.reveal.in{ opacity: 1; transform: none; }

.countdown__item.reveal{ transition-delay: calc(var(--i, 0) * 110ms); }

.gallery__item.reveal{ transition-delay: calc(var(--i, 0) * 70ms); }
.gallery__item:nth-child(1){ --i: 0; } .gallery__item:nth-child(2){ --i: 1; } .gallery__item:nth-child(3){ --i: 2; }
.gallery__item:nth-child(4){ --i: 3; } .gallery__item:nth-child(5){ --i: 4; } .gallery__item:nth-child(6){ --i: 5; }
.gallery__item:nth-child(7){ --i: 6; } .gallery__item:nth-child(8){ --i: 7; } .gallery__item:nth-child(9){ --i: 8; }

.story__item.reveal{ transition-delay: calc(var(--i, 0) * 120ms); }
.story__item:nth-child(1){ --i: 0; } .story__item:nth-child(2){ --i: 1; }
.story__item:nth-child(3){ --i: 2; } .story__item:nth-child(4){ --i: 3; }

/* ---------- Variative directions, so sections never all arrive alike ---------- */
.reveal--left{ transform: scale(.93) translateX(-42px) rotateY(-30deg); }
.reveal--left.in{ transform: none; }
.reveal--right{ transform: scale(.93) translateX(42px) rotateY(30deg); }
.reveal--right.in{ transform: none; }
.reveal--zoom{ transform: scale(.58) rotateY(-20deg) rotateX(10deg); }
.reveal--zoom.in{ transform: none; }
.reveal--flip{ transform: rotateX(56deg) translateY(24px) scale(.92); }
.reveal--flip.in{ transform: none; }

.hero__names span.reveal{ display: inline-block; }

.event-card.reveal{ transition-delay: calc(var(--i,0) * 90ms); }
.event-card:nth-of-type(odd).reveal{ transform: scale(.95) translateX(-30px) rotateY(-24deg); }
.event-card:nth-of-type(odd).reveal.in{ transform: none; }
.event-card:nth-of-type(even).reveal{ transform: scale(.95) translateX(30px) rotateY(24deg); }
.event-card:nth-of-type(even).reveal.in{ transform: none; }

.story__item:nth-child(odd).reveal{ transform: scale(.94) translateX(-26px) rotateY(-20deg); }
.story__item:nth-child(odd).reveal.in{ transform: none; }
.story__item:nth-child(even).reveal{ transform: scale(.94) translateX(26px) rotateY(20deg); }
.story__item:nth-child(even).reveal.in{ transform: none; }

/* ==========================================================================
   SECTION TITLE — a curtain lift: the words rise through a mask, independent
   of the generic fade used everywhere else.
   ========================================================================== */
.section__title__mask{ display: block; overflow: hidden; perspective: 400px; }
.section__title__inner{
  display: block;
  transform: translateY(112%) rotateX(-70deg);
  transform-origin: center bottom;
  transition: transform 1.35s cubic-bezier(.22,1,.36,1);
}
.section__title.reveal{ transform: none; transition: opacity .7s ease; }
.section__title.reveal.in{ transform: none; }
.section__title.reveal.in .section__title__inner{ transform: translateY(0) rotateX(0); }

/* ==========================================================================
   FLOATING SPRITES — themed artwork drifting inside each section. Purely
   decorative and never interactive.
   ========================================================================== */
.deco-float{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px var(--deco-shadow, rgba(0,0,0,.18)));
  will-change: transform;
  opacity: 0;
  translate: 0 0;
  transition: opacity 1.9s cubic-bezier(.22,1,.36,1), translate 1.9s cubic-bezier(.22,1,.36,1);
}
.deco-float svg{ width: 100%; height: 100%; display: block; }

/* Entrance — direction is chosen in JS from the sprite's real position, then
   applied through `translate` so it composes with the sway `animation` below
   instead of fighting it over the same `transform` property. */
.deco-float.enter-left{ translate: -60px 10px; }
.deco-float.enter-right{ translate: 60px 10px; }
.deco-float.enter-top{ translate: 0 -50px; }
.deco-float.enter-bottom{ translate: 0 50px; }
.deco-float.is-entered{ opacity: 1; translate: 0 0; }
.deco-float.is-far.is-entered{ opacity: .6; }
.deco-float.is-ghost.is-entered{ opacity: .22; }
.deco-float.is-soft.is-entered{ opacity: .5; }
.deco-float.is-back.is-entered{ opacity: .16; }

.cover__names{
  opacity: 0;
  translate: 0 -46px;
  transition: opacity 2.1s cubic-bezier(.22,1,.36,1), translate 2.1s cubic-bezier(.22,1,.36,1);
}
.cover__names.is-entered{ opacity: 1; translate: 0 0; }

@keyframes floatSwayA{
  0%, 100%{ transform: translateY(0) rotate(-6deg); }
  50%{ transform: translateY(-16px) rotate(8deg); }
}
@keyframes floatSwayB{
  0%, 100%{ transform: translateY(0) rotate(5deg); }
  50%{ transform: translateY(-11px) rotate(-8deg); }
}
@keyframes floatSwayC{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  33%{ transform: translate(5px,-9px) rotate(5deg); }
  66%{ transform: translate(-5px,-4px) rotate(-5deg); }
}
@keyframes floatDriftD{
  0%, 100%{ transform: translate(0,0) rotate(-4deg) scale(1); }
  50%{ transform: translate(-8px,-18px) rotate(10deg) scale(1.08); }
}
@keyframes flutterE{
  0%, 100%{ transform: translate(0,0) rotate(-10deg); }
  25%{ transform: translate(10px,-8px) rotate(6deg); }
  50%{ transform: translate(4px,-20px) rotate(-14deg); }
  75%{ transform: translate(-10px,-9px) rotate(8deg); }
}
@keyframes twinkleF{
  0%, 100%{ transform: scale(.7) rotate(0deg); opacity:.4; }
  50%{ transform: scale(1.25) rotate(90deg); opacity:1; }
}
@keyframes floatWaveG{
  0%, 100%{ transform: translateX(0) rotate(0deg); }
  50%{ transform: translateX(10px) rotate(-3deg); }
}
@keyframes flutterH{
  0%, 100%{ transform: translateY(0) rotate(-6deg) scale(1); }
  50%{ transform: translateY(-9px) rotate(9deg) scale(1.06); }
}
.deco-float.anim-a{ animation: floatSwayA 9.5s ease-in-out infinite; }
.deco-float.anim-b{ animation: floatSwayB 11s ease-in-out infinite; }
.deco-float.anim-c{ animation: floatSwayC 12.5s ease-in-out infinite; }
.deco-float.anim-d{ animation: floatDriftD 14s ease-in-out infinite; }
.deco-float.anim-e{ animation: flutterE 8.5s ease-in-out infinite; }
.deco-float.anim-f{ animation: twinkleF 4s ease-in-out infinite; }
.deco-float.anim-g{ animation: floatWaveG 10s ease-in-out infinite; }
.deco-float.anim-h{ animation: flutterH 7s ease-in-out infinite; }

/* Depth layers: blurred + dimmer sprites sit behind the copy so corners and
   empty mid-section space read as full without ever competing with text. */
.deco-float.is-far{ filter: blur(1.4px) drop-shadow(0 4px 8px var(--deco-shadow, rgba(0,0,0,.14))); }
@keyframes bloomDriftBack{
  0%, 100%{ transform: translate(0,0) rotate(-5deg) scale(1); }
  50%{ transform: translate(-10px,-14px) rotate(5deg) scale(1.06); }
}
.deco-float.is-back{
  z-index: -1;
  filter: blur(6px);
  animation: bloomDriftBack 16s ease-in-out infinite;
}
/* Big architectural sprites (arches, panels, horizons) sit flat behind
   everything and never sway — they read as scenery, not as confetti. */
.deco-float.is-scene{ z-index: 0; animation: none; }
.deco-float.is-ghost{ z-index: -1; animation: none; }
.deco-float.is-soft{ z-index: 0; }

/* ==========================================================================
   FALLING PARTICLES — a continuous, varied-speed shower drifting down the
   whole viewport. Above the background, never in the way of a tap.
   ========================================================================== */
.petals-overlay{
  position: fixed;
  inset: 0;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  z-index: 350;
}
.petal{
  position: absolute;
  top: -8%;
  will-change: transform;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.petal svg{ width:100%; height:100%; display:block; }
@keyframes petalFall{
  0%{ transform: translate(0,0) rotate(0deg); }
  100%{ transform: translate(var(--drift, 20px), 118vh) rotate(var(--spin, 320deg)); }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary), var(--color-accent));
  z-index: 600;
  transition: width .1s linear;
}

/* ---------- Countdown tick — a flip-clock digit change ---------- */
.countdown__num{ transform-style: preserve-3d; backface-visibility: hidden; }
@keyframes countTick{
  0%{ transform: rotateX(0deg); }
  45%, 55%{ transform: rotateX(-100deg); color: var(--color-accent); }
  100%{ transform: rotateX(0deg); }
}
.countdown__num.is-ticking{ animation: countTick .5s ease-out; transform-origin: center; }

@keyframes softPulse{
  0%, 100%{ transform: rotateY(0deg) scale(1); }
  50%{ transform: rotateY(8deg) scale(1.04); }
}
.countdown__item{ perspective: 300px; animation: softPulse 4.2s ease-in-out infinite; }
.countdown__item:nth-child(2){ animation-delay: .15s; }
.countdown__item:nth-child(3){ animation-delay: .3s; }
.countdown__item:nth-child(4){ animation-delay: .45s; }

/* ---------- Orbiting ring around each portrait ---------- */
.couple__photo-wrap{ position: relative; width: 160px; height: 160px; margin: 0 auto 18px; }
.couple__photo-wrap .couple__photo{ margin: 0; }
.couple__photo{ transition: transform .18s ease-out; }
.couple__photo-orbit{
  position: absolute;
  inset: -18px;
  animation: orbitSpin 17s linear infinite;
  pointer-events: none;
}
.couple__photo-orbit span{
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--deco-shadow, rgba(0,0,0,.3));
}
.couple__photo-orbit span:nth-child(1){ transform: rotate(0deg) translateY(-98px); background: var(--color-primary); }
.couple__photo-orbit span:nth-child(2){ transform: rotate(60deg) translateY(-98px); background: var(--color-secondary); width:6px; height:6px; margin:-3px 0 0 -3px; }
.couple__photo-orbit span:nth-child(3){ transform: rotate(120deg) translateY(-98px); background: var(--color-accent); width:5px; height:5px; margin:-2.5px 0 0 -2.5px; }
.couple__photo-orbit span:nth-child(4){ transform: rotate(180deg) translateY(-98px); background: var(--color-primary); }
.couple__photo-orbit span:nth-child(5){ transform: rotate(240deg) translateY(-98px); background: var(--color-secondary); width:6px; height:6px; margin:-3px 0 0 -3px; }
.couple__photo-orbit span:nth-child(6){ transform: rotate(300deg) translateY(-98px); background: var(--color-accent); width:5px; height:5px; margin:-2.5px 0 0 -2.5px; }
@keyframes orbitSpin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

/* ==========================================================================
   PHOTO GRID — every photo is on screen at once; the mosaic layout itself
   lives in base.css. This only adds the template's own depth and hover so
   the tiles still belong to this design. Prev/next moved into the lightbox,
   which opens when a tile is tapped.
   ========================================================================== */
.gallery__item{ transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.gallery__item:hover{ transform: translateY(-3px); }

/* ---------- Cursor-tracked 3D tilt (set inline by the page script) ---------- */
.event-card, .gift-card, .wish-card, .couple__photo{
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Soft rotating halo behind the hero ---------- */
.hero{ position: relative; }
.hero::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 440px; height: 440px;
  margin: -220px 0 0 -220px;
  background: radial-gradient(circle, var(--halo-color, rgba(0,0,0,.08)), transparent 62%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
  animation: heroHaloSpin 42s linear infinite;
}
@keyframes heroHaloSpin{
  0%{ transform: rotate(0deg) scale(1); }
  50%{ transform: rotate(180deg) scale(1.18); }
  100%{ transform: rotate(360deg) scale(1); }
}

/* ---------- Buttons — lift/press depth instead of a flat colour swap ---------- */
.btn-solid{ transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
.btn-solid:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 26px -12px var(--deco-shadow, rgba(0,0,0,.45)); }
.btn-solid:active{ transform: translateY(0) scale(.97); }
.btn-outline{ transition: background .3s, color .3s, transform .25s ease; }
.btn-outline:hover{ transform: translateY(-2px); }
.btn-open{ transition: background .35s ease, color .35s ease, transform .25s ease; }
.btn-open:hover{ transform: translateY(-2px) scale(1.04); }

.event-card, .gift-card, .wish-card{ transition: transform .18s ease-out, box-shadow .3s ease; }

@media (max-width: 420px){
  .deco-float:not(.is-scene):not(.is-ghost){ transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce){
  .section::before, .section::after, .footer::before, .footer::after,
  .section__title::after, .countdown__item, .deco-float,
  .petal, .hero__names span, .countdown__num.is-ticking,
  .hero::before, .couple__photo-orbit{ animation: none !important; }
  .reveal, .reveal--left, .reveal--right, .reveal--zoom, .reveal--flip,
  .section__title__inner, .gallery__item,
  .event-card, .gift-card, .wish-card, .couple__photo,
  .deco-float, .cover__names{ transition-duration: .01ms !important; }
  .petals-overlay{ display: none; }
}