/* ==========================================================================
   SECTIONS
   Status:
     - #hero            → fully rebuilt (Sprint 1)
     - #journey         → fully rebuilt (Sprint 2)
     - #gallery         → fully rebuilt (Sprint 3)
     - #events          → fully rebuilt (Sprint 4)
     - #countdown       → fully rebuilt (Sprint 5)
     - #venue           → fully rebuilt (Sprint 6) — parking/accommodation
                           deliberately left out per current direction
     - #blessings       → real shared backend wired up (Sprint 7 minus
                           RSVP, which was deliberately skipped) — see
                           /wedding-backend for the API + deployment guide
     - #scratch         → carried over from v1, reskinned to the light
                           palette only, no further redesign planned
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* HERO                                                                    */
/* ---------------------------------------------------------------------- */
#hero{
  min-height:100svh;
  padding-top:10vh;
  padding-bottom:6vh;
  background:linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 60%);
}

.hero-eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:0.68rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--color-gold-deep);
  margin-bottom:var(--space-lg);
}

.hero-portrait-wrap{
  margin-bottom:var(--space-md);
}

.hero-names{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(2.6rem, 9vw, 4.6rem);
  line-height:1.05;
  color:var(--color-text);
}
.hero-names .amp{
  display:block;
  font-family:var(--font-script);
  font-size:0.55em;
  color:var(--color-gold);
  margin:2px 0;
}

.hero-quote{
  font-family:var(--font-script);
  font-size:clamp(1.5rem, 4vw, 2rem);
  color:var(--color-maroon);
  margin-top:var(--space-sm);
}

.hero-cta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:var(--space-lg);
}

.hero-scroll{
  margin-top:var(--space-xl);
}

/* ---------------------------------------------------------------------- */
/* SCRATCH TO REVEAL                                                       */
/* ---------------------------------------------------------------------- */
#scratch{ background:var(--color-bg-alt); }

.card-wrap{
  position:relative;
  width:min(88vw,460px);
  aspect-ratio:16/10;
  border-radius:var(--radius-md);
  background:var(--color-cream);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
  border:1px solid var(--color-gold-light);
}
.card-arch{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  color:var(--color-text);
}
.reveal-label{
  font-family:var(--font-body);
  font-size:0.65rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--color-gold-deep);
  margin-bottom:8px;
}
.reveal-date{
  font-family:var(--font-heading);
  font-size:clamp(2.2rem,7vw,3.4rem);
  font-weight:600;
  color:var(--color-maroon);
}
.reveal-year{
  font-family:var(--font-body);
  font-size:0.9rem;
  letter-spacing:0.2em;
  color:var(--color-gold-deep);
  margin-top:6px;
}
#scratchCanvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
#sparkleCanvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.scratch-instruction{
  margin-top:var(--space-md);
  font-family:var(--font-heading);
  font-style:italic;
  font-size:0.95rem;
  color:var(--color-text-soft);
  opacity:0;
  transition:opacity 0.6s ease;
}
.scratch-instruction.show{ opacity:1; }
.scratch-done{
  margin-top:var(--space-md);
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--color-gold-deep);
  opacity:0;
  transition:opacity 0.8s ease;
}
.scratch-done.show{ opacity:1; }

/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* COUNTDOWN — luxury cards with a rolling number-change animation         */
/* ---------------------------------------------------------------------- */
#countdown{ background:var(--color-bg); }

.countdown-grid{
  display:flex;
  align-items:stretch;
  justify-content:center;
  flex-wrap:nowrap;
  gap:clamp(6px,2.5vw,20px);
  margin-top:var(--space-sm);
  width:100%;
  max-width:460px;
}

.countdown-unit{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex:1 1 0;
  min-width:0;
  padding:var(--space-lg) clamp(4px,2vw,var(--space-sm)) var(--space-md);
  background:linear-gradient(165deg, var(--color-cream), var(--color-bg-alt));
  border:1px solid var(--color-gold-light);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.countdown-unit::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:36px; height:2px;
  background:var(--color-gold);
  border-radius:0 0 3px 3px;
}

