:root{
  --beige:        #F3E9DA;
  --beige-light:  #FAF4EA;
  --beige-deep:   #E6D5BC;
  --peach:        #E7AD84;
  --peach-soft:   #F1C9A8;
  --terracotta:   #B9663D;
  --ink:          #4A3728;
  --ink-soft:     #7A6551;
  --gold:         #B08A55;
  --gold-light:   #E8CE9C;
  --font-display: 'Fraunces', serif;
  --font-body:    'Manrope', sans-serif;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --app-w:        430px;
}

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

html{ scroll-behavior: smooth; }

body{
  background: var(--beige);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 999;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ PRELOADER ============ */
.preloader{
  position: fixed; inset:0; z-index: 900;
  background: var(--beige);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
.preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-ring{
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(176,138,85,0.25);
  border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity: 0; transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ============ GOLD FOIL TEXT ============ */
.gold-foil{
  background: linear-gradient(100deg, var(--terracotta) 20%, var(--gold-light) 40%, #FFF6E0 50%, var(--gold-light) 60%, var(--terracotta) 80%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: -220% 50%; }
}

/* ============ ENVELOPE ============ */
.envelope{
  position: fixed; inset:0; z-index: 500;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 1.1s var(--ease);
}
.envelope.hide{ opacity:0; pointer-events:none; }

.envelope-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
  z-index: 1;
  transition: opacity 0.15s linear;
}
.envelope.opening .envelope-poster{ opacity:0; }

.envelope-scrim{
  position:absolute; inset:0; z-index: 1;
  background: linear-gradient(180deg, rgba(30,20,10,0.35) 0%, rgba(30,20,10,0.12) 30%, rgba(30,20,10,0.15) 60%, rgba(30,20,10,0.55) 100%);
  transition: opacity 0.2s linear;
}
.envelope.opening .envelope-scrim{ opacity:0; }

.envelope-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; z-index: 0;
}

.envelope-scene{
  position: relative; z-index: 2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 26px;
  padding: 0 32px; text-align:center;
  transition: opacity 0.25s linear, transform 0.4s var(--ease);
}
.envelope.opening .envelope-scene{ opacity:0; transform: translateY(-10px); }

.env-invite{
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(23px, 7vw, 31px); line-height: 1.5;
  color: #FFF8EE; text-shadow: 0 2px 14px rgba(0,0,0,0.25);
}
.env-tap{
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em;
  color: #FFF8EE; opacity: 0.85; animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:0.5; } 50%{ opacity:0.95; } }

/* ============ PETALS ============ */
.petals{
  position: fixed; inset:0; z-index: 400;
  pointer-events:none; overflow:hidden;
}
.petal{
  position:absolute; top:-6%;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #FBF3E7 70%, rgba(251,243,231,0) 100%);
  border-radius: 60% 0 60% 0;
  opacity: 0.85;
  animation-name: petal-fall, petal-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes petal-fall{
  0%{ transform: translateY(-8vh) rotate(0deg); }
  100%{ transform: translateY(112vh) rotate(340deg); }
}
@keyframes petal-sway{
  0%, 100%{ margin-left: 0px; }
  50%{ margin-left: 40px; }
}

/* ============ BUTTERFLIES ============ */
.butterflies{
  position: fixed; inset:0; z-index: 401;
  pointer-events:none; overflow:hidden;
}
.butterfly{
  position:absolute; bottom: -6%; left: 0;
  width: 30px; height: 22px;
  color: var(--terracotta);
  opacity: 0;
  animation-name: butterfly-fly;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
.butterfly svg{ width:100%; height:100%; display:block; overflow: visible; }
.butterfly .wing{
  transform-box: fill-box; transform-origin: 100% 50%;
  animation: butterfly-flap 0.42s ease-in-out infinite;
}
.butterfly .wing-r{ transform-origin: 0% 50%; }
@keyframes butterfly-flap{
  0%, 100%{ transform: scaleX(1); }
  50%{ transform: scaleX(0.45); }
}
@keyframes butterfly-fly{
  0%{ transform: translate(0, 0) rotate(0deg); opacity:0; }
  8%{ opacity: 0.9; }
  30%{ transform: translate(var(--dx1), -38vh) rotate(var(--rot1)); }
  60%{ transform: translate(var(--dx2), -74vh) rotate(var(--rot2)); }
  92%{ opacity: 0.9; }
  100%{ transform: translate(var(--dx3), -128vh) rotate(var(--rot3)); opacity:0; }
}

/* ============ MUSIC TOGGLE ============ */
.music-toggle{
  position: fixed; top: 20px; right: 20px; z-index: 600;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(250,244,234,0.85); backdrop-filter: blur(6px);
  border: 1px solid rgba(176,138,85,0.4);
  display:flex; align-items:center; justify-content:center;
  color: var(--terracotta); cursor:pointer;
}
.music-toggle .icon-on, .music-toggle .icon-off{ width:19px; height:19px; }
.music-toggle .icon-off{ display:none; }
.music-toggle.muted .icon-on{ display:none; }
.music-toggle.muted .icon-off{ display:block; }

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 100svh; overflow: hidden;
  display:flex; align-items:flex-end; justify-content:center;
  background: var(--ink);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
}

.scroll-cue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%); z-index:2;
}
.scroll-mouse{
  width: 22px; height: 34px; border-radius: 12px;
  border: 1.5px solid rgba(250,244,234,0.75);
  position: relative;
}
.scroll-dot{
  position:absolute; top:6px; left:50%; width:4px; height:4px;
  background: rgba(250,244,234,0.95); border-radius: 50%;
  transform: translateX(-50%);
  animation: scrolldot 1.9s ease-in-out infinite;
}
@keyframes scrolldot{
  0%{ opacity:0; transform: translate(-50%, 0); }
  25%{ opacity:1; }
  75%{ opacity:0; transform: translate(-50%, 14px); }
  100%{ opacity:0; transform: translate(-50%, 14px); }
}

/* ============ INVITE CARD ============ */
.invite-section{
  padding: 72px 20px 60px; max-width: 640px; margin: 0 auto;
}
.section-kicker{
  font-size: 12.5px; letter-spacing: 0.16em; color: var(--terracotta);
  font-style: italic; font-family: var(--font-display); text-align:center; display:block;
}
.section-title{
  font-family: var(--font-display); font-weight: 400; text-align:center;
  font-size: clamp(26px, 6vw, 34px); margin: 8px 0 36px; color: var(--ink);
}

.invite-card{
  position: relative;
  max-width: 440px; margin: 0 auto;
  padding: 54px 26px;
  background: linear-gradient(160deg, var(--beige-deep) 0%, var(--beige) 55%, var(--peach-soft) 100%);
  border-radius: 22px;
  box-shadow: 0 36px 70px rgba(90,60,30,0.18), 0 0 0 1px rgba(176,138,85,0.25);
}
.invite-card .corner{
  position:absolute; width: 34%; max-width: 170px; height:auto;
  pointer-events:none; user-select:none;
}
.corner-tl{ top: -6px; left: -6px; }
.corner-tr{ top: -6px; right: -6px; transform: scaleX(-1); }
.corner-bl{ bottom: -6px; left: -6px; }
.corner-br{ bottom: -6px; right: -6px; transform: scaleX(-1); z-index: 1; }
.corner-flamingo{
  width: 30%; max-width: 148px;
  z-index: 3; opacity: 0.96;
  filter: drop-shadow(0 6px 14px rgba(90,40,30,0.18));
}
.corner-flamingo-right{ bottom: 4px; right: 4px; }
.corner-flamingo-left{ bottom: 4px; left: 4px; }

.invite-panel{
  position: relative; z-index: 2; overflow: hidden;
  background: var(--beige-light);
  border: 1px solid rgba(176,138,85,0.4);
  border-radius: 130px 130px 14px 14px;
  padding: 42px 22px 100px;
  text-align:center;
  box-shadow: 0 2px 0 rgba(255,255,255,0.6) inset, 0 0 24px rgba(176,138,85,0.08) inset;
}
.invite-panel::before{
  content:""; position:absolute; inset:0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.4  0 0 0 0 0.22  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.55; mix-blend-mode: multiply;
  pointer-events:none;
}
.invite-panel::after{
  content:""; position:absolute; inset:0; z-index: -1;
  background: radial-gradient(ellipse 70% 45% at 30% 20%, rgba(255,236,190,0.85) 0%, rgba(255,236,190,0) 62%);
  background-size: 240% 240%;
  mix-blend-mode: multiply;
  opacity: 0.8;
  pointer-events:none;
  animation: card-sheen 12s ease-in-out infinite alternate;
}
@keyframes card-sheen{
  0%{ background-position: 0% 0%; }
  50%{ background-position: 85% 55%; }
  100%{ background-position: 15% 100%; }
}

.invite-bismillah{
  font-family: 'Amiri', serif; font-size: clamp(22px, 6vw, 28px);
  color: var(--terracotta); margin-bottom: 14px;
}
.invite-hosts{
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.9;
  color: var(--ink); text-transform: uppercase; margin-bottom: 16px;
}
.invite-names{
  display:flex; flex-direction:column; align-items:center; gap: 2px; margin-bottom: 14px;
}
.invite-name{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 6vw, 27px); color: var(--ink);
}
.invite-with{
  font-family: var(--font-display); font-style: italic; font-size: 13px;
  color: var(--terracotta); margin: 3px 0;
}
.invite-walima{
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: clamp(20px, 5vw, 24px); color: var(--terracotta); margin-bottom: 16px;
}
.invite-rule{
  width: 42px; height: 1px; background: var(--gold); margin: 0 auto 16px; opacity: 0.7;
}
.invite-date{
  font-weight: 700; font-size: 14.5px; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 4px;
}
.invite-time{
  font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 16px;
}
.invite-venue{
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.7; color: var(--ink);
  text-transform: uppercase;
}

/* ============ COUNTDOWN ============ */
.countdown{
  padding: 20px 20px 68px; max-width: 560px; margin: 0 auto; text-align:center;
}
.countdown-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.countdown-unit{
  background: var(--beige-light);
  border: 1px solid var(--beige-deep);
  border-radius: 16px;
  padding: 18px 6px 14px;
  box-shadow: 0 10px 24px rgba(90,60,30,0.07);
}
.countdown-num{
  display:block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 6vw, 32px); color: var(--terracotta); line-height: 1;
}
.countdown-label{
  display:block; font-size: 10px; letter-spacing: 0.1em; color: var(--ink-soft);
  margin-top: 8px; text-transform: uppercase;
}

