/* =========================================================
   Aarav & Meera — engagement invitation
   Royal maroon, antique gold, ivory. Mobile-first.
   ========================================================= */

:root{
  --ivory:      #f7efdf;
  --ivory-deep: #efe2cc;
  --paper:      #fdf9f1;
  --ink:        #2a1a15;
  --muted:      #7d6a55;
  --maroon:     #4a0f16;
  --maroon-deep:#320a0f;
  --maroon-ink: #1e0609;
  --gold:       #c6a15b;
  --gold-soft:  #f3dfa9;
  --gold-deep:  #a67c3d;

  --wrap: 1100px;
  --display:"Cinzel", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script:"Italianno", "Snell Roundhand", cursive;

  --ease: cubic-bezier(.22,.75,.2,1);
  --ease-soft: cubic-bezier(.3,.8,.3,1);

  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c6a15b' stroke-width='.7' stroke-opacity='.55'%3E%3Cpath d='M32 0l16 16-16 16L16 16z'/%3E%3Cpath d='M32 32l16 16-16 16L16 48z'/%3E%3Cpath d='M0 32l16-16 16 16-16 16z'/%3E%3Cpath d='M64 32L48 16 32 32l16 16z'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:
    linear-gradient(180deg, #f8f0df, #f3e7d1 45%, #f6eddb 100%);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.locked{ overflow:hidden; height:100vh; height:100dvh; }

img,svg{ display:block; max-width:100%; }

h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; }

p{ margin:0 0 1.1em; }

a{ color:inherit; }

button{ font:inherit; }

::selection{ background:var(--maroon); color:var(--gold-soft); }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

/* paper grain over everything */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* =========================================================
   Shared bits
   ========================================================= */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 44px);
}

.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0;
  font-family:var(--display);
  font-size:9.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow::before,.eyebrow::after{
  content:""; width:clamp(22px, 6vw, 38px); height:1px;
  background:currentColor; opacity:.45; flex:none;
}
.eyebrow--left{ justify-content:flex-start; }
.eyebrow--left::after{ display:none; }
.eyebrow--light{ color:var(--gold-soft); }

.ornament{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px, 3vw, 16px);
  margin:clamp(18px, 4vw, 28px) auto;
  color:var(--gold);
}
.ornament-line{
  display:block; height:1px; width:clamp(28px, 9vw, 58px);
  background:linear-gradient(90deg, transparent, currentColor);
}
.ornament-line:last-child{ background:linear-gradient(90deg, currentColor, transparent); }
.ornament-mark{ width:clamp(32px, 8vw, 48px); height:auto; flex:none; }
.ornament--sm{ margin:10px auto 8px; }
.ornament--sm .ornament-line{ width:clamp(20px, 6vw, 34px); }
.ornament--sm .ornament-mark{ width:clamp(26px, 6vw, 36px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px;
  padding:14px 26px;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--display); font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  cursor:pointer;
  transition:transform .35s var(--ease), background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.btn-solid{
  background:linear-gradient(180deg, #5a151d, var(--maroon));
  color:#fbeed3;
  box-shadow:0 14px 30px -16px rgba(50,10,15,.9), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 22px 38px -18px rgba(50,10,15,.9), inset 0 1px 0 rgba(255,255,255,.16); }
.btn-ghost{
  border-color:rgba(166,124,61,.5); color:var(--maroon); background:transparent;
}
.btn-ghost:hover{ background:rgba(198,161,91,.12); transform:translateY(-2px); }
.btn--sm{ min-height:38px; padding:10px 18px; font-size:9.5px; }
.btn--full{ width:100%; }
.btn--wide{ width:100%; margin-top:10px; }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.section{ padding:clamp(64px, 10vw, 128px) 0; }
.section--tint{
  position:relative;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(198,161,91,.14), transparent 70%),
    linear-gradient(180deg, #f2e7d4, #ece0ca);
  border-block:1px solid rgba(198,161,91,.26);
}
.section--tint::before{
  content:""; position:absolute; inset:0;
  background-image:var(--jaali); background-size:64px 64px;
  opacity:.14; pointer-events:none;
}
.section--tint > *{ position:relative; z-index:1; }

.section-head{ text-align:center; max-width:660px; margin:0 auto clamp(36px, 6vw, 58px); }
.section-head h2{
  font-size:clamp(32px, 7vw, 52px);
  line-height:1.06; margin-top:14px;
  color:var(--maroon);
}

.lede{ color:var(--muted); font-size:16px; max-width:54ch; }

section[id]{ scroll-margin-top:78px; }

/* reveal on scroll */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* thin reading progress */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:120;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-soft), var(--gold-deep));
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
  will-change:transform;
}

/* =========================================================
   The opening stage
   ========================================================= */

.stage{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(18px, 5vw, 48px);
  overflow:auto;
  background:
    radial-gradient(58% 46% at 50% 32%, #5b1a20 0%, #3d1116 44%, #260a0e 76%, #1a0609 100%),
    var(--jaali);
  background-size:auto, 68px 68px;
  transition:opacity 1.05s ease, transform 1.4s var(--ease), visibility 1.05s;
}
.stage::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(42% 32% at 50% 30%, rgba(243,223,169,.16), transparent 70%),
    radial-gradient(80% 60% at 50% 112%, rgba(0,0,0,.6), transparent 70%);
  pointer-events:none;
}
.stage::after{
  content:""; position:absolute; inset:clamp(10px, 2.4vw, 22px);
  border:1px solid rgba(243,223,169,.12);
  pointer-events:none;
}
.stage.is-done{
  opacity:0; transform:scale(1.04);
  visibility:hidden; pointer-events:none;
}

