/* =========================================================
   LUXURY WEDDING WEBSITE
   440 × 956 MASTER DESIGN
   Responsive
   Ivory / Burgundy Red / Gold
   ========================================================= */


/* =========================================================
   FONTS
   ========================================================= */

/*
Recommended Google Fonts:

Cormorant Garamond

Montserrat

Great Vibes

Example:

<link href="https://fonts.googleapis.com/css2?family=
Cormorant+Garamond:wght@400;500;600;700&
Great+Vibes&
Montserrat:wght@400;500;600;700&
display=swap" rel="stylesheet">
*/


/* =========================================================
   DESIGN SYSTEM
   ========================================================= */

:root {

  --design-width: 440px;
  --design-height: 956px;

  /* Colors */

  --ivory: #fffaf5;
  --paper: #fffdf9;
  --cream: #f7eee4;
  --cream-2: #eadbc9;
  --cream-3: #f2e5d6;

  --red: #8b0e19;
  --red-dark: #5d0710;
  --red-soft: #b94448;

  --gold: #b99152;
  --gold-light: #e1c48d;
  --gold-soft: rgba(185, 145, 82, .18);

  --ink: #352422;
  --muted: #88716c;
  --white: #ffffff;

  /* Typography */

  --script:
    "Great Vibes",
    "Snell Roundhand",
    "Brush Script MT",
    cursive;

  --serif:
    "Monstserrat",
    Georgia,
    serif;

  --sans:
    "Montserrat",
    Arial,
    sans-serif;

  /* Layout */

  --content-width: 350px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;

  /* Shadows */

  --soft-shadow:
    0 12px 35px rgba(74, 37, 25, .08);

  --card-shadow:
    0 18px 45px rgba(74, 37, 25, .10);

  --luxury-shadow:
    0 28px 80px rgba(69, 32, 22, .18);
}

/* =========================================
   MONSTAR FONT
   ========================================= */

@font-face {
  font-family: "Monstar";
  src: url("assets/Monstar.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/CinzelDecorative-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Cinzel Decorative Bold";
  src: url("assets/CinzelDecorative-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;

  color: var(--ink);
  font-family: var(--serif);

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(185, 145, 82, .12),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(139, 14, 25, .08),
      transparent 30%
    ),
    #e9dfd4;
}

img {
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}


/* =========================================================
   SITE SHELL
   ========================================================= */

.site-shell {
  position: relative;

  z-index: 1;

  width:
    min(
      var(--design-width),
      100vw
    );

  min-height: 100svh;

  margin: 0 auto;

  background:
    transparent;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.8),
    var(--luxury-shadow);
}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.invitation-locked {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  /* overflow: hidden !important; */
}

body.invitation-locked .site-shell {
  height: 100svh;
  min-height: 100svh;
}


/* =========================================================
   VIDEO OPENING SCREEN
   ========================================================= */

.opening {
  position: fixed;
  inset: 0;
  z-index: 99999;

  width: 100vw;
  height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;

  overflow: hidden;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}


/*
 * The actual 440 × 956 wedding canvas.
 * On phones it fills the available screen.
 * On larger desktop screens it remains proportional.
 */

.opening-video-wrapper {
  position: relative;

  width: min(100vw, calc(100svh * 440 / 956));
  height: min(100svh, calc(100vw * 956 / 440));

  max-width: 440px;
  max-height: 956px;

  aspect-ratio: 440 / 956;

  overflow: hidden;

  background: transparent;
}


/*
 * Video
 */


.opening-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  background: transparent;

  z-index: 1;
}

/*
 * Optional subtle overlay.
 */

.opening-video-overlay {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.02) 55%,
      rgba(0, 0, 0, 0.18) 100%
    );

   display: none;  
}


/*
 * TAP BUTTON
 */

.opening-tap-button {
  position: absolute;

  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);

  z-index: 5;

  border: 0;
  outline: none;

  background: transparent;

  color: #fff;

  font-family: "Times New Roman", serif;
  font-size: clamp(18px, 4.5vw, 25px);
  font-weight: 600;

  letter-spacing: 0.04em;

  cursor: pointer;

  padding: 24px 24px;

  white-space: nowrap;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(255, 255, 255, 0.25);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/*
 * Small elegant underline
 */

.opening-tap-button::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 2px;

  width: 58%;

  height: 1px;

  transform: translateX(-50%);

  background: rgba(255, 255, 255, 0.8);

  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.45);

  transition:
    width 0.35s ease,
    opacity 0.35s ease;
}


/*
 * Subtle idle animation.
 */

.opening-tap-button {
  animation: tapPromptFloat 2.4s ease-in-out infinite;
}

@keyframes tapPromptFloat {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-5px);
  }

}


/*
 * Hover
 */

.opening-tap-button:hover {
  transform: translateX(-50%) scale(1.04);
}

.opening-tap-button:hover::after {
  width: 72%;
}


/*
 * Once the video starts
 */

.opening.is-playing .opening-tap-button {
  opacity: 0;
  pointer-events: none;
  animation: none;
}


/*
 * Opening screen disappearing
 */

.opening.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/*
 * Main invitation starts hidden.
 */

/*  */




/*
 * Reveal the invitation after the opening video.
 */

body.invitation-open .invitation {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}


/*
 * Desktop:
 * Keep the 440 × 956 canvas centered.
 */

@media (min-width: 441px) and (min-height: 957px) {

  .opening-video-wrapper {
    width: 440px;
    height: 956px;
  }

}


/*
 * Mobile:
 * Always use the available viewport while
 * maintaining the 440:956 ratio.
 */

@media (max-width: 440px) {

  .opening-video-wrapper {
    width: 100vw;
    height: 100vh;

    max-width: none;
    max-height: none;

    aspect-ratio: 440 / 956;
  }

}


/* =========================================================
   MAIN INVITATION
   ========================================================= */


.invitation {
  position: relative;

  width: 100%;
  min-height: 100svh;

  overflow: visible;

  background: transparent;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.8s ease,
    visibility 0s linear 0.8s;

  z-index: 1;
}

.invitation.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 0.8s ease,
    visibility 0s linear 0s;
}


.invitation-content {
  position: relative;
  z-index: 2;
  width: 100%;
}


/* =========================================================
   ANIMATED BORDER BACKGROUND
   440 x 956 FIXED FRAME
   ========================================================= */





/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  min-height: 100svh;
  height: 100svh;

  padding:
    95px 28px 70px;

  display: grid;

  place-items: center;

  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 32%,
      rgba(255,255,255,.98),
      rgba(250,242,232,.95) 55%,
      rgba(242,228,211,.94)
    );
}

.hero::before {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  top: 140px;
  left: -140px;

  border-radius: 50%;

  background:
    rgba(139,14,25,.05);

  filter: blur(30px);
}

.hero::after {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  right: -140px;
  bottom: 100px;

  border-radius: 50%;

  background:
    rgba(185,145,82,.09);

  filter: blur(30px);
}

.hero-inner {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 345px;
}


/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

.small-script {
  margin:
    15px 0 0;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 17px;

  font-style: italic;
}

.hero h1 {
  margin:
    16px auto 12px;

  color: #5d0710;

  font-family: var(--script);

  font-size: clamp(68px, 18vw, 88px);

  font-weight: 400;

  line-height: .9;

  letter-spacing: -.03em;

  text-shadow:
    0 8px 25px rgba(112,20,25,.08);
}

.hero h1 span {
  display: inline-block;

  animation:
    name-float
    5s
    ease-in-out
    infinite;
}

.hero h1 span:last-child {
  animation-delay: -2s;
}

@keyframes name-float {
  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-3px);
  }
}

.hero-subtitle {
  margin:
    20px 0 25px;

  color: var(--gold);

  font-family: var(--sans);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .32em;

  text-transform: uppercase;
}


/* =========================================================
   HERO DIVIDER
   ========================================================= */

.hero-divider {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 13px;

  margin:
    20px auto;
}

.hero-divider span {
  width: 58px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold),
      transparent
    );
}

.hero-divider i {
  color: var(--gold);

  font-size: 15px;

  font-style: normal;
}


/* =========================================================
   HERO DATE & LOCATION
   ========================================================= */

