/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */
:root{
  --olive-deep:      #37451F;
  --olive:            #59703C;
  --olive-soft:       #8AA06B;
  --ivory:            #FBF7EE;
  --ivory-warm:       #F3ECDC;
  --gold:             #C7A44A;
  --gold-soft:        #E4D4A7;
  --ink:              #24301A;
  --white:            #FFFFFF;

  --font-display: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-arabic:  'Amiri', 'Aref Ruqaa', serif;
  --font-body:    'Jost', sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.container{ max-width:520px; margin:0 auto; padding:0 24px; position:relative; }

.eyebrow{
  font-family:var(--font-body);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--gold);
  font-weight:500;
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(30px,8vw,42px);
  font-weight:600;
  color:var(--olive-deep);
  line-height:1.15;
}

.divider-flourish{
  width:120px; height:34px;
  margin:14px auto;
  background:url('../assets/images/flourish.svg') center/contain no-repeat;
  opacity:.85;
}

/* =========================================================================
   PETALS CANVAS (global ambient layer)
   ========================================================================= */
#petal-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:40; mix-blend-mode:normal;
}

/* =========================================================================
   LOADER
   ========================================================================= */
#loader{
  position:fixed; inset:0; z-index:100;
  background:linear-gradient(180deg,var(--olive-deep),#24301A 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-monogram{
  font-family:var(--font-display);
  font-size:52px; color:var(--gold-soft);
  letter-spacing:.05em;
  opacity:0; animation:fadeUp 1.4s var(--ease) forwards .2s;
  display:flex; align-items:center; gap:14px;
}
.loader-monogram .amp{ color:var(--gold); font-style:italic; font-size:34px; }
.loader-bar{
  width:180px; height:1px; background:rgba(228,212,167,.25); position:relative; overflow:hidden;
  opacity:0; animation:fadeUp 1.4s var(--ease) forwards .6s;
}
.loader-bar::after{
  content:''; position:absolute; left:-40%; top:0; height:100%; width:40%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:sweep 1.6s ease-in-out infinite;
}
.loader-label{
  font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:rgba(251,247,238,.55);
  opacity:0; animation:fadeUp 1.4s var(--ease) forwards .9s;
}
@keyframes sweep{ 0%{left:-40%} 100%{left:100%} }
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

/* =========================================================================
   GATE / TAP TO OPEN
   ========================================================================= */
#gate{
  position:fixed; inset:0; z-index:90;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(199,164,74,.16), transparent 60%),
    linear-gradient(180deg,#3D4E27,var(--olive-deep) 55%,#1C2513);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 28px; gap:26px;
  transition:transform 1.1s var(--ease), opacity 1s var(--ease);
}
#gate.opened{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.gate-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 35%, rgba(231,214,150,.18), transparent 55%);
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.6} 50%{opacity:1} }
.gate-bismillah{
  font-family:var(--font-arabic); direction:rtl;
  font-size:clamp(26px,7vw,36px); color:var(--gold-soft);
  line-height:1.9; opacity:0; animation:fadeUp 1.6s var(--ease) forwards .3s;
}
.gate-translation{
  font-size:12px; letter-spacing:.05em; color:rgba(251,247,238,.65);
  max-width:280px; opacity:0; animation:fadeUp 1.6s var(--ease) forwards .7s;
}
.gate-names{
  font-family:var(--font-display); color:var(--ivory);
  font-size:clamp(30px,9vw,44px); font-weight:600;
  opacity:0; animation:fadeUp 1.6s var(--ease) forwards 1.1s;
}
.gate-names .amp{ color:var(--gold); font-style:italic; padding:0 10px; }
.gate-btn{
  margin-top:6px; padding:15px 40px; border:1px solid var(--gold-soft);
  border-radius:40px; color:var(--gold-soft); font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; position:relative; overflow:hidden;
  opacity:0; animation:fadeUp 1.6s var(--ease) forwards 1.5s, breathe 2.6s ease-in-out infinite 3s;
}
.gate-btn::before{
  content:''; position:absolute; inset:0; background:var(--gold-soft); opacity:.08;
  transform:scale(0); transition:transform .6s var(--ease);
}
.gate-btn:active::before{ transform:scale(1); }
@keyframes breathe{ 0%,100%{box-shadow:0 0 0 0 rgba(199,164,74,.25)} 50%{box-shadow:0 0 0 10px rgba(199,164,74,0)} }

/* =========================================================================
   MAIN CONTENT
   ========================================================================= */
#site{ opacity:0; transition:opacity 1.2s var(--ease); }
#site.visible{ opacity:1; }

