@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&display=swap');

/* HERO */
.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ECDAC6;
  position:relative;
  overflow:hidden;
  z-index:0;
  box-shadow:
    inset 0 0 0 3px #401215,
    inset 0 0 0 17px #ECDAC6,
    inset 0 0 0 18.5px #401215;
}

/* FULL SCREEN BORDERS */
.hero::before{
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  border:3px solid #401215;
  pointer-events:none;
  z-index:-1;
}

.hero::after{
  content:"";
  position:absolute;
  top:22px;
  left:22px;
  right:22px;
  bottom:22px;
  border:3px solid #401215;
  pointer-events:none;
  z-index:-1;
}

/* CARD */
.hero-card{
  position:relative;
  text-align:center;
  max-width:100%;
  z-index:2;
  padding:40px 20px;
  transform: translateY(-20px);
}

/* TEXT */
.top-text{
  font-family:'EB Garamond', serif;
  font-size:clamp(35px, 8vw, 50px);
  letter-spacing:2px;
  margin-bottom:5px;
  color:#401215;
}

.sub-text{
  font-family:'EB Garamond', serif;
  font-size:clamp(19px, 4vw, 22px);
  margin-bottom:5px;
  color:#401215;
}

.names{
  font-family:"Peristiwa", cursive;
  font-size:clamp(42px, 13vw, 70px);
  margin:20px 0;
  margin-bottom: 0px;
  color:#401215;
  padding-bottom: 0px;
  letter-spacing: 0;
  font-weight: 500;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.invite-text{
  font-family:'EB Garamond', serif;
  font-size:clamp(19px, 4vw, 19px);
  color:#401215;

  line-height: 1.5;
}

/* FLOWERS */
.flower{
  position:absolute;
  z-index:1;
  pointer-events:none;
}

.flower-top-left{
  top:0;
  left:0;
  width:160vw;
  max-width:620px;
  transform:translate(-30%, -48%);
}

.flower-bottom-right{
  bottom:0;
  right:0;
  width:140vw;
  max-width:620px;
  transform:translate(20%, 52%);
}

/* EVENT INFO */
.event-info{
  width:100%;
  max-width:420px;
  margin:20px auto 0;
  text-align:center;
  color:#401215;
}

.event-row{
  padding:3px 0;
  font-family:'EB Garamond', serif;
}

.month-row,
.details-row{
  position:relative;
  border-bottom:none;
}

.month-row::after,
.details-row::after{
  content:"";
  position:absolute;
  left:15%;
  right:15%;
  bottom:0;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    #401215 10%,
    #401215 90%,
    transparent
  );
}

/* MONTH */
.month-row{
  font-size:clamp(19px,4vw,20px);
  font-weight:600;
  letter-spacing:2px;
}

/* DETAILS */
.details-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:clamp(19px,4vw,19px);
  font-weight:400;
}

.details-row span:nth-child(2){
  font-size:clamp(22px,6vw,28px);
}

/* VENUE */
.venue-row{
  font-size:clamp(17px,4vw,18px);
  padding-top:3px;
  text-decoration: none;
}

/* CURTAIN OVERLAY */
.curtain-overlay{
  position:fixed;
  inset:0;
  background:#401215;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform 1.4s ease-in-out;
  -webkit-mask-image:radial-gradient(circle 170px at 50% 110%, transparent 97%, rgba(0,0,0,0.4) 98%, black 100%);
  mask-image:radial-gradient(circle 170px at 50% 110%, transparent 97%, rgba(0,0,0,0.4) 98%, black 100%);
}

.curtain-overlay::after{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  left:50%;
  bottom:-234px;
  transform:translateX(-50%);
  border:5px solid #C8A15D;
  border-radius:50%;
  pointer-events:none;
  box-sizing:border-box;
}

.open-curtain{
  transform:translateY(-110%);
}

/* MONOGRAM */
.monogram{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.monogram .heart{
  font-size:clamp(40px, 10vw, 90px);
  color:#FFE998;
  text-shadow:0 0 10px rgba(212,175,55,0.4);
  margin-bottom:10px;
}

.monogram .wedding-date{
  font-family:'EB Garamond', serif;
  font-size:clamp(29px, 5vw, 28px);
  letter-spacing:5px;
  color:#FFE998;
  font-weight:600;
}
















/* ANIMATION BASE STATES */
.anim-from-top,
.anim-from-left,
.anim-from-right,
.anim-from-bottom {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.anim-from-top    { transform: translateY(-40px); }
.anim-from-left   { transform: translateX(-50px); }
.anim-from-right  { transform: translateX(50px); }
.anim-from-bottom { transform: translateY(40px); }

/* ANIMATED IN STATE */
.anim-in {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* STAGGER DELAYS */
.delay-1 { transition-delay: 0.7s; }
.delay-2 { transition-delay: 0.9s; }
.delay-3 { transition-delay: 1.1s; }
.delay-4 { transition-delay: 1.3s; }
.delay-5 { transition-delay: 1.5s; }
.delay-6 { transition-delay: 1.7s; }