/* ==========================================================================
   AMREEN & MASHOODH — WEDDING INVITATION
   Design tokens, layout, components, animations.
   Vanilla CSS3 only — no frameworks.
   ========================================================================== */

:root{
  /* ---- Colour tokens (from brief) ---- */
  --bg-primary:   #F9F6EF;
  --bg-secondary: #F2EBDD;
  --gold:         #C8A95A;
  --gold-light:   #D8BE7A;
  --ink-heading:  #2B2B2B;
  --ink-body:     #595959;
  --ink-muted:    #857A63;
  --divider:      #E6D8B4;
  --white-paper:  #FFFDF7;
  --shadow-soft:  0 18px 40px -24px rgba(43,43,43,0.18);
  --shadow-card:  0 10px 30px -18px rgba(43,43,43,0.16);

  /* ---- Type ---- */
  --f-heading: 'Cormorant Garamond', serif;
  --f-names:   'Playfair Display', serif;
  --f-body:    'Poppins', sans-serif;
  --f-arabic:  'Amiri', serif;

  /* ---- Layout ---- */
  --max-width: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-space: clamp(72px, 12vw, 160px);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-slow: 1.1s;
  --dur-med: .7s;
  --dur-fast: .35s;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-primary);
  color:var(--ink-body);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
::selection{ background:var(--gold-light); color:#fff; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------------------------------------------------------------------- */
/* Typography helpers                                                     */
/* ---------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-body);
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-muted);
  font-weight:400;
}
.section-heading{
  font-family:var(--f-heading);
  font-weight:500;
  font-size:clamp(2rem, 4vw, 2.8rem);
  color:var(--ink-heading);
  letter-spacing:.01em;
}
.section-kicker{
  display:block;
  text-align:center;
  margin-bottom:14px;
}
.section-intro{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.arabic-text{
  font-family:var(--f-arabic);
  direction:rtl;
  color:var(--ink-heading);
}
.hairline{
  width:56px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:22px auto;
}
.hairline.short{ width:34px; }
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding-inline:var(--gutter);
}
.gold-diamond{
  width:7px; height:7px;
  background:var(--gold);
  transform:rotate(45deg);
  display:inline-block;
}

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll                                                       */
/* ---------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-scale{ transform:scale(.96) translateY(20px); }
.reveal-scale.is-visible{ transform:scale(1) translateY(0); }
.delay-1{ transition-delay:.12s; }
.delay-2{ transition-delay:.24s; }
.delay-3{ transition-delay:.36s; }
.delay-4{ transition-delay:.48s; }

/* ---------------------------------------------------------------------- */
/* Floating particles / ambience                                          */
/* ---------------------------------------------------------------------- */
.ambient-particles{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.ambient-particles span{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--gold-light);
  opacity:.35;
  animation:floatUp 14s linear infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.5; }
  90%{ opacity:.35; }
  100%{ transform:translateY(-140px) translateX(14px); opacity:0; }
}

/* ---------------------------------------------------------------------- */
/* OPENING ANIMATION                                                       */
/* ---------------------------------------------------------------------- */
#opening{
  position:fixed; inset:0;
  z-index:9999;
  background:#F9F6EF;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1.1s var(--ease-soft), visibility 1.1s;
}
#opening.opening--fading{ opacity:0; visibility:hidden; }
#opening.opening--hidden{ display:none; }

.opening__stage{
  position:relative;
  width:min(420px, 84vw);
  height:min(600px, 78vh);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  text-align:center;
  padding:24px;
}

.opening__shimmer{
  width:0%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
  margin-bottom:18px;
  animation:shimmerGrow 1.4s var(--ease-soft) forwards .15s;
}
@keyframes shimmerGrow{
  to{ width:78%; }
}

.opening__arch{
  width:150px; height:190px;
  margin-bottom:6px;
}
.opening__arch path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.1;
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:archDraw 1.6s var(--ease-soft) forwards .55s;
}
@keyframes archDraw{ to{ stroke-dashoffset:0; } }

.opening__floral{
  width:74px;
  opacity:0;
  animation:softFade var(--dur-slow) var(--ease-soft) forwards 1.7s;
}

.opening__bismillah{
  font-family:var(--f-arabic);
  color:var(--gold);
  font-size:1.5rem;
  opacity:0;
  animation:softFade var(--dur-slow) var(--ease-soft) forwards 2.3s;
}

.opening__title{
  opacity:0;
  animation:softFade var(--dur-slow) var(--ease-soft) forwards 2.8s;
}
.opening__title .eyebrow{ color:var(--ink-muted); }
.opening__title .opening__names{
  font-family:var(--f-names);
  color:var(--ink-heading);
  font-size:clamp(1.6rem, 5vw, 2.3rem);
  font-weight:600;
  letter-spacing:.02em;
  margin-top:6px;
}
.opening__title .opening__names .amp{
  color:var(--gold);
  font-family:var(--f-heading);
  font-style:italic;
  padding-inline:10px;
  font-size:.85em;
}

.opening__btn{
  opacity:0;
  animation:softFade var(--dur-slow) var(--ease-soft) forwards 3.4s;
  margin-top:10px;
  background:transparent;
  border:1px solid var(--gold);
  color:var(--ink-heading);
  padding:13px 30px;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  border-radius:999px;
  transition:background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), letter-spacing var(--dur-fast);
}
.opening__btn:hover{
  background:var(--gold);
  color:#fff;
  letter-spacing:.34em;
}

