/* =========================
DIVI HARD RESET
Prevents Divi wrappers from
breaking fixed fullscreen layers
========================= */

html,
body,
#page-container,
.et-db #et-boc,
.et-l,
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_code,
.et_pb_code_inner{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_code{
  overflow:visible !important;
}

.et_pb_code_inner{
  position:relative !important;
}

/* remove divi spacing */
#main-content{
  margin-top:0 !important;
}

body{
  overflow:hidden;
}

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

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  background:#f6f1ed;
  font-family:'Cormorant Garamond', serif;
}

/* =========================
MAIN WRAPPER
========================= */

#luxuryWedding{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#000;
  z-index:999999;
}

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

.hero-screen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index:1;
}

.hero-image{
  position:absolute;
  inset:0;

  background-image:url('https://junxnina2026.com/wp-content/uploads/2026/05/Home.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  transform:scale(1.05);
  will-change:transform;
}

/* subtle cinematic overlay */
.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.12),
      rgba(0,0,0,.34)
    );

  z-index:2;
}

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

.hero-rsvp{
  position:absolute;
  left:50%;
  bottom:70px;

  transform:translateX(-50%);

  z-index:100;

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

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

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

  color:#fff;

  padding:16px 56px;

  letter-spacing:4px;
  text-transform:uppercase;

  font-size:12px;
  font-weight:500;

  cursor:pointer;

  transition:
    background .45s ease,
    color .45s ease,
    transform .45s ease;

  overflow:hidden;
}

.hero-rsvp:hover{
  background:#fff;
  color:#3d261d;

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

/* floating glow */
.hero-rsvp::after{
  content:"";

  position:absolute;
  inset:-24px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.24),
      transparent 68%
    );

  animation:luxGlow 3.5s ease-in-out infinite;

  opacity:.45;

  z-index:-1;
}

@keyframes luxGlow{

  0%,100%{
    transform:scale(1);
    opacity:.18;
  }

  50%{
    transform:scale(1.18);
    opacity:.55;
  }

}

/* =========================
INVITE PANEL
========================= */

.invite-panel{
  position:fixed;
  inset:0;

  width:100%;
  height:100dvh;

  background:#f6f1ed;

  z-index:999999;

  overflow-y:auto;
  overflow-x:hidden;

  transform:translateY(100%);

  pointer-events:none;

  will-change:transform;

  -webkit-overflow-scrolling:touch;
}

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

.invite-inner{
  width:100%;
  position:relative;
  z-index:2;
}

/* =========================
DEAR SECTION
========================= */

.dear-wrap{
  text-align:center;
  padding:140px 30px 70px;
}

.eyebrow{
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:12px;
  opacity:.7;
  margin-bottom:18px;
}

.guest-name{
  font-family:'Playfair Display', serif;
  font-size:58px;
  margin-bottom:30px;
  color:#3f2b23;
}

.invite-copy{
  max-width:760px;
  margin:auto;

  line-height:1.9;
  font-size:22px;

  color:#5d463e;
}

/* =========================
COUPLE
========================= */

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

  gap:90px;

  max-width:1200px;

  margin:auto;

  padding:90px 50px;
}

.person-card{
  text-align:center;
}

.person-card img{
  width:250px;
  height:250px;

  border-radius:50%;
  object-fit:cover;

  margin-bottom:30px;

  box-shadow:
    0 25px 60px rgba(0,0,0,.14);
}

.person-card h3{
  font-family:'Alex Brush', cursive;
  font-size:56px;
  font-weight:400;

  margin-bottom:16px;

  color:#3f2b23;
}

.family-text{
  line-height:1.9;
  font-size:19px;
  color:#5d463e;
}

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

.date-section{
  text-align:center;
  padding:90px 30px 110px;
}

.date-section h2{
  font-family:'Playfair Display', serif;
  font-size:72px;

  margin:20px 0;

  color:#3f2b23;
}

.verse{
  max-width:760px;
  margin:auto;

  line-height:1.9;
  font-size:22px;

  color:#5d463e;
}