.section{ position:relative; padding:80px 0 70px; }
.section-alt{ background:var(--ivory-warm); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* HERO ---------------------------------------------------------------- */
#hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--ivory) 0%, var(--ivory-warm) 100%);
}
.hero-frame{
  width:190px; height:190px; border-radius:50%; overflow:hidden; margin:0 auto 22px;
  border:1px solid var(--gold-soft); padding:6px; position:relative;
  box-shadow:0 18px 40px -18px rgba(55,69,31,.35);
}
.hero-frame img{ border-radius:50%; width:100%; height:100%; object-fit:cover; }
.hero-eyebrow{ font-size:11px; letter-spacing:.35em; color:var(--gold); text-transform:uppercase; margin-bottom:10px; }
.hero-names{
  font-family:var(--font-display); font-size:clamp(38px,11vw,56px); color:var(--olive-deep);
  font-weight:600; line-height:1.05;
}
.hero-names .amp{ display:block; font-style:italic; color:var(--gold); font-size:.55em; margin:6px 0; }
.hero-sub{ margin-top:16px; font-size:13px; letter-spacing:.08em; color:var(--olive); }
.hero-date-pill{
  margin-top:26px; display:inline-flex; gap:10px; align-items:center; padding:10px 22px;
  border:1px solid var(--olive-soft); border-radius:40px; font-size:12px; letter-spacing:.12em;
  color:var(--olive-deep); background:rgba(255,255,255,.5); backdrop-filter:blur(6px);
}
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--olive);
}
.scroll-cue span{ font-size:9px; letter-spacing:.3em; text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:scrollDown 1.8s ease-in-out infinite; }
@keyframes scrollDown{ 0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }

/* GLASS CARD ------------------------------------------------------------ */
.glass-card{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(199,164,74,.28);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 45px -28px rgba(55,69,31,.4);
  padding:34px 26px;
}

/* INVITATION MESSAGE ----------------------------------------------------- */
#invitation .glass-card{ text-align:center; }
.arabic-line{ font-family:var(--font-arabic); direction:rtl; font-size:22px; color:var(--olive-deep); line-height:2; margin-bottom:14px; }
.msg-text{ font-size:15px; line-height:1.9; color:var(--ink); margin-bottom:18px; }
.msg-names{ font-family:var(--font-display); font-size:26px; color:var(--olive-deep); font-weight:600; margin:14px 0; }
.msg-daughter{ font-size:13px; color:var(--olive); margin-bottom:14px; }
.msg-closing{ font-size:14px; font-style:italic; color:var(--olive); line-height:1.8; }

/* PARENTS ----------------------------------------------------------------- */
.parents-grid{ display:flex; flex-direction:column; gap:18px; }
.parent-card{ text-align:center; }
.parent-card .eyebrow{ display:block; margin-bottom:10px; }
.parent-card .names{ font-family:var(--font-display); font-size:22px; color:var(--olive-deep); margin-bottom:10px; }
.parent-card .addr{ font-size:12.5px; color:var(--olive); line-height:1.8; }
.parent-card .mobile{ margin-top:10px; font-size:12.5px; color:var(--gold); letter-spacing:.04em; }

/* SCRATCH REVEAL ----------------------------------------------------------- */
#scratch-section{ text-align:center; }
.scratch-wrap{
  position:relative; width:100%; max-width:340px; aspect-ratio:4/3; margin:26px auto 0;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 50px -26px rgba(55,69,31,.5);
}
.scratch-reveal-content{
  position:absolute; inset:0; background:linear-gradient(160deg,var(--olive-deep),#2c3a1c);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ivory);
  text-align:center; padding:20px; gap:6px;
}
.scratch-reveal-content .eyebrow{ color:var(--gold-soft); }
.scratch-reveal-content .date{ font-family:var(--font-display); font-size:26px; font-weight:600; }
.scratch-reveal-content .hijri{ font-size:12px; color:rgba(251,247,238,.7); }
.scratch-reveal-content .time{ margin-top:8px; font-size:13px; color:var(--gold-soft); letter-spacing:.1em; }
#scratch-canvas{ position:absolute; inset:0; touch-action:none; z-index:2; }
.scratch-hint{ margin-top:14px; font-size:11px; letter-spacing:.15em; color:var(--olive); text-transform:uppercase; opacity:.75; }
.bloom-layer{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; }
.bloom-layer.show{ animation:bloomPop 1.4s var(--ease) forwards; }
@keyframes bloomPop{ 0%{opacity:0; transform:scale(.7);} 40%{opacity:1;} 100%{opacity:0; transform:scale(1.3);} }

/* COUNTDOWN ------------------------------------------------------------- */
.countdown-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:24px; }
.cd-cell{
  background:rgba(255,255,255,.6); border:1px solid rgba(199,164,74,.3); border-radius:16px;
  padding:16px 4px; text-align:center;
}
.cd-num{ font-family:var(--font-display); font-size:clamp(22px,6vw,30px); color:var(--olive-deep); font-weight:600; }
.cd-label{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:4px; }