@keyframes softFade{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Card unfold transition */
#opening .opening__stage{
  transform-origin:center;
}
#opening.opening--unfold .opening__stage{
  animation:unfoldCard .9s var(--ease-soft) forwards;
}
@keyframes unfoldCard{
  0%{ transform:scale(1); opacity:1; }
  60%{ transform:scale(1.04); opacity:1; }
  100%{ transform:scale(1.12); opacity:0; }
}

/* ---------------------------------------------------------------------- */
/* SITE HEADER / NAV (minimal, appears after opening)                     */
/* ---------------------------------------------------------------------- */
#site{
  opacity:0;
  transition:opacity 1.2s var(--ease-soft);
}
#site.site--visible{ opacity:1; }

/* ---------------------------------------------------------------------- */
/* MUSIC PLAYER                                                            */
/* ---------------------------------------------------------------------- */
.music-player{
  position:fixed;
  right:22px; bottom:22px;
  z-index:500;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--white-paper);
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-fast) var(--ease-soft);
}
.music-player:hover{ transform:scale(1.06); }
.music-player button{
  width:100%; height:100%;
  border:none; background:none;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.music-player svg{ width:20px; height:20px; }
.music-player .ring{
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid var(--gold-light);
  opacity:0;
  animation:none;
}
.music-player.is-playing .ring{
  opacity:.55;
  animation:ringPulse 2.4s ease-out infinite;
}
@keyframes ringPulse{
  0%{ transform:scale(.92); opacity:.55; }
  100%{ transform:scale(1.32); opacity:0; }
}
.music-player .icon-pause{ display:none; }
.music-player.is-playing .icon-play{ display:none; }
.music-player.is-playing .icon-pause{ display:flex; }

/* ---------------------------------------------------------------------- */
/* HERO                                                                    */
/* ---------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--section-space) * .6) var(--section-space);
  background:
    radial-gradient(ellipse at 18% 8%, rgba(200,169,90,0.08), transparent 45%),
    radial-gradient(ellipse at 85% 92%, rgba(200,169,90,0.06), transparent 45%),
    var(--bg-primary);
  overflow:hidden;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(249, 246, 239, 0.4) 95%);
  z-index: 2;
  pointer-events: none;
}
.hero__paper-texture{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(133,122,99,0.015) 0px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(133,122,99,0.012) 0px, transparent 1px, transparent 2px);
  pointer-events:none;
}
.hero__bg-image{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-soft);
  pointer-events:none;
  z-index: 1;
}
.hero__bg-image.is-visible{ opacity:.85; }
.hero__crescent {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  opacity: 0.85;
  z-index: 3;
  animation: floatSlow 7s ease-in-out infinite;
}
.hero__crescent svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px rgba(200, 169, 90, 0.2));
}
.hero__corner{
  position:absolute;
  width:clamp(90px, 12vw, 160px);
  opacity:.85;
  pointer-events:none;
  z-index: 3;
}
.hero__corner.tl{ top:0; left:0; }
.hero__corner.br{ bottom:0; right:0; transform:rotate(180deg); }

.hero__grid{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}
.hero__content{ text-align:center; max-width:800px; }
.hero__eyebrow{ margin-bottom:18px; color:var(--gold) !important; font-weight:500; }
.hero__names{
  font-family:var(--f-names);
  color:var(--ink-heading);
  font-size:clamp(2.6rem, 6vw, 4.4rem);
  line-height:1.08;
  font-weight:600;
}
.hero__names .amp{
  display:block;
  font-family:var(--f-heading);
  font-style:italic;
  color:var(--gold) !important; /* Gold & symbol */
  font-size:.42em;
  margin-block:6px;
  font-weight:500;
}
.hero__meta{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:22px 34px;
  justify-content:center;
}
.hero__meta div{ display:flex; flex-direction:column; gap:4px; }
.hero__meta .label{
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-muted) !important;
}
.hero__meta .value{
  font-family:var(--f-heading);
  font-size:1.3rem;
  color:var(--ink-heading) !important;
}
.hero__scroll{
  position:absolute;
  bottom:26px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:8px;
  z-index:3;
}
.hero__scroll span{
  font-size:.62rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.hero__scroll .line{
  width:1px; height:34px;
  background:linear-gradient(var(--gold), transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
@keyframes floatSlow{
  0%, 100%{ transform:translateY(0) translateX(0); }
  40%{ transform:translateY(-8px) translateX(4px); }
  70%{ transform:translateY(-4px) translateX(-3px); }
}

@media (max-width: 860px){
  .hero__grid{ text-align:center; }
  .hero__content{ text-align:center; }
  .hero__meta{ justify-content:center; }
}

/* ---------------------------------------------------------------------- */
/* Generic SECTION shell                                                   */
/* ---------------------------------------------------------------------- */
.section{
  position:relative;
  padding-block:var(--section-space);
}
.section--alt{ background:var(--bg-secondary); }
.section__frame{
  position:relative;
}
.corner-flourish{
  position:absolute;
  width:clamp(60px, 8vw, 96px);
  opacity:.7;
  pointer-events:none;
}
.corner-flourish.tl{ top:-4px; left:-4px; }
.corner-flourish.tr{ top:-4px; right:-4px; transform:scaleX(-1); }
.corner-flourish.bl{ bottom:-4px; left:-4px; transform:scaleY(-1); }
.corner-flourish.br{ bottom:-4px; right:-4px; transform:scale(-1,-1); }

/* ---------------------------------------------------------------------- */
/* BISMILLAH                                                               */
/* ---------------------------------------------------------------------- */
.bismillah{
  text-align:center;
  background: #FAF6EE; /* Soft cream background */
  position: relative;
  overflow: hidden;
}
.bismillah__mandala-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 90vw);
  height: min(340px, 90vw);
  pointer-events: none;
  z-index: 1;
}
.bismillah__title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.bismillah__deco-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.bismillah__arabic{
  font-size:clamp(1.9rem, 5vw, 2.7rem);
  margin-block:18px;
  color: var(--gold) !important;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(200, 169, 90, 0.15);
}
.bismillah__lines{
  display:flex; flex-direction:column; gap:4px;
  font-size:.76rem;
  letter-spacing:.24em;
  color:var(--ink-muted);
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------- */
/* INVITATION MESSAGE                                                      */
/* ---------------------------------------------------------------------- */
.invitation{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  position: relative;
  z-index: 2;
}
#invitation {
  background: #FDF9F0; /* Warm parchment color */
  position: relative;
  overflow: hidden;
}
.invitation__arch-bg {
  position: absolute;
  inset: clamp(15px, 4vw, 40px);
  border: 1px dashed rgba(200, 169, 90, 0.2);
  border-radius: 200px 200px 0 0;
  pointer-events: none;
  z-index: 1;
}
.invitation__quote-mark {
  font-family: var(--f-names);
  font-size: 5.5rem;
  color: rgba(200, 169, 90, 0.18);
  line-height: 0;
  display: block;
  margin-bottom: -10px;
}
.invitation__quote-mark.bottom {
  margin-top: 25px;
  margin-bottom: 0;
  text-align: right;
}
.invitation__message{
  font-family:var(--f-heading);
  font-size:clamp(1.25rem, 2.6vw, 1.55rem);
  color:var(--ink-heading);
  line-height:1.75;
}
.invitation__dua-card{
  margin-top:40px;
  background: rgba(255, 253, 247, 0.85);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: var(--shadow-card);
}
.invitation__dua-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.invitation__dua-header .dua-title {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.invitation__dua-card .translit{
  font-style:italic;
  color:var(--gold);
  font-family:var(--f-heading);
  font-size:1.15rem;
}
.invitation__dua-card .translation{
  margin-top:10px;
  font-size:.92rem;
  color:var(--ink-muted);
}

/* ---------------------------------------------------------------------- */
/* BRIDE & GROOM                                                           */
/* ---------------------------------------------------------------------- */
.couple-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(28px, 5vw, 70px);
  align-items:stretch;
  margin-top:60px;
}

/* ---- Luxury card shell ---- */
.couple-card{
  position: relative;
  text-align: center;
  /* Layered gradient for a rich parchment feel */
  background:
    linear-gradient(160deg, #FFFDF7 0%, #FDF7E8 45%, #FAF1D4 100%);
  border-radius: 16px;
  padding: 56px 36px 48px;
  /* Multi-layer glow shadow */
  box-shadow:
    0 0 0 1px rgba(200,169,90,0.28),
    0 0 0 4px rgba(200,169,90,0.07),
    0 20px 48px -16px rgba(160,130,60,0.22),
    0 4px 12px -4px rgba(200,169,90,0.12);
  transition:
    transform var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft);
  overflow: hidden;
}

/* (shimmer handled by section-specific rules below) */
.couple-card__shimmer-legacy { display: none; }

/* Outer decorative border (solid gold) */
.couple-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1.5px solid rgba(200,169,90,0.55);
  pointer-events: none;
  z-index: 1;
  transition: border-color var(--dur-med) var(--ease-soft);
}
/* Inner inset frame (dashed) */
.couple-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(200,169,90,0.28);
  pointer-events: none;
  z-index: 1;
  transition: border-color var(--dur-med) var(--ease-soft), opacity var(--dur-med);
}

