:root {
  --wine: #751b35;
  --wine-2: #8d2945;
  --wine-3: #4a0c20;
  --wine-4: #27050f;

  --rose: #b35b73;
  --rose-soft: #d79bac;

  --cream: #fff8ee;
  --cream-2: #f3e5d1;
  --cream-3: #dfc7a4;

  --gold: #c8a26a;
  --gold-soft: #ecd1a5;

  --dark: #2f1720;
  --white: #fffdf8;

  --shadow-soft:
    0 24px 70px rgba(62, 16, 33, .12);

  --shadow-deep:
    0 42px 95px rgba(50, 8, 23, .22);

  --serif: "Amiri", serif;
  --sans: "Noto Kufi Arabic", sans-serif;
}


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

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


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-width: 320px;

  overflow: hidden;

  color: var(--dark);

  background:
    var(--wine-4);

  font-family:
    var(--sans);
}


img,
svg {
  display: block;

  max-width: 100%;
}


button,
a {
  font: inherit;
}


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


a {
  color: inherit;

  text-decoration: none;
}


.app {
  position: relative;

  min-height: 100svh;

  overflow: clip;
}


/* =========================================================
   OPENING
========================================================= */

.opening {
  position: fixed;

  inset: 0;

  z-index: 999;

  display: grid;

  place-items: center;

  overflow: hidden;

  perspective: 1700px;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 240, 191, .32),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #f8f1e4 0%,
      #eadcc9 100%
    );

  box-shadow:
    0 42px 90px
    rgba(86, 59, 29, .22);
}


.opening::before {
  content: "";

  position: absolute;

  inset: -20%;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, .65),
      transparent 24%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(220, 178, 91, .16),
      transparent 28%
    );

  filter:
    blur(25px);

  animation:
    openingAmbient
    9s
    ease-in-out
    infinite
    alternate;
}


@keyframes openingAmbient {

  to {
    transform:
      translate3d(
        2%,
        -1%,
        0
      )
      scale(1.04);
  }

}


/* =========================================================
   ENVELOPE STAGE
========================================================= */

.invitation-stage {
  position: relative;

  width:
    min(
      100vw,
      590px
    );

  height:
    100svh;

  min-height:
    620px;

  perspective:
    1800px;

  transform-style:
    preserve-3d;

  filter:
    drop-shadow(
      0
      25px
      38px
      rgba(83, 60, 32, .20)
    );
}


/* =========================================================
   ENVELOPE PLANES
========================================================= */

.envelope-plane {
  position: absolute;

  inset: 0;

  overflow: hidden;

  transform-style:
    preserve-3d;

  backface-visibility:
    hidden;

  will-change:
    transform,
    opacity,
    filter;
}


.envelope-plane img {
  width: 100%;

  height: 100%;

  object-fit:
    cover;

  object-position:
    center;

  user-select:
    none;

  pointer-events:
    none;
}


#closedPlane {
  z-index: 3;
}


#glowPlane {
  z-index: 4;

  opacity: 0;
}


#openPlane {
  z-index: 2;

  opacity: 0;

  transform:
    scale(1.015);
}


/* =========================================================
   3D FLAP
========================================================= */

.flap-3d {
  position: absolute;

  z-index: 11;

  left: 0;
  top: 0;

  width: 100%;
  height: 56%;

  overflow: hidden;

  clip-path:
    polygon(
      0 0,
      100% 0,
      50% 100%
    );

  transform-origin:
    50% 0%;

  transform-style:
    preserve-3d;

  backface-visibility:
    hidden;

  opacity: 0;

  filter:
    drop-shadow(
      0
      9px
      9px
      rgba(60, 42, 20, .20)
    );

  will-change:
    transform,
    opacity;
}


.flap-3d img {
  position: absolute;

  width: 100%;

  height:
    100svh;

  min-height:
    620px;

  object-fit:
    cover;

  object-position:
    center top;

  pointer-events:
    none;
}


.flap-3d::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .10),
      rgba(171, 124, 48, .08)
    );
}


/* =========================================================
   SEAL BUTTON
========================================================= */

.seal-hotspot {
  position: absolute;

  z-index: 30;

  left: 50%;
  top: 50.9%;

  width:
    clamp(
      108px,
      24vw,
      145px
    );

  aspect-ratio:
    1;

  border: 0;

  border-radius:
    50%;

  cursor:
    pointer;

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

  background:
    transparent;

  outline:
    none;

  transform-style:
    preserve-3d;
}


.seal-hotspot::before,
.seal-hotspot::after {
  content: "";

  position: absolute;

  border-radius:
    50%;

  pointer-events:
    none;
}


.seal-hotspot::before {
  inset: -8%;

  border:
    1px solid
    rgba(203, 159, 78, .45);

  box-shadow:
    0 0 0 0
    rgba(218, 170, 74, .35);

  animation:
    sealPulse
    1.9s
    ease-out
    infinite;
}


.seal-hotspot::after {
  inset: -26%;

  opacity: 0;

  transform:
    scale(.6);

  filter:
    blur(10px);

  background:
    radial-gradient(
      circle,
      rgba(255, 225, 137, .55),
      rgba(255, 206, 86, .12) 46%,
      transparent 70%
    );
}


@keyframes sealPulse {

  0% {
    transform:
      scale(.90);

    opacity:
      .85;

    box-shadow:
      0 0 0 0
      rgba(218, 170, 74, .35);
  }


  75%,
  100% {
    transform:
      scale(1.16);

    opacity:
      0;

    box-shadow:
      0 0 0 20px
      rgba(218, 170, 74, 0);
  }

}


/* =========================================================
   TAP LABEL
========================================================= */

.tap-label {
  position: absolute;

  z-index: 31;

  left: 50%;
  bottom: 3.5%;

  transform:
    translateX(-50%);

  padding-left:
    .32em;

  white-space:
    nowrap;

  color:
    rgba(102, 78, 50, .58);

  font:
    500
    10px/1
    var(--sans);

  letter-spacing:
    .24em;

  text-transform:
    uppercase;

  text-shadow:
    0 1px
    rgba(255, 255, 255, .5);
}


.tap-label span {
  display: inline-block;

  width: 4px;
  height: 4px;

  margin-inline-end:
    9px;

  border-radius:
    50%;

  vertical-align:
    2px;

  background:
    var(--gold);

  box-shadow:
    0 0 10px
    rgba(218, 170, 74, .8);
}


/* =========================================================
   OPENING EFFECTS
========================================================= */

.gold-wash,
.opening-flash,
.spark-field,
.opening-edge {
  position: absolute;

  inset: 0;

  pointer-events:
    none;
}


.gold-wash {
  z-index: 20;

  opacity: 0;

  mix-blend-mode:
    screen;

  background:
    radial-gradient(
      circle at 50% 51%,
      rgba(255, 245, 197, .82) 0 5%,
      rgba(255, 215, 107, .40) 9%,
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 51%,
      transparent 0 10%,
      rgba(255, 205, 94, .15) 26%,
      transparent 60%
    );
}


.gold-wash::after {
  content: "";

  position: absolute;

  inset: -30%;

  background:
    conic-gradient(
      from 0deg,

      transparent 0 8deg,

      rgba(255, 230, 150, .14)
      10deg 15deg,

      transparent
      18deg 55deg,

      rgba(255, 214, 106, .12)
      58deg 65deg,

      transparent
      68deg 125deg,

      rgba(255, 236, 181, .18)
      127deg 132deg,

      transparent
      136deg 220deg,

      rgba(255, 216, 107, .14)
      224deg 230deg,

      transparent
      234deg 300deg,

      rgba(255, 234, 167, .12)
      302deg 308deg,

      transparent
      312deg
    );

  filter:
    blur(5px);

  animation:
    raySpin
    8s
    linear
    infinite;
}