/* gold corner brackets */
.stage-frame{
  position:absolute; inset:clamp(16px, 4vw, 38px);
  pointer-events:none; z-index:1;
}
.stage-frame i{
  position:absolute;
  width:clamp(18px, 4.5vw, 32px); height:clamp(18px, 4.5vw, 32px);
  border:1px solid rgba(243,223,169,.42);
}
.stage-frame i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.stage-frame i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.stage-frame i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.stage-frame i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }

.stage-inner{
  position:relative; z-index:2;
  text-align:center; width:100%; max-width:560px;
  margin:auto;
}

.stage-script{
  margin:0;
  font-family:var(--script);
  font-size:clamp(48px, 13vw, 68px);
  line-height:.9;
  color:var(--gold-soft);
  text-shadow:0 2px 26px rgba(243,223,169,.22);
}
.stage-script::after{
  content:"";
  display:block;
  width:56px; height:1px;
  margin:clamp(12px, 3vw, 18px) auto clamp(14px, 3vw, 22px);
  background:linear-gradient(90deg, transparent, rgba(243,223,169,.65), transparent);
}

.stage-eyebrow{
  margin:0 0 clamp(22px, 5vw, 38px);
  font-family:var(--display);
  font-size:8.5px; font-weight:500; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(247,239,223,.55);
  transition:opacity .5s ease;
}
.stage.is-opening .stage-eyebrow{ opacity:0; }
.stage-eyebrow #guestName{
  font-family:var(--serif); font-style:italic;
  font-size:15px; letter-spacing:.02em; text-transform:none;
  color:var(--gold-soft);
}

.envelope-scene{
  width:min(86vw, 440px, 64vh);
  margin-inline:auto;
  perspective:1500px;
  animation:envFloat 7.5s ease-in-out infinite;
}
.stage.is-opening .envelope-scene{ animation-play-state:paused; }
@keyframes envFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}

.envelope{
  position:relative;
  aspect-ratio:1.5 / 1;
  transform-style:preserve-3d;
  transform:rotateX(0deg) rotateY(0deg);
  transition:transform .55s var(--ease);
  filter:drop-shadow(0 42px 46px rgba(0,0,0,.55));
}

/* envelope body */
.env-body{
  position:absolute; inset:0; z-index:2;
  border-radius:5px;
  color:var(--gold);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(243,223,169,.1), transparent 55%),
    linear-gradient(158deg, #641a22 0%, #4c1118 46%, #360a10 100%);
  box-shadow:
    inset 0 0 0 1px rgba(198,161,91,.7),
    inset 0 0 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden;
}
.env-body::before{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(198,161,91,.45);
  border-radius:3px;
  pointer-events:none;
  z-index:2;
}
.env-body::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255,244,214,.12) 50%, transparent 60%),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.1), transparent 60%);
  opacity:.8;
  pointer-events:none;
  z-index:1;
}
.env-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.env-corner{
  position:absolute; width:31%; height:auto;
  z-index:4;                 /* above flap (3) so corners show on top */
  opacity:.82;
  pointer-events:none;
}
.env-corner.tl{ top:7px; left:7px; }
.env-corner.tr{ top:7px; right:7px; transform:scaleX(-1); }
.env-corner.bl{ bottom:7px; left:7px; transform:scaleY(-1); }
.env-corner.br{ bottom:7px; right:7px; transform:scale(-1,-1); }
.env-monogram{
  position:absolute; left:50%; bottom:13%; transform:translateX(-50%);
  z-index:3;
  font-family:var(--display); font-size:7.5px; letter-spacing:.3em;
  color:rgba(243,223,169,.75);
  white-space:nowrap;
}
.env-monogram span{ color:var(--gold-soft); }

/* the card that rises */
.card{
  position:absolute; left:4%; top:4%;
  width:92%; height:92%; z-index:1;
  padding:7.5% 8% 0;
  text-align:center;
  background:linear-gradient(180deg, #fffdf8 0%, #fbf4e7 70%, #f6ecd9 100%);
  border-radius:3px;
  box-shadow:0 20px 44px rgba(0,0,0,.32);
  transform:translateY(0) scale(1);
  transition:transform 1.15s cubic-bezier(.2,.8,.2,1) .35s;
  will-change:transform;
}
.card::before{
  content:""; position:absolute; inset:7px;
  border:1px solid rgba(166,124,61,.4);
  border-radius:2px;
}
.card-kicker{
  margin:0;
  font-size:clamp(7px, 1.9vw, 9px); font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted);
}
.card-names{
  margin:8px 0 0;
  font-size:clamp(26px, 7.4vw, 38px);
  line-height:1.04;
  color:var(--maroon);
}
.card-names .amp{ font-style:italic; color:var(--gold-deep); font-size:.72em; }
.card-line{
  margin:0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(10.5px, 2.8vw, 13.5px);
  color:var(--muted);
}
.card-date{
  margin:9px 0 0;
  font-size:clamp(7px, 2vw, 9px); font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--maroon);
}
.envelope.is-open .card{ transform:translateY(-74%) scale(1); }