.couple-card:hover {
  transform: translateY(-12px) scale(1.015);
  box-shadow:
    0 0 0 1.5px rgba(200,169,90,0.65),
    0 0 0 5px rgba(200,169,90,0.1),
    0 30px 60px -16px rgba(160,130,60,0.32),
    0 6px 18px -4px rgba(200,169,90,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.couple-card:hover::before { border-color: var(--gold); }
.couple-card:hover::after  { border-color: rgba(200,169,90,0.5); }

/* Top ornamental bar — gold gradient accent */
.couple-card .card-top-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,169,90,0.4) 15%,
    var(--gold) 35%,
    var(--gold-light) 50%,
    var(--gold) 65%,
    rgba(200,169,90,0.4) 85%,
    transparent 100%
  );
  z-index: 2;
}

/* Shimmer sweep */
.couple-card__shimmer {
  position: absolute;
  top: -50%; left: -65%;
  width: 30%; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.32), transparent);
  transform: rotate(28deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s;
}
.couple-card:hover .couple-card__shimmer {
  opacity: 1;
  animation: cardShimmer 1s ease-in-out forwards;
}
@keyframes cardShimmer {
  0%   { left: -65%; }
  100% { left: 140%; }
}

/* Corner ornament diamonds */
.couple-card .card-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 2;
  opacity: 0.55;
  transition: opacity var(--dur-med);
}
.couple-card:hover .card-corner { opacity: 0.9; }
.couple-card .card-corner.tl { top: 14px;  left: 14px;  }
.couple-card .card-corner.tr { top: 14px;  right: 14px; transform: scaleX(-1); }
.couple-card .card-corner.bl { bottom: 14px; left: 14px;  transform: scaleY(-1); }
.couple-card .card-corner.br { bottom: 14px; right: 14px; transform: scale(-1,-1); }
.couple-card .card-corner svg {
  width: 100%;
  height: 100%;
}