/* ============ LOCATION ============ */
.location{
  position: relative;
  padding: 40px 20px 76px; max-width: 560px; margin: 0 auto;
  text-align:center;
}
.divider-img{
  display:block; width: min(100%, 420px); height:auto; margin: 0 auto 8px;
  opacity: 0.9;
}
.map-frame{
  width:100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow:hidden;
  border: 1px solid var(--beige-deep); box-shadow: 0 16px 34px rgba(90,60,30,0.12);
  margin: 8px 0 22px;
}
.map-frame iframe{ width:100%; height:100%; border:0; }

.location-address{
  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 22px;
}
.directions-btn{
  display:inline-block; text-decoration:none;
  font-size: 13px; letter-spacing: 0.06em; color: var(--beige-light);
  background: var(--terracotta); padding: 13px 30px; border-radius: 30px;
  box-shadow: 0 10px 24px rgba(185,102,61,0.3);
}

/* ============ RSVP ============ */
.rsvp{
  padding: 20px 20px 76px; max-width: 560px; margin: 0 auto; text-align:center;
}
.rsvp-text{
  font-size: 13.5px; color: var(--ink-soft); margin: -20px 0 28px;
}
.rsvp-contacts{
  display:flex; flex-direction:column; gap: 14px; max-width: 380px; margin: 0 auto;
}
.rsvp-card{
  display:flex; align-items:center; gap: 14px;
  background: var(--beige-light);
  border: 1px solid var(--beige-deep);
  border-radius: 16px;
  padding: 16px 18px;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(90,60,30,0.07);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.rsvp-card:active{ transform: scale(0.98); }
.rsvp-icon{
  width: 34px; height: 34px; flex-shrink:0; color: #3FA047;
}
.rsvp-info{ display:flex; flex-direction:column; gap: 2px; text-align:left; }
.rsvp-name{ font-size: 13px; color: var(--ink-soft); letter-spacing: 0.02em; }
.rsvp-number{ font-family: var(--font-display); font-size: 18px; color: var(--ink); }

/* ============ CLOSING ============ */
.closing{
  background: var(--peach);
  padding: 72px 24px 80px;
  text-align:center;
  color: var(--beige-light);
}
.closing-ornament{ width: 200px; max-width: 60vw; margin: 0 auto 28px; color: var(--beige-light); opacity:0.85; }
.closing-ornament svg{ width:100%; height:auto; }

.closing-looking{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 5vw, 24px); margin-bottom: 20px; color: #FFF8EE;
}

.closing-signoff{
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 19px;
}
.closing-credit{
  font-size: 10.5px; letter-spacing: 0.08em; color: rgba(255,248,238,0.55);
  margin-top: 26px;
}

.invite-section, .location, .rsvp{
  position: relative;
}
.section-divider{
  display:block; width: min(70%, 260px); height:auto;
  margin: 0 auto 20px; opacity: 0.9;
}

@media (min-width: 640px){
  .hero-content{ padding-bottom: 72px; }
}

/* ============ MOBILE-ONLY FRAME (laptop / tablet) ============ */
@media (min-width: 431px){
  html{ background: #2b2118; }
  body{
    max-width: var(--app-w);
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0,0,0,0.45);
  }
  .envelope, .petals, .butterflies{
    left: 50%; right: auto;
    width: var(--app-w);
    transform: translateX(-50%);
  }
  .music-toggle{ right: calc(50% - var(--app-w) / 2 + 20px); }
  .hero{ min-height: 0; height: min(100vh, 932px); }
}