/* =========================================================
   FONTS
   ========================================================= */

@font-face{
  font-family:Accanthis;
  src:url("assets/fonts/AccanthisADFStd-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:LatoLocal;
  src:url("assets/fonts/Lato-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:LatoLocal;
  src:url("assets/fonts/Lato-Semibold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:Bookman;
  src:url("assets/fonts/URWBookman-Light.otf") format("opentype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root{
  --gold:#d6a85f;
  --gold2:#f0d69c;
  --cream:#fff7e8;
  --ink:#2a1b12;
  --deep:#120e0a;

  --serif:Accanthis,"URW Bookman",Georgia,serif;
  --sans:LatoLocal,Arial,sans-serif;
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  background:#0c0907;
}

body{
  margin:0;
  background:#0c0907;
  color:var(--cream);
  font-family:var(--sans);
  overflow-x:hidden;
}

/* Performance: keep each full-screen scene isolated so off-screen animation/layout work stays contained. */
.slide{
  contain:layout paint;
  -webkit-tap-highlight-color:transparent;
}
img, video{
  max-width:100%;
}


button,
a{
  font:inherit;
}


/* =========================================================
   MAIN EXPERIENCE
   ========================================================= */

.experience{
  min-height:100vh;
  display:flex;
  justify-content:center;
}

.intro,
.slides{
  width:min(100vw,56.25vh);
}


/* =========================================================
   OPENING SCREEN
   ========================================================= */

.intro{
  height:min(177.7777778vw,100vh);
  min-height:100vh;

  position:fixed;
  inset:0;
  margin:auto;

  z-index:20;
  overflow:hidden;

  background:#090806;

  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

.intro.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}


/* =========================================================
   OPENING VIDEO
   ========================================================= */

.opening-video{
  width:100%;
  height:100%;

  object-fit:cover;
  display:block;

  filter:
    saturate(.88)
    contrast(.98);
}


/* =========================================================
   VIDEO VIGNETTE
   ========================================================= */

.video-vignette{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 50% 45%,
      transparent 25%,
      rgba(0,0,0,.5) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.28),
      transparent 38%,
      rgba(0,0,0,.5)
    );
}


/* =========================================================
   FINAL VIDEO FADE
   ========================================================= */

.fade-layer{
  position:absolute;
  inset:0;

  background:#100c08;

  opacity:0;

  pointer-events:none;

  transition:
    opacity 2.5s ease;
}

.intro.fade-out .fade-layer{
  opacity:1;
}


/* =========================================================
   OPENING TEXT BOX
   ========================================================= */

.intro-copy{
  position:absolute;

  top:50%;
  left:8%;
  right:8%;

  transform:translateY(-50%);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:32px 22px;

  /*
    Transparent black background
  */
  background:rgba(0,0,0,.55);

  /*
    Thin gold border
  */
  border:1px solid rgba(214,168,95,.85);

  /*
    Soft shadow
  */
  box-shadow:
    0 15px 50px rgba(0,0,0,.45);

  /*
    Slight glass effect
  */
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);

  opacity:1;

  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}


/* =========================================================
   OPENING OM
   ========================================================= */

.om-mark,
.om-symbol{
  font-family:var(--serif);

  color:var(--gold2);

  text-shadow:
    0 3px 25px rgba(0,0,0,.4);
}

.om-mark{
  font-size:clamp(42px,9vw,78px);

  margin-bottom:4vh;
}


/* =========================================================
   OPENING INVITATION TEXT
   ========================================================= */

.mini-line{
  letter-spacing:.28em;

  font-size:9px;

  color:#f2dfba;

  margin-bottom:26px;
}


/* =========================================================
   TAP TO START BUTTON
   ========================================================= */

.start-btn{
  border:1px solid rgba(241,214,163,.75);

  background:rgba(24,16,10,.45);

  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);

  color:#fff4dd;

  border-radius:999px;

  padding:14px 25px;

  display:flex;
  gap:11px;
  align-items:center;

  cursor:pointer;

  box-shadow:
    0 10px 40px rgba(0,0,0,.25);

  transition:
    transform .35s ease,
    background .35s ease;
}

.start-btn:hover{
  transform:translateY(-2px);

  background:rgba(67,43,22,.65);
}

.start-icon{
  color:var(--gold2);
}


/* =========================================================
   TAP TO START SMALL NOTE
   ========================================================= */

.start-note{
  font-size:9px;

  letter-spacing:.1em;

  color:rgba(255,244,221,.65);

  margin-top:13px;
}


/* =========================================================
   FADE OPENING BOX AFTER TAP
   ========================================================= */

.intro.text-fade .intro-copy{
  opacity:0;

  transform:translateY(-60%);

  pointer-events:none;
}


/* =========================================================
   SLIDES
   ========================================================= */

.slides{
  position:relative;
}

.slide{
  position:relative;

  width:100%;

  height:calc(min(177.7777778vw,100vh));

  min-height:100vh;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  scroll-snap-align:start;

  isolation:isolate;
}


/* =========================================================
   SLIDE BACKGROUND IMAGE
   ========================================================= */

.slide .bg-image{
  position:absolute;
  inset:0;

  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  transform:scale(1.04);

  transition:
    transform 1.5s ease;
}

.slide.is-visible .bg-image{
  transform:scale(1);
}


/* =========================================================
   SLIDE CONTENT
   ========================================================= */

.slide-content{
  position:relative;

  z-index:3;

  width:84%;
  max-width:470px;

  transform:translateY(24px);

  opacity:0;

  transition:
    opacity 1s ease,
    transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.slide.is-visible .slide-content{
  opacity:1;

  transform:translateY(0);
}


/* =========================================================
   CENTERED CONTENT
   ========================================================= */

.centered{
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
}


/* =========================================================
   SLIDE 1
   ========================================================= */

.soft-wash{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(22,12,5,.2),
      rgba(28,14,6,.45)
    ),
    radial-gradient(
      circle at 50% 45%,
      rgba(255,225,169,.12),
      transparent 42%
    );
}