/* ---- Avatar frame ---- */
.couple-card__avatar-frame {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rich radial fill */
  background:
    radial-gradient(circle at 38% 35%, #FFFEF9 0%, #FDF6DC 55%, #F5E8B0 100%);
  /* Layered ring shadows */
  box-shadow:
    0 0 0 3px rgba(200,169,90,0.22),
    0 0 0 7px rgba(200,169,90,0.07),
    0 8px 22px rgba(160,130,60,0.2),
    inset 0 2px 6px rgba(255,255,255,0.9),
    inset 0 -2px 6px rgba(200,169,90,0.12);
  transition:
    transform var(--dur-med) var(--ease-soft),
    box-shadow var(--dur-med) var(--ease-soft);
  z-index: 2;
}
.couple-card:hover .couple-card__avatar-frame {
  transform: scale(1.07) rotate(2deg);
  box-shadow:
    0 0 0 3px rgba(200,169,90,0.5),
    0 0 0 8px rgba(200,169,90,0.1),
    0 14px 32px rgba(160,130,60,0.3),
    inset 0 2px 6px rgba(255,255,255,0.95),
    inset 0 -2px 6px rgba(200,169,90,0.18);
}

/* Initial letter */
.couple-card__initial {
  font-family: var(--f-names);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 2px 8px rgba(200,169,90,0.25);
  position: relative;
  z-index: 1;
}

/* Outer rotating ring */
.couple-card__avatar-ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(200,169,90,0.35);
  transition:
    transform var(--dur-med) var(--ease-soft),
    border-color var(--dur-med),
    opacity var(--dur-med);
  animation: avatarRingRotate 18s linear infinite;
}
@keyframes avatarRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Second ring */
.couple-card__avatar-ring::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(200,169,90,0.18);
  transition: inherit;
  animation: avatarRingRotate 28s linear infinite reverse;
}
.couple-card:hover .couple-card__avatar-ring {
  transform: scale(1.1) rotate(8deg);
  border-color: rgba(200,169,90,0.7);
  animation-play-state: paused;
}
.couple-card:hover .couple-card__avatar-ring::after {
  border-color: rgba(200,169,90,0.35);
  animation-play-state: paused;
}

/* ---- Name ---- */
.couple-card__name {
  font-family: var(--f-names);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--ink-heading);
  letter-spacing: 0.01em;
  position: relative;
  z-index: 2;
}
/* Underline flourish below name */
.couple-card__name::after {
  content: "";
  display: block;
  width: 44px;
  height: 1.5px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
}

/* ---- Details block ---- */
.couple-card__details {
  margin-top: 22px;
  position: relative;
  z-index: 2;
}
.couple-card__relationship {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.relationship-grandparents {
  font-family: var(--f-heading);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.65;
}
.relationship-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.relationship-separator::before,
.relationship-separator::after {
  content: "";
  flex: 1;
  max-width: 50px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,169,90,0.4), transparent);
}
.relationship-separator .gold-diamond {
  margin-inline: 8px;
  transform: rotate(45deg) scale(0.85);
}
.relationship-parents {
  font-family: var(--f-heading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink-heading);
  line-height: 1.6;
}

/* ---- Divider between cards ---- */
.couple-divider{
  align-self:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.couple-divider .line{
  width:1px; height:120px;
  background:linear-gradient(var(--divider), var(--gold), var(--divider));
}
.couple-divider .amp-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, var(--bg-primary), #FAF5E8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 4px rgba(200,169,90,0.08),
    var(--shadow-card);
}
.couple-divider .amp{
  font-family:var(--f-heading);
  font-style:italic;
  color:var(--gold);
  font-size:1.6rem;
  line-height: 1;
}

@media (max-width: 760px){
  .couple-grid{ grid-template-columns:1fr; }
  .couple-divider{ flex-direction:row; padding:16px 0; justify-content:center; }
  .couple-divider .line{ width:80px; height:1px; background:linear-gradient(90deg, var(--divider), var(--gold), var(--divider)); }
}

/* ---------------------------------------------------------------------- */
/* WEDDING DETAILS                                                         */
/* ---------------------------------------------------------------------- */
.details-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:56px;
}
.detail-card{
  background: rgba(255, 253, 247, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200, 169, 90, 0.35) !important;
  border-top: 3.5px solid var(--gold) !important; /* Premium Gold top border */
  border-radius:8px;
  padding:40px 28px;
  text-align:center;
  transition:transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft), border-color var(--dur-med);
}
.detail-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-soft);
  border-color: var(--gold-light) !important;
}
.detail-card .detail-card__icon-wrap svg{ width:28px; height:28px; color:var(--gold); }
.detail-card h3{
  font-family:var(--f-heading);
  font-size:1.3rem;
  color:var(--ink-heading);
  margin-bottom:6px;
}
.detail-card p{ font-size:.88rem; }
.detail-card .sub{ color:var(--ink-muted); font-size:.78rem; margin-top:4px; }
@media (max-width: 760px){
  .details-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------- */
/* COUNTDOWN                                                               */
/* ---------------------------------------------------------------------- */
.countdown{
  display:flex;
  justify-content:center;
  gap:clamp(12px, 4vw, 30px);
  margin-top:50px;
  flex-wrap:wrap;
}
.countdown__unit{
  min-width:96px;
  background: linear-gradient(135deg, var(--white-paper) 0%, #FAF5E8 100%); /* Luxury cream gradient */
  border: 1px solid rgba(200, 169, 90, 0.35); /* Soft gold-tinted border */
  border-top: 3.5px solid var(--gold); /* Gold top accent border */
  border-radius: 6px;
  padding: 20px 10px 14px;
  box-shadow: 0 10px 25px rgba(200, 169, 90, 0.06);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), border-color var(--dur-fast);
}
.countdown__unit:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(200, 169, 90, 0.16);
  border-color: var(--gold);
}
.countdown__number{
  font-family:var(--f-names);
  font-size:clamp(2rem, 5vw, 2.8rem);
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  transition:opacity .25s var(--ease-soft);
  font-weight: 600;
  line-height: 1.1;
}
.countdown__label{
  margin-top:6px;
  font-size:.58rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color: var(--ink-muted);
}
.countdown__sep{
  align-self:center;
  font-family:var(--f-names);
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  color:var(--gold);
  opacity: 0.65;
}

