:root{
    --cream:#fbf3e9;--paper:#fffaf4;--rose:#d99aa3;--rose-dark:#8e3045;--wine:#76273a;
    --gold:#bd8a42;--gold-light:#e4c994;--sage:#aab59b;--sage-dark:#5d6c57;--ink:#49342e;
    --shadow:0 20px 60px rgba(65,38,29,.15)
  }
  *{box-sizing:border-box}
  html{scroll-behavior:auto}
  body{margin:0;color:var(--ink);font-family:"Cormorant Garamond",serif;background:var(--cream);overflow-x:hidden}
  body.locked{overflow:hidden}
  img{display:block;max-width:100%}
  button,a{font:inherit}
  button{cursor:pointer}
  .section-inner{width:min(1000px,92%);margin:auto;text-align:center}
  .section-inner.wide{width:min(1240px,94%)}
  .section-paper{background:var(--paper);position:relative}
  .gallery-section{  position:relative;  background:linear-gradient(rgba(255,250,244,.78),rgba(255,250,244,.78)),url("assets/Backpic.png") center center / 100% 100% no-repeat;overflow:hidden;}
  .section-cream{background:linear-gradient(135deg,#fbf1e6,#f5e7dc)}
  .section-sage{background:linear-gradient(145deg,#e5ebdf,#f8eee4)}
  .eyebrow{font-family:"Playfair Display",serif;font-size:11px;letter-spacing:4px;color:var(--sage-dark);font-weight:600;margin:0 0 10px}
  .light-text{color:#fff4e7}
  .telugu{font-family:"Noto Serif Telugu",serif;color:var(--rose-dark)}

  /* ---------- ENVELOPE ---------- */
  .opening{min-height:100svh;width:100%;display:grid;place-items:center;position:relative;overflow:hidden;text-align:center;background:linear-gradient(rgba(255,250,244,.78),rgba(255,250,244,.78)),url("assets/Envelope1.png") center/cover no-repeat;}
  .opening:before,.opening:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none}
  .opening:before{width:420px;height:420px;background:#e9b4bd;left:-190px;bottom:-170px}.opening:after{width:430px;height:430px;background:#c9d4b8;right:-190px;top:-180px}
  .opening-content{width:min(520px,94vw);position:relative;z-index:3;padding:28px 12px 35px}
  .ganesha{font-size:64px;color:var(--gold);line-height:1;margin-bottom:4px}.mantra{font-size:17px;color:var(--rose-dark);margin:0 0 18px}.invite-label{font-family:"Playfair Display";font-size:10px;letter-spacing:4px;color:#8c7a67}
  .opening-ornament{position:absolute;z-index:1;left:0;right:0;color:#aeb795;font-size:25px;letter-spacing:8px;opacity:.6}.opening-ornament.top{top:30px}.opening-ornament.bottom{bottom:24px;color:#c99b62}
  .envelope-button{width:min(400px,88vw);aspect-ratio:1.05/1;border:0;background:none;position:relative;margin:8px auto 8px;display:block;perspective:1400px;padding:0}
  .envelope-body{position:absolute;left:0;right:0;bottom:4%;height:70%;filter:drop-shadow(0 28px 20px rgba(58,29,26,.22));transition:transform 1.1s cubic-bezier(.2,.78,.2,1)}
  .envelope-front{position:absolute;inset:0;border-radius:12px;background:linear-gradient(145deg,#8e3046,#682338);z-index:5;overflow:hidden;clip-path:polygon(0 0,50% 43%,100% 0,100% 100%,0 100%)}
  .envelope-front:before{content:"";position:absolute;inset:14px;border:1px solid rgba(246,226,190,.5);border-radius:7px}
  .envelope-front:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;left:50%;top:47%;transform:translate(-50%,-50%);border:1px solid rgba(246,226,190,.15)}
  .envelope-flap{position:absolute;inset:0 0 auto;height:64%;background:linear-gradient(160deg,#a5445b,#75263a);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:7;transition:transform 1.05s cubic-bezier(.2,.78,.2,1);backface-visibility:hidden}
  .floral-line{position:absolute;left:0;right:0;bottom:30px;color:#f6e8d8;font-size:25px;letter-spacing:8px;opacity:.8}.monogram{position:absolute;z-index:8;left:50%;top:42%;transform:translate(-50%,-50%);width:106px;height:106px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:5px;background:radial-gradient(circle at 35% 30%,#fffefb,#ead8ae);border:4px solid rgba(255,255,255,.85);box-shadow:0 9px 20px rgba(32,15,12,.28);color:#a8772f;font-family:"Great Vibes";font-size:34px}
  .monogram i{font-family:"Cormorant Garamond";font-size:19px;font-style:normal}.envelope-script{position:absolute;z-index:8;left:0;right:0;bottom:17px;color:#f7ead9;font-family:"Great Vibes";font-size:24px}
  .letter{position:absolute;z-index:2;left:8%;right:8%;bottom:10%;height:72%;background:var(--paper);border-radius:8px;box-shadow:0 8px 30px rgba(44,25,20,.14);transform:translateY(22px) scale(.9);opacity:0;transition:transform 1.15s .35s,opacity .55s .25s}
  .letter-border{position:absolute;inset:13px;border:1px solid #d9bf8c;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--rose-dark)}.letter-small,.letter-date{font-family:"Playfair Display";font-size:9px;letter-spacing:3px}.letter strong{font-family:"Great Vibes";font-size:54px;font-weight:400;margin:8px 0}.letter strong em{font-family:"Cormorant Garamond";font-size:18px;font-style:normal;color:var(--gold)}
  .envelope-button.open .envelope-flap{transform:rotateX(180deg)}.envelope-button.open .envelope-body{transform:translateY(105px)}.envelope-button.open .letter{transform:translateY(-100px) scale(1);opacity:1;z-index:4}.envelope-button.open .monogram{opacity:0;transition:.2s}.envelope-button.open .envelope-script{opacity:0}
  .opening h1{font-family:"Great Vibes";font-size:64px;font-weight:400;color:var(--rose-dark);margin:4px 0 0}.tap-hint{font-size:17px;font-style:italic;margin:0;color:#7b6759}.opening.exit{animation:openingExit .9s .25s forwards}@keyframes openingExit{to{opacity:0;transform:scale(1.025);visibility:hidden}}
  .petals:before,.petals:after{content:"✦   ❀   •   ❁   •   ✿   ✦";position:absolute;left:0;right:0;font-size:20px;color:#c48c55;letter-spacing:15px;opacity:.35}.petals:before{top:12%;animation:float 8s ease-in-out infinite}.petals:after{bottom:10%;animation:float 10s ease-in-out infinite reverse}@keyframes float{50%{transform:translateY(-18px) rotate(2deg)}}


  /* ---------- MAIN HERO ---------- */
  .hero{min-height:100svh;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;background:url("assets/weddding1.jpg") center/cover no-repeat}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(67,30,31,.38),rgba(45,22,22,.65))}.hero-content{position:relative;z-index:3;color:white;padding:30px 18px}.hero-om{font-size:52px;color:#f0cf91;margin:15px}.hero-intro{font-style:italic;font-size:18px;letter-spacing:2px}.hero h1{font-family:"Great Vibes";font-size:clamp(82px,13vw,150px);font-weight:400;line-height:.75;margin:12px 0 25px;text-shadow:0 5px 24px rgba(0,0,0,.35);display:flex;justify-content:center;align-items:center;gap:24px}.hero h1 i{font-family:"Cormorant Garamond";font-size:.27em;font-style:normal;color:#f4d79c}.hero-rule{color:#f0cb83;font-size:25px}.hero-date{font-family:"Playfair Display";font-size:24px;letter-spacing:6px;margin:10px 0}.hero-date small{font-size:.55em}.hero-place{font-family:"Playfair Display";font-size:12px;letter-spacing:4px}.scroll-button{display:inline-block;margin-top:25px;padding:12px 22px;border:1px solid rgba(255,255,255,.7);border-radius:30px;color:white;text-decoration:none;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
  .hero-floral{position:absolute;top:-40px;width:42%;height:35%;z-index:2;opacity:.65}.hero-floral-left{left:-8%;background:radial-gradient(ellipse at 20% 0,#fff4e8 0 8%,transparent 9%),radial-gradient(ellipse at 32% 8%,#e6b2ae 0 8%,transparent 9%),radial-gradient(ellipse at 42% 18%,#d5dcae 0 7%,transparent 8%),linear-gradient(130deg,transparent 45%,rgba(241,212,183,.7) 46%,transparent 48%);filter:blur(.2px)}.hero-floral-right{right:-8%;transform:scaleX(-1);background:radial-gradient(ellipse at 20% 0,#fff4e8 0 8%,transparent 9%),radial-gradient(ellipse at 32% 8%,#e6b2ae 0 8%,transparent 9%),radial-gradient(ellipse at 42% 18%,#d5dcae 0 7%,transparent 8%),linear-gradient(130deg,transparent 45%,rgba(241,212,183,.7) 46%,transparent 48%)}

  /* ---------- MUSIC / NAV ---------- */
  .music-toggle{position:fixed;right:22px;bottom:22px;z-index:100;width:54px;height:54px;border-radius:50%;border:1px solid #e8d3ae;background:#7a2b3e;color:#fff;font-size:23px;box-shadow:0 10px 25px rgba(48,24,20,.25)}.music-toggle.playing{animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
  .floating-nav{position:fixed;top:20px;right:20px;z-index:90;display:flex;gap:4px;background:rgba(255,250,244,.84);backdrop-filter:blur(12px);border:1px solid #ddc59e;border-radius:30px;padding:5px}.floating-nav a{color:var(--rose-dark);text-decoration:none;padding:8px 12px;font-size:14px;border-radius:20px}.floating-nav a:hover{background:#f1dfd5}


  
  /* ---------- SECTIONS ---------- */
  .countdown-section,.families-section,.events-section,.gallery-section,.venue-section{padding:100px 0}.countdown-section h2,.families-section h2,.events-section h2,.gallery-section h2,.venue-section h2{font-family:"Great Vibes";font-size:clamp(55px,7vw,82px);font-weight:400;color:var(--rose-dark);margin:4px 0 15px}.venue-card h2{font-family:"Playfair Display",serif;font-size: clamp(38px, 5.5vw, 62px);font-weight: 600;letter-spacing: 1px;}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(850px,100%);margin:40px auto 25px}.countdown div{background:white;border:1px solid #e1caa7;border-radius:18px;padding:25px 12px;box-shadow:0 8px 25px rgba(83,53,35,.07)}.countdown strong{display:block;font-family:"Playfair Display";font-size:clamp(38px,6vw,62px);font-weight:500;color:var(--rose-dark)}.countdown span{font-size:12px;text-transform:uppercase;letter-spacing:2px}.top-telugu{font-size:20px}.family-panel{width:min(1100px,92%);margin:auto;padding:60px 45px;text-align:center;background:linear-gradient(  rgba(255,250,244,.78),  rgba(255,250,244,.78)  ), url("assets/Card.png");  background-size:cover;   background-position:center;  background-repeat:no-repeat; border:1px solid #d6c09c;border-radius:35px;box-shadow:var(--shadow)}.family-intro{max-width:650px;margin:0 auto;font-size:19px}.couple-names{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;max-width:900px;margin:42px auto}.person .role{font-family:"Playfair Display";font-size:11px;letter-spacing:4px;color:var(--sage-dark)}.person h3{font-family:"Great Vibes";font-size:64px;font-weight:400;color:var(--rose-dark);margin:6px}.person p{margin:0 0 6px;font-size:17px}.person strong{font-size:18px;font-weight:500;line-height:1.45}.ampersand{font-family:"Great Vibes";font-size:62px;color:var(--gold)}.family-blessing{color:#987241;font-style:italic;font-size:17px}
  .section-subtitle{font-size:19px;margin:-4px auto 45px}.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.event-card{min-height:590px;border-radius:28px;overflow:hidden;position:relative;background-image:var(--event-image);background-size:cover;background-position:center;box-shadow:var(--shadow);isolation:isolate}.event-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(39,19,19,.88) 100%)}.event-content{position:absolute;z-index:2;left:0;right:0;bottom:0;color:white;text-align:left;padding:34px}.event-number{font-family:"Playfair Display";font-size:11px;letter-spacing:3px;color:#f3d59d}.event-content h3{font-family:"Great Vibes";font-size:68px;font-weight:400;margin:0}.event-subtitle{font-size:20px;font-style:italic;margin:0 0 17px}.event-details{display:grid;gap:5px;font-size:16px}.event-details b{font-weight:500}.feature-section{height:88svh;min-height:600px;position:relative;overflow:hidden;}.feature-section img{width:100%;height:100%;object-fit:cover}.feature-overlay{position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(39,18,18,.72))}.feature-copy{position:absolute;z-index:2;left:50%;top:50%;;transform:translate(-50%,-50%);width:90%;max-width:1000px;text-align:center;color:white}.feature-copy p{font-family:"Playfair Display", serif;letter-spacing:5px; margin:0 0 12px;}.feature-copy h2{font-family:"Great Vibes", cursive;font-size:clamp(65px,9vw,110px);font-weight:400;line-height:1;margin:0}.feature-copy span{display:block;font-family:"Playfair Display", serif;letter-spacing:5px;margin-top:15px;}.reveal{opacity:0;transform:translateY(30px); transition:opacity .9s ease, transform .9s ease;}.reveal.visible{opacity:1; transform:none;}.feature-copy.reveal.visible{transform:translate(-50%,-50%);}.photo-collage{width:min(1150px,94%);margin:45px auto 0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px; gap:14px;grid-template-areas: "one one two three"   "one one four four"  "five six four four"   "five seven eight eight";}  .photo-collage .collage-item{position:relative; width:100%;height:100%;margin:0;padding: 0;overflow: hidden;border:5px solid rgba(255,255,255,.9); border-radius: 22px;background:#111;box-shadow:0 12px 30px rgba(0,0,0,.30),0 4px 10px rgba(0,0,0,.18);;} .photo-collage .collage-item img{display:block;width:100%;height:100%;max-width:none; object-fit:cover;  object-position:center center;transition:transform .7s ease;}.photo-collage .item-3 img,.photo-collage .item-4 img,.photo-collage .item-8 img{object-position:center 15%;}.photo-collage .collage-item:hover img{transform:scale(1.06);}.photo-collage .item-1{grid-area:one}.photo-collage .item-2{grid-area:two}.photo-collage .item-3{grid-area:three}.photo-collage .item-4{grid-area:four}.photo-collage .item-5{grid-area:five}.photo-collage .item-6{grid-area:six}.photo-collage .item-7{grid-area:seven}.photo-collage .item-8{grid-area:eight}  .photo-collage .collage-item::after{  content:"";position:absolute; inset:7px;border-radius:17px;pointer-events:none;}
  .venue-card{width:min(1050px,92%);margin:auto;padding:55px 35px;text-align:center;background-image:linear-gradient(rgba(255,250,244,.40),rgba(255,250,244,.40)),url("assets/Location.png");background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid #d1bd99;border-radius:35px;padding:55px 35px;text-align:center;box-shadow:var(--shadow)}.venue-icon{font-size:35px;color:var(--gold)}.venue-copy{font-size:19px;max-width:620px;margin:0 auto 28px}.map-wrap{height:420px;border-radius:24px;overflow:hidden;border:1px solid #d4bd96;background:#eee}.map-wrap iframe{width:100%;height:100%;border:0}.gold-button{display:inline-block;align-items:center;justify-content:center;gap:8px;margin-top:22px;padding:15px 32px;border-radius:30px;border:1px solid rgba(255,255,255,.4);text-decoration:none;color:white;font-family:"Playfair Display",serif;font-size:17px;font-weight:500;background:linear-gradient(145deg,#d3a45c,#b57d32);box-shadow:0 7px 0 #875a25,0 13px 25px rgba(80,45,15,.25);transform:translateY(0);transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}.gold-button:hover{transform:translateY(-5px);background:linear-gradient(145deg,#e0b66d,#c38d3d);box-shadow:0 12px 0 #875a25,0 22px 30px rgba(80,45,15,.30);}.gold-button:active{transform:translateY(4px);box-shadow:0 3px 0 #875a25,0 7px 15px rgba(80,45,15,.20);}
  .final-section{position:relative;overflow:hidden;text-align:center;padding:120px 20px;background:linear-gradient(145deg,#6f273b,#8e3045);color:#fff8ef}.final-section:before,.final-section:after{content:"❀";position:absolute;font-size:180px;color:#e9cfa1;opacity:.08}.final-section:before{left:-40px;top:10px}.final-section:after{right:-40px;bottom:-20px}.final-section h2{font-family:"Great Vibes";font-size:clamp(60px,8vw,95px);font-weight:400;max-width:900px;margin:12px auto}.final-date{font-family:"Playfair Display";letter-spacing:5px;font-size:20px}.light-telugu{color:#f4ddba}.final-names{font-family:"Great Vibes";font-size:65px;margin-top:20px}.final-names span{font-family:"Cormorant Garamond";font-size:30px;color:#e7c98e}footer{background:#4b2a27;color:#e9d8c4;text-align:center;padding:45px 20px 35px;}footer p:first-child{font-family:"Playfair Display",serif;font-size:16px;font-weight:500;letter-spacing:1.5px;color:#e9cfa1;margin:0 0 18px;}footer p:nth-child(2){max-width:950px;margin:0 auto 22px;font-family:"Noto Serif Telugu",serif; font-size:18px;font-weight:250; color:#f1dfc8;}footer p:nth-child(3){max-width:950px;margin:0 auto 22px;font-family:"Noto Serif Telugu",serif; font-size:18px;font-weight:250; color:#f1dfc8;}footer span{font-size:20px;color:#d8ad67}.copyright{margin-top:25px;padding-top:18px;border-top:1px solid rgba(216,173,103,.25); font-family:"Playfair Display",serif; font-size:13px;letter-spacing:1.5px;color:rgba(241,223,200,.65);}




  /* ---------- REVEAL ---------- */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}.reveal.visible{opacity:1;transform:none}.feature-copy.reveal.visible{ transform:translate(-50%,-50%);}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:900px){.floating-nav{display:none}.event-grid{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)}.hero h1{flex-direction:column;gap:2px;line-height:.65}.hero h1 i{margin:6px 0}.couple-names{grid-template-columns:1fr;gap:12px}.ampersand{font-size:45px}.family-panel{padding:45px 22px} .photo-collage{width:94%; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:5px; grid-template-areas:  "one two two three"  "one four four three"  "five four four six"  "five seven seven eight"; }} 
  @media(max-width:600px){.opening-content{padding-top:20px}.opening h1{font-size:53px}.envelope-button{width:92vw}.ganesha{font-size:52px}.mantra{font-size:15px}.invite-label{font-size:8px}.letter strong{font-size:45px}.monogram{width:88px;height:88px;font-size:29px}.envelope-script{font-size:20px}.countdown-section,.families-section,.events-section,.gallery-section,.venue-section{padding:72px 0}.countdown{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}.countdown div{padding:19px 8px}.countdown strong{font-size:38px}.countdown span{font-size:10px}.person h3{font-size:55px}.person strong{font-size:16px}.feature-section{height:75svh;min-height:520px}.photo-collage{width:94%;grid-template-columns:repeat(2,1fr);  grid-auto-rows:150px;  gap:4px;grid-template-areas:"one one" "one one"  "two three" "four four" "five six" "seven eight";} .photo-collage .collage-item{border-radius:12px;}.photo-collage .collage-item::after{inset:5px; border-radius:9px;}.venue-card{padding:38px 15px}.map-wrap{height:320px}.music-toggle{right:15px;bottom:15px;width:50px;height:50px}.final-section{padding:90px 20px}.final-names{font-size:53px}}.copyright{ margin-top:18px;padding-top:14px;font-size:11px;letter-spacing:1px;}
  @media(max-width:390px){

  .photo-collage{
    grid-auto-rows:125px;
    gap:4px;
  }

}

/* =========================================================
   SLOW & SMOOTH WEBSITE SCROLLING
   ========================================================= */

html {
  scroll-padding-top: 20px;
}


/* =========================================================
   CONTINUOUS FALLING FLOWERS
   ========================================================= */

.falling-flowers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  contain: strict;
  backface-visibility: hidden;
}

.falling-flowers span {
  position: absolute;
  top: -12vh;
  left: var(--left);
  display: block;

  font-size: var(--size);
  line-height: 1;
  color: var(--color);
  opacity: 0;

  filter: none;

  pointer-events: none;
  user-select: none;

  will-change: transform, opacity;

  animation: flowerFall var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes flowerFall {

  0% {
    transform:
      translate3d(0, -12vh, 0)
      rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: var(--opacity);
  }

  25% {
    transform:
      translate3d(
        calc(var(--drift) * .35),
        25vh,
        0
      )
      rotate(calc(var(--rotation) * .25));
  }

  50% {
    transform:
      translate3d(
        var(--drift),
        50vh,
        0
      )
      rotate(calc(var(--rotation) * .55));
  }

  75% {
    transform:
      translate3d(
        calc(var(--drift) * -.45),
        75vh,
        0
      )
      rotate(calc(var(--rotation) * .8));
  }

  92% {
    opacity: var(--opacity);
  }

  100% {
    transform:
      translate3d(
        calc(var(--drift) * .25),
        112vh,
        0
      )
      rotate(var(--rotation));
    opacity: 0;
  }
}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

  .falling-flowers span {
    font-size: calc(var(--size) * .78);
  }

  .falling-flowers span:nth-child(n+19) {
    display: none;
  }
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

  .falling-flowers {
    display: none;
  }
}


/* =========================================================
   ONE-TIME ENVELOPE FLOWER / SPARKLE BLAST
   ========================================================= */

.blast {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 1px;
  height: 1px;

  z-index: 100;
  pointer-events: none;
  overflow: visible;

  /* Make sure the blast itself does not disappear */
  display: block;
}

.blast span {
  position: absolute;
  left: 0;
  top: 0;

  display: block;

  font-family: "Cormorant Garamond", serif;
  font-size: var(--size);
  line-height: 1;

  color: var(--color);

  opacity: 0;

  pointer-events: none;
  user-select: none;

  text-shadow:
    0 0 4px rgba(255,255,255,.5),
    0 1px 3px rgba(80,40,30,.15);

  will-change: transform, opacity;

  transform:
    translate(-50%, -50%)
    translate(0, 0)
    rotate(0deg)
    scale(.2);
}


/* =========================================================
   TRIGGER WHEN ENVELOPE GETS .open
   ========================================================= */

.envelope-button.open .blast span {
  animation:
    envelopeFlowerBurst
    1.15s
    cubic-bezier(.15,.65,.25,1)
    var(--delay)
    1
    forwards;
}


/* =========================================================
   BURST
   ========================================================= */

@keyframes envelopeFlowerBurst {

  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      translate(0, 0)
      rotate(0deg)
      scale(.2);
  }

  10% {
    opacity: .95;

    transform:
      translate(-50%, -50%)
      translate(0, 0)
      rotate(20deg)
      scale(.8);
  }

  25% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      translate(
        calc(var(--x) * .35),
        calc(var(--y) * .35)
      )
      rotate(100deg)
      scale(1);
  }

  55% {
    opacity: .85;

    transform:
      translate(-50%, -50%)
      translate(
        calc(var(--x) * .72),
        calc(var(--y) * .72)
      )
      rotate(220deg)
      scale(1.05);
  }

  80% {
    opacity: .5;

    transform:
      translate(-50%, -50%)
      translate(
        calc(var(--x) * .92),
        calc(var(--y) * .92)
      )
      rotate(330deg)
      scale(.9);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      translate(var(--x), var(--y))
      rotate(450deg)
      scale(.65);
  }
}


/* =========================================================
   MOBILE — slightly smaller burst
   ========================================================= */

@media (max-width: 600px) {

  .blast span {
    font-size: calc(var(--size) * .82);
  }

  .blast {
    top: 42%;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .blast {
    display: none;
  }
}




/* =========================================================
   ✨ JAVASCRIPT ENVELOPE CELEBRATION BLAST
   ========================================================= */

.js-blast {
  position: absolute;

  left: 50%;
  top: 42%;

  width: 1px;
  height: 1px;

  z-index: 200;

  pointer-events: none;
  overflow: visible;
}


.js-blast span {

  position: absolute;

  left: 0;
  top: 0;

  display: block;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: var(--size);

  line-height: 1;

  color: inherit;

  opacity: 0;

  pointer-events: none;

  user-select: none;

  will-change:
    transform,
    opacity;

  text-shadow:
    0 0 5px rgba(255,255,255,.7),
    0 0 12px rgba(228,201,148,.35);

  animation:
    jsEnvelopeBurst
    var(--duration)
    cubic-bezier(.12,.65,.25,1)
    var(--delay)
    forwards;
}


@keyframes jsEnvelopeBurst {

  /* Start at seal */

  0% {

    opacity: 0;

    transform:
      translate(-50%,-50%)
      translate(0,0)
      rotate(0deg)
      scale(.1);
  }


  /* POP */

  8% {

    opacity: 1;

    transform:
      translate(-50%,-50%)
      translate(0,0)
      rotate(25deg)
      scale(1);
  }


  /* First movement */

  25% {

    opacity: 1;

    transform:
      translate(-50%,-50%)
      translate(
        calc(var(--x) * .28),
        calc(var(--y) * .28)
      )
      rotate(120deg)
      scale(var(--scale));
  }


  /* Main burst */

  55% {

    opacity: .9;

    transform:
      translate(-50%,-50%)
      translate(
        calc(var(--x) * .65),
        calc(var(--y) * .65)
      )
      rotate(270deg)
      scale(var(--scale));
  }


  /* Fade */

  80% {

    opacity: .5;

    transform:
      translate(-50%,-50%)
      translate(
        calc(var(--x) * .88),
        calc(var(--y) * .88)
      )
      rotate(390deg)
      scale(.8);
  }


  /* Final position */

  100% {

    opacity: 0;

    transform:
      translate(-50%,-50%)
      translate(
        var(--x),
        var(--y)
      )
      rotate(var(--rotation))
      scale(.35);
  }
}


/* Mobile */

@media (max-width:600px) {

  .js-blast span {
    font-size:
      calc(var(--size) * .78);
  }

}


/* Reduced motion */

@media (prefers-reduced-motion:reduce) {

  .js-blast {
    display:none;
  }

}