.ornament{
  position:absolute;

  top:6%;

  font-size:20px;

  color:var(--gold2);
}

.om-symbol{
  font-size:34px;

  margin-bottom:10px;
}

.slide h1,
.slide h2{
  font-family:var(--serif);

  font-weight:400;

  line-height:.94;

  margin:0;

  color:#fff8ea;

  text-shadow:
    0 4px 24px rgba(34,16,5,.28);
}

.slide h1{
  font-size:clamp(42px,9.5vw,74px);
}

.slide h1 span,
.slide h2 em{
  color:var(--gold2);

  font-style:normal;
}


/* =========================================================
   SLIDE 1 TEXT SIZING
   ========================================================= */

/*
  WITH LOVE & DEVOTION
*/
.slide-1 .eyebrow{
  font-size:9px;

  letter-spacing:.28em;

  color:#f2dfba;
}


/*
  OM
*/
.slide-1 .om-symbol{
  font-size:34px;
}


/*
  GANPATI BAPPA MORYA
*/
.slide-1 h1{
  font-size:55px;
}


/*
  DIVIDER
*/
.divider{
  display:flex;

  align-items:center;

  gap:12px;

  margin:24px 0 18px;

  color:var(--gold2);
}

.divider i{
  height:1px;

  width:38px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold2)
    );
}

.divider i:last-child{
  transform:scaleX(-1);
}


/*
  BLESSING TEXT
*/
.blessing{
  font-family:var(--serif);

  font-size:18px;

  line-height:1.45;

  color:#fff5e2;

  margin:0;
}


/*
  SANSKRIT MANTRA
*/
.tiny-mantra{
  font-family:var(--serif);

  font-size:12px;

  letter-spacing:.16em;

  color:var(--gold2);

  margin-top:24px;
}


/* =========================================================
   SCROLL HINT
   ========================================================= */

.scroll-hint{
  position:absolute;

  bottom:5%;

  font-size:8px;

  letter-spacing:.25em;

  color:rgba(255,245,226,.75);

  z-index:3;
}

.scroll-hint span{
  display:block;

  margin-top:9px;

  font-size:17px;

  color:var(--gold2);
}


/* =========================================================
   SLIDE 2
   ========================================================= */

.slide-2 .bg-image{
  filter:
    brightness(.96)
    saturate(.88);
}

.cream-panel{
  position:absolute;

  inset:7% 8%;

  background:rgba(255,249,236,.08);

  border:1px solid rgba(224,190,133,.42);

  box-shadow:
    inset 0 0 70px rgba(255,255,255,.06);
}

.slide-2 .slide-content{
    color:var(--ink);
    background:transparent !important;
    box-shadow:none !important;

  border:1px solid rgba(188,137,68,.35);

  padding:9% 8% 8%;

  box-shadow:
    0 25px 70px rgba(38,21,8,.2);

  backdrop-filter:blur(3px);
}

.slide-2 .eyebrow{
  color:#7f5b2c;
}

.slide-2 h2{
  color:#392417;

  text-shadow:none;

  font-size:clamp(36px,8vw,60px);
}

.slide-2 h2 em{
  color:#a66e28;
}

.gold-rule{
  display:flex;

  align-items:center;

  margin:22px auto 20px;

  height:1px;

  width:76%;

  background:
    linear-gradient(
      90deg,
      transparent,
      #b78339,
      transparent
    );
}


/* =========================================================
   EVENT DETAILS
   ========================================================= */

.details{
  display:grid;

  gap:15px;

  text-align:left;
}

.detail{
  display:grid;

  grid-template-columns:24px 1fr;

  gap:9px;

  align-items:start;
}

.detail-icon{
  color:#a56d25;

  font-size:16px;

  line-height:1.1;
}

.detail strong{
  display:block;

  font-family:var(--serif);

  font-size:17px;

  font-weight:400;

  color:#3d2719;

  letter-spacing:.03em;
}

.detail small{
  display:block;

  font-size:9px;

  line-height:1.5;

  color:#6b5746;

  letter-spacing:.04em;

  margin-top:3px;
}


/* =========================================================
   GOOGLE MAP BUTTON
   ========================================================= */

.map-btn{
  margin:22px auto 0;

  border:1px solid #ad7b36;

  color:#6e4a20;

  text-decoration:none;

  padding:11px 16px;

  border-radius:999px;

  font-size:9px;

  letter-spacing:.12em;

  display:inline-flex;

  gap:7px;

  align-items:center;

  transition:.3s;
}

.map-btn:hover{
  background:#fff0d0;

  transform:translateY(-2px);
}


/* =========================================================
   WARM OVERLAY
   ========================================================= */

.warm-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(24,12,4,.16),
      rgba(30,14,6,.35)
    );
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.countdown{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:8px;

  width:100%;

  margin-top:28px;
}

.countdown > div{
  padding:14px 5px;

  background:rgba(35,20,9,.33);

  border:1px solid rgba(240,210,160,.35);

  backdrop-filter:blur(5px);
}

.countdown b{
  display:block;

  font-family:var(--serif);

  font-size:31px;

  font-weight:400;

  color:#fff5df;
}

.countdown span{
  font-size:7px;

  letter-spacing:.16em;

  text-transform:uppercase;

  color:#e9d3ab;
}

.countdown-label{
  font-size:8px;

  letter-spacing:.08em;

  color:#fff0d1;

  margin-top:16px;
}


/* =========================================================
   AARTI
   ========================================================= */