/* ---------------------------------------------------------------------- */
/* VENUE                                                                   */
/* ---------------------------------------------------------------------- */
.venue-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px, 5vw, 56px);
  align-items:center;
  margin-top:50px;
}
.venue-info{ text-align:left; }
.venue-info h3{
  font-family:var(--f-names);
  font-size:1.8rem;
  color:var(--ink-heading);
}
.venue-info p{ margin-top:10px; }
.venue-actions{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.map-frame{
  width:100%;
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--divider);
  box-shadow:var(--shadow-card);
}
.map-frame iframe{ width:100%; height:100%; border:0; }
@media (max-width: 860px){
  .venue-wrap{ grid-template-columns:1fr; }
  .venue-info{ text-align:center; }
  .venue-actions{ justify-content:center; }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 28px;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  border-radius:999px;
  transition:all var(--dur-fast) var(--ease-soft);
  border:1px solid var(--gold);
}
.btn--solid{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  border: none;
  color:#fff;
  box-shadow: 0 4px 15px rgba(200, 169, 90, 0.25);
}
.btn--solid:hover{ 
  transform:translateY(-2px); 
  box-shadow: 0 6px 20px rgba(200, 169, 90, 0.4); 
}
.btn--outline{
  background:transparent;
  color:var(--gold);
  border: 1px solid var(--gold);
}
.btn--outline:hover{ 
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); 
  border-color:transparent; 
  color:#fff; 
  transform:translateY(-2px); 
  box-shadow: 0 6px 18px rgba(200, 169, 90, 0.2);
}
.btn svg{ width:15px; height:15px; }

/* ---------------------------------------------------------------------- */
/* RSVP                                                                    */
/* ---------------------------------------------------------------------- */
.rsvp-card{
  position: relative;
  max-width:640px;
  margin:56px auto 0;
  background: linear-gradient(145deg, var(--white-paper) 0%, #FAF5E8 100%); /* Premium cream/gold gradient */
  border:1px solid rgba(200, 169, 90, 0.35);
  border-top: 4px solid var(--gold);
  border-radius:12px;
  padding:clamp(28px, 5vw, 52px);
  box-shadow: 0 15px 35px rgba(200, 169, 90, 0.06);
  overflow: hidden;
}
.rsvp-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(200, 169, 90, 0.15); /* Inset dashed border */
  border-radius: 8px;
  pointer-events: none;
}
.rsvp-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(200, 169, 90, 0.2); /* Inset solid border */
  border-radius: 10px;
  pointer-events: none;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  position: relative;
  z-index: 2;
}
.field{
  margin-bottom:20px;
  position: relative;
  z-index: 2;
}
.field label{
  display:block;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold); /* Gold label text */
  font-weight: 500;
  margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  border: 1px solid rgba(200, 169, 90, 0.25);
  background: #FFFDF7;
  border-radius: 6px;
  padding:12px 14px;
  font-family:var(--f-body);
  font-size:.94rem;
  color:var(--ink-heading);
  transition:border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.field input::placeholder, .field textarea::placeholder{ color:#C5BCA5; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,169,90,0.15);
}
.field input:disabled, .field select:disabled, .field textarea:disabled{
  opacity:.55;
  cursor:not-allowed;
  background:var(--bg-secondary);
}
.rsvp-unavailable{
  color:var(--ink-muted);
  font-style:italic;
  margin-bottom:28px;
  position: relative;
  z-index: 2;
}
.field textarea{ resize:vertical; min-height:100px; }
.radio-group{ display:flex; gap:18px; flex-wrap:wrap; }
.radio-group label{
  display:flex; align-items:center; gap:8px;
  text-transform:none; letter-spacing:0; font-size:.92rem; color:var(--ink-body);
  cursor:pointer;
}
.radio-group input{ width:auto; accent-color:var(--gold); }