.countdown-num{
  position:relative;
  display:inline-block;
  height:1.05em;
  overflow:hidden;
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,7vw,2.7rem);
  font-weight:600;
  color:var(--color-maroon);
  line-height:1.05;
}
.countdown-num__digit{
  position:absolute;
  left:0; right:0;
  top:0;
  transition:transform var(--dur-med) var(--ease-luxury), opacity var(--dur-med) var(--ease-luxury);
}
.countdown-num__digit--out{ transform:translateY(0); opacity:1; }
.countdown-num__digit--out.is-leaving{ transform:translateY(-100%); opacity:0; }
.countdown-num__digit--in{ transform:translateY(100%); opacity:0; }
.countdown-num__digit--in.is-entering{ transform:translateY(0); opacity:1; }

.countdown-label{
  font-size:0.58rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--color-gold-deep);
  margin-top:10px;
  white-space:nowrap;
}

.countdown-divider{
  flex:0 0 auto;
  font-family:var(--font-heading);
  font-size:clamp(1.1rem,4vw,2rem);
  color:var(--color-gold);
  align-self:center;
  animation:blink 2s steps(1) infinite;
}

/* ---------------------------------------------------------------------- */
/* OUR JOURNEY — editorial chapter timeline (replaces the old Story block) */
/* ---------------------------------------------------------------------- */
#journey{ background:var(--color-bg-alt); }

.journey-timeline{
  position:relative;
  width:100%;
  max-width:880px;
  margin-top:var(--space-md);
}
.journey-timeline::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  background:linear-gradient(var(--color-gold-light), var(--color-gold) 15%, var(--color-gold) 85%, var(--color-gold-light));
  transform:translateX(-50%);
}

.journey-chapter{
  position:relative;
  width:50%;
  padding-bottom:var(--space-xl);
}
.journey-chapter:last-child{ padding-bottom:0; }
.journey-chapter:nth-child(odd){
  left:0;
  padding-right:56px;
  text-align:right;
}
.journey-chapter:nth-child(even){
  left:50%;
  padding-left:56px;
  text-align:left;
}

.journey-chapter__marker{
  position:absolute;
  top:8px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--color-gold);
  box-shadow:0 0 0 5px var(--color-bg-alt), 0 0 0 6px var(--color-gold-light);
  transition:transform var(--dur-med) var(--ease-luxury), box-shadow var(--dur-med) var(--ease-luxury);
}
.journey-chapter:nth-child(odd) .journey-chapter__marker{ right:-6px; }
.journey-chapter:nth-child(even) .journey-chapter__marker{ left:-6px; }
.journey-chapter--active .journey-chapter__marker{
  transform:scale(1.7);
  box-shadow:0 0 0 5px var(--color-bg-alt), 0 0 0 6px var(--color-gold), 0 0 16px rgba(200,169,126,0.6);
}

.journey-chapter__photo{
  position:relative;
  width:100%;
  max-width:230px;
  aspect-ratio:4/5;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  background:linear-gradient(135deg, var(--color-cream), var(--color-rose));
  margin-bottom:var(--space-sm);
}
.journey-chapter:nth-child(odd) .journey-chapter__photo{ margin-left:auto; }
.journey-chapter:nth-child(even) .journey-chapter__photo{ margin-right:auto; }

.journey-chapter__photo::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
  transition:opacity var(--dur-med) ease;
}
.journey-chapter__photo.is-loaded::before{ opacity:0; }

.journey-chapter__photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity var(--dur-med) ease;
}
.journey-chapter__photo img.is-loaded{ opacity:1; }

.journey-chapter__num{
  font-family:var(--font-body);
  font-size:0.65rem;
  letter-spacing:0.25em;
  color:var(--color-gold-deep);
  margin-bottom:2px;
}
.journey-chapter__title{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:600;
  color:var(--color-text);
  margin-bottom:10px;
}
.journey-chapter__text{
  font-family:var(--font-heading);
  font-size:1.05rem;
  line-height:1.65;
  color:var(--color-text-soft);
  max-width:340px;
}
.journey-chapter:nth-child(odd) .journey-chapter__text{ margin-left:auto; }
.journey-chapter:nth-child(even) .journey-chapter__text{ margin-right:auto; }