@keyframes raySpin {

  to {
    transform:
      rotate(360deg);
  }

}


.opening-flash {
  z-index: 40;

  opacity: 0;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 255, 232, .95),
      rgba(255, 218, 117, .25) 28%,
      transparent 62%
    );
}


.spark-field {
  z-index: 45;

  overflow:
    hidden;
}


.spark {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius:
    50%;

  opacity:
    0;

  background:
    #ffe69b;

  box-shadow:
    0 0 8px #ffd36f,
    0 0 18px
    rgba(255, 218, 123, .55);
}


/* =========================================================
   OPEN CONFIRMATION
========================================================= */

.open-confirmation {
  position: absolute;

  z-index: 70;

  left: 50%;
  bottom: 5.4%;

  transform:
    translate(
      -50%,
      18px
    );

  opacity: 0;

  pointer-events:
    none;

  white-space:
    nowrap;

  color:
    rgba(133, 92, 38, .72);

  font:
    500
    9px/1
    var(--sans);

  letter-spacing:
    .28em;

  text-transform:
    uppercase;

  text-shadow:
    0 1px
    rgba(255, 255, 255, .72);
}


.open-confirmation::before {
  content: "";

  display: inline-block;

  width: 24px;
  height: 1px;

  margin-inline-end:
    11px;

  vertical-align:
    3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #bd8c3d
    );
}


.opening-edge {
  z-index: 998;

  top: auto;
  bottom: -1px;

  height: 34px;

  opacity: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .76),
      rgba(207, 166, 92, .10) 35%,
      transparent
    );

  box-shadow:
    0 18px 38px
    rgba(92, 62, 26, .18);
}


/* =========================================================
   DETAILS
========================================================= */

.details {
  position: relative;

  display: block;

  min-height:
    100svh;

  opacity: 0;

  transform:
    translateY(24px)
    scale(.985);

  color:
    var(--dark);

  background:
    linear-gradient(
      180deg,
      #fffaf2,
      #f7ecdc 60%,
      #fffaf4
    );

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


.details.visible {
  opacity: 1;

  transform:
    none;
}


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

.reveal {
  opacity:
    0;

  transform:
    translateY(36px);

  transition:
    opacity
    .9s
    ease,

    transform
    .9s
    cubic-bezier(.2, .8, .2, 1);
}


.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


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

.details-hero {
  position: relative;

  min-height:
    100svh;

  display:
    grid;

  place-items:
    center;

  padding:
    80px
    20px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255, 255, 255, .95),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #fffaf3 0%,
      #f5e9da 100%
    );
}


/* =========================================================
   BOTANICAL DECORATION
========================================================= */

.botanical {
  position:
    absolute;

  width:
    min(
      300px,
      28vw
    );

  color:
    var(--wine);

  opacity:
    .24;

  pointer-events:
    none;
}


.botanical.top {
  top:
    -18px;

  right:
    -18px;
}


.botanical.bottom {
  bottom:
    -28px;

  left:
    -30px;

  transform:
    rotate(180deg);
}


/* =========================================================
   MAIN CARD
========================================================= */

.main-card.luxury-card {
  --card-burgundy:
    #741b36;

  --card-burgundy-dark:
    #3b0a1b;

  --card-gold:
    #cda66b;

  --card-gold-light:
    #efd29e;


  position:
    relative;

  width:
    min(
      94%,
      690px
    );

  margin:
    auto;

  padding:
    58px
    34px
    55px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(122, 31, 61, .11);

  border-radius:
    34px;

  color:
    #4f3438;

  perspective:
    1800px;

  transform-style:
    preserve-3d;

  isolation:
    isolate;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255, 255, 255, .96),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #fffdf8 0%,
      #faf3e9 48%,
      #f2e4d4 100%
    );

  box-shadow:
    0 60px 120px
    rgba(53, 12, 26, .18),

    0 18px 45px
    rgba(91, 17, 42, .10),

    inset 0 1px 0
    rgba(255, 255, 255, .95);

  transition:
    transform
    .18s
    ease-out,

    box-shadow
    .35s
    ease;
}


.main-card.luxury-card::before {
  content: "";

  position:
    absolute;

  inset:
    15px;

  z-index:
    1;

  border:
    1px solid
    rgba(205, 166, 107, .25);

  border-radius:
    25px;

  pointer-events:
    none;
}


/* =========================================================
   CARD BACKGROUND CIRCLES
========================================================= */

.lux-bg-circle {
  position:
    absolute;

  z-index:
    0;

  border-radius:
    50%;

  border:
    1px solid
    rgba(117, 27, 53, .10);

  pointer-events:
    none;
}


.lux-bg-circle::after {
  content: "";

  position:
    absolute;

  inset:
    13px;

  border:
    1px solid
    rgba(200, 162, 106, .10);

  border-radius:
    inherit;
}


.circle-one {
  width:
    360px;

  height:
    360px;

  top:
    -150px;

  left:
    -150px;
}


.circle-two {
  width:
    270px;

  height:
    270px;

  right:
    -110px;

  bottom:
    115px;
}


/* =========================================================
   BURGUNDY PANEL
========================================================= */

.lux-maroon-panel {
  position:
    absolute;

  z-index:
    0;

  top:
    220px;

  right:
    -120px;

  width:
    330px;

  height:
    580px;

  border-radius:
    180px 0 0 180px;

  opacity:
    .98;

  transform:
    rotate(8deg);

  background:
    linear-gradient(
      180deg,
      var(--wine-2),
      var(--wine-4)
    );

  box-shadow:
    inset 16px 0 28px
    rgba(255, 255, 255, .06),

    -20px 24px 50px
    rgba(63, 8, 26, .15);
}


/* =========================================================
   GOLD LINES
========================================================= */

.lux-gold-line {
  position:
    absolute;

  z-index:
    2;

  width:
    1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(205, 166, 107, .75),
      transparent
    );
}


.gold-line-one {
  height:
    250px;

  top:
    82px;

  left:
    52px;

  transform:
    rotate(12deg);
}


.gold-line-two {
  height:
    300px;

  right:
    42px;

  bottom:
    90px;

  transform:
    rotate(-8deg);
}


/* =========================================================
   MONOGRAM
========================================================= */

.lux-monogram {
  position:
    relative;

  z-index:
    4;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    25px;
}


.lux-monogram i {
  color:
    var(--card-gold);

  font-size:
    18px;

  font-style:
    normal;
}


/* =========================================================
   BISMILLAH
========================================================= */

.lux-bismillah,
.lux-intro {
  position:
    relative;

  z-index:
    4;

  margin:
    0;

  text-align:
    center;

  font-family:
    var(--serif);
}


.lux-bismillah {
  margin-top:
    14px;

  color:
    var(--wine);

  font-size:
    clamp(
      24px,
      4vw,
      34px
    );

  line-height:
    1.4;
}


.lux-intro {
  margin-top:
    2px;

  color:
    #987f74;

  font-size:
    16px;
}


/* =========================================================
   PHOTO SCENE
========================================================= */

.photo-scene {
  position:
    relative;

  z-index:
    8;

  width:
    min(
      82%,
      430px
    );

  height:
    510px;

  margin:
    46px
    auto
    0;

  perspective:
    1400px;

  transform-style:
    preserve-3d;

  transition:
    transform
    .18s
    ease-out;
}