/* flap */
.flap{
  position:absolute; left:0; top:0;
  width:100%; height:64%; z-index:3;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:
    linear-gradient(180deg, rgba(243,223,169,.14), transparent 42%),
    linear-gradient(180deg, #5d171f 0%, #4a1017 55%, #380a10 100%);
  transform-origin:50% 0;
  transition:transform .95s cubic-bezier(.55,.06,.25,1) .18s, opacity .5s ease .72s;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));
}
.flap::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,244,214,.18), transparent 40%);
  opacity:.7;
}
.flap::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(198,161,91,.1) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #f8efdd, #e9dcc4);
  opacity:0;
  transition:opacity .3s ease .3s;
}
.envelope.is-open .flap{ transform:rotateX(-166deg); opacity:0; }
.envelope.is-open .env-corner{ display: none; }
.envelope.is-open .flap::after{ opacity:1; }

.env-seams{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%;
  pointer-events:none;
  transition:opacity .45s ease;
}
.env-seams path{
  fill:none;
  stroke:rgba(243,223,169,.5);
  stroke-width:.8;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.envelope.is-open .env-seams{ opacity:0; }

/* wax seal */
.seal{
  position:absolute; left:50%; top:62%;
  width:clamp(80px, 22%, 104px); aspect-ratio:1;
  transform:translate(-50%, -50%);
  z-index:6;
  padding:0; border:0; background:transparent;
  cursor:pointer;
  transition:transform .45s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.seal:hover{ transform:translate(-50%, -50%) scale(1.04); }
.seal:focus-visible{ outline:none; }
.seal:focus-visible .seal-disc{
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.22),
    inset 0 -7px 12px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.25),
    0 0 0 5px rgba(243,223,169,.2),
    0 10px 20px rgba(0,0,0,.45);
}

.seal-glow{
  position:absolute; inset:-22%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(243,223,169,.34), rgba(198,161,91,.12) 48%, transparent 70%);
  animation:sealPulse 3.6s ease-in-out infinite;
  pointer-events:none;
  transition:opacity .5s ease, transform .8s var(--ease);
}
@keyframes sealPulse{
  0%,100%{ transform:scale(.92); opacity:.4; }
  50%    { transform:scale(1.08); opacity:.9; }
}

.seal-bloom{
  position:absolute; left:50%; top:50%;
  width:100%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.2);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,248,224,.95) 0%, rgba(243,223,169,.5) 38%, rgba(198,161,91,.16) 58%, transparent 72%);
  box-shadow:
    0 0 50px 22px rgba(243,223,169,.4),
    0 0 0 1px rgba(255,248,224,.5);
  opacity:0; pointer-events:none;
}
.seal.is-opening .seal-bloom{ animation:sealBloom 1.5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes sealBloom{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.25); }
  30% { opacity:.95; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(3.6); }
}

.seal-disc{
  position:relative;
  width:100%; height:100%;
  display:grid; place-items:center;
  border-radius:46% 54% 49% 51% / 52% 48% 53% 47%;
  background:
    radial-gradient(circle at 34% 26%, #f7e5b8 0%, #ddba76 30%, #c1944d 62%, #94682a 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.5),
    inset 0 -8px 14px rgba(80,45,8,.5),
    inset 0 0 0 1px rgba(74,15,22,.26),
    0 10px 20px rgba(0,0,0,.45);
  transform:rotate(-7deg);
  transition:transform 1.25s var(--ease), opacity 1.1s ease, filter 1.25s ease;
  will-change:transform, opacity, filter;
}
.seal-disc::before{
  content:""; position:absolute; inset:9%;
  border-radius:50%;
  border:1px dotted rgba(74,15,22,.4);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25);
}
.seal-disc::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.45), transparent 44%);
}
.seal-mono{
  position:relative; z-index:1;
  font-family:var(--serif); font-size:clamp(21px, 5.4vw, 27px);
  letter-spacing:.03em;
  color:var(--maroon);
  text-shadow:0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(90,50,10,.18);
  transform:rotate(7deg);
  transition:opacity .5s ease;
}
.seal-amp{ font-style:italic; font-size:.78em; margin:0 .04em; color:#7a1d26; }

/* the soothing dissolve */
.seal.is-opening{ pointer-events:none; }
.seal.is-opening .seal-glow{
  opacity:0;
  transform:scale(1.9);
}
.seal.is-opening .seal-disc{
  transform:rotate(-7deg) translateY(-12px) scale(1.1);
  opacity:0;
  filter:blur(10px) brightness(1.75) saturate(1.15);
}
.seal.is-opening .seal-mono{ opacity:0; }

/* gold motes that drift up from the seal */
.motes{
  position:absolute; left:50%; top:62%;
  width:0; height:0; z-index:7;
  pointer-events:none;
}
.mote{
  position:absolute; left:0; top:0;
  width:var(--s, 3px); height:var(--s, 3px);
  border-radius:50%;
  background:radial-gradient(circle, #fff8df 0%, #f3dfa9 45%, rgba(198,161,91,0) 72%);
  box-shadow:0 0 6px 1px rgba(243,223,169,.5);
  opacity:0;
  animation:moteRise var(--dur, 1.6s) cubic-bezier(.2,.6,.25,1) var(--delay, 0s) forwards;
}
@keyframes moteRise{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.35); }
  18% { opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--dy, 90px))) scale(1.05); }
}

