:root{
  --bg:#050403;
  --bg2:#0a0805;
  --gold:#d7b05f;
  --gold-light:#f0d48e;
  --ivory:#f3eadb;
  --ivory-dark:#dacbb5;
  --text:#f8f1e7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:"Aref Ruqaa",serif;overflow-x:hidden}
button,a{font:inherit}
.intro{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(215,176,95,.11),transparent 24%),
    linear-gradient(180deg,#020202,#080603 62%,#020202);
  transition:opacity 1s ease,visibility 1s ease;
}
.intro.is-hidden{opacity:0;visibility:hidden}
#introDust,#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro-beam{
  position:absolute;top:-15%;left:50%;width:130px;height:72%;
  transform:translateX(-50%);filter:blur(14px);opacity:.58;
  background:linear-gradient(90deg,transparent,rgba(255,240,202,.5),transparent);
}
.intro-ring-wrap{position:absolute;width:min(88vw,620px);height:min(58vh,560px);display:grid;place-items:center}
.intro-ring{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 46px 50px rgba(0,0,0,.8)) drop-shadow(0 0 25px rgba(215,176,95,.22));animation:introFloat 5s ease-in-out infinite}
.intro-halo{position:absolute;width:48%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(239,204,125,.24),rgba(239,204,125,.04) 45%,transparent 72%);filter:blur(18px);z-index:-1}
.intro-copy{position:absolute;bottom:max(46px,env(safe-area-inset-bottom));text-align:center;z-index:3}
.eyebrow{direction:ltr;letter-spacing:.34em;color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:10px;margin:0 0 10px}
.intro h1{font-family:"Cormorant Garamond",serif;font-size:clamp(54px,15vw,98px);font-weight:500;line-height:.88;margin:0}
.intro-sub{direction:ltr;font-family:"Cormorant Garamond",serif;font-style:italic;color:#c9bfae;font-size:clamp(17px,4vw,24px)}
#openInvitation{
  border:1px solid rgba(215,176,95,.62);background:rgba(0,0,0,.28);color:var(--gold-light);
  padding:11px 24px;border-radius:999px;cursor:pointer;backdrop-filter:blur(10px);
}
.intro-spark,.sparkle{
  position:absolute;width:5px;height:36px;background:linear-gradient(transparent,#fff7d9,transparent);opacity:0;
  filter:drop-shadow(0 0 9px #fff2b8)
}
.intro-spark::after,.sparkle::after{content:"";position:absolute;inset:0;transform:rotate(90deg);background:inherit}
.intro-spark-a{top:20%;left:58%;animation:spark 4.8s 1s infinite}.intro-spark-b{top:31%;left:41%;animation:spark 5.5s 3s infinite}
.experience{position:relative;overflow:hidden;background:var(--bg)}
.experience.is-locked{height:100svh;overflow:hidden}
.global-vignette{position:fixed;inset:0;z-index:30;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 32%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.86) 100%)}
.global-grain{position:fixed;inset:0;z-index:31;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.section{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:60px 20px;overflow:hidden}
.hero{background:radial-gradient(circle at 50% 46%,rgba(217,175,83,.13),transparent 24%),linear-gradient(180deg,#020202,#090704 70%,#030303)}
.hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-14%;height:44%;background:
repeating-linear-gradient(118deg,transparent 0 96px,rgba(215,176,95,.045) 97px 100px,transparent 101px 190px),
repeating-linear-gradient(64deg,transparent 0 130px,rgba(255,255,255,.02) 131px 134px,transparent 135px 240px),
radial-gradient(ellipse at center top,rgba(215,176,95,.09),transparent 50%),linear-gradient(180deg,#14120f,#050505);transform:perspective(900px) rotateX(67deg) translateY(36%);transform-origin:top}
.hero-copy{position:absolute;top:8%;z-index:2}
.hero-copy h2{font-size:clamp(52px,13vw,96px);margin:0;color:#f1d58d;font-weight:500}
.hero-copy h2 span,.final-names span{font-family:"Cormorant Garamond",serif;font-style:italic;color:#b9852c}
.hero-date{font-family:"Cormorant Garamond",serif;direction:ltr;letter-spacing:.24em;color:#c7aa69}
.hero-ring-wrap{position:relative;width:min(92vw,690px);height:min(62vh,590px);display:grid;place-items:center;z-index:2}
.hero-ring{width:100%;height:100%;object-fit:contain;animation:ringFloat 5s ease-in-out infinite;filter:drop-shadow(0 50px 52px rgba(0,0,0,.82)) drop-shadow(0 0 30px rgba(215,176,95,.18))}
.hero-glow{position:absolute;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(240,204,126,.22),rgba(240,204,126,.04) 44%,transparent 74%);filter:blur(20px);z-index:-1}
.sparkle-a{top:18%;left:58%;animation:spark 4.8s 1.1s infinite}.sparkle-b{top:30%;left:40%;animation:spark 5.6s 3.2s infinite}
.hero-line{position:absolute;bottom:10%;z-index:2;color:#d2bd91;font-size:clamp(17px,3.8vw,24px)}
.scroll-cue{position:absolute;bottom:4%;z-index:2;color:#a98749;font-size:13px}.scroll-cue span{display:block;font-size:22px}
.portal{background:radial-gradient(circle,#1c2438,#07101d 36%,#020202 70%)}
.portal-core{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 50px 25px rgba(140,195,255,.55);z-index:3}
.portal-ring{position:absolute;border-radius:50%;border:1px solid rgba(123,176,255,.28);animation:portalSpin 8s linear infinite}
.ring-1{width:180px;height:180px}.ring-2{width:310px;height:310px;animation-direction:reverse}.ring-3{width:460px;height:460px}
.portal p{position:absolute;bottom:12%;direction:ltr;letter-spacing:.32em;color:#c9ae69;font-family:"Cormorant Garamond",serif;font-size:11px}
.invitation{background:radial-gradient(circle at center,rgba(218,177,83,.11),transparent 45%),linear-gradient(180deg,#090704,#030303)}
.ivory-card{position:relative;width:min(92vw,760px);padding:56px 34px;background:linear-gradient(180deg,#f8f1e5,#e9ddca);color:#34291e;border:1px solid rgba(215,176,95,.75);box-shadow:0 40px 100px rgba(0,0,0,.55),inset 0 0 0 10px rgba(255,255,255,.22)}
.ivory-card::after{content:"";position:absolute;inset:14px;border:1px solid rgba(164,122,48,.25)}
.corner{position:absolute;width:54px;height:54px;border-color:#b78a3b}.corner-tl{top:18px;left:18px;border-top:1px solid;border-left:1px solid}.corner-tr{top:18px;right:18px;border-top:1px solid;border-right:1px solid}.corner-bl{bottom:18px;left:18px;border-bottom:1px solid;border-left:1px solid}.corner-br{bottom:18px;right:18px;border-bottom:1px solid;border-right:1px solid}
.card-kicker{direction:ltr;letter-spacing:.32em;color:#8b6a2d;font-family:"Cormorant Garamond",serif;font-size:10px}
.basmala{font-size:clamp(22px,4vw,30px)}.verse{font-size:clamp(18px,3.5vw,27px);line-height:2}.verse-ref{color:#8b765e}
.names{display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,46px);font-size:clamp(50px,10vw,84px);margin:18px 0}.names b{font-family:"Cormorant Garamond",serif;font-size:.56em;color:#9a7029;font-style:italic}
.invite-copy{color:#6e5b45}
.date-scene,.countdown-scene{background:linear-gradient(180deg,#070604,#0b0804 50%,#030303)}
.section-label{direction:ltr;letter-spacing:.34em;color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:10px}
.date-block{display:flex;align-items:center;justify-content:center;gap:20px;direction:ltr}.day{font-family:"Cormorant Garamond",serif;font-size:clamp(84px,22vw,160px);line-height:.8;color:#f0d28b}.month,.year{font-family:"Cormorant Garamond",serif;letter-spacing:.18em;color:#c7a45f;writing-mode:vertical-rl}
.weekday{color:#b6975f;font-size:20px}
.time-row{display:flex;align-items:center;gap:34px;margin-top:28px}.time-row div{display:flex;flex-direction:column;gap:5px}.time-row i{width:1px;height:80px;background:linear-gradient(transparent,rgba(215,176,95,.4),transparent)}.time-row small{color:#a98749}.time-row strong{font-family:"Cormorant Garamond",serif;font-size:42px;font-weight:500;color:#eed18d}.time-row span{color:#bca574}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(92vw,820px)}.countdown div{padding:24px 10px;border:1px solid rgba(215,176,95,.24);background:rgba(215,176,95,.025)}.countdown strong{display:block;font-family:"Cormorant Garamond",serif;font-size:clamp(42px,10vw,76px);font-weight:500;color:#f0d48e}.countdown span{color:#b89450}
.location-scene{background:radial-gradient(circle at 50% 70%,rgba(217,171,72,.18),transparent 28%),linear-gradient(180deg,#050403,#0b0703 65%,#020202)}
.city-lights{position:absolute;left:0;right:0;bottom:0;height:45%;background:
linear-gradient(90deg,transparent 4%,rgba(220,169,61,.12) 5% 7%,transparent 8% 12%,rgba(220,169,61,.18) 13% 16%,transparent 17% 22%,rgba(220,169,61,.10) 23% 25%,transparent 26% 100%),
linear-gradient(180deg,transparent,#100b05)}
.location-content{position:relative;z-index:2}.pin{font-size:70px;color:var(--gold)}.location-content h3{font-size:clamp(54px,12vw,96px);margin:0;color:#f0d28b}.location-note{color:#c0aa7d}.location-content a{display:inline-flex;gap:14px;align-items:center;color:#f0d18a;text-decoration:none;border:1px solid rgba(215,176,95,.68);padding:14px 26px;border-radius:999px;background:rgba(215,176,95,.05)}
.finale{background:radial-gradient(circle at 50% 42%,rgba(215,176,95,.12),transparent 30%),#030303}.final-ring-wrap{position:relative;width:min(76vw,520px);height:48vh;display:grid;place-items:center}.final-ring{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 36px 50px rgba(0,0,0,.8))}.final-halo{position:absolute;width:54%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(239,204,126,.18),transparent 72%);filter:blur(20px);z-index:-1}.final-copy{color:#cbb57f;font-size:clamp(20px,4vw,30px)}.final-names{font-size:clamp(48px,10vw,86px);color:#f0d28b}.finale small{direction:ltr;letter-spacing:.26em;color:#9d7c3e;font-family:"Cormorant Garamond",serif}
.sound-control{position:fixed;left:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:100;width:46px;height:46px;border-radius:50%;border:1px solid rgba(215,176,95,.32);background:rgba(0,0,0,.4);color:var(--gold);backdrop-filter:blur(10px)}
@keyframes introFloat{50%{transform:translateY(-10px)}}@keyframes ringFloat{50%{transform:translateY(-12px)}}@keyframes spark{0%,82%,100%{opacity:0;transform:scale(.2)}87%{opacity:1;transform:scale(1.2)}92%{opacity:0;transform:scale(1.8)}}@keyframes portalSpin{to{transform:rotate(360deg) scale(1.04)}}
@media(max-width:700px){.hero-copy{top:10%}.hero-ring-wrap{height:52vh}.ivory-card{padding:46px 18px}.countdown{grid-template-columns:1fr 1fr}.date-block{gap:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* Refined edition — engraved names, smoother transitions, cinematic finale */

/* Smooth section reveals */
.reveal-section{
  opacity:.18;
  transform:translateY(42px) scale(.985);
  filter:blur(7px);
  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.2s cubic-bezier(.22,.61,.36,1),
    filter 1.1s ease;
}
.reveal-section.is-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.reveal-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 22%,transparent 78%,rgba(215,176,95,.02));
  opacity:0;
  transition:opacity 1s ease;
}
.reveal-section.is-visible::before{opacity:1}

/* Smooth visual transitions between pages */
.section{
  scroll-margin-top:0;
}
.section + .section{
  box-shadow:inset 0 45px 80px rgba(0,0,0,.28);
}
.section::after{
  transition:opacity 1s ease,transform 1s ease;
}

/* Enhanced invitation card entrance */
.ivory-card{
  transition:transform 1.15s cubic-bezier(.22,.61,.36,1),opacity 1s ease,box-shadow 1s ease;
}
.invitation:not(.is-visible) .ivory-card{
  transform:translateY(34px) scale(.97);
  opacity:.55;
}
.invitation.is-visible .ivory-card{
  transform:none;
  opacity:1;
  box-shadow:0 45px 110px rgba(0,0,0,.62),inset 0 0 0 10px rgba(255,255,255,.22);
}

/* Enhanced date animation */
.date-block .day,
.date-block .month,
.date-block .year,
.time-row > *{
  transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s ease;
}
.date-scene:not(.is-visible) .day{transform:translateY(28px);opacity:0}
.date-scene:not(.is-visible) .month{transform:translateX(18px);opacity:0}
.date-scene:not(.is-visible) .year{transform:translateX(-18px);opacity:0}
.date-scene:not(.is-visible) .time-row > *{transform:translateY(22px);opacity:0}

/* Countdown tiles stagger */
.countdown div{
  transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease,box-shadow .4s ease;
}
.countdown-scene:not(.is-visible) .countdown div{
  transform:translateY(24px) scale(.96);
  opacity:0;
}
.countdown-scene.is-visible .countdown div:nth-child(1){transition-delay:.05s}
.countdown-scene.is-visible .countdown div:nth-child(2){transition-delay:.12s}
.countdown-scene.is-visible .countdown div:nth-child(3){transition-delay:.19s}
.countdown-scene.is-visible .countdown div:nth-child(4){transition-delay:.26s}
.countdown-scene.is-visible .countdown div:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 35px rgba(215,176,95,.08);
}

/* Location entrance */
.location-content{
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1),opacity 1s ease;
}
.location-scene:not(.is-visible) .location-content{
  transform:translateY(35px);
  opacity:0;
}

/* Cinematic finale without ring */
.finale{
  background:
    radial-gradient(circle at 50% 45%,rgba(215,176,95,.16),transparent 28%),
    radial-gradient(circle at 20% 20%,rgba(255,245,210,.035),transparent 20%),
    linear-gradient(180deg,#030303,#0a0703 60%,#020202);
}
.finale-frame{
  position:relative;
  z-index:3;
  width:min(88vw,760px);
  padding:64px 28px;
  border:1px solid rgba(215,176,95,.32);
  background:linear-gradient(180deg,rgba(215,176,95,.035),rgba(0,0,0,.08));
  box-shadow:0 35px 90px rgba(0,0,0,.5),inset 0 0 0 8px rgba(215,176,95,.018);
  backdrop-filter:blur(8px);
}
.finale-frame::before,
.finale-frame::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(215,176,95,.7),transparent);
}
.finale-frame::before{top:22px}
.finale-frame::after{bottom:22px}
.final-copy{
  margin:0 0 18px;
}
.final-date{
  direction:ltr;
  letter-spacing:.28em;
  color:#c5a45e;
  font-family:"Cormorant Garamond",serif;
  margin-top:10px;
}
.final-ornament{
  color:#efcf83;
  font-size:18px;
  margin:18px 0;
  animation:finalPulse 2.4s ease-in-out infinite;
}
.finale small{
  display:block;
  font-family:"Aref Ruqaa",serif;
  letter-spacing:0;
  direction:rtl;
  color:#bfa874;
  font-size:18px;
}
.finale-light{
  position:absolute;
  width:40%;
  height:140%;
  top:-20%;
  filter:blur(26px);
  opacity:.18;
  background:linear-gradient(90deg,transparent,rgba(255,223,151,.42),transparent);
}
.finale-light-a{left:-14%;transform:rotate(16deg);animation:finalSweepA 8s ease-in-out infinite}
.finale-light-b{right:-14%;transform:rotate(-16deg);animation:finalSweepB 9s ease-in-out infinite}
.finale-particles span{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#e7bd66;
  box-shadow:0 0 12px rgba(231,189,102,.6);
  animation:finalParticle 6s linear infinite;
}
.finale-particles span:nth-child(1){left:12%;top:78%;animation-delay:0s}
.finale-particles span:nth-child(2){left:22%;top:64%;animation-delay:1s}
.finale-particles span:nth-child(3){left:34%;top:82%;animation-delay:2.2s}
.finale-particles span:nth-child(4){left:46%;top:70%;animation-delay:.6s}
.finale-particles span:nth-child(5){left:58%;top:84%;animation-delay:1.7s}
.finale-particles span:nth-child(6){left:68%;top:66%;animation-delay:2.9s}
.finale-particles span:nth-child(7){left:78%;top:80%;animation-delay:.8s}
.finale-particles span:nth-child(8){left:88%;top:62%;animation-delay:2.4s}
.finale-particles span:nth-child(9){left:40%;top:90%;animation-delay:3.1s}
.finale-particles span:nth-child(10){left:72%;top:88%;animation-delay:1.3s}

@keyframes finalParticle{
  0%{transform:translateY(0) scale(.7);opacity:0}
  15%{opacity:.8}
  100%{transform:translateY(-220px) scale(1.3);opacity:0}
}
@keyframes finalPulse{
  50%{transform:scale(1.25);text-shadow:0 0 18px rgba(239,207,131,.55)}
}
@keyframes finalSweepA{
  0%,100%{transform:translateX(-12%) rotate(16deg);opacity:.08}
  50%{transform:translateX(35%) rotate(16deg);opacity:.22}
}
@keyframes finalSweepB{
  0%,100%{transform:translateX(12%) rotate(-16deg);opacity:.07}
  50%{transform:translateX(-35%) rotate(-16deg);opacity:.18}
}

@media(max-width:700px){
  .ring-engraving-intro,
  .ring-engraving-hero{
    bottom:18.5%;
    font-size:12px;
  }
  .finale-frame{padding:50px 18px}
}


/* Requested text refinements */
.intro-copy{
  bottom:max(42px,env(safe-area-inset-bottom));
}
.intro-copy .intro-sub{
  margin-top:0;
}
#openInvitation{
  direction:ltr;
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.18em;
  font-size:12px;
  padding:12px 26px;
}

.venue-row{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(215,176,95,.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.venue-row small{
  color:#a98749;
}
.venue-row strong{
  color:#f0d18a;
  font-size:clamp(28px,6vw,48px);
  font-weight:500;
}


/* Uploaded piano track integration */
.sound-control{
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.sound-control:hover{
  transform:scale(1.06);
}
.sound-control.is-playing{
  background:rgba(215,176,95,.14);
  box-shadow:0 0 22px rgba(215,176,95,.16);
}


/* Professional ring treatment: clean original image + curved SVG engraving */
.engraving-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  pointer-events:none;
  overflow:visible;
}
.engraving-text{
  font-family:"Aref Ruqaa",serif;
  font-size:20px;
  font-weight:700;
  fill:#5a2c06;
  stroke:rgba(255,226,154,.45);
  stroke-width:.55px;
  paint-order:stroke fill;
  letter-spacing:.6px;
  opacity:.94;
}
.intro-ring-wrap .engraving-svg{
  transform:translateY(1px);
}
.hero-ring-wrap .engraving-svg{
  transform:translateY(2px);
}
@media(max-width:700px){
  .engraving-text{font-size:18px}
}