/* alternating reveal direction — overrides the generic [data-reveal] rule
   in base.css via higher selector specificity */
.journey-chapter[data-reveal]{ opacity:0; }
.journey-chapter:nth-child(odd)[data-reveal]{ transform:translateX(-32px); }
.journey-chapter:nth-child(even)[data-reveal]{ transform:translateX(32px); }
.journey-chapter[data-reveal].is-visible{ opacity:1; transform:translateX(0); }

/* ---------------------------------------------------------------------- */
/* BLESSINGS (full redesign incl. petal burst is Sprint 7)                 */
/* ---------------------------------------------------------------------- */
#blessings{ background:var(--color-bg-alt); }

.blessing-count{
  margin-top:var(--space-md);
  font-family:var(--font-heading);
  font-style:italic;
  font-size:1rem;
  color:var(--color-text-soft);
}
.blessing-count span{
  color:var(--color-gold-deep);
  font-weight:600;
  font-style:normal;
}
.heart-particle{
  position:fixed;
  pointer-events:none;
  font-size:1.1rem;
  color:var(--color-gold-deep);
  z-index:60;
  will-change:transform, opacity;
}

/* ---------------------------------------------------------------------- */
/* GALLERY                                                                 */
/* ---------------------------------------------------------------------- */
#gallery{ background:var(--color-bg); }

.gallery-grid{
  column-count:2;
  column-gap:16px;
  width:100%;
  max-width:820px;
}
@media (min-width:700px){
  .gallery-grid{ column-count:3; column-gap:20px; }
}

.gallery-item{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 16px;
  border-radius:var(--radius-md);
  overflow:hidden;
  break-inside:avoid;
  box-shadow:var(--shadow-soft);
  cursor:zoom-in;
  background:linear-gradient(135deg, var(--color-cream), var(--color-rose));
  transition:transform var(--dur-fast) var(--ease-luxury), box-shadow var(--dur-fast) var(--ease-luxury);
}
.gallery-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }

/* reserved space per tile, set BEFORE the image loads — this is what kills the flicker.
   Adjust these to your real photos' actual proportions once they're in. */
.gallery-item:nth-child(1){ aspect-ratio:3/4;  }  /* portrait */
.gallery-item:nth-child(2){ aspect-ratio:3/2;  }  /* landscape */
.gallery-item:nth-child(3){ aspect-ratio:1/1;  }  /* square — this was your flickering tile */
.gallery-item:nth-child(4){ aspect-ratio:4/5;  }  /* portrait */
.gallery-item:nth-child(5){ aspect-ratio:4/3;  }  /* landscape */
.gallery-item:nth-child(6){ aspect-ratio:1/1;  }  /* square */

.gallery-item::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
  transition:opacity var(--dur-med) ease;
  z-index:1;
}
.gallery-item.is-loaded::before{ opacity:0; }

/* was display:block with natural img height — that's what let the tile's
   height jump (and reflow the columns) once the image finished loading.
   Now the img fills the aspect-ratio box that's already reserved above. */
.gallery-item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity var(--dur-med) ease;
}
.gallery-item img.is-loaded{ opacity:1; }

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,42,34,0.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-med) ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.lightbox__stage{ max-width:88vw; max-height:78vh; }
.lightbox__img{
  display:block;
  max-width:88vw;
  max-height:78vh;
  margin:0 auto;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);
}

.lightbox__close,
.lightbox__nav{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  color:var(--color-white);
  transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(255,255,255,0.28); }

.lightbox__close{ top:20px; right:20px; width:44px; height:44px; font-size:1.5rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.8rem; }
.lightbox__nav:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox__nav--prev{ left:16px; }
.lightbox__nav--next{ right:16px; }

.lightbox__counter{
  position:absolute;
  bottom:22px; left:50%;
  transform:translateX(-50%);
  color:rgba(255,255,255,0.75);
  font-family:var(--font-body);
  font-size:0.7rem;
  letter-spacing:0.25em;
}