.hero-date {
  margin:
    28px 0 7px;

  color: var(--red);

  font-family: var(--sans);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .22em;
}

.hero-place {
  max-width: 280px;

  margin:
    10px auto 30px;

  color: var(--muted);

  font-family: var(--sans);

  font-size: 8px;

  line-height: 1.8;

  letter-spacing: .17em;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.gold-button,
.map-button {
  display: inline-flex;

  min-height: 43px;

  align-items: center;
  justify-content: center;

  padding:
    0 24px;

  border:
    1px solid rgba(185,145,82,.7);

  border-radius: 50px;

  color: var(--red-dark);

  /* background:
    rgba(255,255,255,.68); */

  box-shadow:
    0 8px 20px rgba(90,50,30,.06);

  text-decoration: none;

  font-family: var(--sans);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .16em;

  text-transform: uppercase;

  transition:
    all .35s cubic-bezier(.2,.8,.2,1);
}

.gold-button:hover,
.map-button:hover {
  color: white;

  background: var(--red);

  border-color: var(--red);

  transform:
    translateY(-3px);

  box-shadow:
    0 13px 30px rgba(139,14,25,.22);
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
  position: relative;

  padding:
    82px 28px;

  text-align: center;

  overflow: hidden;
}

.section > * {
  position: relative;

  z-index: 2;
}


/* Decorative gold section line */

.section::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 90px;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(185,145,82,.65),
      transparent
    );
}

/* .section:nth-of-type(even) {
  background:
    linear-gradient(
      180deg,
      rgba(248,239,228,.72),
      rgba(255,250,245,.95)
    );
} */

/* .section:nth-of-type(odd) {
  background:
    var(--ivory);
} */


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.section h2 {
  max-width: 330px;

  margin:
    7px auto 20px;

  color: var(--red-dark);

  font-family: var(--serif);

  font-size: 45px;

  font-weight: 500;

  line-height: .95;

  letter-spacing: -.025em;
}

.section h2::after {
  content: "✦";

  display: block;

  margin-top: 16px;

  color: var(--gold);

  font-size: 14px;

  font-weight: 400;
}


/* =========================================================
   BODY COPY
   ========================================================= */
.body-copy {
  max-width: 320px;
  margin: 0 auto;
  color: var(--muted);

  font-size: clamp(14px, 3.8vw, 19px);

  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.01em;
}


.flourish {
  margin-top: 30px;
  color: var(--gold);
  font-size: 30px;
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

/* .counter-section {
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(185,145,82,.12),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #fbf3e9,
      #fffaf5
    );
} */

.countdown {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 9px;

  max-width: 355px;

  margin:
    35px auto 0;
}

.countdown div {
  padding:
    20px 5px 17px;

  border:
    1px solid rgba(185,145,82,.22);

  border-radius: 16px;

  background:
    rgba(255,255,255,.74);

  box-shadow:
    0 10px 25px rgba(80,45,30,.05);
}

.countdown strong {
  display: block;

  color: #5D0710;

  font-family: var(--serif);

  font-size: 32px;

  font-weight: 600;

  line-height: 1;
}

.countdown span {
  display: block;

  margin-top: 9px;

  color: var(--gold);

  font-family: var(--sans);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .15em;

  text-transform: uppercase;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {
  position: relative;

  max-width: 340px;

  margin:
    38px auto 0;

  text-align: left;
}

.timeline::before {
  content: "";

  position: absolute;

  top: 18px;
  bottom: 20px;

  left: 22px;

  width: 1px;

  background:
    linear-gradient(
      transparent,
      var(--gold),
      rgba(185,145,82,.15),
      transparent
    );
}

.timeline-item {
  position: relative;

  display: grid;

  grid-template-columns:
    46px 1fr;

  gap: 18px;

  margin-bottom: 35px;
}

.timeline-icon {
  position: relative;

  z-index: 2;

  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border:
    1px solid rgba(185,145,82,.7);

  border-radius: 50%;

  background:
    var(--paper);

  color:
    var(--red);

  box-shadow:
    0 7px 18px rgba(90,50,30,.07);

  font-size: 17px;
}

.timeline-time {
  color:
    var(--gold);

  font-family:
    var(--sans);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: .2em;
}

.timeline-content h3 {
  margin:
    6px 0 5px;

  color:
    var(--red-dark);

  font-family:
    var(--serif);

  font-size: 29px;

  font-weight: 600;
}

.timeline-content p {
  margin: 0;

  color:
    var(--muted);

  font-size: 15px;

  line-height: 1.5;
}

.timeline-place {
  display: inline-block;

  margin-top: 8px;

  color:
    var(--gold);

  font-family:
    var(--sans);

  font-size: 7px;

  letter-spacing: .15em;
}


/* =========================================================
   GALLERY
   ========================================================= */

/* .gallery-section {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(185,145,82,.08),
      transparent 25%
    ),
    #f8efe5;
} */

.gallery-grid {
  display: grid;

  grid-template-columns:
    1.08fr .92fr;

  grid-auto-rows:
    150px;

  gap: 10px;

  margin-top: 35px;
}

.gallery-card {
  position: relative;

  min-width: 0;
  min-height: 0;

  padding: 0;

  border: 0;

  border-radius: 14px;

  overflow: hidden;

  cursor: pointer;

  background:
    var(--cream);

  box-shadow:
    0 10px 25px rgba(70,35,20,.09);
}

.gallery-card.tall {
  grid-row:
    span 2;
}


.gallery-card.wide {
  grid-column:
    1 / -1;
}

.gallery-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 60%,
      rgba(50,20,15,.12)
    );

  pointer-events: none;
}

.gallery-card img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform .8s cubic-bezier(.2,.75,.2,1);
}


.gallery-card:hover img,
.gallery-card:focus-visible img {
  transform:
    scale(1.08);
}

.asset-hint {
  max-width: 310px;

  margin:
    16px auto 0;

  color:
    #9b8275;

  font-family:
    var(--sans);

  font-size: 7px;

  letter-spacing: .06em;
}


/* =========================================================
   VENUE / MAP
   ========================================================= */

.map-card {
  max-width: 350px;

  margin:
    32px auto 0;

  overflow: hidden;

  border:
    1px solid rgba(185,145,82,.20);

  border-radius: 22px;

  background:
    rgba(255,255,255,.76);

  box-shadow:
    var(--card-shadow);

  text-align: left;
}

