/* ============================================================
   SAHRETNA — DESIGN TOKENS
   Palette:  charcoal noir, antique gold, ivoire, deep wine accent
   Type:     Cormorant Garamond (display) / Cinzel (eyebrow, engraved)
             Jost (UI / body)
   ============================================================ */
:root{
  --noir:        #16120E;
  --noir-2:      #221B15;
  --noir-3:      #2E241B;
  --gold:        #C6A15B;
  --gold-soft:   #A6864A;
  --gold-light:  #E9D9AE;
  --ivoire:      #F6EFE2;
  --ivoire-dim:  #D9CDB6;
  --wine:        #5C1A24;
  --wine-light:  #8A2C39;

  --glass-bg:     rgba(246,239,226,0.06);
  --glass-bg-2:   rgba(246,239,226,0.10);
  --glass-border: rgba(198,161,91,0.35);

  --font-display: 'Cormorant Garamond', serif;
  --font-caps:    'Cinzel', serif;
  --font-ui:      'Jost', sans-serif;

  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(120% 90% at 50% -10%, var(--noir-3) 0%, var(--noir) 55%, #0e0b08 100%);
  color: var(--ivoire);
  font-family: var(--font-ui);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
.is-hidden{ display:none !important; }

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

:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; border-radius:4px; }

/* Fine film-grain overlay for a "printed invitation" texture */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.05; mix-blend-mode:overlay;
  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");
}

/* ============================================================
   SEAL INTRO — signature element
   ============================================================ */
.seal-screen{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(198,161,91,0.10) 0%, transparent 60%),
    var(--noir);
  transition: opacity 1.1s var(--ease-soft), visibility 1.1s;
}
.seal-screen.is-opened{ opacity:0; visibility:hidden; pointer-events:none; }

.seal-stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:28px;
  perspective:1400px;
}

/* Arabesque doors that swing open like a Zaffa entrance */
.seal-doors{ position:fixed; inset:0; display:flex; z-index:1; pointer-events:none; }
.door{
  width:50%; height:100%;
  background:
    linear-gradient(135deg, var(--noir-3), var(--noir) 60%);
  position:relative;
  transform-style:preserve-3d;
  transition: transform 1.3s var(--ease-soft) .15s;
  box-shadow: inset 0 0 120px rgba(198,161,91,0.06);
}
.door-left{ transform-origin:left center; border-right:1px solid var(--glass-border); }
.door-right{ transform-origin:right center; border-left:1px solid var(--glass-border); }
.seal-screen.is-opened .door-left{ transform: rotateY(-100deg); }
.seal-screen.is-opened .door-right{ transform: rotateY(100deg); }

.door-lattice{
  position:absolute; inset:6%;
  border:1px solid var(--glass-border);
  background-image:
    repeating-linear-gradient(45deg, rgba(198,161,91,0.14) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(198,161,91,0.14) 0 1px, transparent 1px 26px);
  opacity:.65;
}

.seal-btn{
  position:relative; z-index:2;
  width:min(46vw, 190px); height:min(46vw, 190px);
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--wine-light), var(--wine) 60%, #400f17 100%);
  border:2px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(198,161,91,0.08), 0 20px 50px rgba(0,0,0,.55), inset 0 2px 8px rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  transition: transform .5s var(--ease-out);
  animation: seal-breathe 3.6s ease-in-out infinite;
}
.seal-btn:hover{ transform: scale(1.035); }
.seal-btn:active{ transform: scale(.96); }
@keyframes seal-breathe{
  0%,100%{ box-shadow: 0 0 0 6px rgba(198,161,91,0.08), 0 20px 50px rgba(0,0,0,.55), inset 0 2px 8px rgba(255,255,255,.12); }
  50%{ box-shadow: 0 0 0 10px rgba(198,161,91,0.14), 0 20px 60px rgba(0,0,0,.6), inset 0 2px 8px rgba(255,255,255,.16); }
}

