/* =========================================================================
   Varun & Jasmine - ELEVATION LAYER
   loader, motion, ambience, premium sections, print. Loaded after styles.css.
   ========================================================================= */

/* ----------  Intro loader  ---------- */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,#6e1c2a,#3f0f18 70%,#2a0a10);
  transition:opacity .8s var(--ease),visibility .8s var(--ease)}
.loader__inner{display:grid;justify-items:center;gap:1.1rem;text-align:center}
.loader__logo{width:118px;height:118px;object-fit:contain;
  filter:drop-shadow(0 0 34px rgba(246,227,161,.55)) drop-shadow(0 12px 22px rgba(0,0,0,.45));
  animation:loaderPulse 2.4s var(--ease) infinite}
.loader__name{font-family:var(--script);font-size:2.4rem;color:#f6e3a1;opacity:0;animation:fadeUp .9s var(--ease) .3s forwards}
.loader__bar{width:140px;height:2px;background:rgba(246,227,161,.22);border-radius:2px;overflow:hidden}
.loader__bar::after{content:"";display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,#f6e3a1,transparent);animation:loaderSweep 1.3s var(--ease) infinite}
@keyframes loaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes loaderSweep{0%{transform:translateX(-160%)}100%{transform:translateX(420%)}}
@keyframes fadeUp{to{opacity:1;transform:none}}
body.loaded .loader{opacity:0;visibility:hidden;pointer-events:none}
body:not(.loaded){overflow:hidden}
@media (prefers-reduced-motion:reduce){.loader__logo,.loader__bar::after{animation:none}}

/* ----------  Scroll progress  ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,#9c7314,#f6e3a1,#c9a227);box-shadow:0 0 8px rgba(201,162,39,.5)}

/* ----------  Hero Ken Burns + name shimmer  ---------- */
.hero__media img{animation:kenburns 28s ease-in-out infinite alternate}
@keyframes kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.14) translate(-1.5%,-2%)}}
.hero__names{position:relative}
@media (prefers-reduced-motion:reduce){.hero__media img{animation:none}}

/* ----------  Ambient petals  ---------- */
.petals{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-8%;width:14px;height:14px;border-radius:60% 0 60% 0;
  background:radial-gradient(circle at 30% 30%,#f7d9b0,#e7a87f 60%,#c98b6a);opacity:0;
  filter:drop-shadow(0 2px 2px rgba(120,60,30,.15));animation:fall linear infinite}
.petal.gold{background:radial-gradient(circle at 30% 30%,#f9e7a8,#d9b53e 60%,#9c7314)}
@keyframes fall{0%{transform:translateY(-10vh) translateX(0) rotate(0);opacity:0}
  8%{opacity:.45}90%{opacity:.16}100%{transform:translateY(110vh) translateX(40px) rotate(420deg);opacity:0}}

/* ----------  Arch sparkles — gold glints that twinkle around the archway  ---------- */
.sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sparkles span{position:absolute;width:15px;height:15px;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(255,244,205,.95) 0%,rgba(255,226,150,.45) 32%,transparent 64%);
  animation:twinkle 3.8s var(--ease) infinite}
.sparkles span::before,.sparkles span::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 47%,rgba(255,247,214,.95) 50%,transparent 53%)}
.sparkles span::after{transform:rotate(90deg)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.25) rotate(0deg)}
  50%{opacity:1;transform:scale(1) rotate(30deg)}}
@media (prefers-reduced-motion:reduce){.sparkles{display:none}}
@media (prefers-reduced-motion:reduce){.petals{display:none}}

/* screen-reader-only utility */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----------  Music control  ---------- */
.music{position:fixed;left:18px;bottom:18px;z-index:60;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:#fdf6e7;background:linear-gradient(135deg,#7a1f2e,#5b1622);
  box-shadow:var(--shadow-2),0 0 0 1px rgba(246,227,161,.4);transition:transform .3s var(--ease)}