.map-art {
  position: relative;
  height: 150px;
  overflow: hidden;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* St. Andrew's Church */
.ceremony-map {
  background-image:
    linear-gradient(
      rgba(70, 20, 15, 0.12),
      rgba(70, 20, 15, 0.12)
    ),
    url("assets/st-andrew's-church.png");
}

/* Keserval Gardens */
.reception-map {
  background-image:
    linear-gradient(
      rgba(70, 20, 15, 0.12),
      rgba(70, 20, 15, 0.12)
    ),
    url("assets/kesarval-garden.jpg");
}


.map-copy {
  padding:
    23px 21px 24px;
}

.map-copy > span {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.map-copy h3 {
  margin:
    7px 0 8px;

  color:
    var(--red-dark);

  font-family:
    var(--serif);

  font-size: 30px;

  font-weight: 600;

  line-height: 1;
}

.map-copy p {
  margin:
    0 0 18px;

  color:
    var(--muted);

  font-size: 15px;

  line-height: 1.55;
}




/* =========================================================
   FAQ
   ========================================================= */


   /* =========================================================
   FAQ
   ========================================================= */


.faq-list {
  max-width: 350px;

  margin:
    35px auto 0;

  text-align: left;
}

.faq-list details {
  margin-bottom: 10px;

  border:
    1px solid rgba(185,145,82,.18);

  border-radius: 14px;

  background:
    rgba(255,255,255,.65);

  overflow: hidden;

  transition:
    all .3s ease;
}

.faq-list details[open] {
  background:
    white;

  box-shadow:
    0 10px 25px rgba(70,35,20,.06);
}

.faq-list summary {
  list-style: none;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    18px;

  color:
    var(--red-dark);

  cursor: pointer;

  font-family:
    var(--serif);

  font-size: 19px;

  font-weight: 600;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color:
    var(--gold);

  font-family:
    var(--sans);

  font-size: 16px;

  transition:
    transform .3s ease;
}

.faq-list details[open]
summary span {
  transform:
    rotate(45deg);
}

.faq-list details p {
  margin:
    0 20px 20px;

  color:
    var(--muted);

  font-size: 15px;

  line-height: 1.6;
}


.faq-section {
  position: relative;
  padding-bottom: 80px;
}

.faq-section::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 0px;


  width: 105px;
  height: 1px;

  background: linear-gradient(
    to right,
    transparent,
    var(--gold),
    rgba(185,145,82,.15),
    transparent
  );

  transform: translateX(-50%);

  /* opacity: .55; */




  /* content: "";

  position: absolute;

  top: 18px;
  bottom: 20px;

  left: 22px;

  width: 1px;

  background:
    linear-gradient(
      transparent,
      var(--gold),
      rgba(185,145,82,.15),
      transparent
    ); */
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  position: relative;

  padding:
    85px 28px 55px;

  text-align: center;

  /* background:
    radial-gradient(
      circle at 50% 0,
      rgba(139,14,25,.10),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #f7ebdf,
      #f1e2d3
    ); */
}

.footer-flower {
  margin-bottom: 15px;

  color:
    var(--gold);

  font-size: 34px;
}

.footer h2 {
  margin:
    10px 0 12px;

  color:
    var(--red-dark);

  font-family:
    'Times New Roman', cursive;

  font-size: 72px;

  font-weight: 400;

  line-height: .9;
}

.footer p:not(.section-kicker) {
  max-width: 280px;

  margin:
    0 auto;

  color:
    var(--muted);

  font-family:
    var(--serif);

  font-size: 17px;

  line-height: 1.6;
}

.footer-line {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin:
    30px 0 18px;
}

.footer-line::before,
.footer-line::after {
  content: "";

  width: 65px;
  height: 1px;

  background:
    var(--gold);

  opacity: .55;
}

.footer small {
  color:
    #a7866f;

  font-family:
    var(--sans);

  font-size: 6px;

  letter-spacing: .23em;

  text-transform: uppercase;
}


/* =========================================================
   FLOATING BUTTERFLIES
   ========================================================= */

.floating-butterflies {
  position: absolute;

  inset: 0;

  z-index: 8;

  pointer-events: none;
}

.mini-butterfly {
  position: absolute;

  display: block;

  font-size: 20px;

  opacity: .48;

  filter:
    sepia(.7)
    saturate(.8);

  animation:
    mini-flight
    8s
    ease-in-out
    infinite;
}

.mb-1 {
  top: 14%;
  left: 8%;

  animation-delay: -1s;
}

.mb-2 {
  top: 37%;
  right: 6%;

  font-size: 17px;

  animation-delay: -4s;
}

.mb-3 {
  top: 67%;
  left: 7%;

  font-size: 15px;

  animation-delay: -6s;
}

@keyframes mini-flight {
  0%,
  100% {
    transform:
      translate(0,0)
      rotate(-7deg);
  }

  30% {
    transform:
      translate(9px,-13px)
      rotate(7deg);
  }

  65% {
    transform:
      translate(-4px,8px)
      rotate(-3deg);
  }
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    rgba(30, 13, 11, .88);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}

.lightbox.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


/* Lightbox image */

.lightbox img {
  display: block;

  width: auto;
  height: auto;

  max-width:
    min(900px, 92vw);

  max-height:
    88svh;

  object-fit: contain;

  object-position: center center;

  border:
    1px solid rgba(255,255,255,.18);

  box-shadow:
    0 25px 80px
    rgba(0,0,0,.55);

  transform:
    scale(.96);

  transition:
    transform .35s cubic-bezier(.22,.61,.36,1);
}

.lightbox.is-open img {
  transform:
    scale(1);
}


/* =========================================================
   LIGHTBOX CLOSE BUTTON
   ========================================================= */

.lightbox-close {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 46px;
  height: 46px;

  padding: 0;

  border:
    1px solid
    rgba(255,255,255,.55);

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: white;

  background:
    rgba(255,255,255,.08);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-family:
    Arial,
    sans-serif;

  font-size: 28px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transition:
    transform .25s ease,
    background .25s ease;

  z-index: 2;
}

.lightbox-close:hover {
  background:
    var(--red);

  transform:
    rotate(90deg)
    scale(1.06);
}

.lightbox-close:active {
  transform:
    rotate(90deg)
    scale(.94);
}


/* =========================================================
   LIGHTBOX BODY LOCK
   ========================================================= */

body.lightbox-open {
  overflow: hidden;
}


/* =========================================================
   OPENING COUPLE ANIMATION
   ========================================================= */

.couple-scene {
  position: absolute;

  inset: 0;

  width:
    min(
      var(--design-width),
      100vw
    );

  height: 100svh;

  left: 50%;

  transform:
    translateX(-50%);

  overflow: hidden;
}


/* Bride */

.bride {
  position: absolute;

  left: 0;
  bottom: 0;

  height: 92%;

  max-height: 880px;

  object-fit: contain;

  transform:
    translateX(0);

  transition:
    transform 1.8s cubic-bezier(.22,.61,.36,1);

  z-index: 3;
}


/* Groom */

.groom {
  position: absolute;

  right: 0;
  bottom: 0;

  height: 92%;

  max-height: 880px;

  object-fit: contain;

  transform:
    translateX(0);

  transition:
    transform 1.8s cubic-bezier(.22,.61,.36,1);

  z-index: 3;
}


/* Ribbon */

.ribbon {
  position: absolute;

  top: 52%;
  left: 0;

  width: 100%;

  transform:
    translateY(-50%);

  object-fit: contain;

  transition:
    transform 1.2s ease,
    width 1.2s ease,
    opacity 1s ease;

  z-index: 2;
}


/* Tap overlay */

.open-overlay {
  position: absolute;

  inset: 0;

  z-index: 10;

  border: none;

  background: transparent;

  cursor: pointer;

  font-size: 0;
}


/* =========================================================
   OPENING ANIMATION STATES
   ========================================================= */


/* Groom pulls ribbon */

.opening.animate .ribbon {
  width: 10%;

  transform:
    translate(200%, -50%);

  opacity: 0;
}


/* Bride moves */

.opening.animate .bride {
  transform:
    translateX(65%);
}


/* Groom moves */

.opening.animate .groom {
  transform:
    translateX(-35%);
}


/* Final meeting */

.opening.animate.meet .bride {
  transform:
    translateX(48%);
}

.opening.animate.meet .groom {
  transform:
    translateX(-48%);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.opening-card:focus-visible {
  outline:
    2px solid rgba(185,145,82,.8);

  outline-offset:
    6px;
}


/* =========================================================
   MOBILE DESIGN
   ========================================================= */

@media (max-width: 440px) {

  .site-shell {
    width: 100vw;

    box-shadow: none;
  }

  .opening {
    width: 100%;

    height: 100svh;
  }

  .opening-card {
    width: 74%;

    min-width: 260px;
    min-height: 390px;
  }

  .hero {
    min-height: 100svh;
    height: 100svh;

    padding:
      85px 25px 60px;
  }

  .section {
    padding:
      72px 25px;
  }

  .section h2 {
    font-size: 42px;
  }

  /* .body-copy {
    font-size: 14px;
  } */

  .countdown {
    gap: 7px;
  }

  .countdown strong {
    font-size: 28px;
  }

  .bride,
  .groom {
    height: 85%;
  }

  .ribbon {
    width: 80%;
  }

  .footer h2 {
    font-size: 76px;
  }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 441px) {

  .site-shell {
    min-height: 100svh;
  }

  .hero {
    min-height: 100svh;
    height: 100svh;
  }
}


/* =========================================================
   SHORT DESKTOP SCREENS
   ========================================================= */

@media (max-height: 760px)
and (min-width: 441px) {

  .opening-card {
    height: 62%;

    min-height: 420px;
  }

  .opening-copy {
    transform:
      scale(.94);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }
}


@media (max-width: 440px) {

  .lightbox {
    padding: 16px;
  }

  .lightbox img {
    max-width: 94vw;

    max-height: 84svh;
  }

  .lightbox-close {
    top: 14px;
    right: 14px;

    width: 42px;
    height: 42px;

    font-size: 25px;
  }
}


/* =========================================================
   SCROLL REVEAL ANIMATION SYSTEM
   ========================================================= */


/* -----------------------------------------
   DEFAULT HIDDEN STATE
----------------------------------------- */

.reveal {
  opacity: 0;

  transform: translate3d(0, 45px, 0);

  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform;
}


/* -----------------------------------------
   REVEAL FROM LEFT
----------------------------------------- */

.reveal-left {
  opacity: 0;

  transform: translate3d(-55px, 0, 0);

  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform;
}


/* -----------------------------------------
   REVEAL FROM RIGHT
----------------------------------------- */

.reveal-right {
  opacity: 0;

  transform: translate3d(55px, 0, 0);

  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform;
}


/* -----------------------------------------
   REVEAL WITH SCALE
----------------------------------------- */

.reveal-scale {
  opacity: 0;

  transform:
    scale(.92)
    translateY(25px);

  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}


/* -----------------------------------------
   ACTIVE STATE
----------------------------------------- */

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;

  transform:
    translate(0,0)
    scale(1);
}


/* =========================================================
   STAGGER DELAYS
   ========================================================= */

.delay-1 {
  transition-delay: .1s;
}

.delay-2 {
  transition-delay: .2s;
}

.delay-3 {
  transition-delay: .3s;
}

.delay-4 {
  transition-delay: .4s;
}

.delay-5 {
  transition-delay: .5s;
}

.delay-6 {
  transition-delay: .6s;
}


/* =========================================================
   SECTION REVEAL
   ========================================================= */

.section-animate {
  opacity: 0;

  transform:
    translateY(70px);

  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.section-animate.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   HEADING REVEAL
   ========================================================= */

.reveal-heading {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}

.reveal-heading.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   GOLD LINE ANIMATION
   ========================================================= */

.reveal-line {
  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform
    1s
    cubic-bezier(.22,.61,.36,1);
}

.reveal-line.is-visible {
  transform:
    scaleX(1);
}


/* =========================================================
   COUNTDOWN CARDS
   ========================================================= */

.countdown div {
  opacity: 0;

  transform:
    translateY(35px)
    scale(.95);

  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
}

.countdown.is-visible div {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* Countdown stagger */

.countdown.is-visible div:nth-child(1) {
  transition-delay: .1s;
}

.countdown.is-visible div:nth-child(2) {
  transition-delay: .2s;
}

.countdown.is-visible div:nth-child(3) {
  transition-delay: .3s;
}

.countdown.is-visible div:nth-child(4) {
  transition-delay: .4s;
}


/* =========================================================
   TIMELINE ANIMATION
   ========================================================= */

.timeline-item {
  opacity: 0;

  transform:
    translateX(-45px);

  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}

.timeline.is-visible .timeline-item {
  opacity: 1;

  transform:
    translateX(0);
}

.timeline.is-visible .timeline-item:nth-child(1) {
  transition-delay: .1s;
}

.timeline.is-visible .timeline-item:nth-child(2) {
  transition-delay: .25s;
}

.timeline.is-visible .timeline-item:nth-child(3) {
  transition-delay: .4s;
}

.timeline.is-visible .timeline-item:nth-child(4) {
  transition-delay: .55s;
}

.timeline.is-visible .timeline-item:nth-child(5) {
  transition-delay: .7s;
}


/* =========================================================
   TIMELINE ICON POP
   ========================================================= */

.timeline-icon {
  transition:
    transform .5s cubic-bezier(.34,1.56,.64,1),
    box-shadow .5s ease;
}

.timeline.is-visible .timeline-icon {
  animation:
    icon-pop
    .7s
    cubic-bezier(.34,1.56,.64,1)
    forwards;
}

@keyframes icon-pop {
  0% {
    transform:
      scale(0);
  }

  70% {
    transform:
      scale(1.12);
  }

  100% {
    transform:
      scale(1);
  }
}


/* =========================================================
   GALLERY REVEAL
   ========================================================= */

.gallery-card {
  opacity: 0;

  transform:
    translateY(35px)
    scale(.96);

  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}

.gallery-grid.is-visible .gallery-card {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}





/* Gallery stagger */

.gallery-grid.is-visible .gallery-card:nth-child(1) {
  transition-delay: .1s;
}

.gallery-grid.is-visible .gallery-card:nth-child(2) {
  transition-delay: .2s;
}

.gallery-grid.is-visible .gallery-card:nth-child(3) {
  transition-delay: .3s;
}

.gallery-grid.is-visible .gallery-card:nth-child(4) {
  transition-delay: .4s;
}

.gallery-grid.is-visible .gallery-card:nth-child(5) {
  transition-delay: .5s;
}

.gallery-grid.is-visible .gallery-card:nth-child(6) {
  transition-delay: .6s;
}


/* =========================================================
   MAP CARD REVEAL
   ========================================================= */

.map-card {
  opacity: 0;

  transform:
    translateY(50px)
    scale(.97);

  transition:
    opacity 1s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1);
}

.map-card.is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   FAQ REVEAL
   ========================================================= */

.faq-list details {
  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    transform .65s cubic-bezier(.22,.61,.36,1),
    background .3s ease,
    box-shadow .3s ease;
}

.faq-list.is-visible details {
  opacity: 1;

  transform:
    translateY(0);
}

.faq-list.is-visible details:nth-child(1) {
  transition-delay: .1s;
}

.faq-list.is-visible details:nth-child(2) {
  transition-delay: .2s;
}

.faq-list.is-visible details:nth-child(3) {
  transition-delay: .3s;
}

.faq-list.is-visible details:nth-child(4) {
  transition-delay: .4s;
}

.faq-list.is-visible details:nth-child(5) {
  transition-delay: .5s;
}


/* =========================================================
   FOOTER REVEAL
   ========================================================= */

.footer > * {
  opacity: 0;

  transform:
    translateY(35px);

  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}

.footer.is-visible > * {
  opacity: 1;

  transform:
    translateY(0);
}

.footer.is-visible > *:nth-child(1) {
  transition-delay: .1s;
}

.footer.is-visible > *:nth-child(2) {
  transition-delay: .2s;
}

.footer.is-visible > *:nth-child(3) {
  transition-delay: .3s;
}

.footer.is-visible > *:nth-child(4) {
  transition-delay: .4s;
}

.footer.is-visible > *:nth-child(5) {
  transition-delay: .5s;
}


/* =========================================================
   UNIVERSAL SCROLL REVEAL ANIMATIONS
   ========================================================= */

/* Anything marked for animation starts hidden */

.scroll-animate {
  opacity: 0;

  transform:
    translateY(55px);

  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    opacity,
    transform;
}


/* When it enters the viewport */

.scroll-animate.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ---------------------------------------------------------
   Different animation directions
   --------------------------------------------------------- */

.scroll-animate.from-left {
  transform:
    translateX(-70px);
}

.scroll-animate.from-right {
  transform:
    translateX(70px);
}

.scroll-animate.from-left.is-visible,
.scroll-animate.from-right.is-visible {
  transform:
    translateX(0);
}

.scroll-animate.zoom-in {
  transform:
    scale(0.82);
}

.scroll-animate.zoom-in.is-visible {
  transform:
    scale(1);
}

.scroll-animate.fade-only {
  transform: none;
}

.scroll-animate.fade-only.is-visible {
  transform: none;
}


/* ---------------------------------------------------------
   Staggered children
   --------------------------------------------------------- */

.scroll-stagger > .scroll-animate:nth-child(1) {
  transition-delay: 0.05s;
}

.scroll-stagger > .scroll-animate:nth-child(2) {
  transition-delay: 0.15s;
}

.scroll-stagger > .scroll-animate:nth-child(3) {
  transition-delay: 0.25s;
}

.scroll-stagger > .scroll-animate:nth-child(4) {
  transition-delay: 0.35s;
}

.scroll-stagger > .scroll-animate:nth-child(5) {
  transition-delay: 0.45s;
}

.scroll-stagger > .scroll-animate:nth-child(6) {
  transition-delay: 0.55s;
}


/* ---------------------------------------------------------
   Images
   --------------------------------------------------------- */

img.scroll-animate {
  transform:
    translateY(45px)
    scale(0.94);
}

img.scroll-animate.is-visible {
  transform:
    translateY(0)
    scale(1);
}


/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */

.section.scroll-section {
  position: relative;
}


/* ---------------------------------------------------------
   Timeline animation
   --------------------------------------------------------- */

.timeline-item.scroll-animate {
  transform:
    translateX(-55px);
}

.timeline-item.scroll-animate:nth-child(even) {
  transform:
    translateX(55px);
}

.timeline-item.scroll-animate.is-visible {
  transform:
    translateX(0);
}


/* ---------------------------------------------------------
   Gallery cards
   --------------------------------------------------------- */

.gallery-card.scroll-animate {
  transform:
    translateY(55px)
    scale(0.92);
}

.gallery-card.scroll-animate.is-visible {
  transform:
    translateY(0)
    scale(1);
}


/* ---------------------------------------------------------
   Map cards
   --------------------------------------------------------- */

.map-card.scroll-animate {
  transform:
    translateY(60px);
}

.map-card.scroll-animate.is-visible {
  transform:
    translateY(0);
}


/* ---------------------------------------------------------
   FAQ items
   --------------------------------------------------------- */

.faq-list details.scroll-animate {
  transform:
    translateY(35px);
}

.faq-list details.scroll-animate.is-visible {
  transform:
    translateY(0);
}


/* ---------------------------------------------------------
   Reduced motion accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .scroll-animate,
  .scroll-animate.from-left,
  .scroll-animate.from-right,
  .scroll-animate.zoom-in,
  img.scroll-animate,
  .timeline-item.scroll-animate,
  .timeline-item.scroll-animate:nth-child(even),
  .gallery-card.scroll-animate,
  .map-card.scroll-animate,
  .faq-list details.scroll-animate {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }
}





/* @media (min-width: 441px) {

  .site-fixed-frame {
    width: var(--design-width);
    height: var(--design-height);

    top: 50%;
    left: 50%;

    transform:
      translate(-50%, -50%);
  }

} */


/* =========================================================
   MOBILE
   KEEP CURRENT MOBILE BEHAVIOR
   ========================================================= */

/* @media (max-width: 440px) {

  .site-fixed-frame {
    width: 100vw;
    height: 100svh;

    top: 0;
    left: 0;

    transform: none;

    overflow: hidden;
  }

  .site-fixed-frame img {
    width: 100%;
    height: 100%;

    object-fit: fill;
    object-position: center;
  }
} */




/* =========================================
   WEDDING VIDEO — FIRST FULL SCREEN
   ========================================= */

.wedding-video-section {
  position: relative;

  width: 100%;
  height: 100svh;
  min-height: 100svh;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


/* =========================================
   VIDEO WRAPPER
   ========================================= */

.wedding-video-wrapper {
  position: relative;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


/* =========================================
   VIDEO
   ========================================= */

.wedding-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: center center;
}


/* =========================================
   VIDEO OVERLAY
   ========================================= */

.wedding-video-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background: rgba(0, 0, 0, 0.15);

  pointer-events: none;
}


/* =========================================
   VIDEO CONTENT
   ========================================= */

.wedding-video-content {
  position: absolute;

  z-index: 3;

  left: 50%;
  top: auto;
  bottom: 35%;

  width: min(90%, 800px);

  margin: 0;
  padding: 0;

  transform: translateX(-50%);

  box-sizing: border-box;

  text-align: center;

  color: #5d0710;

  pointer-events: none;

  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.45),
    0 1px 4px rgba(0, 0, 0, 0.3);
    
}


/* =========================================
   FRANCIS & NATALINA
   ========================================= */

.wedding-video-content h2 {
  margin: 0;
  padding: 0;

  font-family: "Cinzel Decorative", serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;

  color: #030303;

  text-shadow:
    0 0 7px rgba(225, 190, 125, 0.95),
    0 0 14px rgba(215, 175, 105, 0.85),
    0 0 22px rgba(205, 160, 90, 0.75),
    0 0 35px rgba(195, 145, 75, 0.60),
    0 0 52px rgba(180, 130, 65, 0.45),
    0 0 70px rgba(165, 115, 55, 0.30),
    0 2px 9px rgba(120, 80, 35, 0.35);
}


/* =========================================
   F AND N — ALLURA
   ========================================= */

.wedding-video-content h2 .initial-f,
.wedding-video-content h2 .initial-n {
  font-family: "Monstar", sans-serif;

  font-weight: 400;

  font-style: normal;

  display: inline-block;
}



/* =========================================
   AMPERSAND
   ========================================= */

.wedding-video-content h2 .ampersand {
  font-family: "Cinzel Decorative", serif;
  /* font-size: 1em; */
  font-style: normal;
  margin: 0 0.12em;
  color: #030303;
}


/* =========================================
   ARE GETTING MARRIED
   ========================================= */

.video-subtitle {
  margin: 10px 0 0;
  padding: 0;

  font-family: "Cinzel Decorative", serif;
  font-size: clamp(1.15rem, 2.1vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;

  color: #030303;

  text-shadow:
    0 0 7px rgba(225, 190, 125, 0.95),
    0 0 14px rgba(215, 175, 105, 0.85),
    0 0 22px rgba(205, 160, 90, 0.75),
    0 0 35px rgba(195, 145, 75, 0.60),
    0 0 52px rgba(180, 130, 65, 0.45),
    0 0 70px rgba(165, 115, 55, 0.30),
    0 2px 9px rgba(120, 80, 35, 0.35);
}


.video-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(150px, 55%);
  height: 12px;
  margin: 14px auto 8px;
}

.video-divider span {
  flex: 1;
  height: 1px;
  opacity: 0.8;
  background: linear-gradient(
    to right,
    transparent,
    rgba(45, 28, 14, 0.25) 10%,
    rgba(45, 28, 14, 0.75) 75%,
    #24170c
  );
  filter: blur(0.25px);
}

.video-divider span:last-of-type {
  background: linear-gradient(
    to left,
    transparent,
    rgba(45, 28, 14, 0.25) 10%,
    rgba(45, 28, 14, 0.75) 75%,
    #24170c
  );
}

.video-divider i {
  width: 6px;
  height: 6px;
  margin: 0 3px;
  border-radius: 50%;
  background: #21140a;
  box-shadow:
    0 0 2px rgba(185, 138, 69, 0.7),
    0 0 4px rgba(185, 138, 69, 0.25);
  font-size: 0;
}


/* =========================================
   DATE
   ========================================= */

.video-date {
  margin: 0;
  padding: 0;

  font-family: "Cinzel Decorative Bold";
font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.15;

  color: #030303;


  -webkit-text-stroke: 0.65px #c49a45;

  text-shadow:
    0 0 7px rgba(225, 190, 125, 0.95),
    0 0 14px rgba(215, 175, 105, 0.85),
    0 0 22px rgba(205, 160, 90, 0.75),
    0 0 35px rgba(195, 145, 75, 0.60),
    0 0 52px rgba(180, 130, 65, 0.45),
    0 0 70px rgba(165, 115, 55, 0.30),
    0 2px 9px rgba(120, 80, 35, 0.35);
}

.video-date sup {
  font-family: "Times New Roman", serif;
  font-size: 0.8em;
  line-height: 0;
  vertical-align: super;
  font-weight: 800;
}

.video-date .date-number {
  font-family: "Times New Roman", serif;
  font-size: 1.15em;
  font-weight: 900;
  letter-spacing: 0.01em;
}


/* =========================================
   DESKTOP / TABLET
   440 × 956 MASTER CANVAS
   ========================================= */

@media (min-width: 441px) {

  .wedding-video-section {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    margin-left: auto;
    margin-right: auto;
  }


  .wedding-video-wrapper {
    width: 100%;
    height: 100%;
  }


  .wedding-video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
  }


  .wedding-video-content {
    top: 7%;

    width: min(90%, 800px);
  }

}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) and (min-width: 601px) {

  .wedding-video-content {
    top: 7%;

    width: 92%;
  }

  .wedding-video-content h2 {

    font-size: clamp(1.5rem, 7.5vw, 3rem);

    line-height: 0.95;

    margin: 0;
  }


  .video-subtitle {

    margin-top: 16px;

    font-size: 1.1rem;

    letter-spacing: 0.1em;

    line-height: 1.4;
  }


  /* ==============================
     DIVIDER
     ============================== */

  .video-divider {

    width: 180px;

    gap: 10px;

    margin: 17px auto 14px;
  }


  /* ==============================
     DATE
     ============================== */

  .video-date {

    font-size: 2.2rem;

    font-weight: 800;

    /* letter-spacing: 0.1em; */

    line-height: 1.4;
  }


}