.photo-burgundy-shadow,
.photo-gold-frame,
.photo-frame {
  position:
    absolute;

  inset:
    0;

  border-radius:
    190px
    190px
    36px
    36px;
}


.photo-burgundy-shadow {
  z-index:
    1;

  transform:
    translate3d(
      30px,
      27px,
      -10px
    )
    rotate(3deg);

  background:
    linear-gradient(
      145deg,
      #8e2e4b,
      #4a0d21
    );

  box-shadow:
    0 35px 55px
    rgba(67, 10, 28, .30);
}


.photo-gold-frame {
  z-index:
    2;

  border:
    1px solid
    rgba(205, 166, 107, .82);

  transform:
    translate3d(
      -16px,
      -13px,
      12px
    )
    rotate(-2deg);

  box-shadow:
    inset 0 0 0 6px
    rgba(255, 248, 235, .38),

    0 12px 28px
    rgba(76, 44, 12, .10);
}


.photo-frame {
  z-index:
    3;

  overflow:
    hidden;

  transform:
    translateZ(45px);

  background:
    #ead9c6;

  box-shadow:
    0 30px 45px
    rgba(74, 18, 36, .22);
}


.couple-photo {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.photo-gradient {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(34, 4, 16, .42)
    ),
    linear-gradient(
      90deg,
      rgba(117, 27, 53, .07),
      transparent 45%
    );
}


.photo-shine {
  position:
    absolute;

  top:
    -20%;

  left:
    -45%;

  width:
    44%;

  height:
    150%;

  transform:
    rotate(12deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .34),
      transparent
    );

  animation:
    photoShine
    6s
    ease-in-out
    infinite;
}


@keyframes photoShine {

  0%,
  65% {
    left:
      -55%;

    opacity:
      0;
  }


  78% {
    opacity:
      .7;
  }


  100% {
    left:
      125%;

    opacity:
      0;
  }

}


/* =========================================================
   FLOATING FLOWER
========================================================= */

.floating-flower {
  position:
    absolute;

  z-index:
    7;

  left:
    -42px;

  top:
    57%;

  width:
    76px;

  height:
    76px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(205, 166, 107, .60);

  border-radius:
    50%;

  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    34px;

  transform:
    translateZ(90px);

  background:
    rgba(255, 250, 242, .88);

  box-shadow:
    0 18px 34px
    rgba(68, 20, 34, .14);

  backdrop-filter:
    blur(8px);

  animation:
    floatOrnament
    4s
    ease-in-out
    infinite;
}


@keyframes floatOrnament {

  50% {
    transform:
      translateZ(90px)
      translateY(-10px)
      rotate(7deg);
  }

}


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

.photo-date-badge {
  position:
    absolute;

  z-index:
    8;

  right:
    -45px;

  bottom:
    34px;

  width:
    92px;

  min-height:
    116px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(205, 166, 107, .45);

  border-radius:
    18px;

  color:
    var(--wine);

  transform:
    translateZ(110px);

  background:
    rgba(255, 250, 242, .92);

  box-shadow:
    0 22px 42px
    rgba(58, 12, 27, .18);

  backdrop-filter:
    blur(10px);
}


.photo-date-badge small,
.photo-date-badge span {
  color:
    #9b7a65;

  font-size:
    9px;

  letter-spacing:
    .16em;
}


.photo-date-badge strong {
  margin:
    3px 0;

  font-family:
    var(--serif);

  font-size:
    38px;

  line-height:
    .95;
}


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

.floating-names {
  position:
    relative;

  z-index:
    20;

  margin-top:
    -88px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  pointer-events:
    none;

  transform:
    translateZ(170px);

  transition:
    transform
    .18s
    ease-out;
}


.floating-bride,
.floating-groom {
  color:
    #fff9f2;

  font-family:
    var(--serif);

  font-size:
    clamp(
      52px,
      8vw,
      78px
    );

  line-height:
    .82;

  text-shadow:
    0 10px 24px
    rgba(54, 5, 21, .32),

    0 1px 0
    rgba(255, 255, 255, .16);
}


.floating-amp {
  margin:
    3px 0;

  color:
    var(--card-gold-light);

  font-family:
    var(--serif);

  font-size:
    25px;

  line-height:
    1;
}


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

.lux-content-panel {
  position:
    relative;

  z-index:
    9;

  width:
    calc(100% - 34px);

  margin:
    35px
    auto
    0;

  padding:
    45px
    28px
    30px;

  border:
    1px solid
    rgba(205, 166, 107, .18);

  border-radius:
    25px;

  transform:
    translateZ(35px);

  background:
    rgba(255, 252, 246, .82);

  box-shadow:
    0 25px 55px
    rgba(71, 17, 32, .08),

    inset 0 1px 0
    rgba(255, 255, 255, .8);

  backdrop-filter:
    blur(15px);

  transition:
    transform
    .18s
    ease-out;
}


/* =========================================================
   DIVIDERS
========================================================= */

.lux-divider,
.heading-divider,
.venue-title-line,
.notes-heading-line,
.countdown-divider {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;
}


.lux-divider span,
.heading-divider span,
.venue-title-line span,
.notes-heading-line span,
.countdown-divider span {
  width:
    66px;

  height:
    1px;

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


.lux-divider i,
.heading-divider i,
.venue-title-line i,
.notes-heading-line i,
.countdown-divider i {
  color:
    var(--gold);

  font-size:
    8px;

  font-style:
    normal;
}


/* =========================================================
   MESSAGE
========================================================= */

.lux-message {
  margin:
    23px
    auto
    0;

  max-width:
    520px;

  text-align:
    center;

  color:
    #6e5652;

  font-family:
    var(--serif);

  font-size:
    20px;

  line-height:
    1.9;
}


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

.lux-date-ticket {
  display:
    grid;

  grid-template-columns:
    1fr
    1.45fr
    1fr;

  align-items:
    stretch;

  gap:
    8px;

  margin-top:
    28px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(117, 27, 53, .10);

  border-radius:
    18px;

  background:
    rgba(255, 255, 255, .56);
}


.ticket-side,
.ticket-main {
  min-height:
    104px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.ticket-side {
  flex-direction:
    column;

  padding:
    13px
    8px;
}


.ticket-side small {
  color:
    #9a8177;

  font-size:
    9px;
}


.ticket-side strong {
  margin-top:
    6px;

  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    22px;

  font-weight:
    400;
}


.ticket-main {
  gap:
    10px;

  color:
    white;

  background:
    linear-gradient(
      145deg,
      var(--wine-2),
      var(--wine-3)
    );

  box-shadow:
    inset
    0
    0
    25px
    rgba(255, 255, 255, .04);
}


.ticket-main > span {
  font-family:
    var(--serif);

  font-size:
    50px;

  line-height:
    1;
}


.ticket-main div {
  display:
    flex;

  flex-direction:
    column;
}


.ticket-main strong {
  font-family:
    var(--serif);

  font-size:
    20px;

  font-weight:
    400;
}


.ticket-main small {
  color:
    rgba(255, 255, 255, .72);

  font-size:
    10px;
}


/* =========================================================
   TIME
========================================================= */

.lux-time {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  margin-top:
    20px;
}


.lux-time span {
  width:
    48px;

  height:
    1px;

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


.lux-time span:last-child {
  transform:
    scaleX(-1);
}


.lux-time p {
  margin:
    0;

  color:
    #826a61;

  font-family:
    var(--serif);

  font-size:
    16px;
}


/* =========================================================
   CARD GLOBAL SHINE
========================================================= */

.lux-global-shine {
  position:
    absolute;

  z-index:
    40;

  top:
    -25%;

  left:
    -40%;

  width:
    30%;

  height:
    160%;

  pointer-events:
    none;

  transform:
    rotate(14deg);

  opacity:
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .22),
      transparent
    );

  animation:
    globalCardShine
    8s
    ease-in-out
    infinite;
}


@keyframes globalCardShine {

  0%,
  72% {
    left:
      -40%;

    opacity:
      0;
  }


  80% {
    opacity:
      .45;
  }


  100% {
    left:
      120%;

    opacity:
      0;
  }

}


/* =========================================================
   VENUE SECTION
========================================================= */

.venue-section {
  position:
    relative;

  padding:
    120px
    20px
    130px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 10% 30%,
      rgba(117, 27, 53, .08),
      transparent 26%
    ),

    radial-gradient(
      circle at 90% 70%,
      rgba(200, 162, 106, .14),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      #f8eee1,
      #fffaf4
    );
}