.music:hover{transform:translateY(-3px) scale(1.05)}
.music:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.music .ico{width:22px;height:22px}
.music .eq{display:none}
.music.playing .ico{display:none}
.music.playing .eq{display:flex;gap:2px;align-items:flex-end;height:18px}
.music.playing .eq i{width:3px;background:#f6e3a1;border-radius:2px;height:5px;animation:eq 1s ease-in-out infinite}
.music.playing .eq i:nth-child(2){animation-delay:.2s}
.music.playing .eq i:nth-child(3){animation-delay:.4s}
.music.playing .eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:5px}50%{height:18px}}
@media (prefers-reduced-motion:reduce){.music.playing .eq i{animation:none;height:12px}}

/* ----------  Dress code / palette  ---------- */
.palettes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.5vw,2rem);margin-top:2.6rem}
.palette{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:1.6rem 1.6rem 1.8rem;transition:transform .4s var(--ease)}
.palette:hover{transform:translateY(-5px)}
.palette h3{font-family:var(--display);font-size:1.5rem;color:var(--maroon)}
.palette .when{font-family:var(--label);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.palette p{color:var(--ink-soft);margin:.5rem 0 1rem;font-size:.98rem}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 4px 10px -6px rgba(0,0,0,.4)}
.dress-note{max-width:760px;margin:2.2rem auto 0;text-align:center;color:var(--ink-soft);font-style:italic}

/* ----------  Etiquette callout  ---------- */
.callout{max-width:840px;margin:2.4rem auto 0;background:linear-gradient(180deg,var(--paper),#fff8ec);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);
  box-shadow:var(--shadow-1);padding:clamp(1.6rem,3.5vw,2.4rem)}
.callout h3{font-family:var(--display);font-size:1.6rem;color:var(--maroon);margin-bottom:.5rem}
.callout ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--ink-soft)}
.callout li{margin:.45rem 0}
.callout li::marker{color:var(--gold-ink)}

/* ----------  RSVP success  ---------- */
.rsvp-card{position:relative}
.rsvp-success{position:absolute;inset:0;background:var(--paper);border-radius:var(--radius);
  display:none;place-items:center;text-align:center;padding:2rem;opacity:0;transition:opacity .5s var(--ease)}
.rsvp-success.show{display:grid;opacity:1}
.rsvp-success .check{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.1rem;
  background:linear-gradient(135deg,#1f6b4f,#0f5132);box-shadow:0 0 0 6px rgba(31,107,79,.12)}
.rsvp-success .check svg{width:42px;height:42px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:48;stroke-dashoffset:48;animation:draw .7s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rsvp-success h3{font-family:var(--script);font-size:2.6rem;color:var(--maroon);margin:.2rem 0}
.rsvp-success p{color:var(--ink-soft);max-width:42ch}

/* ----------  Responsive  ---------- */
@media (max-width:760px){.palettes{grid-template-columns:1fr}}
@media (max-width:480px){.music{width:46px;height:46px;left:12px;bottom:12px}}

/* ----------  Print: a clean invitation  ---------- */
@media print{
  .nav,.loader,.progress,.petals,.music,.scrollcue,.hero__cta,.film,.map-embed,#rsvp form,.lightbox,.gallery{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  body::before,body::after{display:none}
  .hero{min-height:auto;padding:2rem 0 0}
  .hero__media,.hero__scrim{display:none}
  .hero__names{color:#7a1f2e!important;-webkit-text-fill-color:#7a1f2e!important;background:none!important;animation:none}
  .hero__pre,.hero__sub,.hero__date{color:#000}
  .section{padding-block:14pt;break-inside:avoid}
  .gold-text{color:#7a1f2e!important;-webkit-text-fill-color:#7a1f2e!important;background:none!important}
  .arch,.event,.card,.palette,.callout,.rsvp-card{box-shadow:none;border:1px solid #ccc}
  a{color:#000;text-decoration:none}
  .reveal{opacity:1!important;transform:none!important}
}