.aarti-flame{
  font-size:52px;

  color:var(--gold2);

  text-shadow:
    0 0 30px rgba(255,196,93,.55);

  margin-bottom:15px;
}

.time-big{
  font-family:var(--serif);

  font-size:29px;

  color:#fff5df;

  margin:0;
}

.time-big span{
  font-family:var(--sans);

  font-size:9px;

  letter-spacing:.2em;
}

.aarti-note{
  font-family:var(--serif);

  font-size:15px;

  line-height:1.5;

  color:#fff0d7;
}


/* =========================================================
   SLIDE 5 — SCRATCH CARD
   ========================================================= */

.slide-5{
  background:
    radial-gradient(
      circle at 50% 42%,
      #604425,
      #17100b 65%,
      #0d0906
    );
}

.scratch-bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(232,190,116,.25),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #1b1109,
      #5b3b20 48%,
      #17100a
    );

  opacity:.9;
}

.scratch-bg:before,
.scratch-bg:after{
  content:"";

  position:absolute;

  inset:8%;

  border:1px solid rgba(227,187,113,.28);

  transform:rotate(2deg);
}

.scratch-bg:after{
  inset:11%;

  transform:rotate(-2deg);
}

.floating-petal{
  position:absolute;

  color:rgba(241,205,145,.45);

  font-size:28px;

  animation:float 5s ease-in-out infinite;
}

.p1{
  top:13%;
  left:15%;
}

.p2{
  top:22%;
  right:13%;

  animation-delay:1s;
}

.p3{
  bottom:17%;
  left:11%;

  animation-delay:2s;
}

@keyframes float{
  50%{
    transform:
      translateY(-13px)
      rotate(12deg);
  }
}


/* =========================================================
   SCRATCH CARD
   ========================================================= */

.scratch-card{
  position:relative;

  width:min(76vw,330px);

  aspect-ratio:1.12;

  border-radius:10px;

  margin-top:25px;

  overflow:hidden;

  box-shadow:
    0 22px 65px rgba(0,0,0,.4);

  border:1px solid rgba(240,210,154,.55);

  background:#f2c77f;
}

.scratch-message{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 50% 40%,
      #fff3ce,
      #e5b568
    );

  color:#3b2514;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;
}

.scratch-message span{
  font-family:var(--serif);

  font-size:38px;

  color:#9b641e;
}

.scratch-message strong{
  font-family:var(--serif);

  font-size:23px;

  line-height:1.1;

  font-weight:400;
}

.scratch-message small{
  margin-top:11px;

  font-size:8px;

  letter-spacing:.16em;
}


/* =========================================================
   SCRATCH CANVAS
   ========================================================= */

#scratchCanvas{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  touch-action:none;

  cursor:crosshair;
}


/* =========================================================
   SCRATCH HINT
   ========================================================= */

.scratch-hint{
  position:absolute;

  z-index:2;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border:1px solid rgba(255,245,224,.8);

  background:rgba(73,48,22,.42);

  color:#fff5df;

  padding:10px 18px;

  border-radius:999px;

  font-size:9px;

  letter-spacing:.13em;

  pointer-events:none;

  backdrop-filter:blur(4px);

  transition:opacity .4s;
}

.scratch-card.scratched .scratch-hint{
  opacity:0;
}

.scratch-note{
  font-size:8px;

  letter-spacing:.08em;

  color:rgba(255,238,205,.7);

  margin-top:14px;
}


/* =========================================================
   SLIDE 6
   ========================================================= */

.slide-6 .bg-image{
  filter:
    saturate(.8)
    brightness(.88);
}

.golden-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(29,13,5,.16),
      rgba(22,12,7,.5)
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 25%,
      rgba(22,12,5,.32)
    );
}


/* =========================================================
   BLESSING TAP
   ========================================================= */

.tap-ganesh{
  position:relative;

  width:120px;
  height:120px;

  margin-bottom:17px;

  display:grid;

  place-items:center;

  cursor:pointer;
}

.halo{
  position:absolute;

  inset:4px;

  border:1px solid rgba(247,218,163,.5);

  border-radius:50%;

  box-shadow:
    0 0 0 12px rgba(239,194,109,.06),
    0 0 60px rgba(240,192,91,.3);

  animation:pulse 2.2s ease-in-out infinite;
}

.tap-ring{
  font-size:30px;

  color:var(--gold2);

  animation:spin 8s linear infinite;
}

@keyframes pulse{
  50%{
    transform:scale(1.07);

    opacity:.65;
  }
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   BLESSING BUTTON
   ========================================================= */

.blessing-btn{
  border:1px solid rgba(248,223,175,.72);

  color:#fff3d8;

  background:rgba(40,21,9,.36);

  border-radius:999px;

  padding:11px 22px;

  margin-top:20px;

  cursor:pointer;

  transition:.3s;
}

.blessing-btn:hover{
  transform:translateY(-2px);

  background:rgba(86,49,19,.55);
}

.tap-status{
  font-size:8px;

  letter-spacing:.1em;

  color:rgba(255,238,205,.7);

  min-height:18px;
}

.slide-6 .mantra{
  margin-top:14px;
}


/* =========================================================
   BLESSING PETALS
   ========================================================= */

.petals{
  position:absolute;
  inset:0;

  pointer-events:none;

  overflow:hidden;

  z-index:4;
}

.petal{
  position:absolute;

  top:-20px;

  color:#fff0cc;

  font-size:14px;

  animation:
    fall linear forwards;

  text-shadow:
    0 0 12px rgba(255,190,78,.8);
}

@keyframes fall{
  to{
    transform:
      translate3d(var(--x),110vh,0)
      rotate(560deg);

    opacity:0;
  }
}


/* =========================================================
   SLIDE 7 — FINAL
   ========================================================= */

.slide-7{
  background:
    linear-gradient(
      145deg,
      #25160d,
      #6c4a25 45%,
      #1a100a
    );
}

.final-bg{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(250,216,153,.24),
      transparent 30%
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 7px
    );
}