/* =========================================================
   VENUE DECORATION
========================================================= */

.venue-glow,
.venue-ring {
  position:
    absolute;

  pointer-events:
    none;
}


.venue-glow {
  width:
    420px;

  height:
    420px;

  border-radius:
    50%;

  filter:
    blur(20px);
}


.venue-glow-one {
  top:
    4%;

  left:
    -160px;

  background:
    radial-gradient(
      circle,
      rgba(117, 27, 53, .14),
      transparent 70%
    );
}


.venue-glow-two {
  right:
    -150px;

  bottom:
    0;

  background:
    radial-gradient(
      circle,
      rgba(200, 162, 106, .20),
      transparent 70%
    );
}


.venue-ring {
  width:
    240px;

  height:
    240px;

  border:
    1px solid
    rgba(117, 27, 53, .10);

  border-radius:
    50%;
}


.venue-ring.ring-one {
  top:
    14%;

  right:
    -80px;
}


.venue-ring.ring-two {
  bottom:
    5%;

  left:
    -70px;
}


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

.venue-heading {
  position:
    relative;

  z-index:
    2;

  max-width:
    720px;

  margin:
    0
    auto
    68px;

  text-align:
    center;
}


.venue-mini-title,
.info-section-heading > span,
.notes-mini,
.countdown-mini-title {
  display:
    inline-block;

  color:
    var(--gold);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .24em;
}


.venue-heading h2,
.info-section-heading h2,
.notes-heading h2 {
  margin:
    8px
    0
    0;

  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    clamp(
      46px,
      6vw,
      72px
    );

  font-weight:
    400;

  line-height:
    1.1;
}


.venue-title-line,
.heading-divider,
.notes-heading-line {
  margin:
    20px
    0;
}


.venue-heading p,
.info-section-heading p,
.notes-heading p {
  margin:
    0
    auto;

  max-width:
    650px;

  color:
    #806d64;

  font-family:
    var(--serif);

  font-size:
    19px;

  line-height:
    1.9;
}


/* =========================================================
   VENUE SLIDER
========================================================= */

.venue-slider {
  position:
    relative;

  z-index:
    2;

  max-width:
    1050px;

  height:
    660px;

  margin:
    auto;

  perspective:
    2000px;

  transform-style:
    preserve-3d;
}


.venue-slider-stage {
  position:
    relative;

  height:
    570px;

  transform-style:
    preserve-3d;
}


/* =========================================================
   VENUE SLIDE
========================================================= */

.venue-slide {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  grid-template-columns:
    1.4fr
    .78fr;

  overflow:
    hidden;

  border:
    1px solid
    rgba(117, 27, 53, .10);

  border-radius:
    34px;

  opacity:
    0;

  transform:
    translate3d(
      0,
      30px,
      -120px
    )
    scale(.90);

  pointer-events:
    none;

  background:
    #fffaf4;

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

  transition:
    opacity
    .75s
    ease,

    transform
    .9s
    cubic-bezier(.2, .8, .2, 1);
}


.venue-slide.active {
  z-index:
    4;

  opacity:
    1;

  transform:
    translate3d(
      0,
      0,
      0
    )
    scale(1);

  pointer-events:
    auto;
}


.venue-slide.prev {
  z-index:
    2;

  opacity:
    .18;

  transform:
    translate3d(
      -12%,
      20px,
      -160px
    )
    rotateY(6deg)
    scale(.86);
}


.venue-slide.next {
  z-index:
    2;

  opacity:
    .18;

  transform:
    translate3d(
      12%,
      20px,
      -160px
    )
    rotateY(-6deg)
    scale(.86);
}


/* =========================================================
   VENUE IMAGE
========================================================= */

.venue-image-wrap {
  position:
    relative;

  min-height:
    100%;

  overflow:
    hidden;
}


.venue-image-wrap img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform
    1.2s
    ease;
}


.venue-slide.active
.venue-image-wrap img {
  transform:
    scale(1.025);
}


.venue-image-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      transparent 60%,
      rgba(54, 10, 26, .16)
    ),

    linear-gradient(
      180deg,
      transparent 60%,
      rgba(37, 5, 15, .16)
    );
}


.venue-photo-shine {
  position:
    absolute;

  top:
    -20%;

  left:
    -45%;

  width:
    38%;

  height:
    150%;

  transform:
    rotate(12deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .28),
      transparent
    );
}


.venue-slide.active
.venue-photo-shine {
  animation:
    venueShine
    4.5s
    ease-in-out
    .5s;
}


@keyframes venueShine {

  to {
    left:
      125%;
  }

}


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

.venue-slide-content {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    48px
    42px;

  color:
    #5b4045;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 255, 255, .9),
      transparent 35%
    ),

    linear-gradient(
      160deg,
      #fffaf4,
      #f2e3d2
    );
}


.venue-slide-number {
  position:
    absolute;

  top:
    24px;

  left:
    26px;

  color:
    rgba(117, 27, 53, .15);

  font-family:
    var(--serif);

  font-size:
    64px;

  line-height:
    1;
}


.venue-slide-content small {
  color:
    var(--gold);

  font-size:
    9px;

  letter-spacing:
    .22em;
}


.venue-slide-content h3 {
  margin:
    10px
    0
    13px;

  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    42px;

  font-weight:
    400;
}


.venue-slide-content p {
  margin:
    0;

  color:
    #7a6762;

  font-family:
    var(--serif);

  font-size:
    18px;

  line-height:
    1.9;
}


/* =========================================================
   VENUE BADGE
========================================================= */

.venue-floating-badge {
  position:
    absolute;

  z-index:
    8;

  left:
    50%;

  bottom:
    48px;

  width:
    92px;

  height:
    92px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(200, 162, 106, .62);

  border-radius:
    50%;

  transform:
    translateX(-50%);

  color:
    var(--wine);

  background:
    rgba(255, 250, 244, .92);

  box-shadow:
    0 16px 36px
    rgba(55, 10, 25, .14);

  backdrop-filter:
    blur(10px);
}


.venue-floating-badge span {
  margin-top:
    8px;

  font-size:
    27px;

  line-height:
    1;
}


.venue-floating-badge small {
  margin-top:
    -18px;

  color:
    #927963;

  font-size:
    7px;

  letter-spacing:
    .18em;
}


/* =========================================================
   VENUE CONTROLS
========================================================= */

