/* =========================================================
   FAHRI & MEGA — BURGUNDY ROYAL 3D MOTION THEME
   Visual-only enhancement: existing structure/layout preserved.
========================================================= */
:root{
  --fm-wine:#260813;
  --fm-burgundy:#4b0d1d;
  --fm-burgundy-2:#68152b;
  --fm-rose:#9e3d5b;
  --fm-blush:#d08a9d;
  --fm-champagne:#e7c98b;
  --fm-champagne-light:#f6e7bd;
  --fm-cream:#fff8f0;
  --fm-glass:rgba(62,10,27,.72);
  --fm-border:rgba(231,201,139,.36);
  --fm-glow:rgba(208,138,157,.28);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 50% 5%,rgba(158,61,91,.25),transparent 30%),
    radial-gradient(circle at 10% 70%,rgba(104,21,43,.22),transparent 30%),
    radial-gradient(circle at 90% 40%,rgba(231,201,139,.10),transparent 25%),
    linear-gradient(145deg,#16040b 0%,#3a0818 46%,#5a1028 100%)!important;
  color:var(--fm-cream);
  overflow-x:hidden;
}

/* Deep wine arabesque background */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:
    linear-gradient(30deg,rgba(255,255,255,.028) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.028) 87.5%),
    linear-gradient(150deg,rgba(231,201,139,.032) 12%,transparent 12.5%,transparent 87%,rgba(231,201,139,.032) 87.5%),
    radial-gradient(circle,rgba(255,236,214,.13) 0 1px,transparent 1.5px);
  background-size:52px 90px,52px 90px,118px 118px;
  opacity:.72;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 50% -5%,rgba(208,138,157,.17),transparent 32%),
    radial-gradient(circle at 50% 105%,rgba(231,201,139,.09),transparent 30%);
}

.section{position:relative;overflow:hidden}
.section::before{
  content:"✦  ۞  ✦";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  color:rgba(231,201,139,.20);letter-spacing:16px;font-size:18px;pointer-events:none;z-index:1;
}

.opening-section,.hero-section{
  background:
    radial-gradient(circle at 50% 18%,rgba(158,61,91,.30),transparent 38%),
    radial-gradient(circle at 15% 70%,rgba(231,201,139,.08),transparent 22%),
    linear-gradient(145deg,#19040c,#430a1d 55%,#260813)!important;
}
.opening-section::before,.hero-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(circle,rgba(255,244,230,.13) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent);
  opacity:.20;animation:fmDrift 20s linear infinite;
}