/* =========================================
   MOBILE
   FIRST SECTION = EXACTLY ONE SCREEN
   ========================================= */

@media (max-width: 600px) {

  .wedding-video-section {
    width: 100vw;

    height: 100svh;

    min-height: 100svh;

    margin: 0;
    padding: 0;
  }


  .wedding-video-wrapper {
    width: 100%;

    height: 100%;

    margin: 0;
    padding: 0;
  }


  .wedding-video {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    display: block;
  }


  /* ==============================
     TEXT — TOP
     ============================== */

  .wedding-video-content {
    position: absolute;

    left: 50%;

    top: 9%;

    bottom: auto;

    width: 92%;

    margin: 0;

    padding: 0;

    transform: translateX(-50%);

    text-align: center;
  }


  /* ==============================
     NAMES
     ============================== */

  .wedding-video-content h2 {

    font-size: 42px;

    line-height: 0.95;

    margin: 0;
  }


  /* ==============================
     SUBTITLE
     ============================== */

  .video-subtitle {

    margin-top: 10px;

    font-size: 1.2rem;

    letter-spacing: 0.01em;

    line-height: 1.4;
  }


  /* ==============================
     DIVIDER
     ============================== */

  .video-divider {

    width: 180px;

    gap: 10px;

    margin: 9px auto 7px;
  }


  /* ==============================
     DATE
     ============================== */

  .video-date {

    font-size: 1.9rem;

    font-weight: 700;

    letter-spacing: 0.01em;

    line-height: 1.2;
  }

}