.venue-controls {
  position:
    absolute;

  z-index:
    9;

  left:
    0;

  right:
    0;

  bottom:
    4px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;
}


.venue-arrow {
  width:
    46px;

  height:
    46px;

  border:
    1px solid
    rgba(117, 27, 53, .14);

  border-radius:
    50%;

  cursor:
    pointer;

  color:
    var(--wine);

  font-size:
    28px;

  line-height:
    1;

  background:
    rgba(255, 250, 244, .8);

  box-shadow:
    0 12px 25px
    rgba(58, 13, 28, .10);

  transition:
    transform
    .25s
    ease,

    background
    .25s
    ease;
}


.venue-arrow:hover {
  transform:
    translateY(-3px);

  background:
    white;
}


.venue-pagination {
  display:
    flex;

  gap:
    9px;
}


.venue-dot {
  width:
    8px;

  height:
    8px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  cursor:
    pointer;

  background:
    rgba(117, 27, 53, .20);

  transition:
    width
    .3s
    ease,

    border-radius
    .3s
    ease,

    background
    .3s
    ease;
}


.venue-dot.active {
  width:
    30px;

  border-radius:
    8px;

  background:
    var(--wine);
}


/* =========================================================
   INFORMATION
========================================================= */

.luxury-info-section {
  position:
    relative;

  padding:
    120px
    20px
    130px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(255, 255, 255, .95),
      transparent 40%
    ),

    linear-gradient(
      180deg,
      #fffaf3,
      #f1e2d0
    );
}


/* =========================================================
   INFORMATION BACKGROUND
========================================================= */

.info-bg-shape,
.info-bg-ring {
  position:
    absolute;

  pointer-events:
    none;
}


.info-bg-shape {
  width:
    420px;

  height:
    420px;

  border-radius:
    50%;

  filter:
    blur(5px);
}


.info-bg-shape.shape-one {
  top:
    -170px;

  left:
    -150px;

  background:
    radial-gradient(
      circle,
      rgba(117, 27, 53, .10),
      transparent 68%
    );
}


.info-bg-shape.shape-two {
  right:
    -160px;

  bottom:
    -150px;

  background:
    radial-gradient(
      circle,
      rgba(200, 162, 106, .18),
      transparent 68%
    );
}


.info-bg-ring {
  width:
    230px;

  height:
    230px;

  border:
    1px solid
    rgba(117, 27, 53, .08);

  border-radius:
    50%;
}


.info-bg-ring.ring-one {
  top:
    22%;

  right:
    -100px;
}


.info-bg-ring.ring-two {
  bottom:
    8%;

  left:
    -95px;
}


/* =========================================================
   INFORMATION HEADING
========================================================= */

.info-section-heading {
  position:
    relative;

  z-index:
    2;

  max-width:
    720px;

  margin:
    0
    auto
    65px;

  text-align:
    center;
}


/* =========================================================
   INFORMATION GRID
========================================================= */

.info-grid {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      1100px,
      100%
    );

  margin:
    auto;

  display:
    grid;

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

  gap:
    22px;
}


/* =========================================================
   INFORMATION CARD
========================================================= */

.info-card {
  position:
    relative;

  min-height:
    370px;

  padding:
    42px
    28px
    34px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(117, 27, 53, .10);

  border-radius:
    28px;

  text-align:
    center;

  transform-style:
    preserve-3d;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, .92),
      rgba(249, 239, 228, .86)
    );

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

  transition:
    transform
    .18s
    ease-out,

    box-shadow
    .3s
    ease;
}


.info-card-featured {
  color:
    white;

  border-color:
    rgba(255, 255, 255, .10);

  transform:
    translateY(-18px);

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255, 255, 255, .10),
      transparent 30%
    ),

    linear-gradient(
      155deg,
      var(--wine-2),
      var(--wine-4)
    );

  box-shadow:
    0 35px 75px
    rgba(58, 8, 25, .30);
}


.card-glow {
  position:
    absolute;

  inset:
    -35%;

  opacity:
    .18;

  background:
    radial-gradient(
      circle,
      rgba(200, 162, 106, .35),
      transparent 60%
    );

  pointer-events:
    none;
}


.card-border-line {
  position:
    absolute;

  inset:
    12px;

  border:
    1px solid
    rgba(200, 162, 106, .22);

  border-radius:
    20px;

  pointer-events:
    none;
}


.card-shine {
  position:
    absolute;

  top:
    -40%;

  left:
    -45%;

  width:
    38%;

  height:
    180%;

  opacity:
    0;

  transform:
    rotate(12deg);

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .25),
      transparent
    );

  transition:
    left
    .8s
    ease,

    opacity
    .3s
    ease;
}


.info-card:hover
.card-shine {
  left:
    125%;

  opacity:
    1;
}


.card-number {
  position:
    absolute;

  top:
    20px;

  left:
    24px;

  color:
    rgba(117, 27, 53, .12);

  font-family:
    var(--serif);

  font-size:
    54px;

  line-height:
    1;
}


.info-card-featured
.card-number {
  color:
    rgba(255, 255, 255, .10);
}


/* =========================================================
   INFO ICON
========================================================= */

.info-icon-wrap {
  position:
    relative;

  z-index:
    2;

  width:
    78px;

  height:
    78px;

  margin:
    14px
    auto
    24px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(200, 162, 106, .38);

  border-radius:
    50%;

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

  box-shadow:
    inset
    0
    0
    0
    7px
    rgba(200, 162, 106, .05);
}


.info-card-featured
.info-icon-wrap {
  background:
    rgba(255, 255, 255, .06);
}


.info-icon {
  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    34px;
}


.info-card-featured
.info-icon {
  color:
    var(--gold-soft);
}


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

.info-card h3 {
  position:
    relative;

  z-index:
    2;

  margin:
    0
    0
    14px;

  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    32px;

  font-weight:
    400;
}


.info-card-featured h3 {
  color:
    white;
}


.info-card p {
  position:
    relative;

  z-index:
    2;

  margin:
    0;

  color:
    #79655f;

  font-family:
    var(--serif);

  font-size:
    18px;

  line-height:
    1.9;
}


.info-card-featured p {
  color:
    rgba(255, 255, 255, .76);
}


/* =========================================================
   LOCATION BUTTON
========================================================= */

.location-btn {
  position:
    relative;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    145px;

  min-height:
    44px;

  margin-top:
    25px;

  padding:
    10px
    22px;

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

  border-radius:
    999px;

  color:
    white;

  font-size:
    11px;

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

  transition:
    transform
    .25s
    ease,

    background
    .25s
    ease;
}


.location-btn:hover {
  transform:
    translateY(-3px);

  background:
    rgba(255, 255, 255, .15);
}


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

.wedding-countdown-section {
  position:
    relative;

  padding:
    125px
    20px
    135px;

  overflow:
    hidden;

  color:
    white;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(179, 91, 115, .25),
      transparent 35%
    ),

    linear-gradient(
      160deg,
      var(--wine-3),
      var(--wine-4)
    );
}


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

.countdown-light,
.countdown-ring,
.countdown-stars {
  position:
    absolute;

  pointer-events:
    none;
}


.countdown-light {
  width:
    470px;

  height:
    470px;

  border-radius:
    50%;

  filter:
    blur(15px);
}


.countdown-light.light-one {
  top:
    -180px;

  right:
    -180px;

  background:
    radial-gradient(
      circle,
      rgba(200, 162, 106, .22),
      transparent 70%
    );
}