.rsvp-submit{
  width:100%;
  justify-content:center;
  margin-top:6px;
  position:relative;
  z-index: 2;
}
.rsvp-submit .spinner{
  display:none;
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,0.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.rsvp-submit.is-loading .spinner{ display:inline-block; }
.rsvp-submit.is-loading .btn-text{ opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-popup{
  position:fixed;
  inset:0;
  background:rgba(10, 31, 19, 0.4); /* Green tinted overlay tint */
  display:flex; align-items:center; justify-content:center;
  z-index:2000;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-soft);
  padding:20px;
}
.form-popup.is-active{ opacity:1; pointer-events:auto; }
.form-popup__card{
  background: linear-gradient(145deg, var(--white-paper) 0%, #FAF5E8 100%);
  border-radius:12px;
  padding:44px 36px;
  max-width:380px;
  text-align:center;
  transform:translateY(16px) scale(.97);
  transition:transform var(--dur-med) var(--ease-soft);
  border: 1px solid rgba(200, 169, 90, 0.4);
  position: relative;
  box-shadow: 0 20px 45px rgba(200, 169, 90, 0.15);
}
.form-popup__card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(200, 169, 90, 0.2);
  border-radius: 8px;
  pointer-events: none;
}
.form-popup.is-active .form-popup__card{ transform:translateY(0) scale(1); }
.form-popup__icon{
  width:52px; height:52px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold);
  background: #FFFDF7;
}
.form-popup__icon svg{ width:22px; height:22px; color:var(--gold); }
.form-popup h4{
  font-family:var(--f-heading);
  font-size:1.5rem;
  color:var(--ink-heading);
}
.form-popup p{ margin-top:10px; font-size:.92rem; color: var(--ink-body); }
.form-popup button{
  margin-top:22px;
  position: relative;
  z-index: 2;
}
@media (max-width: 560px){
  .form-row{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------- */
/* THANK YOU                                                               */
/* ---------------------------------------------------------------------- */
.thankyou{ text-align:center; }
.thankyou__heading{
  font-family:var(--f-names);
  font-size:clamp(2rem, 4.5vw, 2.6rem);
  color:var(--ink-heading);
}
.thankyou__message{
  max-width:560px;
  margin:20px auto 0;
}
.thankyou__blessing{
  margin-top:22px;
  font-family:var(--f-heading);
  font-style:italic;
  color:var(--gold);
  font-size:1.15rem;
}
.thankyou__floral{
  width:110px;
  margin:34px auto 0;
  opacity:.85;
}

/* ---------------------------------------------------------------------- */
/* FOOTER                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{
  padding-block:44px;
  text-align:center;
  background: linear-gradient(to bottom, #FDFBF5 0%, #FAF5E8 100%);
  border-top:1px solid rgba(200, 169, 90, 0.2);
}
.site-footer .monogram{
  font-family:var(--f-heading);
  font-style:italic;
  color:var(--gold);
  font-size:1.5rem;
  margin-bottom:12px;
}
.site-footer p{ font-size:.82rem; color:var(--ink-muted); }
.site-footer .foot-line{ margin-top:4px; letter-spacing:.05em; }

/* ---------------------------------------------------------------------- */
/* Responsive container tightening                                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 500px){
  :root{ --section-space: 64px; }
  .countdown__sep{ display:none; }
}

html, body{ max-width:100%; overflow-x:hidden; }

/* ---------------------------------------------------------------------- */
/* Premium Ornaments and Card Accents                                    */
/* ---------------------------------------------------------------------- */
/* card-top-accent handled in couple-card block above */
/* couple-card shimmer handled by main block above */
.card-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 3;
  opacity: 0.65;
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med);
}
.couple-card:hover .card-corner {
  opacity: 0.95;
}
.card-corner svg {
  width: 100%;
  height: 100%;
}
.card-corner.tl {
  top: 20px;
  left: 20px;
}
.card-corner.tr {
  top: 20px;
  right: 20px;
  transform: scaleX(-1);
}
.card-corner.bl {
  bottom: 20px;
  left: 20px;
  transform: scaleY(-1);
}
.card-corner.br {
  bottom: 20px;
  right: 20px;
  transform: scale(-1, -1);
}

.detail-card {
  position: relative;
  overflow: hidden;
}
.detail-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(200, 169, 90, 0.15); /* Luxury dashed frame inside detail cards */
  border-radius: 6px;
  pointer-events: none;
  transition: border-color var(--dur-med) var(--ease-soft);
}
.detail-card:hover::before {
  border-color: rgba(200, 169, 90, 0.45);
}


/* ========================================================================== */
/*  SECTION BACKGROUNDS & INTERACTIVE EFFECTS  (added)                        */
/* ========================================================================== */

/* ---- shared section-canvas layer (tilt / glow follows cursor via JS) ---- */
.section-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ===================== 1. HERO ============================================ */
/* Mouse-tracking radial spotlight */
.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 40%),
    rgba(200,169,90,0.07) 0%,
    transparent 70%
  );
  transition: background 0.1s;
}