/* =========================================
   VERY SMALL PHONES
   ========================================= */

@media (max-width: 380px) {

  .wedding-video-content {

    top: 5%;
  }


  .wedding-video-content h2 {

    font-size: 34px;

    line-height: 0.95;
  }


  .video-subtitle {

    font-size: 1rem;

    letter-spacing: 0.01em;
  }


  .video-divider {

    width: 160px;

    margin-top: 15px;

    margin-bottom: 12px;
  }


  .video-date {

    font-size: 1.6rem;

    letter-spacing: 0.01em;
  }

}

.footer h2 .initial-f,
.footer h2 .initial-n {
  font-family: "Cinzel Decorative Bold", cursive;
  font-weight: 600;
  font-style: normal;
  display: inline-block;
}





/* =========================================================
   TIMELINE — TIME & LOCATION
   ========================================================= */

.timeline-time {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
}

.timeline-content h3 {
  margin: 6px 0 5px;
  color: var(--red-dark);
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 600;
  line-height: 1;
}

.timeline-content p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.timeline-place {
  display: inline-block;
  margin-top: 9px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.09em;
}


/* =========================================================
   VENUE / MAP — TIME & LOCATION
   ========================================================= */

.map-copy {
  padding: 23px 21px 24px;
}

.map-copy > span {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
}