.countdown-light.light-two {
  bottom:
    -180px;

  left:
    -180px;

  background:
    radial-gradient(
      circle,
      rgba(179, 91, 115, .22),
      transparent 70%
    );
}


.countdown-ring {
  width:
    290px;

  height:
    290px;

  border:
    1px solid
    rgba(236, 209, 165, .12);

  border-radius:
    50%;
}


.countdown-ring-one {
  top:
    8%;

  left:
    -110px;
}


.countdown-ring-two {
  right:
    -120px;

  bottom:
    9%;
}


/* =========================================================
   STARS
========================================================= */

.countdown-stars {
  inset:
    0;

  overflow:
    hidden;
}


.countdown-stars i {
  position:
    absolute;

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  opacity:
    .55;

  background:
    var(--gold-soft);

  box-shadow:
    0 0 8px
    rgba(236, 209, 165, .55);

  animation:
    starTwinkle
    var(--duration, 4s)
    ease-in-out
    infinite;

  animation-delay:
    var(--delay, 0s);
}


@keyframes starTwinkle {

  50% {
    opacity:
      .12;

    transform:
      scale(.5);
  }

}


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

.countdown-container {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      1060px,
      100%
    );

  margin:
    auto;

  text-align:
    center;
}


/* =========================================================
   DUA ORNAMENT
========================================================= */

.dua-ornament {
  width:
    74px;

  height:
    74px;

  margin:
    0
    auto
    18px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(236, 209, 165, .35);

  border-radius:
    50%;

  color:
    var(--gold-soft);

  font-size:
    28px;

  box-shadow:
    0 0 0 8px
    rgba(236, 209, 165, .03),

    0 0 35px
    rgba(200, 162, 106, .10);

  animation:
    duaFloat
    4s
    ease-in-out
    infinite;
}


@keyframes duaFloat {

  50% {
    transform:
      translateY(-8px)
      rotate(4deg);
  }

}


.countdown-mini-title {
  color:
    rgba(236, 209, 165, .82);
}


/* =========================================================
   DUA
========================================================= */

.dua-wrapper {
  position:
    relative;

  width:
    min(
      720px,
      100%
    );

  margin:
    22px
    auto
    0;
}


.wedding-dua {
  margin:
    0;

  color:
    #fff8ef;

  font-family:
    var(--serif);

  font-size:
    clamp(
      42px,
      6vw,
      72px
    );

  font-weight:
    400;

  line-height:
    1.35;

  text-shadow:
    0 18px 45px
    rgba(0, 0, 0, .18);
}


.wedding-dua span {
  color:
    var(--gold-soft);
}


.dua-quote {
  position:
    absolute;

  top:
    5px;

  color:
    rgba(236, 209, 165, .18);

  font-family:
    var(--serif);

  font-size:
    90px;

  line-height:
    1;
}


.quote-right {
  right:
    -10px;
}


.quote-left {
  left:
    -10px;

  top:
    auto;

  bottom:
    -30px;
}


.countdown-divider {
  margin:
    34px
    0
    18px;
}


.countdown-divider span {
  width:
    90px;
}


.countdown-intro {
  margin:
    0
    0
    38px;

  color:
    rgba(255, 255, 255, .72);

  font-family:
    var(--serif);

  font-size:
    18px;
}


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

.countdown-grid {
  position:
    relative;

  display:
    grid;

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

  gap:
    18px;

  max-width:
    850px;

  margin:
    auto;

  perspective:
    1600px;
}


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

.countdown-box {
  position:
    relative;

  min-height:
    205px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border:
    1px solid
    rgba(236, 209, 165, .16);

  border-radius:
    26px;

  transform-style:
    preserve-3d;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, .09),
      rgba(255, 255, 255, .025)
    );

  box-shadow:
    0 22px 50px
    rgba(24, 0, 8, .20),

    inset 0 1px 0
    rgba(255, 255, 255, .08);

  backdrop-filter:
    blur(10px);

  transition:
    transform
    .18s
    ease-out,

    border-color
    .25s
    ease;
}


.countdown-box:hover {
  border-color:
    rgba(236, 209, 165, .30);
}


.countdown-box-glow {
  position:
    absolute;

  inset:
    -35%;

  opacity:
    .16;

  background:
    radial-gradient(
      circle,
      rgba(236, 209, 165, .45),
      transparent 58%
    );
}


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

.countdown-number-wrap {
  position:
    relative;

  z-index:
    2;
}


.countdown-number {
  display:
    block;

  min-width:
    2ch;

  color:
    #fffaf3;

  font-family:
    var(--serif);

  font-size:
    clamp(
      56px,
      7vw,
      86px
    );

  line-height:
    1;

  font-variant-numeric:
    tabular-nums;

  text-shadow:
    0 15px 35px
    rgba(0, 0, 0, .24);
}


.countdown-number.number-change {
  animation:
    numberChange
    .4s
    ease;
}


@keyframes numberChange {

  50% {
    opacity:
      .35;

    transform:
      translateY(-6px)
      scale(.96);
  }

}


.number-reflection {
  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    55%;

  height:
    42%;

  opacity:
    .08;

  transform:
    scaleY(-1);

  background:
    linear-gradient(
      180deg,
      currentColor,
      transparent
    );
}


.countdown-label {
  position:
    relative;

  z-index:
    2;

  margin-top:
    10px;

  color:
    var(--gold-soft);

  font-family:
    var(--serif);

  font-size:
    18px;
}


.countdown-box small {
  position:
    relative;

  z-index:
    2;

  margin-top:
    2px;

  color:
    rgba(255, 255, 255, .45);

  font-size:
    7px;

  letter-spacing:
    .18em;
}


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

.countdown-date {
  max-width:
    710px;

  margin:
    42px
    auto
    0;

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    18px;
}


.date-decoration {
  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(236, 209, 165, .45)
    );
}


.date-decoration:last-child {
  transform:
    scaleX(-1);
}


.countdown-date small {
  display:
    block;

  color:
    var(--gold-soft);

  font-size:
    8px;

  letter-spacing:
    .22em;
}


.countdown-date strong {
  display:
    block;

  margin-top:
    7px;

  color:
    white;

  font-family:
    var(--serif);

  font-size:
    24px;

  font-weight:
    400;
}


.countdown-date p {
  margin:
    2px
    0
    0;

  color:
    rgba(255, 255, 255, .62);

  font-family:
    var(--serif);

  font-size:
    16px;
}


/* =========================================================
   NOTES SECTION
========================================================= */

.wedding-notes-section {
  position:
    relative;

  padding:
    125px
    20px
    135px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(255, 255, 255, .96),
      transparent 40%
    ),

    linear-gradient(
      180deg,
      #fffaf3,
      #f0dfcc
    );
}


/* =========================================================
   NOTES BACKGROUND
========================================================= */

.notes-glow,
.notes-ring {
  position:
    absolute;

  pointer-events:
    none;
}


.notes-glow {
  width:
    460px;

  height:
    460px;

  border-radius:
    50%;

  filter:
    blur(15px);
}


.notes-glow-one {
  top:
    -160px;

  left:
    -160px;

  background:
    radial-gradient(
      circle,
      rgba(117, 27, 53, .12),
      transparent 70%
    );
}


.notes-glow-two {
  right:
    -170px;

  bottom:
    -170px;

  background:
    radial-gradient(
      circle,
      rgba(200, 162, 106, .18),
      transparent 70%
    );
}


.notes-ring {
  width:
    250px;

  height:
    250px;

  border:
    1px solid
    rgba(117, 27, 53, .08);

  border-radius:
    50%;
}