.stage-hint{
  margin:clamp(22px, 5vw, 36px) 0 0;
  font-family:var(--display);
  font-size:8px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(247,239,223,.44);
  animation:hintFade 3.2s ease-in-out infinite;
  transition:opacity .4s;
}
.stage.is-opening .stage-hint{ opacity:0; animation:none; }
@keyframes hintFade{ 0%,100%{ opacity:.4; } 50%{ opacity:.86; } }

/* =========================================================
   Main page shell
   ========================================================= */

main{
  opacity:0; transform:translateY(18px);
  transition:opacity 1s ease, transform 1.2s var(--ease);
  pointer-events:none;
}
main.is-visible{ opacity:1; transform:none; pointer-events:auto; }

/* top bar */
.topbar{
  position:sticky; top:0; z-index:80;
  background:rgba(45,9,14,.92);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(198,161,91,.4);
  transition:box-shadow .4s ease, background .4s ease;
}
.topbar.is-scrolled{
  background:rgba(38,7,11,.97);
  box-shadow:0 16px 38px -26px rgba(0,0,0,.8);
}
.topbar-inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:12px clamp(18px, 5vw, 44px);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.monogram{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--serif); font-size:15px; letter-spacing:.26em;
  text-decoration:none; color:var(--gold-soft); white-space:nowrap;
}
.mono-mark{ width:13px; height:13px; color:var(--gold); flex:none; }
.monogram span{ color:var(--gold-soft); }
.monogram i{ font-style:italic; color:var(--gold); }
.nav{ display:none; }
.nav a{
  font-family:var(--display);
  font-size:8.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:rgba(247,239,223,.68);
  transition:color .3s;
}
.nav a:hover{ color:var(--gold-soft); }
.topbar-date{
  padding:6px 10px;
  border:1px solid rgba(198,161,91,.45); border-radius:999px;
  font-family:var(--display);
  font-size:7.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-soft);
  white-space:nowrap;
}

/* =========================================================
   Hero
   ========================================================= */

.hero{
  position:relative;
  min-height:calc(100vh - 58px);
  min-height:calc(100svh - 58px);
  display:grid; place-items:center;
  text-align:center;
  padding:clamp(54px, 9vw, 96px) clamp(20px, 5vw, 44px) clamp(76px, 10vw, 110px);
  overflow:hidden;
  background:
    radial-gradient(70% 52% at 50% 6%, rgba(198,161,91,.16), transparent 70%),
    radial-gradient(90% 70% at 50% 100%, rgba(166,124,61,.16), transparent 65%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:var(--jaali); background-size:72px 72px;
  opacity:.1; pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 42%, #000, transparent 78%);
  mask-image:radial-gradient(70% 70% at 50% 42%, #000, transparent 78%);
}
.dust{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.75;
}
.hero-frame{
  position:absolute; inset:clamp(12px, 4vw, 40px);
  pointer-events:none; z-index:0;
}
.hero-frame i{
  position:absolute;
  width:clamp(16px, 4vw, 28px); height:clamp(16px, 4vw, 28px);
  border:1px solid rgba(166,124,61,.34);
}
.hero-frame i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.hero-frame i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.hero-frame i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.hero-frame i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }

.hero-arch{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, calc(-50% + var(--arch-shift, 0px)));
  height:94%; width:auto;
  color:var(--gold-deep);
  opacity:.36;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 62%, transparent 100%);
  will-change:transform;
}
.hero-arch path[pathLength]{
  stroke-dasharray:1; stroke-dashoffset:1;
}
main.is-visible .hero-arch path[pathLength]{
  animation:archDraw 2.8s var(--ease) .25s forwards;
}
main.is-visible .hero-arch path[pathLength]:nth-child(2){
  animation-delay:.5s;
}
@keyframes archDraw{ to{ stroke-dashoffset:0; } }

.hero-content{ position:relative; z-index:2; max-width:820px; margin-inline:auto; }

/* opening invocation — Lord Ganesha + mantra */
.hero-invocation{
  display:flex; flex-direction:column; align-items:center;
  margin:0 0 clamp(14px, 3vw, 26px);
}
.ganesha-idol{
  width:clamp(76px, 15vw, 112px);
  height:auto;
  margin:0 auto;            /* centred — img is display:block */
  filter:drop-shadow(0 10px 22px rgba(166,124,61,.28));
  animation:ganeshFloat 6s ease-in-out infinite;
}
@keyframes ganeshFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}
.invocation-text{
  margin:clamp(4px, 1vw, 8px) 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(17px, 3.2vw, 23px);
  letter-spacing:.06em;
  color:var(--maroon);
  text-align:center;
}