.map-copy h3 {
  margin: 7px 0 8px;
  color: var(--red-dark);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

.map-copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
}


/* =========================================================
   TIME & LOCATION — MOBILE
   ========================================================= */

@media (max-width: 440px) {

  .timeline-time {
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .timeline-place {
    font-size: 8.5px;
    letter-spacing: 0.07em;
    line-height: 1.45;
  }

  .map-copy > span {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .map-copy p {
    font-size: 16px;
    line-height: 1.5;
  }

}








/* =========================================================
   FLOATING WEDDING MUSIC BUTTON
   ========================================================= */

.music-player {
  position: fixed;
  z-index: 2147483647;

  right: 1.5rem;
  bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));

  width: 56px;
  height: 56px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(12px) scale(0.92);

  transition:
    opacity 0.5s ease,
    visibility 0.5s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.music-player.music-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.music-toggle {
  position: relative;

  width: 56px;
  height: 56px;

  padding: 0;
  margin: 0;

  border: 1px solid rgba(184, 134, 11, 0.5);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #8b1e2d;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.98),
      rgba(255, 250, 244, 0.96) 55%,
      rgba(242, 227, 208, 0.96)
    );

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 8px 24px rgba(62, 24, 24, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5);

  cursor: pointer;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.music-toggle:hover {
  transform: scale(1.08);

  box-shadow:
    0 10px 30px rgba(62, 24, 24, 0.24),
    0 0 0 4px rgba(184, 134, 11, 0.08);
}

.music-toggle:active {
  transform: scale(0.93);
}

.music-toggle:focus-visible {
  outline: 2px solid #b8860b;
  outline-offset: 4px;
}


/* =========================================================
   MUSIC ICONS
   ========================================================= */

.music-icon {
  position: absolute;

  width: 25px;
  height: 25px;

  display: block;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.music-icon-playing {
  opacity: 1;
  transform: scale(1);
}

.music-icon-paused {
  opacity: 0;
  transform: scale(0.7);
}

.music-player.is-paused .music-icon-playing {
  opacity: 0;
  transform: scale(0.7);
}

.music-player.is-paused .music-icon-paused {
  opacity: 1;
  transform: scale(1);
}


/* =========================================================
   MUSIC BUTTON STATES
   ========================================================= */

.music-icon {
  display: none;
}

.music-icon-playing {
  display: block;
}

.music-toggle.is-muted .music-icon-playing {
  display: none;
}

.music-toggle.is-muted .music-icon-paused {
  display: block;
}




.music-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: none !important;
}

#speakerIcon {
  display: block !important;
}

#muteIcon {
  display: none !important;
}

.music-toggle.is-muted #speakerIcon {
  display: none !important;
}

.music-toggle.is-muted #muteIcon {
  display: block !important;
}


/* =========================================================
   HIDE MUSIC CONTROL DURING OPENING VIDEO
   ========================================================= */

/* body.invitation-locked .music-player {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.92) !important;
} */

/* Show music control after opening video is finished */
/* body:not(.invitation-locked) .music-player {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
} */


/* =========================================================
   SUBTLE GOLD PULSE
   ========================================================= */

.music-toggle::before {
  content: "";

  position: absolute;
  inset: -5px;

  border-radius: 50%;

  border: 1px solid rgba(184, 134, 11, 0.28);

  pointer-events: none;

  animation: weddingMusicPulse 2.8s ease-in-out infinite;
}