.final-glow{
  position:absolute;

  width:80%;

  aspect-ratio:1;

  border-radius:50%;

  background:rgba(231,177,86,.12);

  filter:blur(40px);
}


/* =========================================================
   FINAL MESSAGE
   ========================================================= */

.thank-you{
  font-family:var(--serif);

  font-size:22px;

  line-height:1.4;

  color:#fff1d7;
}

.closing{
  font-size:9px;

  letter-spacing:.1em;

  color:rgba(255,234,195,.72);

  margin-top:20px;
}


/* =========================================================
   REPLAY
   ========================================================= */

.replay{
  position:absolute;

  bottom:5%;

  border:0;

  background:transparent;

  color:#e8cc9c;

  font-size:8px;

  letter-spacing:.18em;

  cursor:pointer;
}


/* =========================================================
   MUSIC PILL
   ========================================================= */

.music-pill{
  position:fixed;

  right:
    calc(
      (100vw - min(100vw,56.25vh))/2 + 12px
    );

  bottom:14px;

  z-index:30;

  display:flex;

  align-items:center;

  gap:7px;

  background:rgba(18,11,7,.64);

  border:1px solid rgba(238,211,165,.32);

  border-radius:999px;

  padding:5px 9px 5px 5px;

  backdrop-filter:blur(8px);

  font-size:8px;

  color:#f3dec0;

  letter-spacing:.1em;

  transition:opacity .4s;
}

.music-pill button{
  width:26px;
  height:26px;

  border-radius:50%;

  border:1px solid rgba(240,211,160,.45);

  background:rgba(219,170,90,.15);

  color:#ffe9be;

  cursor:pointer;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

  .music-pill{
    right:12px;
  }

  .slide{
    min-height:100svh;

    height:177.7777778vw;
  }

  .intro{
    min-height:100svh;

    height:177.7777778vw;
  }

  .slide-content{
    width:86%;
  }

  /*
    Slightly tighter opening box on phones
  */
  .intro-copy{
    left:7%;
    right:7%;

    padding:28px 18px;
  }

}


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

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

  *,
  *:before,
  *:after{
    scroll-behavior:auto!important;

    animation:none!important;

    transition-duration:.01ms!important;
  }

}/* Black transparent box behind Slide 1 blessing + mantra */
.slide-1 .blessing,
.slide-1 .tiny-mantra{
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(214,168,95,0.85);
  padding:14px 18px;
  box-sizing:border-box;
}

.slide-1 .blessing{
  margin-bottom:0;
}

.slide-1 .tiny-mantra{
  margin-top:0;
  border-top:none;
}/* Invitation Details Slide - Black Transparent Gold Box */
.slide-2 .slide-content,
.slide-2 .content-box,
.slide-2 .details-box{
  background:rgba(0,0,0,0.55) !important;
  border:1px solid rgba(214,168,95,0.85) !important;
  box-shadow:0 10px 35px rgba(0,0,0,0.35) !important;
}/* Mustard Yellow Text - Invitation Slide */
.slide-2,
.slide-2 h1,
.slide-2 h2,
.slide-2 h3,
.slide-2 p,
.slide-2 strong,
.slide-2 span,
.slide-2 a,
.slide-2 .eyebrow,
.slide-2 .icon{
  color:#FFFFFF !important;
}/* All Slide 2 Text - Mustard Yellow */
.slide-2 *{
  color:#FFFFFF !important;
}/* Countdown - 2 x 2 Layout */
.countdown{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px 30px !important;
  width:90%;
  max-width:420px;
  margin:25px auto !important;
}

.countdown-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.countdown-item .number{
  font-size:42px !important;
  line-height:1 !important;
}

.countdown-item .label{
  font-size:14px !important;
  margin-top:8px;
  letter-spacing:.12em;
}

/* Make the heading text slightly bigger */
.slide-3 .eyebrow{
  font-size:12px !important;
}

.slide-3 h2{
  font-size:30px !important;
}

.slide-3 p{
  font-size:14px !important;
}/* Move Countdown Slide Content Up */
.slide-3 .slide-content{
  transform:translateY(-90px) !important;
}/* AARTI SLIDE */
.slide-4 .slide-content{
  transform:translateY(-60px) !important;
  
  background:rgba(0,0,0,0.55) !important;
  border:1px solid rgba(214,168,95,0.85) !important;
  box-shadow:0 10px 35px rgba(0,0,0,0.35) !important;
  
  padding:28px 24px !important;
}

/* Remove ✦ */
.slide-4 .divider{
  display:none !important;
}/* =========================================================
   SCRATCH CARD — GLITTER + SMOOTH HINT DISAPPEAR
   ========================================================= */

/* Scratch card glow */
.scratch-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 22px 65px rgba(0,0,0,.4),
    0 0 30px rgba(255,210,120,.12);
}

/* Scratch canvas */
#scratchCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
  cursor: crosshair;
  transition: opacity .8s ease;
}

/* Scratch Here button */
.scratch-hint {
  z-index: 5;
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease;
}

/* Hide Scratch Here immediately when scratching starts */
.scratch-card.scratching .scratch-hint {
  opacity: 0 !important;
  transform:
    translate(-50%, -50%)
    scale(.75) !important;
  filter: blur(4px);
  pointer-events: none;
}