.hero-names{
  font-size:clamp(40px, 12.5vw, 108px);
  line-height:.94;
  letter-spacing:-.015em;
  font-weight:400;
  color:var(--maroon);
  margin:clamp(14px, 3vw, 22px) 0 0;
  text-wrap:balance;
}
.hero-names .amp{
  display:inline-block;
  font-style:italic; font-weight:400;
  font-size:.46em;
  transform:translateY(-.14em);
  margin:0 .05em;
  background:linear-gradient(160deg, #d9b873 10%, #a67c3d 55%, #e6cd8e 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-invite{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(17px, 2.6vw, 21px);
  color:var(--muted);
  margin:0 0 24px;
}
.hero-date{
  margin:0 0 7px;
  font-size:clamp(10px, 1.8vw, 11.5px); font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink);
}
.hero-venue{
  font-family:var(--serif); font-size:clamp(15px, 2.2vw, 18px);
  letter-spacing:.02em; color:var(--muted);
  margin:0 0 30px;
}
.hero-actions{
  display:flex; flex-direction:column; gap:12px;
  justify-content:center; align-items:stretch;
  max-width:320px; margin-inline:auto;
}
.hero-actions .btn{ width:100%; }

.scroll-cue{
  position:absolute; bottom:clamp(16px, 4vw, 30px); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none;
  font-size:8px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(125,106,85,.8);
  z-index:2;
}
.scroll-cue i{
  display:block; width:1px; height:38px;
  background:linear-gradient(180deg, var(--gold-deep), transparent);
  position:relative;
}
.scroll-cue i::after{
  content:""; position:absolute; top:0; left:-2px;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold-deep);
  animation:scrollDot 2.4s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform:translateY(0); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(34px); opacity:0; }
}

/* =========================================================
   Countdown
   ========================================================= */

.countdown-band{
  position:relative;
  padding:clamp(52px, 8vw, 88px) 0;
  background:
    radial-gradient(60% 120% at 50% -10%, rgba(243,223,169,.18), transparent 65%),
    linear-gradient(180deg, #431217 0%, #2e0c10 60%, #250a0e 100%);
  color:var(--ivory);
  text-align:center;
  overflow:hidden;
  border-block:1px solid rgba(198,161,91,.24);
}
.countdown-band::before{
  content:""; position:absolute; inset:0;
  background-image:var(--jaali); background-size:58px 58px;
  opacity:.16; pointer-events:none;
}
.countdown-wrap{ position:relative; z-index:1; }
.countdown{
  display:flex; justify-content:center; align-items:stretch;
  gap:clamp(8px, 3vw, 54px);
  margin-top:clamp(24px, 5vw, 40px);
}
.cd-cell{
  display:flex; flex-direction:column; align-items:center;
  min-width:0; flex:1;
}
.cd-cell + .cd-cell{
  border-left:1px solid rgba(243,223,169,.16);
  padding-left:clamp(8px, 3vw, 54px);
}
.cd-num{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(32px, 9vw, 64px); line-height:1;
  color:var(--gold-soft);
  font-variant-numeric:tabular-nums;
  display:inline-block;
}
.cd-num.is-tick{ animation:cdTick .55s var(--ease); }
@keyframes cdTick{
  0%  { opacity:.35; transform:translateY(-5px); }
  100%{ opacity:1; transform:none; }
}
.cd-label{
  margin-top:10px;
  font-family:var(--display);
  font-size:7.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(247,239,223,.5);
}
.countdown-done{
  margin:30px 0 0;
  font-family:var(--serif); font-style:italic; font-size:clamp(20px, 3vw, 26px);
  color:var(--gold-soft);
}

/* =========================================================
   Note / letter
   ========================================================= */

.letter-grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(34px, 6vw, 76px);
  align-items:start;
}
.letter p{ color:var(--muted); max-width:56ch; }
.letter-greeting{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(25px, 5.5vw, 34px);
  color:var(--maroon);
  margin:18px 0 16px;
}
.letter .dropcap::first-letter{
  float:left;
  font-family:var(--serif);
  font-size:3.4em;
  line-height:.82;
  padding:.06em .1em 0 0;
  color:var(--maroon);
}
.letter-signoff{
  margin-top:28px; margin-bottom:2px;
  font-family:var(--serif); font-style:italic; font-size:17px;
  color:var(--muted);
}
.signature{
  font-family:var(--script);
  font-size:clamp(44px, 9vw, 62px);
  line-height:1;
  color:var(--maroon);
  margin:0;
}