.bismillah,.arabic,.hero-subtitle{
  color:var(--fm-champagne-light)!important;
  text-shadow:0 0 24px rgba(231,201,139,.25);
}
.opening-name,.couple-name{
  color:#fffaf4!important;
  text-shadow:0 10px 38px rgba(0,0,0,.38);
}
.opening-name .amp,.couple-name .amp{color:var(--fm-champagne)!important}
.opening-date,.hero-date{color:#f1c7d3!important}

/* Luxurious glass cards */
.guest-wrapper,.hero-guest,.quote-card,.couple-card,.count-card,.event-card,.story-card,.gift-card,.rsvp-card,.wish-card{
  background:linear-gradient(145deg,rgba(91,17,42,.84),rgba(38,8,19,.78))!important;
  border-color:var(--fm-border)!important;
  box-shadow:0 24px 75px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(231,201,139,.035)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.guest-wrapper,.hero-guest{position:relative;overflow:hidden}
.guest-wrapper::after,.hero-guest::after,.couple-card::after,.count-card::after{
  content:"";position:absolute;inset:-45%;
  background:linear-gradient(110deg,transparent 40%,rgba(255,248,236,.13) 49%,transparent 58%);
  transform:translateX(-65%) rotate(8deg);animation:fmShine 8s ease-in-out infinite;
  pointer-events:none;
}
.guest-wrapper h3,.hero-guest strong{color:#fff!important}
.section-title span,.section-title h2,.gold{color:var(--fm-champagne)!important}
.section-title p,.parent-text,.translation{color:#f0d7df!important}

/* 3D photo frames */
.photo-3d{
  position:relative;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s;
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.34));
}
.photo-3d::before{
  content:"";position:absolute;inset:-12px;border:1px solid rgba(231,201,139,.52);
  border-radius:inherit;transform:translateZ(-10px) rotate(3deg);
  box-shadow:0 0 0 5px rgba(104,21,43,.25),0 18px 35px rgba(0,0,0,.25);
  pointer-events:none;
}
.photo-3d::after{
  content:"";position:absolute;inset:-20px;border:1px solid rgba(208,138,157,.18);
  border-radius:inherit;transform:translateZ(-18px) rotate(-3deg);pointer-events:none;
}
.photo-3d img{
  box-shadow:0 0 0 5px rgba(231,201,139,.58),0 0 0 10px rgba(158,61,91,.16),0 28px 55px rgba(0,0,0,.38)!important;
}
.count-card strong{color:#fff!important;text-shadow:0 0 25px rgba(208,138,157,.28)}

/* Buttons */
.btn-gold,.btn-primary{
  background:linear-gradient(135deg,#a96a78,#e7c98b 58%,#f3dfae)!important;
  color:#2b0814!important;border:0!important;
  box-shadow:0 14px 34px rgba(231,201,139,.18),inset 0 1px rgba(255,255,255,.45);
}
.btn-gold:hover,.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 18px 42px rgba(231,201,139,.24)}
.music-button{
  background:linear-gradient(135deg,#791a36,#430a1d)!important;
  border:1px solid rgba(231,201,139,.72)!important;
  box-shadow:0 0 0 7px rgba(208,138,157,.08),0 16px 44px rgba(0,0,0,.40)!important;
}
.music-button.is-playing{animation:fmPulse 1.7s ease-in-out infinite}

.gallery-item{
  border:1px solid rgba(231,201,139,.28)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.30),0 0 0 1px rgba(208,138,157,.06);
  transform:translateZ(0);transition:transform .5s,box-shadow .5s,filter .5s;
}
.gallery-item:hover{transform:translateY(-9px) scale(1.018) rotateX(1deg)!important;box-shadow:0 30px 70px rgba(0,0,0,.42);filter:saturate(1.08)}
.scroll-down{color:var(--fm-champagne)!important;animation:fmBounce 2s infinite}

/* Floating 3D dust / petals */
.fm-particle{
  position:fixed;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff4d5 0 14%,#e7c98b 34%,#9e3d5b 72%,transparent 74%);
  box-shadow:0 0 20px rgba(231,201,139,.55);
  pointer-events:none;z-index:4;animation:fmFloat linear infinite;
}
.fm-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,#6f1631,#d08a9d,#e7c98b);z-index:10000;
  box-shadow:0 0 16px rgba(231,201,139,.72);
}
.fm-cursor-glow{
  position:fixed;width:190px;height:190px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(208,138,157,.12),transparent 68%);
  transform:translate(-50%,-50%);mix-blend-mode:screen;
}

/* =========================================================
   3D ARABESQUE / FLORAL ORNAMENT SYSTEM
========================================================= */
.section,.opening-section,.hero-section{position:relative;overflow:hidden}
.section:before,.section:after,.hero-section:before,.hero-section:after,.opening-section:before,.opening-section:after{
  pointer-events:none;z-index:0;
}
.section:before,.hero-section:before{
  width:190px;height:190px;left:-52px;top:28px;
  background:
    radial-gradient(circle at 50% 9%,rgba(231,201,139,.85) 0 6px,transparent 7px),
    radial-gradient(ellipse at 30% 30%,rgba(208,138,157,.48) 0 18px,transparent 19px),
    radial-gradient(ellipse at 70% 30%,rgba(231,201,139,.35) 0 21px,transparent 22px),
    radial-gradient(ellipse at 50% 70%,rgba(158,61,91,.52) 0 25px,transparent 26px),
    radial-gradient(ellipse at 15% 70%,rgba(231,201,139,.25) 0 12px,transparent 13px);
  filter:drop-shadow(0 0 18px rgba(208,138,157,.20));
  transform:rotate(-18deg);animation:fmFlowerFloat 8s ease-in-out infinite;
}
.section:after,.hero-section:after{
  width:205px;height:205px;right:-60px;bottom:18px;
  background:
    radial-gradient(circle at 50% 9%,rgba(231,201,139,.82) 0 6px,transparent 7px),
    radial-gradient(ellipse at 30% 30%,rgba(158,61,91,.44) 0 21px,transparent 22px),
    radial-gradient(ellipse at 70% 30%,rgba(231,201,139,.34) 0 19px,transparent 20px),
    radial-gradient(ellipse at 50% 70%,rgba(208,138,157,.34) 0 26px,transparent 27px),
    radial-gradient(ellipse at 82% 72%,rgba(231,201,139,.24) 0 13px,transparent 14px);
  filter:drop-shadow(0 0 18px rgba(231,201,139,.16));
  transform:rotate(22deg);animation:fmFlowerFloat2 10s ease-in-out infinite;
}
.opening-section:before{
  inset:0;width:auto;height:auto;
  background:
    radial-gradient(circle at 12% 20%,rgba(208,138,157,.13),transparent 18%),
    radial-gradient(circle at 88% 78%,rgba(231,201,139,.11),transparent 20%);
  mix-blend-mode:screen;
}
.opening-section:after{
  width:330px;height:330px;right:-130px;top:8%;bottom:auto;
  border:1px solid rgba(231,201,139,.08);border-radius:50%;
  box-shadow:0 0 0 20px rgba(208,138,157,.025),0 0 0 42px rgba(231,201,139,.018);
  animation:fmOrbit 18s linear infinite;transform:none;
}

/* Decorative 3D flowers injected by motion.js */
.fm-floral{
  position:absolute;z-index:1;width:104px;height:104px;pointer-events:none;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));opacity:.82;
  transform-style:preserve-3d;perspective:700px;
}
.fm-floral:before{
  content:"";position:absolute;inset:16px;border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 8%,rgba(231,201,139,.95) 0 15%,transparent 17%),
    radial-gradient(ellipse at 92% 50%,rgba(208,138,157,.78) 0 15%,transparent 17%),
    radial-gradient(ellipse at 50% 92%,rgba(231,201,139,.82) 0 15%,transparent 17%),
    radial-gradient(ellipse at 8% 50%,rgba(208,138,157,.68) 0 15%,transparent 17%),
    radial-gradient(ellipse at 23% 23%,rgba(158,61,91,.82) 0 12%,transparent 14%),
    radial-gradient(ellipse at 77% 23%,rgba(231,201,139,.72) 0 12%,transparent 14%),
    radial-gradient(ellipse at 77% 77%,rgba(158,61,91,.72) 0 12%,transparent 14%),
    radial-gradient(ellipse at 23% 77%,rgba(231,201,139,.66) 0 12%,transparent 14%);
  border:1px solid rgba(231,201,139,.25);
  transform:rotateX(58deg) rotateZ(18deg) translateZ(8px);
  box-shadow:inset 0 0 20px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.22);
  animation:fmPetalSpin 20s linear infinite;
}
.fm-floral:after{
  content:"";position:absolute;inset:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff4d2 0 12%,#e7c98b 24%,#a75a6f 52%,#4b0d1d 74%);
  border:1px solid rgba(255,244,210,.46);
  box-shadow:0 0 0 5px rgba(231,201,139,.08),0 0 25px rgba(208,138,157,.30);
  transform:translateZ(22px);animation:fmCorePulse 4s ease-in-out infinite;
}
.fm-floral.tl{top:8%;left:2%;transform:scale(.94) rotate(-12deg)}
.fm-floral.tr{top:14%;right:3%;transform:scale(.78) rotate(25deg)}
.fm-floral.bl{bottom:8%;left:4%;transform:scale(.68) rotate(-20deg)}
.fm-floral.br{bottom:5%;right:3%;transform:scale(.88) rotate(15deg)}