.notes-ring-one {
  top:
    12%;

  right:
    -90px;
}


.notes-ring-two {
  bottom:
    8%;

  left:
    -95px;
}


/* =========================================================
   NOTES CONTAINER
========================================================= */

.notes-container {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      1180px,
      100%
    );

  margin:
    auto;
}


.notes-heading {
  max-width:
    720px;

  margin:
    0
    auto
    72px;

  text-align:
    center;
}


/* =========================================================
   NOTES SCENE
========================================================= */

.notes-scene {
  position:
    relative;

  min-height:
    520px;

  display:
    grid;

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

  gap:
    24px;

  align-items:
    center;

  perspective:
    1800px;

  transform-style:
    preserve-3d;

  transition:
    transform
    .2s
    ease-out;
}


/* =========================================================
   CENTER SEAL
========================================================= */

.notes-center-seal {
  position:
    absolute;

  z-index:
    8;

  top:
    50%;

  left:
    50%;

  width:
    104px;

  height:
    104px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(200, 162, 106, .45);

  border-radius:
    50%;

  transform:
    translate(
      -50%,
      -50%
    )
    translateZ(95px);

  color:
    var(--wine);

  background:
    rgba(255, 250, 243, .94);

  box-shadow:
    0 22px 45px
    rgba(66, 12, 29, .16);

  backdrop-filter:
    blur(10px);
}


.notes-center-seal > span {
  margin-top:
    9px;

  font-family:
    var(--serif);

  font-size:
    30px;

  line-height:
    1;
}


.notes-center-seal > small {
  margin-top:
    -23px;

  color:
    #9a7b64;

  font-size:
    6px;

  letter-spacing:
    .16em;
}


.notes-seal-ring {
  position:
    absolute;

  inset:
    -12px;

  border:
    1px solid
    rgba(200, 162, 106, .26);

  border-radius:
    50%;

  animation:
    notesSealPulse
    2.8s
    ease-out
    infinite;
}


.notes-seal-ring.second {
  animation-delay:
    1.2s;
}


@keyframes notesSealPulse {

  to {
    opacity:
      0;

    transform:
      scale(1.35);
  }

}


/* =========================================================
   NOTE CARD
========================================================= */

.note-card {
  position:
    relative;

  min-height:
    390px;

  padding:
    38px
    24px
    30px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(117, 27, 53, .10);

  border-radius:
    28px;

  text-align:
    center;

  transform-style:
    preserve-3d;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, .94),
      rgba(248, 238, 226, .88)
    );

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

  transition:
    transform
    .18s
    ease-out,

    box-shadow
    .3s
    ease;
}


.note-featured {
  color:
    white;

  border-color:
    rgba(255, 255, 255, .08);

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255, 255, 255, .10),
      transparent 34%
    ),

    linear-gradient(
      155deg,
      var(--wine-2),
      var(--wine-4)
    );

  box-shadow:
    0 34px 65px
    rgba(58, 8, 25, .24);
}


.note-card-light {
  position:
    absolute;

  inset:
    -35%;

  opacity:
    .12;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(200, 162, 106, .42),
      transparent 60%
    );
}


.note-number {
  position:
    absolute;

  top:
    18px;

  left:
    20px;

  color:
    rgba(117, 27, 53, .12);

  font-family:
    var(--serif);

  font-size:
    48px;

  line-height:
    1;
}


.note-featured
.note-number {
  color:
    rgba(255, 255, 255, .10);
}


/* =========================================================
   NOTE ICON
========================================================= */

.note-icon {
  position:
    relative;

  z-index:
    2;

  width:
    68px;

  height:
    68px;

  margin:
    10px
    auto
    18px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(200, 162, 106, .35);

  border-radius:
    50%;

  color:
    var(--wine);

  background:
    rgba(255, 255, 255, .44);
}


.note-featured
.note-icon {
  color:
    var(--gold-soft);

  background:
    rgba(255, 255, 255, .06);
}


.note-icon svg {
  width:
    36px;

  height:
    36px;
}


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

.note-tag {
  position:
    relative;

  z-index:
    2;

  color:
    var(--gold);

  font-size:
    7px;

  font-weight:
    600;

  letter-spacing:
    .20em;
}


.note-card h3 {
  position:
    relative;

  z-index:
    2;

  margin:
    10px
    0
    12px;

  color:
    var(--wine);

  font-family:
    var(--serif);

  font-size:
    29px;

  font-weight:
    400;
}


.note-featured h3 {
  color:
    white;
}


.note-card p {
  position:
    relative;

  z-index:
    2;

  margin:
    0;

  color:
    #75635f;

  font-family:
    var(--serif);

  font-size:
    16px;

  line-height:
    1.9;
}


.note-featured p {
  color:
    rgba(255, 255, 255, .72);
}


/* =========================================================
   NOTE TIME
========================================================= */

.note-time {
  position:
    relative;

  z-index:
    2;

  width:
    fit-content;

  margin:
    22px
    auto
    0;

  padding:
    10px
    18px;

  border:
    1px solid
    rgba(236, 209, 165, .22);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, .06);
}


.note-time span {
  display:
    block;

  color:
    var(--gold-soft);

  font-family:
    var(--serif);

  font-size:
    22px;

  line-height:
    1;
}


.note-time small {
  display:
    block;

  margin-top:
    3px;

  color:
    rgba(255, 255, 255, .60);

  font-size:
    7px;
}


.note-bottom-line {
  position:
    absolute;

  left:
    50%;

  bottom:
    20px;

  width:
    55px;

  height:
    1px;

  transform:
    translateX(-50%);

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


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

.notes-footer {
  margin-top:
    62px;

  text-align:
    center;
}


.notes-footer span {
  color:
    var(--gold);

  font-family:
    var(--serif);

  font-size:
    28px;
}


.notes-footer p {
  margin:
    5px
    0
    0;

  color:
    #75635f;

  font-family:
    var(--serif);

  font-size:
    19px;
}


/* =========================================================
   RSVP
========================================================= */

.rsvp {
  position:
    relative;

  padding:
    110px
    20px;

  overflow:
    hidden;

  text-align:
    center;

  color:
    white;

  background:
    radial-gradient(
      circle at 50% 10%,
      #91314d,
      #5a1229 45%,
      #310814 100%
    );
}


.rsvp::before,
.rsvp::after {
  content: "";

  position:
    absolute;

  width:
    380px;

  height:
    380px;

  border:
    1px solid
    rgba(236, 209, 165, .10);

  border-radius:
    50%;
}


.rsvp::before {
  top:
    -210px;

  right:
    -130px;
}


.rsvp::after {
  left:
    -150px;

  bottom:
    -230px;
}


.rsvp-content {
  position:
    relative;

  z-index:
    2;

  max-width:
    650px;

  margin:
    auto;
}


.rsvp-symbol {
  width:
    68px;

  height:
    68px;

  margin:
    0
    auto
    18px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(236, 209, 165, .30);

  border-radius:
    50%;

  color:
    var(--gold-soft);

  font-family:
    var(--serif);

  font-size:
    28px;
}


.rsvp h2 {
  margin:
    0;

  color:
    white;

  font-family:
    var(--serif);

  font-size:
    clamp(
      46px,
      6vw,
      70px
    );

  font-weight:
    400;
}


.rsvp p {
  margin:
    14px
    auto
    0;

  max-width:
    540px;

  color:
    rgba(255, 255, 255, .72);

  font-family:
    var(--serif);

  font-size:
    19px;

  line-height:
    1.8;
}


.rsvp-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    230px;

  min-height:
    52px;

  margin-top:
    30px;

  padding:
    12px
    28px;

  border:
    1px solid
    rgba(236, 209, 165, .40);

  border-radius:
    999px;

  color:
    #3c0b1a;

  font-size:
    12px;

  font-weight:
    600;

  background:
    linear-gradient(
      135deg,
      #f7dfb7,
      #c8a26a
    );

  box-shadow:
    0 18px 38px
    rgba(0, 0, 0, .20);

  transition:
    transform
    .25s
    ease,

    box-shadow
    .25s
    ease;
}