/* Floating geometric shapes behind hero content */
.hero__geo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: geoFloat var(--dur, 14s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes geoFloat {
  from { transform: translate(0, 0) rotate(0deg); opacity: var(--op, .07); }
  to   { transform: translate(var(--tx, 20px), var(--ty, -30px)) rotate(180deg); opacity: calc(var(--op, .07) * 1.5); }
}

/* ===================== 2. BISMILLAH ======================================= */
#bismillah {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(200,169,90,0.09) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(200,169,90,0.06) 0%, transparent 55%),
    linear-gradient(180deg, #FDFAF2 0%, #F8F2E2 50%, #FDFAF2 100%);
}

/* Rotating mandala rings */
.bismillah__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(200,169,90, var(--op, .12));
  pointer-events: none;
  animation: mandalaSpin var(--spd, 40s) linear infinite;
  transform: translate(-50%, -50%);
}
@keyframes mandalaSpin {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Arabic text glow pulse */
.bismillah__arabic {
  animation: arabicGlow 3.5s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}
@keyframes arabicGlow {
  from { text-shadow: 0 0 0px rgba(200,169,90,0);   }
  to   { text-shadow: 0 0 28px rgba(200,169,90,0.35), 0 0 60px rgba(200,169,90,0.12); }
}

/* Scroll-triggered parallax scale on mandala */
.bismillah__mandala-bg {
  transition: transform 0.6s var(--ease-soft);
  will-change: transform;
}

/* ===================== 3. INVITATION ====================================== */
#invitation {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(200,169,90,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(200,169,90,0.05) 0%, transparent 50%),
    linear-gradient(160deg, #FEFCF5 0%, #FBF5E4 55%, #FEF9EE 100%);
}

/* Animated starfield dots */
.invitation__star {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-light);
  pointer-events: none;
  opacity: 0;
  animation: starTwinkle var(--spd, 4s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes starTwinkle {
  0%   { opacity: 0;    transform: scale(0.5); }
  50%  { opacity: var(--op, .3); transform: scale(1.2); }
  100% { opacity: 0.05; transform: scale(0.8); }
}

/* Dua card 3D tilt */
.invitation__dua-card {
  transform-style: preserve-3d;
  transition:
    transform 0.4s var(--ease-soft),
    box-shadow 0.4s var(--ease-soft);
  will-change: transform;
  cursor: default;
}
.invitation__dua-card:hover {
  box-shadow:
    0 22px 48px -12px rgba(160,130,60,0.22),
    0 4px 14px -4px rgba(200,169,90,0.14);
}

/* Arch border animated draw */
.invitation__arch-bg {
  border: none;
  overflow: hidden;
}
.invitation__arch-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 200px 200px 0 0;
  border: 1px dashed rgba(200,169,90,0.22);
  animation: archFade 4s ease-in-out infinite alternate;
}
@keyframes archFade {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* ===================== 4. COUPLE ========================================== */
#couple {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(200,169,90,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 50%, rgba(200,169,90,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #F8F3E8 0%, #F2EAD6 50%, #F8F3E8 100%);
}

/* Floating petal particles */
.petal {
  position: absolute;
  width: var(--sz, 10px);
  height: var(--sz, 10px);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  animation: petalFall var(--dur, 12s) ease-in-out var(--delay, 0s) infinite;
}
.petal::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 40% 40%, rgba(200,169,90,0.55), rgba(200,169,90,0.1));
  border-radius: 50% 0 50% 0;
  transform: rotate(var(--rot, 45deg));
}
@keyframes petalFall {
  0%   { transform: translateY(-40px)  translateX(0)    rotate(0deg);   opacity: 0; }
  10%  { opacity: var(--op, .18); }
  80%  { opacity: var(--op, .18); }
  100% { transform: translateY(110vh)  translateX(var(--dx, 60px)) rotate(360deg); opacity: 0; }
}

/* Section-wide shimmer overlay on scroll enter */
#couple .section-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,248,210,0.12) 50%,
    transparent 60%
  );
  background-size: 300% 100%;
  background-position: 200% 0;
  pointer-events: none;
  z-index: 1;
  animation: sectionShimmer 5s ease-in-out 0.5s infinite;
}
@keyframes sectionShimmer {
  0%, 100% { background-position: 200% 0; opacity: 0; }
  40%       { background-position: -50% 0; opacity: 1; }
  60%       { background-position: -100% 0; opacity: 0; }
}

/* ===================== 5. DETAILS / COUNTDOWN ============================= */
#details {
  position: relative;
  overflow: hidden;
  /* Elegant dark-cream with subtle grid */
  background:
    linear-gradient(180deg, #FDFAF3 0%, #F5EDD8 50%, #FDFAF3 100%);
}
/* Dot-grid pattern */
#details::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(200,169,90,0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

/* Detail card — icon glow pulse on hover */
.detail-card__icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(200,169,90,0.07);
  margin-bottom: 16px;
  transition: background 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.detail-card__icon-wrap svg {
  width: 26px;
  height: 26px;
  color: var(--gold);
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease-soft);
}
.detail-card:hover .detail-card__icon-wrap {
  background: rgba(200,169,90,0.14);
  box-shadow: 0 0 0 6px rgba(200,169,90,0.08), 0 0 22px rgba(200,169,90,0.18);
}
.detail-card:hover .detail-card__icon-wrap svg {
  transform: scale(1.15) rotate(-6deg);
}

/* Countdown flip feel — number highlight on change */
.countdown__number {
  display: block;
  position: relative;
}
.countdown__number.flash::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  background: rgba(200,169,90,0.15);
  animation: numFlash 0.4s ease-out forwards;
}
@keyframes numFlash {
  from { opacity: 1; transform: scale(1.2); }
  to   { opacity: 0; transform: scale(1.5); }
}

/* Countdown unit glow border on hover */
.countdown__unit {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft);
}
.countdown__unit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 0%, rgba(200,169,90,0.12) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.countdown__unit:hover::after { opacity: 1; }

/* ===================== 6. VENUE =========================================== */
#venue {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(200,169,90,0.08) 0%, transparent 55%),
    linear-gradient(160deg, #FEFCF5 0%, #F6EDD5 60%, #FEFCF5 100%);
}
/* Diagonal stripe watermark */
#venue::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px,
    transparent 24px,
    rgba(200,169,90,0.035) 24px,
    rgba(200,169,90,0.035) 25px
  );
  pointer-events: none;
  z-index: 0;
}