/* Subtle luxury medallion on alternating sections */
.rekening-card{position:relative;overflow:hidden}
.rekening-card:before{
  content:'۞';position:absolute;right:-12px;bottom:-40px;font-size:126px;
  color:rgba(208,138,157,.055);transform:rotate(-12deg);pointer-events:none;
}

/* Social / reply elements retain their existing layout, only recolored */
.wish-social-text{color:inherit}
.wish-reply-toggle{border-color:rgba(231,201,139,.46);color:#e7c98b}
.wish-reply-toggle:hover,.wish-reply-toggle:focus-visible{background:rgba(231,201,139,.10);border-color:rgba(231,201,139,.78)}
.wish-reply-public{border-left-color:#e7c98b;background:rgba(231,201,139,.055)}
.wish-reply-public-label{color:#e7c98b}
.wish-reply-public-text{color:rgba(255,248,240,.90)}
.wish-badge-absent{opacity:.92;border-style:dashed}

/* Animations */
@keyframes fmFloat{from{transform:translate3d(0,105vh,0) scale(.35) rotate(0deg);opacity:0}15%{opacity:.85}to{transform:translate3d(34px,-15vh,0) scale(1.25) rotate(160deg);opacity:0}}
@keyframes fmShine{0%,55%{transform:translateX(-68%) rotate(8deg)}75%,100%{transform:translateX(68%) rotate(8deg)}}
@keyframes fmDrift{from{background-position:0 0}to{background-position:180px 180px}}
@keyframes fmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes fmBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes fmFlowerFloat{0%,100%{translate:0 0;rotate:-18deg}50%{translate:0 12px;rotate:-8deg}}
@keyframes fmFlowerFloat2{0%,100%{translate:0 0;rotate:22deg}50%{translate:0 -14px;rotate:10deg}}
@keyframes fmPetalSpin{to{transform:rotateX(58deg) rotateZ(378deg) translateZ(8px)}}
@keyframes fmCorePulse{0%,100%{transform:translateZ(22px) scale(1)}50%{transform:translateZ(28px) scale(1.08)}}
@keyframes fmOrbit{to{transform:rotate(360deg)}}
@keyframes fmFloatStar{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(8deg)}}

@media(max-width:768px){
  .section::before{letter-spacing:8px}
  .fm-cursor-glow{display:none}
  .guest-wrapper{margin-left:8px;margin-right:8px}
  .opening-name{font-size:clamp(3rem,14vw,5rem)!important}
  .fm-floral{opacity:.56;transform:scale(.72)!important}
  .section:before,.section:after{opacity:.46}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .fm-particle,.fm-cursor-glow{display:none!important}
}

/* =====================================================
   BURGUNDY EVENT REFINEMENT
   Akad and reception cards display side-by-side on larger screens and stack on mobile.
===================================================== */
/* Event cards: equal-width columns, consistent height, responsive stacking */
#eventCardsContainer{align-items:stretch;}
#eventCardsContainer > .event-card-wrapper{display:flex;min-width:0;}
#eventCardsContainer > .event-card-wrapper[hidden]{display:none!important;}
#eventCardsContainer .event-card-main{width:100%;height:100%;box-sizing:border-box;}
@media(max-width:767.98px){
  #eventCardsContainer > .event-card-wrapper{width:100%;}
  #eventCardsContainer .event-card-main{min-height:300px;}
}

.event-card-main{
  position:relative;
  overflow:hidden;
  padding:42px 34px 38px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  isolation:isolate;
}
.event-card-main::after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-85px;
  top:-95px;
  border-radius:50%;
  border:1px solid rgba(236,205,160,.26);
  box-shadow:0 0 0 18px rgba(236,205,160,.035),0 0 0 38px rgba(236,205,160,.025);
  transform:rotate(15deg);
  pointer-events:none;
  z-index:-1;
}
.event-card-main .event-icon{
  margin-bottom:12px;
  animation:fmEventFloat 4.8s ease-in-out infinite;
}
.event-kicker{
  display:inline-block;
  margin-bottom:7px;
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(238,211,169,.86);
  font-weight:600;
}
.event-card-main h3{
  margin-bottom:16px;
  letter-spacing:.02em;
}
.event-card-main .event-date{
  font-size:1.12rem;
  margin-bottom:4px;
}
.event-card-main .event-time{
  margin-bottom:15px;
}
.event-card-main .event-location{
  max-width:650px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:22px;
}
.event-card-main .btn{
  position:relative;
  overflow:hidden;
  min-width:170px;
}
.event-card-main .btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:55%;
  height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:fmEventShine 4.8s ease-in-out infinite;
}
@keyframes fmEventFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-7px) rotate(2deg)}
}
@keyframes fmEventShine{
  0%,55%,100%{left:-120%}
  72%{left:135%}
}
@media(max-width:575.98px){
  .event-card-main{padding:34px 20px 30px;min-height:315px}
  .event-card-main::after{width:170px;height:170px;right:-75px;top:-70px}
  .event-kicker{font-size:.66rem;letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){
  .event-card-main .event-icon,.event-card-main .btn::after{animation:none}
}

/* =========================================================
   BURGUNDY FORCE OVERRIDE
   Prevent legacy blue/green theme rules and browser cache from
   affecting the public invitation while preserving layout.
========================================================= */
:root{
  --navy:#4b0d1d!important;
  --navy-2:#68152b!important;
  --gold:#e7c98b!important;
  --gold-light:#f6e7bd!important;
}
html,body{background:#260813!important;color:#fff8f0!important}
body,.section,.opening-section,.hero-section,.story-section,.countdown-section,.gift-section{background-color:#260813!important}
.opening-section,.hero-section{background:linear-gradient(145deg,#16040b 0%,#4b0d1d 52%,#68152b 100%)!important}
.opening-overlay{background:radial-gradient(circle at center,rgba(104,21,43,.15),rgba(22,4,11,.78))!important}
.hero-card,.guest-wrapper,.hero-guest,.couple-card,.count-card,.event-card,.story-card,.gift-card,.rsvp-card,.wish-card{background:linear-gradient(145deg,rgba(91,17,42,.90),rgba(38,8,19,.88))!important;border-color:rgba(231,201,139,.42)!important}
.section:nth-of-type(even){background:linear-gradient(180deg,#320914,#260813)!important}
.section-title h2,.section-title span,.gold,.footer h3,.footer-bismillah{color:#e7c98b!important}
.section-title p,.parent-text,.translation,.event-date,.event-time,.event-location{color:#f0d7df!important}
.btn-gold,.btn-primary,.btn-open{background:linear-gradient(135deg,#791a36,#a96a78 48%,#e7c98b)!important;color:#fff8f0!important;border-color:#e7c98b!important}
.btn-outline-gold{border-color:#e7c98b!important;color:#f6e7bd!important}
.btn-outline-gold:hover{background:#68152b!important;color:#fff8f0!important}
.event-icon{color:#e7c98b!important;border-color:rgba(231,201,139,.55)!important;background:rgba(75,13,29,.75)!important}
.wish-badge,.wish-badge-absent{background:#68152b!important;border-color:#e7c98b!important;color:#fff8f0!important}
.rsvp-card .form-control,.rsvp-card .form-select{background:rgba(38,8,19,.72)!important;color:#fff8f0!important;border-color:rgba(231,201,139,.35)!important}
.rsvp-card .form-control:focus,.rsvp-card .form-select:focus{border-color:#e7c98b!important;box-shadow:0 0 0 .2rem rgba(231,201,139,.16)!important}
.music-button{background:linear-gradient(135deg,#791a36,#430a1d)!important;border-color:#e7c98b!important}
.footer{background:linear-gradient(145deg,#16040b,#3a0818,#260813)!important}
.footer-brand{color:#e7c98b!important}
.scroll-down{color:#e7c98b!important}