/* Glitter container */
.scratch-glitter {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

/* Individual glitter */
.scratch-spark {
  position: absolute;
  display: block;

  color: #fff4bd;
  font-size: 14px;
  line-height: 1;

  text-shadow:
    0 0 4px #ffffff,
    0 0 9px rgba(255,220,130,.95),
    0 0 18px rgba(255,180,50,.8);

  animation:
    scratchSpark .75s ease-out forwards;

  pointer-events: none;
}

/* Glitter movement */
@keyframes scratchSpark {

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

  20% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--spark-x)),
        calc(-50% + var(--spark-y))
      )
      scale(0)
      rotate(180deg);
  }
}

/* Glow while scratching */
.scratch-card.scratching {
  box-shadow:
    0 22px 65px rgba(0,0,0,.4),
    0 0 35px rgba(255,210,120,.25);
}

/* Final revealed card */
.scratch-card.scratched {
  box-shadow:
    0 22px 65px rgba(0,0,0,.4),
    0 0 45px rgba(255,210,120,.35);
}

/* Blessing gets a gentle glow after reveal */
.scratch-card.scratched .scratch-message {
  animation: blessingReveal .8s ease-out;
}

@keyframes blessingReveal {
  0% {
    opacity: .7;
    transform: scale(.97);
    filter: brightness(.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.05);
  }
}/* =========================================================
   SLIDE 5 — CUSTOM IMAGE BACKGROUND
   ========================================================= */

.slide-5 {
  background: #000;
}

/* Your 9:16 background image */
.slide-5 .scratch-bg {
  position: absolute;
  inset: 0;

  background-image: none;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 100;
}

/* Remove both golden decorative box lines */
.slide-5 .scratch-bg::before,
.slide-5 .scratch-bg::after {
  display: none !important;
}/* Remove floating ✦ ❈ ✧ decorations from Slide 5 */
.slide-5 .floating-petal {
  display: none !important;
}/* Black transparent box behind Slide 5 heading */
.slide-5 .slide-content {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(214, 168, 95, 0.85);
  padding: 25px 22px;
  box-sizing: border-box;
}/* Remove scratch instruction text */
.slide-5 .scratch-note {
  display: none !important;
}/* =========================================================
   CENTER GANPATI IMAGE INSIDE GOLDEN CIRCLE
   ========================================================= */

.slide-6 .tap-ganesh {
  position: relative;
  width: 120px;
  height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep golden circle behind Ganpati */
.slide-6 .tap-ganesh .halo {
  position: absolute;
  inset: 4px;
  z-index: 1;
}

/* Ganpati image exactly in the center */
.slide-6 .tap-ganesh img {
  position: absolute;

  width: 130px;
  height: 130px;

  object-fit: contain;
  object-position: center;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

  display: block;

  filter:
    drop-shadow(0 0 10px rgba(255,210,120,.55));
}

/* Keep image centered even while circle pulses */
.slide-6 .tap-ganesh .halo {
  pointer-events: none;
}/* =========================================================
   SLIDE 7 — FINAL BACKGROUND
   ========================================================= */

.slide-7 {
  background: none !important;
}

/* Remove all decorative gold lines */
.slide-7 .gold-rule {
  display: none !important;
}

/* Remove extra glow/overlay */
.slide-7 .final-bg,
.slide-7 .final-glow {
  display: none !important;
}

/* Remove replay button */
.slide-7 .replay {
  display: none !important;
}/* =========================================================
   SLIDE 7 — FINAL TEXT BOX
   ========================================================= */

.slide-7 .slide-content {
  position: absolute;
  top: 20%;
  left: 10%;
  transform: translate(-50%, -50%);

  width: 82%;
  max-width: 360px;

  padding: 28px 22px;

  /* White transparent box */
  background: rgba(255, 255, 255, 0.18);

  /* Thin gold border */
  border: 1px solid rgba(220, 180, 100, 0.9);

  border-radius: 12px;

  box-sizing: border-box;

  /* Soft glass effect */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Keep everything centered */
.slide-7 .slide-content {
  text-align: center;
}.slide-7 .eyebrow,
.slide-7 h2,
.slide-7 h2 em,
.slide-7 .thank-you,
.slide-7 .closing,
.slide-7 .mantra,
.slide-7 .om-symbol {
  color: #d4af37 !important;
}

/* Remove gold decorative line */
.slide-7 .gold-rule {
  display: none !important;
}

/* Hide Replay Opening */
.slide-7 .replay {
  display: none !important;
}/* =========================================================
   SLIDE 7 — DARK FADE BETWEEN PHOTO & TEXT BOX
   ========================================================= */

.slide-7::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(0, 0, 0, 0.60);

  pointer-events: none;
}

/* Keep text box above the dark fade */
.slide-7 .slide-content {
  z-index: 5;
}.slide-7 .eyebrow,
.slide-7 h2,
.slide-7 .thank-you,
.slide-7 .closing,
.slide-7 .mantra,
.slide-7 .om-symbol {
  color: #D4AF37 !important;
}.slide-7 .eyebrow,
.slide-7 h2,
.slide-7 .thank-you,
.slide-7 .closing,
.slide-7 .mantra,
.slide-7 .om-symbol {
  color: white !important;
}/* =========================================================
   INFINITE BLESSINGS GALLERY
   ========================================================= */

.infinite-gallery {
  position: relative;
  background: #000;
  overflow: hidden;
}

.gallery-bg {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
}

.gallery-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}

.gallery-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.gallery-content h2 {
  color: #fff !important;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .08em;
  margin: 0 0 30px;
}

.gallery-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  touch-action: pan-y;
  scroll-snap-type: x mandatory;
}

.gallery-wrapper::-webkit-scrollbar {
  display: none;
}

.gallery-wrapper:active {
  cursor: grabbing;
}

.gallery-track {
  display: flex;
  gap: 18px;
  padding: 10px 11%;
  width: max-content;
}