.rsvp-btn:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 25px 45px
    rgba(0, 0, 0, .24);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

  .venue-slide {
    grid-template-columns:
      1.2fr
      .8fr;
  }


  .notes-scene {
    grid-template-columns:
      repeat(
        2,
        1fr
      );

    max-width:
      760px;

    margin:
      auto;
  }


  .notes-center-seal {
    display:
      none;
  }


  .note-card {
    min-height:
      360px;
  }

}


/* =========================================================
   RESPONSIVE — SMALL TABLET
========================================================= */

@media (max-width: 800px) {

  .info-grid {
    grid-template-columns:
      1fr;

    max-width:
      520px;
  }


  .info-card-featured {
    transform:
      none;
  }


  .countdown-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );

    max-width:
      500px;
  }


  .countdown-box {
    min-height:
      180px;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

  .details-hero,
  .venue-section,
  .luxury-info-section,
  .wedding-countdown-section,
  .wedding-notes-section {
    padding-left:
      14px;

    padding-right:
      14px;
  }


  .details-hero {
    padding-top:
      50px;

    padding-bottom:
      50px;
  }


  .botanical {
    width:
      160px;
  }


  /* Card */

  .main-card.luxury-card {
    width:
      95%;

    padding:
      46px
      15px
      42px;

    border-radius:
      25px;
  }


  .main-card.luxury-card::before {
    inset:
      10px;

    border-radius:
      18px;
  }


  .lux-maroon-panel {
    right:
      -180px;
  }


  .gold-line-one {
    left:
      25px;
  }


  .gold-line-two {
    right:
      22px;
  }


  .lux-bismillah {
    font-size:
      27px;
  }


  /* Photo */

  .photo-scene {
    width:
      78%;

    height:
      405px;

    margin-top:
      38px;
  }


  .floating-flower {
    left:
      -31px;

    width:
      60px;

    height:
      60px;

    font-size:
      28px;
  }


  .photo-date-badge {
    right:
      -32px;

    width:
      78px;

    min-height:
      100px;
  }


  .photo-date-badge strong {
    font-size:
      32px;
  }


  .floating-names {
    margin-top:
      -69px;
  }


  .floating-bride,
  .floating-groom {
    font-size:
      54px;
  }


  .lux-content-panel {
    width:
      calc(100% - 12px);

    padding:
      37px
      14px
      25px;
  }


  .lux-message {
    font-size:
      18px;
  }


  .ticket-side strong {
    font-size:
      18px;
  }


  .ticket-main > span {
    font-size:
      42px;
  }


  /* Sections */

  .venue-section,
  .luxury-info-section,
  .wedding-countdown-section,
  .wedding-notes-section {
    padding-top:
      90px;

    padding-bottom:
      100px;
  }


  .venue-heading,
  .info-section-heading,
  .notes-heading {
    margin-bottom:
      48px;
  }


  /* Venue slider */

  .venue-slider {
    height:
      550px;
  }


  .venue-slider-stage {
    height:
      465px;
  }


  .venue-slide {
    grid-template-columns:
      1fr;

    grid-template-rows:
      1.35fr
      .65fr;

    border-radius:
      26px;
  }


  .venue-slide-content {
    padding:
      24px
      24px
      28px;
  }


  .venue-slide-number {
    top:
      12px;

    left:
      16px;

    font-size:
      44px;
  }


  .venue-slide-content h3 {
    margin:
      3px
      0
      3px;

    font-size:
      32px;
  }


  .venue-slide-content p {
    font-size:
      16px;

    line-height:
      1.65;
  }


  .venue-floating-badge {
    bottom:
      53px;

    width:
      78px;

    height:
      78px;
  }


  /* Notes */

  .notes-scene {
    grid-template-columns:
      1fr;

    max-width:
      480px;

    gap:
      18px;
  }


  .note-card {
    min-height:
      340px;
  }


  /* Countdown */

  .dua-quote {
    font-size:
      64px;
  }


  .countdown-date {
    gap:
      10px;
  }


  .countdown-date strong {
    font-size:
      20px;
  }

}


/* =========================================================
   RESPONSIVE — PHONE
========================================================= */

@media (max-width: 480px) {

  .tap-label {
    bottom:
      calc(
        14px +
        env(safe-area-inset-bottom)
      );

    font-size:
      8px;

    letter-spacing:
      .18em;
  }


  .open-confirmation {
    bottom:
      calc(
        24px +
        env(safe-area-inset-bottom)
      );

    font-size:
      7px;
  }


  .venue-heading h2,
  .info-section-heading h2,
  .notes-heading h2 {
    font-size:
      45px;
  }


  .venue-heading p,
  .info-section-heading p,
  .notes-heading p {
    font-size:
      17px;
  }


  .lux-date-ticket {
    grid-template-columns:
      .9fr
      1.35fr
      .9fr;
  }


  .ticket-side {
    padding-inline:
      4px;
  }


  .ticket-side small {
    font-size:
      8px;
  }


  .ticket-side strong {
    font-size:
      16px;
  }


  .ticket-main {
    gap:
      6px;
  }


  .ticket-main > span {
    font-size:
      38px;
  }


  .ticket-main strong {
    font-size:
      17px;
  }


  .countdown-grid {
    gap:
      11px;
  }


  .countdown-box {
    min-height:
      160px;

    border-radius:
      21px;
  }


  .countdown-intro {
    font-size:
      16px;
  }


  .countdown-date {
    grid-template-columns:
      32px
      1fr
      32px;
  }


  .wedding-dua {
    font-size:
      41px;
  }


  .rsvp {
    padding:
      90px
      16px;
  }

}


/* =========================================================
   RESPONSIVE — 360 / 390 PX
========================================================= */

@media (max-width: 390px) {

  .main-card.luxury-card {
    width:
      96%;
  }


  .photo-scene {
    width:
      77%;

    height:
      360px;
  }


  .floating-names {
    margin-top:
      -59px;
  }


  .floating-bride,
  .floating-groom {
    font-size:
      48px;
  }


  .photo-date-badge {
    right:
      -26px;

    width:
      70px;

    min-height:
      92px;
  }


  .photo-date-badge strong {
    font-size:
      28px;
  }


  .floating-flower {
    left:
      -27px;

    width:
      54px;

    height:
      54px;
  }


  .lux-content-panel {
    padding-inline:
      10px;
  }


  .lux-message {
    font-size:
      17px;
  }


  .venue-slider {
    height:
      515px;
  }


  .venue-slider-stage {
    height:
      435px;
  }


  .venue-slide-content {
    padding:
      18px
      18px
      24px;
  }


  .venue-slide-content h3 {
    font-size:
      29px;
  }


  .venue-slide-content p {
    font-size:
      15px;
  }

}


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

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

  html {
    scroll-behavior:
      auto;
  }


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

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;
  }

}