/* ============================================================
   Welcome page — index-specific styles (hero, countdown, intro).
   Shared base/nav/palette live in theme.css.
   ============================================================ */

/* ----------------------------------------------------------------
   Hero — botanical background + names + date + live countdown
   ---------------------------------------------------------------- */
/* Fixed botanical backdrop for the first screen */
.bg-botanical {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("assets/bg/bg_story1.jpg") center / cover no-repeat;
}
.bg-botanical::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%,
              rgba(5, 21, 43, 0.15) 0%,
              rgba(5, 21, 43, 0.55) 78%);
}
/* Pinned title layer — stays put while the section below scrolls up over it */
.hero-fixed {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 1rem) 1.25rem 0;
  pointer-events: none;
}
/* pin the title so it settles at the vertical centre of the viewport
   (the title is the top of the stack; the offset accounts for the
   date+countdown below it, which fade out on scroll) */
.hero-stack { transform: translateY(7vh); }
.hero-fade { will-change: opacity; }
/* reserves the first screen so the intro scrolls up over the backdrop */
.hero-spacer {
  height: 100vh;
  height: 100svh;
}
/* interactive sparkle layer — fixed over the whole viewport, spans the
   hero and the section below; never blocks input, sits under the nav bar */
.sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.hero-fixed .names {
  font-family: "Italianno", cursive;
  font-weight: 400;
  color: var(--ivory);
  font-size: clamp(4.5rem, 15vw, 12rem);
  line-height: 0.95;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero .eyebrow {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: clamp(0.6rem, 1.6vw, 0.8rem);
  color: var(--gold);
  margin: 0 0 1.4rem;
  padding-left: 0.42em;
}
.hero-fixed .date {
  font-family: "EB Garamond", serif;
  font-size: clamp(1.15rem, 3.2vw, 1.9rem);
  letter-spacing: 0.06em;
  color: var(--ivory);
  margin: 1.6rem 0 0;
}
.hero-fixed .date-rule {
  width: 64px;
  height: 1px;
  background: var(--gold-soft);
  margin: 1.4rem auto 0;
}

/* Countdown */
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 3.5vw, 2.6rem);
  margin-top: 1.9rem;
}
.countdown .unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.4rem;
}
.countdown .num {
  font-family: "EB Garamond", serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--ivory);
}
.countdown .lbl {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.52rem, 1.5vw, 0.68rem);
  color: var(--gold);
  margin-top: 0.55rem;
}

/* scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--gold);
  font-size: 1.4rem;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ----------------------------------------------------------------
   Intro — full-screen B&W photo with gratitude text overlaid
   ---------------------------------------------------------------- */
.intro {
  position: relative;
  z-index: 1;                /* above the fixed backdrop, below the pinned title */
  height: 100vh;             /* exactly the (small) viewport height */
  height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* the photo fills the whole viewport and stays sharp */
.intro-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* the couple sit right-of-centre; frame on them so both read equally
     (x centres the pair, y favours their faces when there's vertical crop) */
  background: url("couple_images/Hero_Image-BW.jpg") 56% 30% / cover no-repeat;
}
/* Progressive blur: several stacked layers, each with a stronger blur
   confined to a lower band, so the blur ramps up smoothly toward the
   bottom instead of starting at a hard line. Plus a bottom darkening
   gradient for text legibility. */
.intro-blur {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(5, 21, 43, 0.78) 0%,
              rgba(5, 21, 43, 0.30) 18%,
              rgba(5, 21, 43, 0) 30%);
}
.intro-blur .bl {
  position: absolute;
  inset: 0;
}
.intro-blur .bl1 {
  backdrop-filter: blur(2px);  -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 32%);
          mask-image: linear-gradient(to top, #000 20%, transparent 32%);
}
.intro-blur .bl2 {
  backdrop-filter: blur(5px);  -webkit-backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 23%);
          mask-image: linear-gradient(to top, #000 12%, transparent 23%);
}
.intro-blur .bl3 {
  backdrop-filter: blur(9px);  -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 15%);
          mask-image: linear-gradient(to top, #000 6%, transparent 15%);
}
.intro-blur .bl4 {
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  -webkit-mask-image: linear-gradient(to top, #000 2%, transparent 9%);
          mask-image: linear-gradient(to top, #000 2%, transparent 9%);
}
/* text sits low, within the blurred band */
.intro-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 clamp(1.5rem, 6vw, 5rem) clamp(1.4rem, 4vh, 2.6rem);
  text-align: center;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s ease;
}
.intro.visible .intro-overlay { opacity: 1; transform: none; }

.intro-overlay p.body {
  font-family: "EB Garamond", serif;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1.35;
  color: var(--ivory);
  max-width: 1000px;
  margin: 0 auto;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}