.gallery-item {
  width: 72vw;
  max-width: 330px;
  aspect-ratio: 9 / 14;
  flex-shrink: 0;

  border-radius: 22px;
  overflow: hidden;

  scroll-snap-align: center;

  box-shadow:
    0 20px 55px rgba(0,0,0,.45),
    0 0 25px rgba(255,215,140,.18);

  border: 1px solid rgba(255,255,255,.45);

  transition:
    transform .5s ease,
    box-shadow .5s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  user-select: none;
  -webkit-user-drag: none;
}

.gallery-item:hover {
  transform: scale(1.02);
}/* =========================================================
   INFINITE BLESSINGS GALLERY
   ========================================================= */

.infinite-gallery {
  position: relative;
  background: #000;
  overflow: hidden;
}

.infinite-gallery .gallery-bg {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
}

.infinite-gallery .gallery-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}

.infinite-gallery .gallery-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.infinite-gallery .gallery-content h2 {
  color: #fff;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .08em;
  margin: 0 0 30px;
}

.infinite-gallery .gallery-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  touch-action: pan-y;
  scroll-snap-type: x mandatory;
}

.infinite-gallery .gallery-wrapper::-webkit-scrollbar {
  display: none;
}

.infinite-gallery .gallery-wrapper:active {
  cursor: grabbing;
}

.infinite-gallery .gallery-track {
  display: flex;
  gap: 18px;
  padding: 10px 11%;
  width: max-content;
}

.infinite-gallery .gallery-item {
  width: 72vw;
  max-width: 330px;
  aspect-ratio: 9 / 14;
  flex-shrink: 0;

  border-radius: 22px;
  overflow: hidden;

  scroll-snap-align: center;

  border: 1px solid rgba(255,255,255,.45);

  box-shadow:
    0 20px 55px rgba(0,0,0,.45),
    0 0 25px rgba(255,215,140,.18);

  transition: transform .5s ease;
}

.infinite-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  user-select: none;
  -webkit-user-drag: none;
}

.infinite-gallery .gallery-item:hover {
  transform: scale(1.02);
}/* FIX FINAL SLIDE AFTER INFINITE BLESSINGS */

.infinite-gallery {
  overflow: visible !important;
  height: 200vh !important;
  min-height: 200vh !important;
}

.infinite-gallery > .slide-7 {
  position: absolute !important;
  top: 100vh !important;
  left: 0;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* Keep gallery itself as the first screen */
.infinite-gallery .gallery-content {
  position: relative;
  z-index: 5;
}/* SLIDE 8 — FINAL THANK YOU */

.slide-8 {
  background: linear-gradient(145deg, #25160d, #6c4a25 45%, #1a100a);
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}/* =========================================================
   INFINITE BLESSINGS — 9:16 GALLERY + BLACK FADE + YEARS
   ========================================================= */

.infinite-gallery {
  position: relative;
  background: #000;
  overflow: hidden;
}

/* Background image */
.infinite-gallery .gallery-bg {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 0;
}

/* Light black fade so photos are easier to see */
.infinite-gallery .gallery-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);
}

/* Gallery content */
.infinite-gallery .gallery-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.infinite-gallery .gallery-content h2 {
  color: #fff;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .08em;
  margin: 0 0 28px;
}

/* Horizontal gallery */
.infinite-gallery .gallery-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  touch-action: pan-y;
}

.infinite-gallery .gallery-wrapper::-webkit-scrollbar {
  display: none;
}

.infinite-gallery .gallery-wrapper:active {
  cursor: grabbing;
}

/* Track */
.infinite-gallery .gallery-track {
  display: flex;
  gap: 18px;
  padding: 10px 11%;
  width: max-content;
}

/* 9:16 PHOTO CARD */
.infinite-gallery .gallery-item {
  width: 72vw;
  max-width: 330px;
  aspect-ratio: 9 / 16;
  flex-shrink: 0;

  border-radius: 18px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.45);

  box-shadow:
    0 20px 55px rgba(0,0,0,.55),
    0 0 25px rgba(255,215,140,.18);

  position: relative;
}

/* Photo */
/* INFINITE BLESSINGS FIX */

.infinite-gallery .gallery-item {
  width: 72vw !important;
  height: calc(72vw * 16 / 9) !important;
  aspect-ratio: 9 / 16 !important;
  max-width: 300px !important;
  max-height: 533px !important;
  position: relative;
  overflow: visible !important;
}

.infinite-gallery .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px;
  display: block;
  box-shadow: 0 15px 40px rgba(0,0,0,.5);
}

/* Black fade */
.infinite-gallery .gallery-item img {
  filter: brightness(.72);
}

/* Year below photo */
.infinite-gallery .gallery-item::after {
  content: attr(data-year);
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 100%;
  color: white;
  font-size: 17px;
  font-family: var(--serif);
  text-align: center;
  letter-spacing: .15em;
  z-index: 20;
  text-shadow: 0 2px 8px black;
}

/* Give years space */
.infinite-gallery .gallery-track {
  padding-bottom: 60px !important;
}/* INFINITE BLESSINGS — FORCE WHOLE SLIDE TO 9:16 */

.infinite-gallery {
  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  aspect-ratio: 9 / 16 !important;

  position: relative !important;
  overflow: hidden !important;

  background: #000;
}

/* BACKGROUND IMAGE — FULL 9:16 */
.infinite-gallery .gallery-bg {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  background-image: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* LIGHT BLACK FADE OVER BACKGROUND */
.infinite-gallery .gallery-bg::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.30);
}/* =========================================================
   FINAL THANK YOU SLIDE — FINAL BACKGROUND
   ========================================================= */