@keyframes weddingMusicPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.25;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.65;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .music-player {
    right: 1rem;
    bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  }

  .music-toggle {
    width: 52px;
    height: 52px;
  }

  .music-icon {
    width: 23px;
    height: 23px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {
  .music-player {
    right: 0.75rem;
  }

  .music-toggle {
    width: 48px;
    height: 48px;
  }

  .music-icon {
    width: 22px;
    height: 22px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .music-toggle::before {
    animation: none;
  }
}



.music-player {
  display: block !important;
  position: fixed !important;
  right: 30px !important;
  bottom: 30px !important;
  width: 60px !important;
  height: 60px !important;
  z-index: 2147483647 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.music-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  background: white !important;
  color: rgb(0, 0, 0) !important;
  border: 2px solid rgb(17, 17, 17) !important;
}

.music-icon {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: rgb(0, 0, 0) !important;
}




/* =========================================================
   WEDDING VIDEO — FULL FIRST SCREEN
   Source video: 720 × 1280
   ========================================================= */

.wedding-video-section {
  position: relative;

  width: 100%;
  height: 100svh;
  min-height: 100svh;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

.wedding-video-wrapper {
  position: relative;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

.wedding-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  margin: 0;
  padding: 0;

  /*
     IMPORTANT:
     Cover the entire available screen.
     The video keeps its original aspect ratio.
     Edges may be cropped depending on screen ratio.
  */
  object-fit: cover;
  object-position: center center;
}


/* =========================================================
   MOBILE — FULL DEVICE VIEWPORT
   ========================================================= */

@media (max-width: 440px) {

  .wedding-video-section {
    width: 100vw;

    height: 100svh;
    min-height: 100svh;

    margin: 0;
    padding: 0;

    overflow: hidden;
  }

  .wedding-video-wrapper {
    width: 100%;
    height: 100%;

    min-height: 0;

    margin: 0;
    padding: 0;
  }

  .wedding-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
  }
}


/* =========================================================
   DESKTOP / TABLET
   Keep your 440 × 956 master design
   ========================================================= */

@media (min-width: 441px) {

  .wedding-video-section {
    width: 100%;
    height: 100svh;
    min-height: 100svh;

    margin-left: auto;
    margin-right: auto;
  }

  .wedding-video-wrapper {
    width: 100%;
    height: 100%;

    min-height: 0;
  }

  .wedding-video {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
  }
}


/* =========================================================
   IMPORTANT — REMOVE OLD MOBILE HEIGHT OVERRIDES
   ========================================================= */

@media (max-width: 900px) {

  .wedding-video-wrapper {
    height: 100svh;
    min-height: 100svh;
  }
}

@media (max-width: 600px) {

  .wedding-video-wrapper {
    height: 100svh;
    min-height: 100svh;
  }
}

@media (max-width: 380px) {

  .wedding-video-wrapper {
    height: 100svh;
    min-height: 100svh;
  }
}



/* =========================================================
   MOBILE / SMALL SCREENS
   Resize border animation to screen
   ========================================================= */

/* @media (max-width: 440px) {

  .site-border-background {
    top: 0;
    left: 0;

    width: 100vw;
    height: 100svh;

    transform: none;

    overflow: hidden;
  }

  .border-background-video {
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;
  }
  
} */






.map-copy > span {
  font-size: 12px !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
}







/* =====================================================
   OPENING TAP BUTTON — WRAPPER (centers the button)
   ===================================================== */

.opening-tap-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 25%;

  width: 100%;              /* full width so margin: auto works cleanly */
  max-width: max-content;   /* never wider than the button */
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 20;

  /* No transform, no animation on the wrapper itself */
  transform: none;

  /* Fade-out handled here so the button's float animation
     doesn't interfere with the disappearing transition */
  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;

  pointer-events: auto;
}


/* =====================================================
   OPENING TAP BUTTON (the actual clickable text)
   ===================================================== */

.opening-tap-button {
  position: relative;

  left: auto;
  right: auto;
  top: auto;
  bottom: auto;

  margin: 0;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  white-space: nowrap;

  /* IMPORTANT: no -50% X shift here.
     The wrapper centers it with flex. */
  transform: translateY(0);

  /* Gentle floating animation only on Y axis */
  animation: gentleTapFloat 1.8s ease-in-out infinite;

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

@keyframes gentleTapFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}


/* =====================================================
   UNDERLINE
   ===================================================== */

.opening-tap-button::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 2px;

  width: 58%;
  height: 1px;

  transform: translateX(-50%);

  background: rgba(255, 255, 255, 0.8);

  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);

  transition: width 0.35s ease, opacity 0.35s ease;
}

.opening-tap-button:hover::after {
  width: 72%;
}


/* =====================================================
   HOVER
   ===================================================== */

.opening-tap-button:hover {
  /* Scale is fine — the wrapper stays put, only the
     button grows slightly. No X translate. */
  transform: translateY(0) scale(1.04);
  animation-play-state: paused;
}


/* =====================================================
   HIDE WHEN VIDEO STARTS PLAYING
   Stays exactly where it is — only opacity fades.
   ===================================================== */

.opening.is-playing .opening-tap-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.opening.is-playing .opening-tap-button {
  /* Freeze the float animation so it doesn't drift */
  animation: none;

  /* Lock to the neutral position — NO translateX,
     NO -50% X shift, so it doesn't slide left. */
  transform: translateY(0) !important;
}





/* =====================================================
   PARENTS
   ===================================================== */

 .invitation-opening-copy {
    margin-bottom: 18px;
    font-weight: 600;

    color: black;

  }

  .parents-block {
    margin: 20px auto;
  }

  .parents-block p {
    margin: 10px 0;

    font-weight: 600;

    white-space: nowrap;
  }

  .parents-block strong {
    display: inline-block;

    /* font-family: "Monstserrat"; */
    font-size: clamp(14px, 3.6vw, 16.5px);

    /* Slightly bolder, but still elegant */
    font-weight: 700;

    line-height: 1.3;

    color:
    var(--red-dark);

    letter-spacing: 0.01em;
  }

  .invitation-closing-copy {
    margin-top: 20px;
    font-weight: 600;

    color: black;
  }




/* =====================================================
   SPECIAL DAY — ACCESSIBILITY / READABILITY
   ===================================================== */

.timeline-time-large {
  display: inline-block;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;

  padding: 7px 14px;
  border: 1px solid rgba(170, 130, 70, 0.55);
  border-radius: 20px;

  /* color: #7c6237; */
  background: rgba(255, 250, 244, 0.75);

  box-shadow:
    0 2px 8px rgba(124, 98, 55, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.timeline-place {
  display: block;
  margin-top: 10px;

  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.35;
}



/* =========================================================
   FIXED SCROLL FOR MORE DETAILS
   Hidden until opening animation is complete
   ========================================================= */

.scroll-details-overlay {
  position: fixed;
  left: 0;
  bottom: 28px;
  width: 100%;
  height: auto;

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 999999;
  pointer-events: none;

  /* Hidden initially */
  opacity: 0;
  visibility: hidden;

  transform: translateY(12px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;

    
}


/* =========================================================
   SHOW AFTER OPENING VIDEO
   ========================================================= */

.scroll-details-overlay.show {
  opacity: 1;
  visibility: visible;

  animation: scrollDetailsFloat 1.2s ease-in-out infinite;
}


/* =========================================================
   WHOLE INDICATOR FLOATING ANIMATION
   ========================================================= */

@keyframes scrollDetailsFloat {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }

  100% {
    transform: translateY(0);
  }

}


/* =========================================================
   CONTENT
   ========================================================= */

.scroll-details-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 9px;
  text-align: center;
}


/* =========================================================
   TEXT
   ========================================================= */

.scroll-details-text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}


/* =========================================================
   MOUSE
   ========================================================= */

.scroll-mouse {
  width: 24px;
  height: 45px;

  border: 2px solid #f1eaeb;
  border-radius: 14px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: 7px;
  box-sizing: border-box;

  background: rgba(255, 250, 244, 0.15);
}


/* =========================================================
   MOUSE WHEEL
   ========================================================= */

.scroll-wheel {
  display: block;

  width: 4px;
  height: 8px;

  border-radius: 999px;
  background: #ffffff;

  animation: scrollWheelMove 1.5s ease-in-out infinite;
}