.verse-ref{
  margin-top:20px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
}

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

.countdown-section{
  background:#4a2b21;
  color:#fff;

  padding:80px 20px;
}

.countdown-wrap{
  display:flex;
  justify-content:center;
  gap:70px;
  flex-wrap:wrap;
}

.count-item{
  text-align:center;
}

.count-item span{
  font-family:'Playfair Display', serif;
  font-size:70px;
}

.count-item p{
  margin-top:12px;

  letter-spacing:3px;
  text-transform:uppercase;

  font-size:12px;
}

/* =========================
EVENTS
========================= */

.event-section{
  position:relative;
}

.event-image{
  position:relative;

  min-height:900px;

  background-size:cover;
  background-position:center;

  display:flex;
  align-items:center;
}

.image-one{
  background-image:url('https://junxnina2026.com/wp-content/uploads/2026/05/2X2A4458-scaled.jpg');
}

.image-two{
  background-image:url('https://junxnina2026.com/wp-content/uploads/2026/05/2X2A4386-scaled.jpg');
}

.image-three{
  background-image:url('https://junxnina2026.com/wp-content/uploads/2026/05/2X2A4520-scaled.jpg');
}

.event-card{
  width:420px;

  margin:0 8%;

  padding:56px 46px;

  border-radius:34px;

  background:
    rgba(255,248,245,.92);

  backdrop-filter:blur(14px);

  box-shadow:
    0 30px 80px rgba(0,0,0,.14);
}

.right-card{
  margin-left:auto;
}

.event-card h2{
  font-family:'Playfair Display', serif;
  font-size:48px;

  margin-bottom:24px;

  color:#3f2b23;
}

.event-time{
  font-size:28px;
  margin-bottom:24px;
}

.event-details{
  line-height:1.9;
  margin-bottom:35px;
}

.map-btn{
  display:inline-block;

  padding:14px 34px;

  border-radius:100px;

  background:#4a2b21;
  color:#fff;

  text-decoration:none;

  transition:.3s ease;
}

.map-btn:hover{
  transform:translateY(-2px);
}

/* =========================
DRESS CODE
========================= */

.dress-section{
  padding:130px 30px;
}

.dress-card{
  max-width:760px;

  margin:auto;

  padding:75px 55px;

  border-radius:36px;

  text-align:center;

  background:#dcc2b2;
}

.color-wrap{
  display:flex;
  justify-content:center;
  gap:24px;

  margin-top:42px;
}

.color-circle{
  width:60px;
  height:60px;

  border-radius:50%;
}

.sand{
  background:#d7c4b3;
}

.blue{
  background:#315d9a;
}

.cream{
  background:#f1ece4;
}

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

.rsvp-section{
  padding:130px 20px 180px;
}

.rsvp-card{
  max-width:760px;
  margin:auto;

  text-align:center;
}

.select-row{
  display:flex;
  gap:20px;

  margin-top:40px;
}

select,
textarea{
  width:100%;

  border:1px solid #c8b8ab;

  background:transparent;

  padding:18px;

  border-radius:16px;

  font-family:inherit;
  font-size:18px;
}

textarea{
  margin-top:20px;
  min-height:180px;
}

.submit-btn{
  margin-top:30px;

  border:none;

  background:#4a2b21;
  color:#fff;

  padding:18px 48px;

  border-radius:100px;

  letter-spacing:3px;

  cursor:pointer;
}

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

.reveal{
  opacity:0;
  transform:translateY(60px);
}

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

@media(max-width:768px){

  .hero-rsvp{
    bottom:50px;
    padding:14px 42px;
  }

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

    gap:60px;

    padding:70px 24px;
  }

  .guest-name{
    font-size:42px;
  }

  .date-section h2{
    font-size:48px;
  }

  .event-card{
    width:calc(100% - 40px);
    margin:20px;
  }

  .countdown-wrap{
    gap:36px;
  }

  .count-item span{
    font-size:44px;
  }

  .select-row{
    flex-direction:column;
  }

}