.detail-card{
  position:relative;
  background:linear-gradient(180deg, var(--paper), #f8f0e1);
  border:1px solid rgba(198,161,91,.44);
  border-radius:4px;
  padding:clamp(26px, 5vw, 42px);
  box-shadow:0 30px 60px -40px rgba(50,10,15,.45);
  order:2;
}
.detail-card::before{
  content:""; position:absolute; inset:8px;
  border:1px solid rgba(198,161,91,.22);
  border-radius:2px;
  pointer-events:none;
}
.detail-seal{
  width:58px; height:58px;
  display:grid; place-items:center;
  margin:0 auto 22px;
  border-radius:48% 52% 50% 50% / 52% 48% 52% 48%;
  background:radial-gradient(circle at 32% 26%, #9a3434, #5b1a1d 55%, #3a0e10);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.2),
    inset 0 -4px 8px rgba(0,0,0,.35),
    0 8px 16px -6px rgba(50,10,15,.6);
  font-family:var(--serif); font-size:15px; letter-spacing:.06em;
  color:#f2e3c5;
}
.detail-seal span{ font-style:italic; color:var(--gold-soft); }
.detail-list{ margin:0 0 24px; }
.detail-list > div{
  display:grid; grid-template-columns:58px 1fr; gap:12px;
  padding:13px 0;
  border-bottom:1px solid rgba(198,161,91,.22);
}
.detail-list > div:last-child{ border-bottom:0; }
.detail-list dt{
  font-family:var(--display);
  font-size:7.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep);
  padding-top:4px;
}
.detail-list dd{
  margin:0;
  font-family:var(--serif); font-size:17px; line-height:1.45;
  color:var(--ink);
}

/* =========================================================
   Timeline
   ========================================================= */

.timeline{
  position:relative;
  display:grid; grid-template-columns:1fr;
  gap:0;
  margin-top:clamp(38px, 6vw, 62px);
  padding-left:26px;
}
.timeline::before{
  content:""; position:absolute;
  top:4px; bottom:14px; left:6px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(198,161,91,.55) 12%, rgba(198,161,91,.55) 88%, transparent);
}
.tl-item{ position:relative; padding:0 0 34px; text-align:left; }
.tl-item::before{
  content:""; position:absolute; top:5px; left:-26px;
  width:11px; height:11px; border-radius:50%;
  background:var(--ivory-deep);
  border:1px solid var(--gold-deep);
  box-shadow:0 0 0 4px #f2e7d4;
}
.tl-time{
  margin:0 0 8px;
  font-family:var(--serif); font-size:23px; color:var(--maroon);
  letter-spacing:.02em;
}
.tl-item h3{
  font-size:21px; line-height:1.2; margin:0 0 9px;
  color:var(--ink);
}
.tl-item p{
  margin:0;
  font-size:13.5px; line-height:1.68;
  color:var(--muted);
}

/* =========================================================
   Venue
   ========================================================= */

.venue-grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(34px, 6vw, 72px);
  align-items:center;
}
.venue-copy h2{
  font-size:clamp(32px, 7vw, 50px); line-height:1.06;
  margin:14px 0 18px; color:var(--maroon);
}
.venue-note{
  font-size:14px; color:var(--muted); max-width:44ch;
  border-left:1px solid rgba(166,124,61,.55);
  padding-left:18px;
  margin-top:22px;
}
.venue-actions{ display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.venue-actions .btn{ width:100%; }

.map-card{
  position:relative;
  min-height:300px;
  border:1px solid rgba(198,161,91,.48);
  border-radius:4px;
  overflow:hidden;
  background:linear-gradient(180deg, #f9f3e7, #f1e6d3);
  box-shadow:0 34px 70px -46px rgba(50,10,15,.5);
}
.map-card::after{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(198,161,91,.25);
  pointer-events:none;
}
.map-art{ position:absolute; inset:0; width:100%; height:100%; }
.map-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit; }
.map-compass{
  position:absolute; right:16px; bottom:16px;
  width:clamp(46px, 12vw, 64px); height:auto;
  color:var(--gold-deep);
  opacity:.55;
  animation:compassTurn 40s linear infinite;
}
@keyframes compassTurn{ to{ transform:rotate(360deg); } }
.map-chip{
  position:absolute; left:16px; bottom:16px;
  padding:8px 14px;
  background:rgba(253,249,241,.92);
  border:1px solid rgba(198,161,91,.44);
  border-radius:999px;
  font-family:var(--display);
  font-size:7.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--maroon);
}
.map-coords{
  position:absolute; right:16px; top:16px;
  font-family:var(--display);
  font-size:7px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(125,106,85,.85);
}

/* =========================================================
   Footer
   ========================================================= */

.footer{
  position:relative;
  text-align:center;
  padding:clamp(54px, 9vw, 86px) 24px clamp(46px, 7vw, 70px);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(243,223,169,.12), transparent 65%),
    linear-gradient(180deg, #351114, #1d070a);
  color:rgba(247,239,223,.6);
  overflow:hidden;
  border-top:1px solid rgba(198,161,91,.24);
}
.footer::before{
  content:""; position:absolute; inset:0;
  background-image:var(--jaali); background-size:58px 58px;
  opacity:.12; pointer-events:none;
}
.footer > *{ position:relative; z-index:1; }
.footer-mark{
  width:120px; height:auto; margin:0 auto 20px;
  color:var(--gold);
}
.footer-mono{
  font-family:var(--serif); font-size:30px; letter-spacing:.24em;
  color:var(--gold-soft); margin:0 0 10px;
}
.footer-mono span{ font-style:italic; color:var(--gold); }
.footer-date{
  font-family:var(--display);
  font-size:7.5px; letter-spacing:.24em; text-transform:uppercase;
  margin:0 0 20px;
}
.footer-small{
  font-family:var(--serif); font-style:italic; font-size:15px;
  margin:0;
  color:rgba(247,239,223,.45);
}

/* =========================================================
   Small-screen refinements
   ========================================================= */

@media (max-width: 359px){
  .topbar-date{ display:none; }
  .hero-names{ font-size:37px; }
  .cd-label{ font-size:6.5px; letter-spacing:.14em; }
  .cd-cell + .cd-cell{ padding-left:6px; }
}

/* =========================================================
   Responsive — min widths
   ========================================================= */

