@import url("../mika-nico/theme.css");

:root {
  --paper:#fbf4e8;
  --white:#fffbf4;
  --ink:#42232b;
  --muted:#66434b;
  --green:#f1e1d3;
  --dark-green:#343b2b;
  --red:#861e39;
  --rule:#54233038;
}
.intro { --envelope-background:#4d202c; --envelope-aspect:.619; }
.guest-nav,.guest-nav.is-compact { background:var(--paper); color:var(--ink); }

body.revealed .reveal-light { animation:none; }

.intro[data-reveal-on-end].opening { mask-image:none; }

@media (prefers-reduced-motion:no-preference) {
  .intro:has(#open[hidden]) video { animation:envelope-tap .2s ease-out; }
}
@keyframes envelope-tap { 35% { transform:scale(1.025); } }

.guest-nav {
  position:fixed;
  inset:max(8px, env(safe-area-inset-top)) 0 auto;
  margin:0 auto;
  max-width:calc(100% - 16px);
  border-radius:999px;
}
.wedding-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  height:100vh;
  height:100dvh;
  min-height:0;
  padding:0;
  background:var(--paper);
}
.wedding-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-40px;
  background:url("./assets/hero-invitation-retouched.png") center / cover no-repeat;
  filter:blur(56px);
}
.hero-heading {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.hero-invitation {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  object-position:center;
}

/* Crop the floral left edge while retaining the lettering on the right. */
@media (min-aspect-ratio: 3/7) and (max-aspect-ratio: 1056/1489) {
  .hero-invitation {
    object-fit:cover;
    object-position:right center;
  }
}

.countdown-photo-strip {
  overflow:auto hidden;
  background:#f4eddf url("./assets/countdown-roses.jpg") center bottom / cover no-repeat;
  padding-block:12px;
  scrollbar-width:none;
}
.countdown-photo-strip:focus-visible { outline-offset:-3px; }
.countdown-photo-track { display:flex; width:max-content; }
.countdown-photo-set {
  display:flex;
  gap:12px;
  padding-inline-end:12px;
}
.countdown-photo-set img {
  display:block;
  width:clamp(148px, 44vw, 260px);
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:10px;
}
@media (prefers-reduced-motion:no-preference) {
  .countdown-photo-track { animation:countdown-photo-scroll 32s linear infinite; }
  .countdown-photo-strip:is(:hover,:focus-within) .countdown-photo-track { animation-play-state:paused; }
}
@media (prefers-reduced-motion:reduce) {
  .countdown-photo-set[aria-hidden] { display:none; }
}
@keyframes countdown-photo-scroll {
  to { transform:translateX(-50%); }
}

#countdown {
  background:#f4eddf url("./assets/countdown-roses.jpg") center bottom / cover no-repeat;
  color:var(--ink);
  padding-bottom:clamp(10rem, 31vw, 24rem);
}

#love-story {
  background:#f4eddf url("./assets/love-story-rose-canopy.png") center top / cover no-repeat;
  color:var(--ink);
}
#love-story > div {
  background:#fff8eef2;
  padding:clamp(1rem, 3vw, 2rem);
  border-radius:1rem;
}

.guest-nav .nav-cta { background:var(--red); }
#venues {
  background:
    linear-gradient(#fbf4e8e8, #fbf4e8f5),
    var(--paper) url("./assets/love-story-rose-canopy.png") center top / cover no-repeat;
}
#wedding-day {
  background:
    linear-gradient(#fbf4e8f5, #fbf4e8e8),
    var(--paper) url("./assets/countdown-roses.jpg") center bottom / cover no-repeat;
}
#entourage, #gifts, #rsvp, .wedding-footer {
  background:
    linear-gradient(#3d1926e8, #3d1926f5),
    #3d1926 url("./assets/love-story-rose-canopy.png") center top / cover no-repeat;
  color:var(--white);
}
.entourage-content { background:#fff8ee; color:var(--ink); }

.wedding-footer {
  grid-template-columns:1fr;
  text-align:center;
}

.falling-petals {
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.falling-petals span {
  position:absolute;
  top:0;
  left:var(--x);
  width:clamp(8px, 1.5vw, 15px);
  aspect-ratio:4 / 5;
  border-radius:85% 22% 70% 45%;
  background:linear-gradient(135deg, #bc465c, #751832);
  opacity:0;
  animation:petal-fall var(--duration) linear var(--delay) infinite;
}
@keyframes petal-fall {
  0% { transform:translate3d(0, -20px, 0) rotate(0deg); opacity:0; }
  12%, 85% { opacity:.65; }
  50% { transform:translate3d(28px, 50vh, 0) rotate(195deg); }
  100% { transform:translate3d(-18px, 105vh, 0) rotate(390deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  .falling-petals { display:none; }
}