.seal-ring{ position:absolute; inset:0; width:100%; height:100%; }
.seal-ring-outer{ fill:none; stroke:var(--gold); stroke-width:1.4; opacity:.9; }
.seal-ring-inner{ fill:none; stroke:var(--gold-light); stroke-width:.6; opacity:.5; }
.seal-ring-text{ font-family:var(--font-caps); font-size:10.5px; letter-spacing:2px; fill:var(--gold-light); }

.seal-emblem{
  font-family:var(--font-display); font-style:italic; font-size:clamp(22px,7vw,32px);
  color:var(--gold-light); letter-spacing:1px;
}

.seal-crack{
  position:absolute; inset:0; border-radius:50%; opacity:0; pointer-events:none;
  background:
    linear-gradient(105deg, transparent 46%, rgba(0,0,0,.55) 47%, transparent 49%),
    linear-gradient(15deg, transparent 60%, rgba(0,0,0,.4) 61%, transparent 63%);
}
.seal-btn.is-cracking .seal-crack{ animation: crack-flash .55s ease-out forwards; }
.seal-btn.is-cracking{ animation: seal-shatter .6s var(--ease-out) forwards; }
@keyframes crack-flash{ 0%{opacity:0;} 40%{opacity:1;} 100%{opacity:.85;} }
@keyframes seal-shatter{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.08) rotate(-2deg); }
  100%{ transform:scale(1.5); opacity:0; }
}

.seal-cta{
  font-family:var(--font-caps); font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color: var(--ivoire-dim); opacity:.75;
  animation: pulse-fade 2.4s ease-in-out infinite;
}
@keyframes pulse-fade{ 0%,100%{opacity:.45;} 50%{opacity:.9;} }

/* ============================================================
   AMBIENT AUDIO TOGGLE
   ============================================================ */