.slide-8 {
  position: relative !important;
  overflow: hidden !important;

  background-image: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Remove old background */
.slide-8 .final-bg {
  display: none !important;
}

/* Remove glow */
.slide-8 .final-glow {
  display: none !important;
}

/* Remove gold line */
.slide-8 .gold-rule {
  display: none !important;
}

/* Make text easy to see */
.slide-8::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.20);
  z-index: 0;
}

/* Keep text above background */
.slide-8 .slide-content {
  position: relative;
  z-index: 2;
}
/* FINAL THANK YOU — BOX + MOVE UP */

.slide-8 .slide-content {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(214, 168, 95, 0.85);
  padding: 30px 22px;
  box-sizing: border-box;

  /* Move everything upward */
  transform: translateY(-35px) !important;
}

/* Keep the box centered */
.slide-8 .slide-content.centered {
  margin-top: -20px;
}.slide-8 .slide-content {
  width: 60% !important;
}/* SCRATCH COMPLETE — FLOWER SHOWER */

.scratch-flower {
  position: absolute;
  top: 35%;
  z-index: 20;

  font-size: 20px;
  pointer-events: none;

  animation: scratchFlowerFall linear forwards;

  filter: drop-shadow(0 2px 5px rgba(0,0,0,.25));
}

@keyframes scratchFlowerFall {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(.3) rotate(0deg);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(var(--x), 70vh)
      scale(1)
      rotate(var(--r));
  }
}/* INFINITE BLESSINGS — TEXT BOXES */

/* Box behind INFINITE BLESSINGS */
.infinite-gallery .gallery-content h2 {
  display: inline-block;

  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(214, 168, 95, 0.85);

  padding: 10px 20px;
  margin-bottom: 25px;

  box-sizing: border-box;
}

/* Box behind each year */
.infinite-gallery .gallery-item::after {
  content: attr(data-year);

  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);

  width: 75px;
  padding: 6px 8px;

  background: rgba(0, 0, 0, 0.60);
  border: 1px solid rgba(214, 168, 95, 0.85);
  border-radius: 2px;

  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  text-align: center;
  letter-spacing: .12em;

  box-sizing: border-box;
  z-index: 20;

  text-shadow: 0 1px 5px rgba(0,0,0,.8);
}

/* Give the years enough room */
.infinite-gallery .gallery-track {
  padding-bottom: 65px !important;
}/* SLIDE 2 — CENTER EVERYTHING */

.slide-2 .slide-content {
  text-align: center !important;
}

.slide-2 .details {
  text-align: center !important;
  justify-items: center !important;
}

.slide-2 .detail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-align: center !important;
}

.slide-2 .detail-icon {
  display: block;
  margin: 0 auto;
}

.slide-2 .detail strong,
.slide-2 .detail small {
  text-align: center !important;
  display: block !important;
}

.slide-2 .map-btn {
  margin-left: auto !important;
  margin-right: auto !important;
}/* MAKE MONDAY + ADDRESS BIGGER */

.slide-2 .detail small {
  font-size: 13px !important;
  line-height: 1.6 !important;
}