@keyframes scrollWheelMove {

  0% {
    opacity: 0;
    transform: translateY(0);
  }

  20% {
    opacity: 1;
  }

  60% {
    opacity: 1;
    transform: translateY(13px);
  }

  100% {
    opacity: 0;
    transform: translateY(18px);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .scroll-details-overlay {
    bottom: 25px;
  }

  .scroll-details-text {
    font-size: 11px;
    letter-spacing: 1.7px;
  }

  .scroll-mouse {
    width: 23px;
    height: 42px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .scroll-details-overlay {
    bottom: 22px;
  }

  .scroll-details-content {
    gap: 8px;
  }

  .scroll-details-text {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .scroll-mouse {
    width: 22px;
    height: 41px;
  }

}



/* =========================================================
   ANIMATED BORDER BACKGROUND
   FIXED TO VIEWPORT — DOES NOT SCROLL WITH CONTENT
   ========================================================= */

.site-border-background {
  position: fixed;

  top: 0;
  left: 50%;

  width: min(440px, 100vw);
  height: 100vh;

  transform: translateX(-50%);

  z-index: 0;
  pointer-events: none;

  overflow: hidden;
  background: transparent;

  /* Prevent accidental interaction */
  touch-action: none;
}


/* =========================================================
   BORDER BACKGROUND VIDEO
   ========================================================= */

.border-background-video {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: fill;
  object-position: center center;

  opacity: 0.9;

  pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 440px) {

  .site-border-background {
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    transform: none;

    overflow: hidden;
  }

  .border-background-video {
    width: 100%;
    height: 100%;

    object-fit: fill;
    object-position: center center;
  }
}








.countdown-celebration {
  display: none;
  margin-top: 30px;

  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 600;
  line-height: 1.2;

  color: #6f1d2b;
  text-align: center;

  animation: celebrationFadeIn 0.8s ease forwards;
}

.countdown-celebration.show {
  display: block;
}


@keyframes celebrationFadeIn {

  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}



.invitation-opening-copy,
.invitation-closing-copy {
  font-weight: 500;
}



/* =========================================================
   OPENING VIDEO LOADER
   ========================================================= */

.opening-loader {
  position: absolute;
  inset: 0;

  z-index: 100;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 12px;

  background: #fffaf4;

  color: var(--red-dark);

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}


/* Hide loader */

.opening-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}


/* Spinner */

.opening-loader-spinner {
  width: 24px;
  height: 24px;

  border: 2px solid rgba(111, 29, 43, 0.18);
  border-top-color: var(--red-dark);

  border-radius: 50%;

  animation:
    openingLoaderSpin
    0.8s linear infinite;
}


/* Text */

.opening-loader-text {
  font-family:
    "Montserrat",
    sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


@keyframes openingLoaderSpin {

  to {
    transform: rotate(360deg);
  }

}






/* While loading, hide tap button and overlay text */
.opening-video-wrapper.is-loading .opening-tap-wrap,
.opening-video-wrapper.is-loading .opening-video-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Smooth fade-in once first frame is ready */
.opening-tap-wrap,
.opening-video-overlay {
  transition: opacity 0.4s ease;
}

/* Make sure the video itself is always the first thing painted */
.opening-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}


.invitation {
  opacity: 0;
  visibility: hidden;
}

.invitation.is-visible {
  opacity: 1;
  visibility: visible;
}



/* =========================================================
   PRELOAD GATE
   While body.preload-pending is active, hide everything
   except the opening video frame itself.
   ========================================================= */

/* 1. Hide the opening video's overlay text + tap button */
body.preload-pending .opening-video-overlay,
body.preload-pending .opening-tap-wrap {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Hide the entire invitation layer */
body.preload-pending .invitation {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 3. Hide floating butterflies */
body.preload-pending .floating-butterflies {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 4. Hide scroll details indicator */
body.preload-pending .scroll-details-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 5. Hide the music player */
body.preload-pending .music-player {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 6. Optionally hide the animated border background
      until the first frame is ready (avoids flash). */
body.preload-pending .site-border-background {
  opacity: 0 !important;
}

/* Smooth fade-in once preload-pending is removed */
.opening-video-overlay,
.opening-tap-wrap,
.invitation,
.floating-butterflies,
.music-player,
.scroll-details-overlay,
.site-border-background {
  transition: opacity 0.45s ease;
}




/* =========================================================
   FINAL SCROLL SYSTEM — SINGLE SOURCE OF TRUTH
   Only TWO states:
     1. body.opening-active  → scroll LOCKED (opening video playing)
     2. body.invitation-open → scroll UNLOCKED (after video)
   ========================================================= */

/* -----------------------------------------
   BASE — html and body
----------------------------------------- */

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  /* overscroll-behavior-y removed: it can interfere
     with iOS scroll restoration in some versions. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  height: auto;
  color: var(--ink);
  font-family: var(--serif);
  background:
    radial-gradient(circle at 10% 10%, rgba(185, 145, 82, .12), transparent 28%),
    radial-gradient(circle at 90% 85%, rgba(139, 14, 25, .08), transparent 30%),
    #e9dfd4;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* overscroll-behavior-y removed for same reason as html */
  -webkit-text-size-adjust: 100%;
}

/* -----------------------------------------
   STATE 1 — OPENING ACTIVE (SCROLL LOCKED)
----------------------------------------- */

body.opening-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  overflow: hidden !important;
  touch-action: none !important;
}

/* -----------------------------------------
   STATE 2 — INVITATION OPEN (SCROLL UNLOCKED)
----------------------------------------- */

body.invitation-open {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

body.opening-active.invitation-open {
  position: relative !important;
  height: auto !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
}

/* -----------------------------------------
   SITE SHELL
----------------------------------------- */

.site-shell {
  position: relative;
  z-index: 1;
  width: min(var(--design-width), 100vw);
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  margin: 0 auto;
  overflow: visible;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .8),
    var(--luxury-shadow);
}

body.opening-active .site-shell {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

body.invitation-open .site-shell {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  overflow: visible !important;
}

/* -----------------------------------------
   INVITATION
----------------------------------------- */

.invitation {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  overflow: visible;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.8s ease,
    visibility 0s linear 0.8s;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.invitation.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.8s ease,
    visibility 0s linear 0s;
}

.invitation-content {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: visible;
  height: auto;
  -webkit-overflow-scrolling: touch;
}

/* -----------------------------------------
   OPENING OVERLAY
----------------------------------------- */

.opening {
  position: fixed;
  inset: 0;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  touch-action: none;
  overscroll-behavior: contain;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

.opening.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: auto;
}

.opening-video-wrapper {
  position: relative;
  width: min(100vw, calc(100svh * 440 / 956));
  height: min(100svh, calc(100vw * 956 / 440));
  max-width: 440px;
  max-height: 956px;
  aspect-ratio: 440 / 956;
  overflow: hidden;
  background: transparent;
}

.opening-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: transparent;
  z-index: 1;
}

.opening-video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

.opening.is-transparent-mode,
.opening.is-transparent-mode .opening-video-wrapper,
.opening.is-transparent-mode .opening-video {
  background: transparent !important;
  background-color: transparent !important;
}

/* -----------------------------------------
   HERO — use svh only (dvh is what was stale)
----------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  padding: 95px 28px 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(
    circle at 50% 32%,
    rgba(255, 255, 255, .98),
    rgba(250, 242, 232, .95) 55%,
    rgba(242, 228, 211, .94)
  );
}

/* -----------------------------------------
   WEDDING VIDEO SECTION
----------------------------------------- */

.wedding-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wedding-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.wedding-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center center;
}

/* -----------------------------------------
   SCROLL DETAILS OVERLAY
----------------------------------------- */

.scroll-details-overlay {
  position: fixed;
  left: 0;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
  touch-action: none;
}

.scroll-details-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  animation: scrollDetailsFloat 1.2s ease-in-out infinite;
}

@keyframes scrollDetailsFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

/* -----------------------------------------
   MOBILE OVERRIDES
----------------------------------------- */

@media (max-width: 440px) {
  .site-shell {
    width: 100vw;
    box-shadow: none;
  }

  .opening-video-wrapper {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    max-width: none;
    max-height: none;
    aspect-ratio: 440 / 956;
  }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 85px 25px 60px;
  }

  .scroll-details-overlay {
    bottom: calc(25px + env(safe-area-inset-bottom, 0px));
  }
}

/* -----------------------------------------
   iOS SAFE AREA
----------------------------------------- */

@supports (-webkit-touch-callout: none) {
  .scroll-details-overlay {
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  .music-player {
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
    right: max(1.5rem, calc(env(safe-area-inset-right, 0px) + 1rem)) !important;
  }

  a, button, .gallery-card, .faq-list summary {
    -webkit-tap-highlight-color: transparent;
  }
}

/* -----------------------------------------
   TOUCH ACTION
----------------------------------------- */

.site-shell,
.invitation,
.invitation-content,
.section,
.timeline,
.gallery-grid,
.faq-list,
.map-card {
  touch-action: pan-y;
}

button,
a,
.gallery-card,
.faq-list summary,
.music-toggle {
  touch-action: manipulation;
}

.lightbox {
  touch-action: none;
}

.lightbox img {
  touch-action: pinch-zoom;
}

/* -----------------------------------------
   PRELOAD GATE
----------------------------------------- */

body.preload-pending .opening-video-overlay,
body.preload-pending .opening-tap-wrap,
body.preload-pending .floating-butterflies,
body.preload-pending .scroll-details-overlay,
body.preload-pending .music-player,
body.preload-pending .site-border-background {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.opening-video-overlay,
.opening-tap-wrap,
.invitation,
.floating-butterflies,
.music-player,
.scroll-details-overlay,
.site-border-background {
  transition: opacity 0.45s ease;
}