.audio-toggle{
  position:fixed; top:20px; right:20px; z-index:400;
  width:46px; height:46px; border-radius:50%;
  background: var(--glass-bg); backdrop-filter: blur(14px);
  border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  transition: background .3s, transform .3s, opacity .8s var(--ease-soft);
}
.audio-toggle:hover{ background:var(--glass-bg-2); transform:translateY(-1px); }
.audio-bars{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.audio-bars i{ width:2.4px; background:var(--gold-light); border-radius:2px; animation: bar 1.1s ease-in-out infinite; }
.audio-bars i:nth-child(1){ height:6px; animation-delay:0s; }
.audio-bars i:nth-child(2){ height:14px; animation-delay:.15s; }
.audio-bars i:nth-child(3){ height:9px; animation-delay:.3s; }
.audio-bars i:nth-child(4){ height:12px; animation-delay:.45s; }
@keyframes bar{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }
.audio-toggle[aria-pressed="false"] .audio-bars i{ animation-play-state:paused; transform:scaleY(.3); opacity:.5; }

/* ============================================================
   FLOATING MAPS FAB
   ============================================================ */
.maps-fab{
  position:fixed; left:20px; bottom:20px; z-index:400;
  display:flex; align-items:center; gap:8px;
  padding:12px 18px 12px 14px; border-radius:999px;
  background: var(--glass-bg); backdrop-filter: blur(14px);
  border:1px solid var(--glass-border);
  font-family:var(--font-ui); font-size:13.5px; letter-spacing:.4px; color:var(--gold-light);
  transition: background .3s, transform .3s, opacity .8s var(--ease-soft);
}
.maps-fab:hover{ background:var(--glass-bg-2); transform:translateY(-2px); }

/* ============================================================
   LAYOUT / SECTIONS
   ============================================================ */
.content{ transition: opacity 1s var(--ease-soft) .3s; }
.content.is-hidden{ opacity:0; }

.section{
  max-width:640px; margin:0 auto;
  padding: 96px 28px;
  text-align:center;
  position:relative;
}
.eyebrow{
  font-family:var(--font-caps); font-size:11.5px; letter-spacing:4px; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.section-title{
  font-family:var(--font-display); font-weight:500; font-size:clamp(30px,6vw,42px);
  color:var(--ivoire); margin:0 0 34px;
}
.ornament{ color:var(--gold); width:150px; margin:22px auto; opacity:.8; }
.ornament svg{ width:100%; height:auto; }

/* reveal-on-scroll */
[data-reveal]{ opacity:0; transform:translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ---------- HERO ---------- */
.hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:60px; }
.hero-names{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(46px,13vw,84px); line-height:1.05; margin:0;
  color:var(--ivoire);
  text-shadow:0 0 40px rgba(198,161,91,0.25);
}
.hero-amp{ display:block; font-size:.5em; color:var(--gold); margin:6px 0; font-style:normal; }
.hero-invite{ font-size:16px; line-height:1.8; color:var(--ivoire-dim); margin:26px 0 6px; }
.hero-guest{ font-family:var(--font-display); font-style:italic; font-size:22px; color:var(--gold-light); margin:8px 0 34px; }

.hero-date-plate{
  display:flex; flex-direction:column; gap:6px;
  padding:26px 40px; border-radius:var(--radius-lg);
  background:var(--glass-bg); backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
}
.plate-day{ font-family:var(--font-caps); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.plate-date{ font-family:var(--font-display); font-size:28px; color:var(--ivoire); }
.plate-venue{ font-size:13.5px; color:var(--ivoire-dim); letter-spacing:.3px; }

.scroll-hint{ margin-top:56px; }
.scroll-hint span{
  display:block; width:1px; height:44px; margin:0 auto;
  background:linear-gradient(var(--gold), transparent);
  animation: scroll-drop 1.8s ease-in-out infinite;
}
@keyframes scroll-drop{ 0%{ opacity:0; transform:translateY(-6px);} 40%{opacity:1;} 100%{ opacity:0; transform:translateY(18px);} }

/* ---------- TIMELINE ---------- */
.timeline{ list-style:none; margin:0; padding:0; text-align:left; position:relative; }
.timeline::before{
  content:''; position:absolute; left:23px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--glass-border), var(--gold), var(--glass-border));
}
.timeline-item{
  position:relative; padding:0 0 34px 60px; opacity:0; transform:translateY(16px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.timeline-item.is-visible{ opacity:1; transform:translateY(0); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:15px; top:2px; width:17px; height:17px; border-radius:50%;
  background:var(--noir); border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.timeline-dot::after{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.timeline-time{ font-family:var(--font-caps); font-size:11px; letter-spacing:2px; color:var(--gold); text-transform:uppercase; }
.timeline-label{ font-family:var(--font-display); font-size:22px; color:var(--ivoire); margin:4px 0 0; }
.timeline-desc{ font-size:14px; color:var(--ivoire-dim); margin:4px 0 0; line-height:1.6; }

/* ---------- LOCATION ---------- */
.location-address{ color:var(--ivoire-dim); font-size:15px; margin:0 0 30px; line-height:1.7; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:999px; border:1px solid var(--gold);
  font-family:var(--font-ui); font-size:14px; letter-spacing:.6px; text-transform:uppercase;
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}
.btn-gold{ background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:var(--noir); font-weight:500; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(198,161,91,.28); }
.btn-block{ width:100%; }

/* ---------- RSVP ---------- */
.rsvp-lead{ color:var(--ivoire-dim); font-size:15px; line-height:1.8; margin:0 0 40px; }
.rsvp-lead strong{ color:var(--gold-light); font-weight:500; }

.glass-card{
  background:var(--glass-bg); backdrop-filter:blur(18px);
  border:1px solid var(--glass-border); border-radius:var(--radius-lg);
  padding:34px 26px; text-align:left;
}

.field-group{ border:none; margin:0 0 22px; padding:0; }
.field-group legend{ font-family:var(--font-caps); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; padding:0; }
.radio-row{ display:flex; flex-wrap:wrap; gap:10px; }
.radio-pill{
  flex:1 1 auto; position:relative; cursor:pointer;
  padding:12px 16px; border-radius:999px; border:1px solid var(--glass-border);
  font-size:13.5px; color:var(--ivoire-dim); text-align:center; transition:.25s;
}
.radio-pill input{ position:absolute; opacity:0; }
.radio-pill:has(input:checked){ background:var(--gold); border-color:var(--gold); color:var(--noir); font-weight:500; }

.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12.5px; letter-spacing:.5px; color:var(--gold-light); margin-bottom:8px; }
.field-optional{ color:var(--ivoire-dim); font-weight:300; text-transform:none; letter-spacing:0; }
.field input[type="text"], .field input[type="number"], .field textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.18); border:1px solid var(--glass-border); color:var(--ivoire);
  font-family:var(--font-ui); font-size:14.5px; resize:vertical; transition:border-color .25s;
}
.field input:focus, .field textarea:focus{ border-color:var(--gold); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(217,205,182,.4); }

.voice-recorder{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.record-btn{
  display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px;
  background:rgba(0,0,0,.2); border:1px solid var(--glass-border); color:var(--ivoire-dim); font-size:13.5px;
  transition:.25s;
}
.record-dot{ width:9px; height:9px; border-radius:50%; background:var(--wine-light); }
.record-btn[aria-pressed="true"]{ border-color:var(--wine-light); color:var(--ivoire); }
.record-btn[aria-pressed="true"] .record-dot{ animation: rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.3);} }
.record-timer{ font-family:var(--font-caps); font-size:12px; color:var(--gold-light); letter-spacing:1px; min-width:44px; }
.record-preview{ height:36px; max-width:180px; }
.record-delete{ background:none; border:none; color:var(--ivoire-dim); font-size:15px; padding:4px 8px; }
.record-delete:hover{ color:var(--wine-light); }
.field-hint{ font-size:11.5px; color:var(--ivoire-dim); opacity:.7; margin:8px 0 0; }

.btn-spinner{
  width:15px; height:15px; border-radius:50%; border:2px solid rgba(22,18,14,.3); border-top-color:var(--noir);
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.form-status{ text-align:center; font-size:13.5px; margin:16px 0 0; min-height:18px; color:var(--gold-light); }
.form-status.is-error{ color:var(--wine-light); }

/* ---------- GALLERY ---------- */
.gallery-lead{ color:var(--ivoire-dim); font-size:14.5px; margin:0 0 30px; }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gallery-item{
  aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
  border:1px solid var(--glass-border); position:relative;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-empty{
  grid-column:1/-1; padding:50px 20px; color:var(--ivoire-dim); font-size:13.5px;
  border:1px dashed var(--glass-border); border-radius:var(--radius-md);
}

/* ---------- GUESTBOOK ---------- */
.guestbook-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; text-align:left; }
.guestbook-item{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-md);
  padding:16px 18px;
}
.guestbook-name{ font-family:var(--font-display); font-size:17px; color:var(--gold-light); margin:0 0 4px; }
.guestbook-msg{ font-size:14px; color:var(--ivoire-dim); line-height:1.6; margin:0; }
.guestbook-empty{ text-align:center; color:var(--ivoire-dim); font-size:13.5px; padding:20px; }

/* ---------- FOOTER ---------- */
.footer{ text-align:center; padding:70px 28px 60px; }
.footer-ornament{ width:150px; margin:0 auto 20px; color:var(--gold); opacity:.7; }
.footer-ornament svg{ width:100%; }
.footer-names{ font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--ivoire); margin:0 0 6px; }
.footer-tagline{ font-size:12.5px; letter-spacing:1px; color:var(--ivoire-dim); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  background:rgba(10,8,6,.94); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-img{ max-width:88vw; max-height:82vh; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-nav{
  position:absolute; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--ivoire);
  border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.lightbox-close{ top:20px; right:20px; }
.lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:760px){
  .gallery-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:400px){
  .section{ padding:76px 20px; }
  .hero-date-plate{ padding:22px 24px; }
}