@media (min-width: 420px){
  .hero-actions{ flex-direction:row; flex-wrap:wrap; max-width:none; }
  .hero-actions .btn{ width:auto; }
  .venue-actions{ flex-direction:row; flex-wrap:wrap; }
  .venue-actions .btn{ width:auto; }
}

@media (min-width: 600px){
  .topbar-inner{ padding-block:14px; }
  .topbar-date{ font-size:8.5px; padding:7px 12px; }
  .monogram{ font-size:16px; }
  .form-grid{ grid-template-columns:1fr 1fr; }
  .span-2{ grid-column:1 / -1; }
  .radio-pill{ flex:0 1 auto; }
  .detail-list > div{ grid-template-columns:64px 1fr; }
  .map-card{ min-height:340px; }
  .countdown{ gap:clamp(18px, 4vw, 54px); }
  .cd-cell + .cd-cell{ padding-left:clamp(18px, 4vw, 54px); }
  .cd-label{ font-size:8px; letter-spacing:.24em; }
  .tl-item{ padding-bottom:38px; }
}

@media (min-width: 820px){
  .nav{ display:flex; gap:clamp(18px, 3vw, 34px); }
  .topbar-inner{ gap:24px; }
  .topbar-date{ margin-left:auto; }

  .letter-grid{ grid-template-columns:1.12fr .88fr; }
  .detail-card{ order:0; }

  .timeline{
    grid-template-columns:repeat(4, 1fr);
    gap:clamp(20px, 3vw, 34px);
    padding-left:0;
    margin-top:clamp(44px, 6vw, 64px);
  }
  .timeline::before{
    top:6px; left:8%; right:8%; bottom:auto;
    width:auto; height:1px;
    background:linear-gradient(90deg, transparent, rgba(198,161,91,.55), transparent);
  }
  .tl-item{ padding:34px 0 0; text-align:center; }
  .tl-item::before{
    top:0; left:50%; transform:translateX(-50%);
    box-shadow:0 0 0 4px #f2e7d4;
  }

  .venue-grid{ grid-template-columns:1fr 1fr; }
  .map-card{ min-height:clamp(320px, 42vw, 420px); }

  .hero{ padding-inline:clamp(40px, 5vw, 60px); }
  .section-head h2{ font-size:clamp(40px, 5vw, 52px); }
}

@media (min-width: 1080px){
  .hero{ min-height:calc(100vh - 66px); min-height:calc(100svh - 66px); }
  .hero-names{ letter-spacing:-.02em; }
  .letter p{ font-size:16.5px; }
}

/* =========================================================
   Static preview mode (?motion=off) — used for screenshots
   ========================================================= */

.no-motion .stage{ display:none !important; }
.no-motion .hero{ min-height:820px !important; }
.no-motion main{
  opacity:1 !important; transform:none !important; pointer-events:auto !important;
}
.no-motion .reveal{ opacity:1 !important; transform:none !important; }
.no-motion .dust{ display:none !important; }
.no-motion .hero-arch path[pathLength]{ stroke-dashoffset:0 !important; }
.no-motion *,
.no-motion *::before,
.no-motion *::after{
  transition:none !important;
  animation:none !important;
}

/* =========================================================
   Blessing text + Ganesha mark (letter section)
   ========================================================= */
.blessing{
  margin:12px 0 8px;
  font-size:clamp(12px, 3vw, 16px);
  color:var(--maroon);
  font-family:var(--display);
  font-weight:400;
}
.ganesha-symbol{
  width:24px; height:24px;
  margin-left:8px;
  display:inline-block;
  vertical-align:middle;
}
.ganesha-symbol circle{ fill:var(--maroon); }
.ganesha-symbol path{ stroke:var(--maroon); stroke-width:2; fill:none; stroke-linecap:round; }

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .dust,.motes{ display:none; }
  .envelope-scene{ animation:none; }
  .hero-arch path[pathLength]{ stroke-dashoffset:0; }
  .map-compass{ animation:none; }
}

/* =========================================================
   Floral shower — petals falling from the top across the
   full width. Animation adapted from the reference site.
   ========================================================= */
.flower-shower{
  position:fixed; inset:0; z-index:101; /* above the opening stage (100), below topbar (120) */
  pointer-events:none;
  overflow:hidden;
  opacity:0;                       /* nothing shows before the card opens */
  transition:opacity 2.8s ease;     /* …then blooms in slowly */
}
.flower-shower.active{ opacity:1; }

/* A single rose petal.
   The two motions are split across two boxes on purpose:
     .petal        → transparent anchor, carries ONLY the side-to-side sway
     .petal::before→ the visible petal, carries ONLY the fall + tumble
   Both animate `transform`/`opacity` alone, so both stay on the compositor.
   (Animating a layout property such as margin-left here reflows every petal
   on every frame and makes the shower look laggy and vibrational.) */