/* Map frame — hover zoom + glow */
.map-frame {
  position: relative;
  z-index: 1;
  transition:
    box-shadow 0.5s var(--ease-soft),
    transform 0.5s var(--ease-soft);
  border: 1px solid rgba(200,169,90,0.3);
}
.map-frame::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-light), transparent, var(--gold));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s;
}
.map-frame:hover {
  transform: scale(1.01);
  box-shadow:
    0 0 0 2px rgba(200,169,90,0.5),
    0 24px 48px -12px rgba(160,130,60,0.22);
}
.map-frame:hover::before { opacity: 0.5; }

/* Venue info heading underline draw */
.venue-info h3 {
  position: relative;
  display: inline-block;
}
.venue-info h3::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.6s var(--ease-soft);
}
#venue.in-view .venue-info h3::after {
  width: 100%;
}

/* ===================== 7. RSVP ============================================ */
#rsvp {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(200,169,90,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 20%, rgba(200,169,90,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #FDFAF2 0%, #F5EDD8 50%, #FDFAF2 100%);
}
/* Ornamental background arcs */
#rsvp::before {
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: min(800px, 120vw);
  height: min(800px, 120vw);
  border-radius: 50%;
  border: 1px dashed rgba(200,169,90,0.1);
  pointer-events: none;
  z-index: 0;
}
#rsvp::after {
  content: "";
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: min(600px, 100vw);
  height: min(600px, 100vw);
  border-radius: 50%;
  border: 1px solid rgba(200,169,90,0.07);
  pointer-events: none;
  z-index: 0;
}

/* Input focus — gold glow sweep */
.field input,
.field select,
.field textarea {
  position: relative;
  background: linear-gradient(#FFFDF7, #FFFDF7) padding-box,
              linear-gradient(135deg, rgba(200,169,90,0.12), rgba(200,169,90,0.05)) border-box;
  transition:
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft),
    transform 0.25s var(--ease-soft);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(200,169,90,0.15),
    0 4px 14px -4px rgba(200,169,90,0.18);
  transform: translateY(-1px);
}

/* Label float effect wrapper */
.field {
  position: relative;
}

/* ===================== 8. THANK YOU ======================================= */
#thankyou {
  position: relative;
  overflow: hidden;
  /* Deep warm gold-on-dark */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(200,169,90,0.14) 0%, transparent 60%),
    linear-gradient(180deg, #2B2416 0%, #1E1A0E 40%, #2B2416 100%);
}
#thankyou .section-heading,
#thankyou .eyebrow,
#thankyou .thankyou__heading,
#thankyou .thankyou__message,
#thankyou .thankyou__blessing {
  color: #EDE0BF !important;
}
#thankyou .hairline {
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
#thankyou .eyebrow { color: rgba(200,169,90,0.75) !important; }
#thankyou .thankyou__blessing { color: var(--gold-light) !important; }

/* Rose petal float */
.ty-petal {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  font-size: var(--fs, 14px);
  animation: tyPetalFall var(--dur, 10s) ease-in-out var(--delay, 0s) infinite;
  user-select: none;
}
@keyframes tyPetalFall {
  0%   { transform: translateY(-30px) translateX(0) rotate(0deg);  opacity: 0; }
  8%   { opacity: var(--op, 0.25); }
  85%  { opacity: var(--op, 0.25); }
  100% { transform: translateY(105vh) translateX(var(--dx, 50px)) rotate(540deg); opacity: 0; }
}

/* Monogram / heading glow on hover */
.thankyou__heading {
  transition: text-shadow 0.5s var(--ease-soft);
  cursor: default;
}
.thankyou__heading:hover {
  text-shadow: 0 0 30px rgba(200,169,90,0.5), 0 0 60px rgba(200,169,90,0.2);
}

/* ===================== 9. FOOTER ========================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,169,90,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #1E1A0E 0%, #161208 100%) !important;
  border-top: 1px solid rgba(200,169,90,0.2) !important;
}
.site-footer p,
.site-footer .foot-line {
  color: rgba(220,205,170,0.55) !important;
}
.site-footer .monogram {
  color: var(--gold-light) !important;
  font-size: 1.8rem;
  transition: text-shadow 0.5s var(--ease-soft), letter-spacing 0.5s var(--ease-soft);
  cursor: default;
}
.site-footer .monogram:hover {
  text-shadow: 0 0 20px rgba(200,169,90,0.6), 0 0 40px rgba(200,169,90,0.25);
  letter-spacing: 0.06em;
}

/* Footer glow orb */
.footer-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  pointer-events: none;
}
.footer-glow::after {
  content: "";
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 60px;
  background: radial-gradient(ellipse, rgba(200,169,90,0.18) 0%, transparent 70%);
  border-radius: 50%;
}

/* ===================== GLOBAL: section reveal entrance =================== */
/* Each section gets a subtle background-scale on enter */
.section-bg-scale {
  transform: scale(1.03);
  transition: transform 1.4s var(--ease-soft);
}
.section-bg-scale.in-view {
  transform: scale(1);
}

/* Floating ornament dots (shared between sections) */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(200,169,90, var(--op, .08)) 0%, transparent 70%);
  animation: orbDrift var(--dur, 20s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes orbDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--tx, 30px), var(--ty, -40px)); }
}

/* Tilt card effect (applied via JS data-tilt) */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* ===================== RESPONSIVE OVERRIDES ============================== */
@media (max-width: 600px) {
  #thankyou {
    background:
      radial-gradient(ellipse at 50% 20%, rgba(200,169,90,0.14) 0%, transparent 55%),
      linear-gradient(180deg, #2B2416 0%, #1E1A0E 100%);
  }
  .site-footer {
    background: linear-gradient(180deg, #1E1A0E 0%, #161208 100%) !important;
  }
}