/* SHOWCASE / GALLERY ---------------------------------------------------- */
.showcase-grid{ display:flex; gap:14px; margin-top:24px; }
.showcase-photo{ flex:1; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4; border:1px solid var(--gold-soft); }
.showcase-photo img{ width:100%; height:100%; object-fit:cover; }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:24px; }
.gallery-item{ border-radius:12px; overflow:hidden; aspect-ratio:1; cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery-item:active img{ transform:scale(1.08); }

#lightbox{
  position:fixed; inset:0; background:rgba(20,26,13,.94); z-index:80;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
#lightbox.show{ opacity:1; pointer-events:auto; }
#lightbox img{ max-width:88%; max-height:80%; border-radius:12px; }
#lightbox .lb-close{ position:absolute; top:24px; right:24px; color:var(--ivory); font-size:26px; }

/* TIMELINE ---------------------------------------------------------------- */
.timeline{ margin-top:28px; position:relative; padding-left:26px; }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--gold),var(--olive-soft)); }
.tl-item{ position:relative; padding-bottom:30px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:-26px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--ivory); border:2px solid var(--gold); }
.tl-date{ font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.tl-title{ font-family:var(--font-display); font-size:20px; color:var(--olive-deep); margin:4px 0 6px; }
.tl-text{ font-size:13.5px; color:var(--ink); line-height:1.7; opacity:.85; }

/* VENUE --------------------------------------------------------------- */
.venue-card{ text-align:center; }
.venue-name{ font-family:var(--font-display); font-size:26px; color:var(--olive-deep); }
.venue-sub{ font-size:12px; color:var(--olive); margin-top:2px; }
.venue-place{ margin-top:12px; font-size:13.5px; color:var(--ink); line-height:1.7; }
.btn-row{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px; border-radius:40px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--olive-deep); color:var(--olive-deep); transition:transform .3s var(--ease), background .3s;
}
.btn:active{ transform:scale(.97); }
.btn-solid{ background:var(--olive-deep); color:var(--ivory); border-color:var(--olive-deep); }
.btn-gold{ border-color:var(--gold); color:var(--gold-deep,#8a6d1f); }

/* RSVP ------------------------------------------------------------------ */
.rsvp-form{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid rgba(89,112,60,.35);
  background:rgba(255,255,255,.7); font-family:var(--font-body); font-size:14px; color:var(--ink);
}
.rsvp-form label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--olive); margin-bottom:4px; display:block; }
#rsvp-status{ font-size:12.5px; text-align:center; margin-top:10px; color:var(--olive-deep); min-height:16px; }

/* FOOTER ----------------------------------------------------------------- */
footer{ text-align:center; padding:50px 24px 110px; color:var(--olive); }
footer .foot-names{ font-family:var(--font-display); font-size:24px; color:var(--olive-deep); }
footer .foot-note{ font-size:11px; letter-spacing:.1em; margin-top:10px; opacity:.7; }
footer .admin-link{ display:inline-block; margin-top:26px; font-size:10px; letter-spacing:.1em; color:var(--olive); opacity:.35; border-bottom:1px dotted currentColor; }
footer .admin-link:hover{ opacity:.8; }

/* FLOATING CONTROLS -------------------------------------------------------- */
.float-controls{ position:fixed; bottom:22px; right:18px; z-index:60; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab{
  width:52px; height:52px; border-radius:50%; background:var(--olive-deep); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -12px rgba(0,0,0,.4);
  font-size:20px;
}
.fab.whatsapp{ background:#3d7a4f; }
.fab.music{ background:var(--gold); color:var(--olive-deep); }
.fab.music.spinning svg{ animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Floral corner decorations ------------------------------------------------ */
.corner-deco{ position:absolute; width:90px; height:90px; opacity:.5; pointer-events:none; background:url('../assets/images/flourish.svg') center/contain no-repeat; }
.corner-deco.tl{ top:12px; left:0; transform:rotate(0deg); }
.corner-deco.br{ bottom:12px; right:0; transform:rotate(180deg); }

@media (min-width:600px){
  .container{ max-width:600px; }
  .showcase-grid{ max-width:460px; margin-left:auto; margin-right:auto; }
}