.flower-shower .petal{
  position:absolute;
  top:-14vh;
  width:var(--w, 13px);
  height:var(--h, 17px);
}
.flower-shower .petal::before{
  content:"";
  position:absolute; inset:0;
  opacity:0;                       /* hidden until its own delay elapses */
  transform:rotate(var(--rot, 0deg));
  background:
    /* highlight vein, layered so it rides along with the petal */
    radial-gradient(150% 120% at 30% 18%, rgba(255,238,243,.78), rgba(255,238,243,0) 58%),
    radial-gradient(120% 90% at 30% 20%,  #e9899a 0%, #d4566f 42%, #b03050 78%, #8e1f3f 100%);
  border-radius:78% 22% 72% 28% / 68% 34% 66% 32%;
  box-shadow:
    inset -1px -2px 4px rgba(110,16,45,.55),
    inset  1px  1px 3px rgba(255,214,222,.5),
    0 2px 5px rgba(120,20,45,.22);
}

/* Petals only move once .active is added in revealMain().
   The delay lives inside the shorthand — a later `animation:` would
   otherwise reset animation-delay back to 0 and kill the stagger. */
.flower-shower.active .petal{
  animation:petal-sway var(--sway-dur, 5.5s) ease-in-out var(--delay, 0s) infinite alternate;
}
.flower-shower.active .petal::before{
  animation:float-petal var(--dur, 34s) linear var(--delay, 0s) infinite;
  will-change:transform, opacity; /* promote only once the shower runs */
}
@keyframes float-petal{
  0%   { transform:translateY(0) rotate(var(--rot,0deg)); opacity:0; }
  6%   { opacity:.92; }
  88%  { opacity:.92; }
  100% { transform:translateY(128vh) rotate(calc(var(--rot,0deg) + 400deg)); opacity:0; }
}
@keyframes petal-sway{
  from{ transform:translate3d(calc(var(--sway, 30px) * -.5), 0, 0); }
  to  { transform:translate3d(calc(var(--sway, 30px) *  .5), 0, 0); }
}

/* Static petals for ?motion=off previews */
.no-motion .flower-shower{ opacity:1 !important; transition:none !important; }
.no-motion .flower-shower .petal{
  animation:none !important;
  top:var(--top, 30vh) !important;
}
.no-motion .flower-shower .petal::before{
  animation:none !important;
  opacity:.9 !important;
}

/* Reduced motion — petals rest in place instead of falling */
@media (prefers-reduced-motion: reduce){
  .flower-shower{ opacity:1 !important; transition:none !important; }
  .flower-shower .petal{
    animation:none !important;
    top:var(--top, 30vh) !important;
  }
  .flower-shower .petal::before{
    animation:none !important;
    opacity:.9 !important;
  }
}

/* =========================================================
   Sound toggle — fixed round button, bottom right
   ========================================================= */
.sound-toggle{
  position:fixed;
  right:clamp(16px, 4vw, 26px);
  bottom:clamp(16px, 4vw, 26px);
  z-index:130;                 /* above petals (101) and the top bar (120) */
  width:46px; height:46px;
  display:grid; place-items:center;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  color:var(--gold-soft);
  background:rgba(45,9,14,.72);
  border:1px solid rgba(198,161,91,.6);
  box-shadow:0 8px 20px -8px rgba(30,6,9,.7), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), background .3s ease, border-color .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.sound-toggle:hover{
  background:rgba(74,15,22,.9);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.sound-toggle:active{ transform:scale(.94); }
.sound-toggle:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
}
.sound-toggle[hidden]{ display:none; }
.sound-toggle svg{ display:block; }
.sound-toggle .icon-sound-off{ display:none; }
.sound-toggle.is-muted .icon-sound-on{ display:none; }
.sound-toggle.is-muted .icon-sound-off{ display:block; }
.sound-toggle.is-muted{
  color:rgba(243,223,169,.6);
  border-color:rgba(198,161,91,.32);
}
/* gentle pulse so the button is discoverable the first time */
.sound-toggle.is-new{ animation:softPulse 2.4s ease-in-out infinite; }
@keyframes softPulse{
  0%,100%{ box-shadow:0 8px 20px -8px rgba(30,6,9,.7), 0 0 0 0 rgba(198,161,91,.45); }
  50%    { box-shadow:0 8px 20px -8px rgba(30,6,9,.7), 0 0 0 9px rgba(198,161,91,0); }
}
@media (prefers-reduced-motion: reduce){
  .sound-toggle.is-new{ animation:none; }
}
.env-decoration-bl,
.env-decoration.br{
  position: absolute;
  pointer-events: none;
  opacity: .9;
  width: 100px;
  height: 100px;
}

.env-decoration.bl{
  bottom: -5px;
  left: -15px;
  transform: rotate(20deg);
  animation: float-bl 18s ease-in-out infinite;
}

.env-decoration.br{
  bottom: -5px;
  right: -15px;
  transform: rotate(-20deg);
  animation: float-br 19s ease-in-out infinite;
}

@keyframes float-bl{
  0%,100%{ transform: rotate(20deg) translate(0,0); }
  50%{ transform: rotate(20deg) translate(10px, 10px); }
}

@keyframes float-br{
  0%,100%{ transform: rotate(-20deg) translate(0,0); }
  50%{ transform: rotate(-20deg) translate(-10px, 10px); }
}.env-corner-img{
  position: absolute;
  pointer-events: none;
  opacity: .9;
  width: 120px;
  height: 120px;
  z-index: 3;
}

.env-corner-img.bl{
  bottom: -5px;
  left: -10px;
  
}

.env-corner-img.br{
  bottom: -5px;
  right: -10px;
  
}