/* ---------------------------------------------------------------------- */
/* WEDDING EVENTS                                                          */
/* ---------------------------------------------------------------------- */
#events{ background:var(--color-bg); }

.events-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  max-width:760px;
  margin-top:var(--space-xs);
}

.event-card{
  width:100%;
  max-width:310px;
  background:var(--color-cream);
  border:1px solid var(--color-gold-light);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:var(--space-lg) var(--space-md);
  text-align:center;
  transition:transform var(--dur-fast) var(--ease-luxury), box-shadow var(--dur-fast) var(--ease-luxury);
}
.event-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

.event-card__icon{
  width:52px; height:52px;
  margin:0 auto var(--space-sm);
  border-radius:50%;
  background:var(--color-bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-maroon);
  box-shadow:var(--shadow-soft);
}
.event-card__icon svg{ width:24px; height:24px; }

.event-card__title{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:600;
  color:var(--color-text);
  margin-bottom:4px;
}
.event-card__date{
  font-family:var(--font-heading);
  font-style:italic;
  color:var(--color-maroon);
  font-size:1.05rem;
  margin-bottom:var(--space-md);
}

.event-card__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:0.85rem;
  color:var(--color-text-soft);
  padding:10px 0;
  border-top:1px solid var(--color-gold-light);
  text-align:left;
}
.event-card__row:first-of-type{ border-top:none; }
.event-card__label{
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.62rem;
  color:var(--color-gold-deep);
  white-space:nowrap;
}
.event-card__link{
  background:none; border:none; padding:0;
  color:var(--color-maroon);
  text-decoration:underline;
  font-size:0.85rem;
  cursor:pointer;
  font-family:var(--font-body);
}

.event-card__cta{
  display:flex;
  width:100%;
  margin-top:var(--space-md);
  justify-content:center;
  font-size:0.64rem;
  padding:13px 20px;
}

.event-card__cal-alt{
  display:block;
  margin-top:10px;
  font-family:var(--font-body);
  font-size:0.7rem;
  color:var(--color-text-soft);
  text-decoration:underline;
  text-decoration-color:var(--color-gold-light);
  text-underline-offset:2px;
}
.event-card__cal-alt:hover{ color:var(--color-maroon); }

/* ---------------------------------------------------------------------- */
/* VENUE                                                                   */
/* ---------------------------------------------------------------------- */
#venue{ background:var(--color-bg-alt); }

.venue-card{
  width:100%;
  max-width:460px;
  background:var(--color-cream);
  border:1px solid var(--color-gold-light);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:var(--space-lg) var(--space-md);
  text-align:center;
}

.venue-card__icon{
  width:52px; height:52px;
  margin:0 auto var(--space-sm);
  border-radius:50%;
  background:var(--color-bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-maroon);
  box-shadow:var(--shadow-soft);
}
.venue-card__icon svg{ width:24px; height:24px; }

.venue-card__name{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:600;
  color:var(--color-text);
  margin-bottom:var(--space-sm);
}

.venue-card__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  font-size:0.85rem;
  color:var(--color-text-soft);
  padding:10px 0;
  border-top:1px solid var(--color-gold-light);
  text-align:left;
}
.venue-card__row:first-of-type{ border-top:none; }
.venue-card__label{
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.62rem;
  color:var(--color-gold-deep);
  white-space:nowrap;
  padding-top:2px;
}
.venue-card__row span:last-child{ text-align:right; }

.venue-card__map{
  margin-top:var(--space-md);
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--color-gold-light);
  box-shadow:var(--shadow-soft);
}
.venue-card__map iframe{ display:block; width:100%; height:260px; border:0; }

.venue-card__cta{
  display:flex;
  width:100%;
  margin-top:var(--space-md);
  justify-content:center;
}

.footer-note{
  margin-top:var(--space-xl);
  font-family:var(--font-script);
  font-size:1.4rem;
  color:var(--color-gold-deep);
  opacity:0.85;
}