/* Touch devices: keep the glass look without forcing costly live backdrop blur on every frame. */
@media (pointer:coarse){
  .intro-copy,
  .start-btn,
  .slide-2 .slide-content,
  .countdown > div,
  .scratch-hint,
  .music-pill{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .intro-copy{background:rgba(0,0,0,.62);}
  .start-btn{background:rgba(24,16,10,.58);}
  .slide-2 .slide-content{background:rgba(0,0,0,.60) !important;}
  .countdown > div{background:rgba(35,20,9,.48);}
  .scratch-hint{background:rgba(73,48,22,.50);}
  .music-pill{background:rgba(18,11,7,.72);}
}


@media (max-width:600px){
  .slide{
    contain:layout paint;
  }
  .gallery-item{
    contain:layout paint;
  }
}
.infinite-gallery .gallery-item {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
}.infinite-gallery .gallery-item {
  width: 72vw !important;
  height: calc(72vw * 5 / 4) !important;
  aspect-ratio: 4 / 5 !important;
  max-width: 300px !important;
  max-height: 375px !important;
  overflow: visible !important;
}

.infinite-gallery .gallery-item::after {
  content: attr(data-year) !important;
  display: block !important;
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 75px !important;
  padding: 6px 8px !important;
  background: rgba(0,0,0,.60) !important;
  border: 1px solid rgba(214,168,95,.85) !important;
  color: #fff !important;
  font-family: var(--serif) !important;
  font-size: 15px !important;
  text-align: center !important;
  z-index: 20 !important;
} /* ===== INFINITE BLESSINGS GALLERY — CLEAN FIX ===== */

.infinite-gallery .gallery-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.infinite-gallery .gallery-track {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: max-content !important;
    padding: 10px 8vw 25px !important;
}

/* CARD */
.infinite-gallery .gallery-item {
    position: relative !important;
    flex: 0 0 72vw !important;
    width: 72vw !important;
    max-width: 300px !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
    aspect-ratio: auto !important;

    border-radius: 18px !important;
    box-sizing: border-box !important;
}

/* PHOTO */
.infinite-gallery .gallery-item img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;

    border-radius: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* REMOVE ALL OLD YEAR PSEUDO-ELEMENT EFFECTS */
.infinite-gallery .gallery-item::after {
    content: none !important;
    display: none !important;
}

/* YEAR */
.infinite-gallery .gallery-item[data-year] {
    padding-bottom: 48px !important;
}

/* Create year using the data-year attribute */
.infinite-gallery .gallery-item[data-year]::before {
    content: attr(data-year) !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 5px !important;

    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 82px !important;
    height: 32px !important;

    box-sizing: border-box !important;

    background: rgba(0, 0, 0, 0.78) !important;

    border: 1px solid rgba(214, 168, 95, 0.95) !important;
    border-radius: 7px !important;

    color: #ffffff !important;

    font-family: var(--serif, Georgia, serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 1 !important;
    letter-spacing: 0.12em !important;

    text-align: center !important;

    text-shadow: 0 1px 4px #000 !important;

    z-index: 9999 !important;

    pointer-events: none !important;
}

/* DESKTOP */
@media (min-width: 768px) {
    .infinite-gallery .gallery-item {
        flex-basis: 280px !important;
        width: 280px !important;
    }

    .infinite-gallery .gallery-track {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}/* REMOVE WHITE TRANSPARENT BOX FROM SAVE THE DATE */

.save-date,
.save-date *,
.event-details,
.event-details *,
.invite-details,
.invite-details * {
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   FINAL MOBILE TOUCH FIXES
   ========================================================= */

/* Blessing image + button must always receive finger input. */
.slide-6 .slide-content {
  position: relative !important;
  z-index: 10 !important;
}

.slide-6 .golden-overlay,
.slide-6 .petals {
  pointer-events: none !important;
}

.slide-6 .tap-ganesh {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.slide-6 .tap-ganesh img,
.slide-6 .tap-ganesh .halo {
  pointer-events: none !important;
}

.slide-6 .blessing-btn {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Gallery: let iOS/Android perform native horizontal finger scrolling. */
.infinite-gallery .gallery-wrapper {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x mandatory !important;
}

.infinite-gallery .gallery-track {
  width: max-content !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

.infinite-gallery .gallery-item {
  flex: 0 0 72vw !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.infinite-gallery .gallery-item img {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* FINAL SCROLL HINT SIZE FIX */
.slide-1 .scroll-hint{
  font-size:20px !important;
  letter-spacing:.12em !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

.slide-1 .scroll-hint span{
  font-size:30px !important;
  margin-top:10px !important;
  line-height:1 !important;
}
/* =========================================================
   SCROLL ARROW — CENTER BOTTOM
   ========================================================= */

.slide-1 .scroll-hint {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 5% !important;
  transform: translateX(-50%) !important;

  text-align: center !important;
  width: max-content !important;
}

.slide-1 .scroll-hint span {
  display: block !important;
  text-align: center !important;
  font-size: 30px !important;
  margin-top: 10px !important;
}/* =========================================================
   FROM OUR HEARTS - MAKE TEXT SLIGHTLY BIGGER
   ========================================================= */

.slide-6 h2 {
  font-size: 40px !important;
}

.slide-6 .tap-ganesh {
  font-size: 20px !important;
}

.slide-6 .blessing-btn {
  font-size: 18px !important;
}

.slide-6 p {
  font-size: 16px !important;
}

.slide-6 .blessing-footer {
  font-size: 30px !important;
}/* Ganpati Bappa Morya - increase size */

.slide-6 .blessing-footer {
  font-size: 40px !important;
  font-weight: 600 !important;
}/* =========================================================
   UNTIL WE MEET — INCREASE TEXT SIZE BY 4%
   ========================================================= */

.slide-7 h2 {
  font-size: 28px !important;
}

.slide-7 p {
  font-size: 16.64px !important;
}

.slide-7 .blessing-footer {
  font-size: 18.72px !important;
}

.slide-7 .om {
  font-size: 31.2px !important;
}

.slide-7 .final-message {
  font-size: 16.64px !important;
}/* =========================================================
   FIRST PAGE — MOVE ALL CONTENT UP
   ========================================================= */

.slide-1 .slide-content {
  transform: translateY(-6vh) !important;
}

/* Keep the SCROLL TO EXPLORE arrow/text at the bottom */
.slide-1 .scroll-hint {
  bottom: 25% !important;
}/* Remove ✦ from Tap to Shower page */

.slide-6 .blessing-btn::before,
.slide-6 .blessing-btn::after,
.slide-6 h2::before,
.slide-6 h2::after {
  content: none !important;
  display: none !important;
}

/* SCROLL TO EXPLORE — 10% ABOVE BOTTOM */
.scroll-hint{
  position:absolute;
  bottom:10%;
  font-size:8px;
  letter-spacing:.25em;
  color:rgba(255,245,226,.75);
  z-index:3;
}

.scroll-hint span{
  display:block;
  margin-top:9px;
  font-size:17px;
  color:var(--gold2);
}/* FINAL POSITION — SCROLL TO EXPLORE */
.slide-1 .scroll-hint {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 10% !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  width: max-content !important;
  z-index: 10 !important;
}

.slide-1 .scroll-hint span {
  display: block !important;
  margin-top: 10px !important;
}/* SCROLL TO EXPLORE — BLACK BOX + GOLD BORDER */
.slide-1 .scroll-hint {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 10% !important;
  top: auto !important;
  transform: translateX(-50%) !important;

  /* Black transparent box */
  background: rgba(0, 0, 0, 0.62) !important;

  /* Thin gold line */
  border: 1px solid rgba(214, 168, 95, 0.9) !important;

  /* Box spacing */
  padding: 12px 20px 10px !important;

  /* Shape */
  border-radius: 2px !important;

  /* Subtle depth */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;

  /* Glass softness */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  text-align: center !important;
  width: max-content !important;
  z-index: 10 !important;
}

.slide-1 .scroll-hint span {
  display: block !important;
  margin-top: 8px !important;
  line-height: 1 !important;
}/* Reduce space between AMLANI FAMILY and Cordially Invites you */
.slide-2 .eyebrow {
  margin-bottom: 10px !important;
}

.slide-2 h2 {
  margin-top: 0 !important;
}/* Increase AMLANI FAMILY size */
.slide-2 .eyebrow {
  font-size: 20px !important;
}