:root{
  --serif:'Fredoka', sans-serif;
  --sans:'Quicksand', sans-serif;
}

/* ============ LIGHT THEME (default) ============ */
body{
  --bg-a:#fff6ea;
  --bg-b:#ffe3ec;
  --bg-c:#eaddff;
  --card:rgba(255,255,255,0.6);
  --card-border:rgba(255,255,255,0.9);
  --card-shadow:rgba(255,143,171,0.25);
  --ink:#5a4570;
  --ink-dim:#957fae;
  --pink:#ff8fab;
  --lavender:#b79ced;
  --gold:#ffc266;
  --mint:#7fe0c9;
  --sparkle:#ffffff;
  --dot-off:rgba(90,69,112,0.15);
}

body[data-theme="dark"]{
  --bg-a:#07060d;
  --bg-b:#160f24;
  --bg-c:#241533;
  --card:rgba(255,255,255,0.07);
  --card-border:rgba(255,255,255,0.16);
  --card-shadow:rgba(255,134,184,0.3);
  --ink:#f4eefc;
  --ink-dim:#b7abcf;
  --pink:#ff86b8;
  --lavender:#c8b6ff;
  --gold:#ffcf6b;
  --mint:#8fe3d0;
  --sparkle:#ffe9f2;
  --dot-off:rgba(255,255,255,0.2);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}

body{
  font-family:var(--sans);
  font-weight:500;
  background:linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 45%, var(--bg-c) 100%);
  background-size:200% 200%;
  animation:gradientShift 18s ease infinite;
  color:var(--ink);
  overflow:hidden;
  min-height:100dvh;
  width:100vw;
  position:relative;
  user-select:none;
  transition:background .6s ease, color .5s ease;
}

@keyframes gradientShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  position:absolute;
  top:22px; right:22px;
  z-index:20;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--card);
  border:1.5px solid var(--card-border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  cursor:pointer;
  box-shadow:0 6px 18px var(--card-shadow);
  transition:transform .35s cubic-bezier(.68,-0.55,.27,1.55);
}
.theme-toggle:active{transform:scale(0.82) rotate(25deg);}
.theme-toggle.spin{animation:spinPop .5s cubic-bezier(.68,-0.55,.27,1.55);}
@keyframes spinPop{
  0%{transform:scale(1) rotate(0);}
  50%{transform:scale(1.3) rotate(180deg);}
  100%{transform:scale(1) rotate(360deg);}
}

/* ============ AURORA GLOW BLOBS ============ */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:0.5;
  animation:drift 14s ease-in-out infinite alternate;
}
.aurora span:nth-child(1){width:360px;height:360px;background:var(--pink);top:-90px;left:-70px;}
.aurora span:nth-child(2){width:320px;height:320px;background:var(--mint);bottom:-110px;right:-70px;animation-delay:-5s;opacity:0.3;}
.aurora span:nth-child(3){width:280px;height:280px;background:var(--gold);top:38%;right:8%;animation-delay:-9s;opacity:0.3;}
.aurora span:nth-child(4){width:260px;height:260px;background:var(--lavender);bottom:20%;left:6%;animation-delay:-3s;opacity:0.3;}
@keyframes drift{
  0%{transform:translate(0,0) scale(1) rotate(0deg);}
  100%{transform:translate(36px,-46px) scale(1.2) rotate(20deg);}
}

/* ============ FLOATING PARTICLES (cute stickers) ============ */
#particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.particle{
  position:absolute;
  bottom:-30px;
  font-size:16px;
  opacity:0;
  animation:riseWiggle linear infinite;
  filter:drop-shadow(0 0 6px var(--card-shadow));
}
@keyframes riseWiggle{
  0%{transform:translateY(0) translateX(0) rotate(0deg) scale(0.7);opacity:0;}
  8%{opacity:0.9;}
  25%{transform:translateY(-25vh) translateX(18px) rotate(15deg) scale(1);}
  50%{transform:translateY(-50vh) translateX(-18px) rotate(-10deg) scale(1.05);}
  75%{transform:translateY(-78vh) translateX(14px) rotate(12deg) scale(0.95);}
  92%{opacity:0.7;}
  100%{transform:translateY(-112vh) translateX(0) rotate(0deg) scale(0.6);opacity:0;}
}

/* ============ BALLOONS ============ */
.balloon{
  position:absolute;bottom:-40px;
  width:48px;height:60px;
  border-radius:50% 50% 50% 50% / 55% 55% 45% 45%;
  transform-origin:bottom center;
  animation:bobSway 6.5s ease-in-out infinite;
  z-index:1;
  filter:drop-shadow(0 6px 14px var(--card-shadow));
}
.balloon::before{
  content:'';
  position:absolute;top:14%;left:28%;
  width:12px;height:16px;
  background:rgba(255,255,255,0.55);
  border-radius:50%;
  filter:blur(1px);
}
.balloon::after{
  content:'';
  position:absolute;top:100%;left:50%;
  width:1.5px;height:80px;
  background:linear-gradient(var(--ink-dim), transparent);
  transform:translateX(-50%);
  animation:stringWiggle 3s ease-in-out infinite;
}
.balloon.b1{left:3%;background:radial-gradient(circle at 30% 25%, #ffc2d9, var(--pink));animation-delay:0s;}
.balloon.b2{left:11%;background:radial-gradient(circle at 30% 25%, #e2d1ff, var(--lavender));animation-delay:1.3s;bottom:-75px;}
.balloon.b3{right:11%;background:radial-gradient(circle at 30% 25%, #ffe6b0, var(--gold));animation-delay:2.2s;}
.balloon.b4{right:3%;background:radial-gradient(circle at 30% 25%, #b9f2e4, var(--mint));animation-delay:0.7s;bottom:-95px;}
@keyframes bobSway{
  0%,100%{transform:translateY(0) rotate(-4deg);}
  50%{transform:translateY(-26px) rotate(4deg);}
}
@keyframes stringWiggle{
  0%,100%{transform:translateX(-50%) rotate(-3deg);}
  50%{transform:translateX(-50%) rotate(3deg);}
}

/* ============ PROGRESS DOTS ============ */
.progress{position:absolute;top:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;}
.progress i{
  width:9px;height:9px;border-radius:50px;
  background:var(--dot-off);
  transition:all .45s cubic-bezier(.68,-0.55,.27,1.55);
}
.progress i.active{width:28px;background:var(--pink);box-shadow:0 0 10px var(--pink);}
.progress i.done{background:var(--gold);}

/* ============ STAGE / SLIDES ============ */
.stage{position:relative;z-index:5;height:100%;width:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.slide{
  position:absolute;inset:0;
  height:100%;min-height:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(76px,10vh,104px) 8% clamp(76px,10vh,104px);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;overscroll-behavior-y:contain;
  scroll-behavior:smooth;scrollbar-gutter:stable;touch-action:pan-y;
  isolation:isolate;
  opacity:0;visibility:hidden;
  transform:translateY(40px) scale(0.9) rotate(-1.5deg);
  transition:opacity .6s cubic-bezier(.34,1.56,.64,1), transform .6s cubic-bezier(.34,1.56,.64,1), visibility .6s;
}
.slide.active{opacity:1;visibility:visible;transform:translateY(0) scale(1) rotate(0deg);}
.slide::-webkit-scrollbar{width:5px;}
.slide::-webkit-scrollbar-track{background:transparent;}
.slide::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:10px;}

/* The wishes section is taller than a laptop viewport. Start it at the top
   instead of centering the overflowing flex content, which can hide the
   beginning of the section and make it unreachable at scrollTop 0. */
.slide[data-index="3"]{
  display:block;
  text-align:center;
  padding-top:clamp(82px,11vh,120px);
  padding-bottom:clamp(82px,11vh,120px);
}

/* ============ FINAL SLIDE: scrollable so the full letter can be read ============ */
.slide[data-index="5"]{
  justify-content:flex-start;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-top:64px;
  padding-bottom:48px;
}
.slide[data-index="5"]::-webkit-scrollbar{width:5px;}
.slide[data-index="5"]::-webkit-scrollbar-track{background:transparent;}
.slide[data-index="5"]::-webkit-scrollbar-thumb{background:var(--card-border);border-radius:10px;}

.eyebrow{
  font-family:var(--serif);
  font-size:13px;letter-spacing:3px;text-transform:uppercase;
  color:var(--pink);font-weight:600;margin-bottom:14px;
  animation:wiggleIn .6s ease;
}
@keyframes wiggleIn{
  0%{transform:rotate(-8deg) scale(0.6);opacity:0;}
  60%{transform:rotate(4deg) scale(1.1);opacity:1;}
  100%{transform:rotate(0) scale(1);}
}

h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(30px, 6.5vw, 54px);
  line-height:1.2;
  max-width:680px;
}
h1 em{
  font-style:normal;
  background:linear-gradient(95deg, var(--pink), var(--gold), var(--lavender));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 4s linear infinite;
}
@keyframes shine{to{background-position:200% center;}}

.sub{margin-top:16px;font-size:15.5px;color:var(--ink-dim);max-width:420px;line-height:1.6;font-weight:600;}
.quote{
  margin-top:22px;font-family:var(--serif);font-weight:500;font-style:normal;
  font-size:17px;color:var(--ink);max-width:460px;line-height:1.7;
}

/* ============ SLIDE 2: universe favourite ============ */
.orbit{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:28px;}
.ring{position:absolute;border:1.5px dashed var(--card-border);border-radius:50%;animation:spin 12s linear infinite;}
.ring.r1{width:150px;height:150px;}
.ring.r2{width:112px;height:112px;animation-duration:9s;animation-direction:reverse;}
.ring.r3{width:76px;height:76px;animation-duration:7s;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.bloom{font-size:38px;animation:pulseBloom 2s ease-in-out infinite;filter:drop-shadow(0 0 16px var(--pink));}
@keyframes pulseBloom{0%,100%{transform:scale(1);}50%{transform:scale(1.15) rotate(8deg);}}

/* ============ SLIDE 3: reasons (sticker cards) ============ */
.reasons{display:flex;flex-direction:column;gap:13px;margin-top:26px;width:100%;max-width:440px;}
.reason{
  display:flex;align-items:center;gap:14px;text-align:left;
  padding:15px 18px;
  background:var(--card);
  border:1.5px solid var(--card-border);
  border-radius:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 20px var(--card-shadow);
  font-size:14.5px;font-weight:600;color:var(--ink);
  opacity:0;transform:translateX(-24px) rotate(-3deg) scale(0.9);
  animation:popIn .55s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:transform .3s ease;
}
.reason:hover{transform:translateX(0) rotate(1deg) scale(1.02);}
.reason span.ic{font-size:20px;flex-shrink:0;animation:tinyFloat 2.4s ease-in-out infinite;}
.slide.active .reason:nth-child(1){animation-delay:.15s;}
.slide.active .reason:nth-child(2){animation-delay:.3s;}
.slide.active .reason:nth-child(3){animation-delay:.45s;}
.slide.active .reason:nth-child(4){animation-delay:.6s;}
@keyframes popIn{to{opacity:1;transform:translateX(0) rotate(0) scale(1);}}
@keyframes tinyFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

/* ============ SLIDE 4: cake ============ */
.cake-wrap{width:160px;margin:0 auto 24px;}
.cake{position:relative;width:160px;}
.candles{display:flex;justify-content:center;gap:14px;margin-bottom:-4px;position:relative;z-index:2;}
.candle{width:5px;height:34px;border-radius:3px;position:relative;}
.candle.c1{background:linear-gradient(var(--pink),#ff6fae);}
.candle.c2{background:linear-gradient(var(--lavender),#8a6fd6);}
.candle.c3{background:linear-gradient(var(--gold),#ffb347);}
.flame{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:10px;height:16px;
  background:radial-gradient(circle at 50% 70%, #fff3c4, var(--gold) 60%, transparent 75%);
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  animation:flicker 1.3s ease-in-out infinite;
  transition:opacity .3s, transform .3s;
}
@keyframes flicker{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(0.85) rotate(-4deg);}}
.flame.out{opacity:0;transform:translateX(-50%) scale(0);}
.puff{
  position:absolute;top:-18px;left:50%;
  font-size:14px;opacity:0;pointer-events:none;
}
.puff.go{animation:puffUp 1s ease-out forwards;}
@keyframes puffUp{
  0%{opacity:1;transform:translate(-50%,0) scale(0.5);}
  100%{opacity:0;transform:translate(-50%,-50px) scale(1.4) rotate(30deg);}
}
.tier{background:linear-gradient(180deg,#ffc2d9,var(--pink));border-radius:10px 10px 4px 4px;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,0.1), 0 10px 26px var(--card-shadow);}
.tier1{height:38px;width:100%;}
.tier2{height:34px;width:118%;margin-left:-9%;margin-top:2px;background:linear-gradient(180deg,#e2d1ff,var(--lavender));}
.tier3{height:30px;width:136%;margin-left:-18%;margin-top:2px;background:linear-gradient(180deg,#ffe6b0,var(--gold));}

.wish-cta{font-family:var(--serif);font-weight:600;font-size:25px;margin-bottom:6px;}
.hint{font-size:13px;color:var(--ink-dim);font-weight:600;display:flex;align-items:center;gap:6px;animation:pulse 2s ease-in-out infinite;}

/* ============ SLIDE 5: finale ============ */
.hearts{display:flex;gap:11px;margin-top:22px;font-size:22px;}
.hearts span{animation:pop .6s cubic-bezier(.34,1.56,.64,1) both;}
.slide.active .hearts span:nth-child(1){animation-delay:.4s;}
.slide.active .hearts span:nth-child(2){animation-delay:.5s;}
.slide.active .hearts span:nth-child(3){animation-delay:.6s;}
.slide.active .hearts span:nth-child(4){animation-delay:.7s;}
.slide.active .hearts span:nth-child(5){animation-delay:.8s;}
@keyframes pop{0%{transform:scale(0) rotate(-20deg);opacity:0;}60%{transform:scale(1.3) rotate(8deg);opacity:1;}100%{transform:scale(1) rotate(0);}}

.credit{margin-top:32px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-dim);font-weight:700;}
.credit b{color:var(--mint);}

.replay{
  margin-top:20px;font-family:var(--sans);font-weight:700;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);
  border:1.5px solid var(--card-border);padding:11px 22px;border-radius:50px;
  background:var(--card);backdrop-filter:blur(10px);cursor:pointer;
  box-shadow:0 6px 16px var(--card-shadow);
  transition:transform .3s cubic-bezier(.68,-0.55,.27,1.55), border-color .3s;
}
.replay:hover{transform:scale(1.06) rotate(-2deg);border-color:var(--pink);}
.replay:active{transform:scale(0.94);}

/* ============ TAP HINT ============ */
.tap-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--ink-dim);z-index:10;display:flex;align-items:center;gap:6px;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:0.4;}50%{opacity:0.9;}}

/* ============ CONFETTI FINALE ============ */
.burst{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden;}
.confetti{position:absolute;top:-10px;font-size:16px;opacity:0.95;animation:fall 3s ease-in forwards;}
@keyframes fall{
  0%{transform:translateY(0) rotate(0deg);}
  100%{transform:translateY(112vh) rotate(560deg);opacity:0;}
}

/* ============ TAP SPARKLE BURST ============ */
.sparkle-burst{position:fixed;pointer-events:none;z-index:50;font-size:14px;animation:sparkleOut .7s ease-out forwards;}
@keyframes sparkleOut{
  0%{opacity:1;transform:translate(0,0) scale(0.6);}
  100%{opacity:0;transform:var(--tx) scale(1.1);}
}

@media (max-width:420px){
  .reason{font-size:13.5px;padding:13px 15px;}
  .balloon{width:38px;height:48px;}
}




/* ===============================
   PREMIUM HANGING PHOTO WALL
================================*/

.photo-wall{
  position:absolute;
  inset:0;
  max-width:640px;
  margin:0 auto;
  pointer-events:none;
  z-index:1;
}

/* Ropes (SVG wavy string) */
.rope{
  position:absolute;
  left:0;
  width:100%;
  height:60px;
  overflow:visible;
  z-index:1;
}
.rope-top{ top:6%; }
.rope-bottom{ top:44%; }
.rope path{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.rope::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, #ffe89c 3px, transparent 4px) 0 18px/34px 34px repeat-x;
  filter:drop-shadow(0 0 4px #ffcf6b);
  opacity:.9;
}

/* Scattered decor */
.decor{
  position:absolute;
  font-size:clamp(14px,2vw,22px);
  opacity:.85;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 0 6px rgba(255,200,220,.4));
}

/* Photo */
.photo{
  position:absolute;
  width:clamp(150px, 20vw, 220px);
  background:#faf7f2;
  padding:10px 10px 16px;
  border-radius:6px;
  box-shadow:0 18px 30px rgba(0,0,0,.3);
  animation:swing 4.5s ease-in-out infinite;
  transform-origin:top center;
  z-index:3;
}

.photo img{
  width:100%;
  height:clamp(160px, 22vw, 240px);
  object-fit:cover;
  border-radius:3px;
  display:block;
}

.photo .caption{
  font-family:var(--serif);
  font-size:clamp(12px,1.3vw,14px);
  color:#4a3b2f;
  text-align:center;
  margin-top:8px;
  line-height:1.4;
}

/* Thread */
.string{
  position:absolute;
  left:50%;
  top:-30px;
  width:2px;
  height:30px;
  background:#f7f7f7;
  transform:translateX(-50%);
  z-index:3;
}

/* Wooden Clip */
.string::before{
  content:"";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:26px;
  border-radius:3px;
  background:linear-gradient(#e0ab72,#a06d3f);
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}

/* Positions — top row on rope-top, bottom row on rope-bottom */
.p1{ top:13%; left:0%;  transform:rotate(-6deg); }
.p2{ top:30%; left:50%; transform:translateX(-50%) rotate(2deg); }
.p3{ top:13%; right:0%; transform:rotate(6deg); }

.p4{ top:70%; left:0%;  transform:rotate(-6deg); }
.p5{ top:70%; right:0%; transform:rotate(6deg); }

@keyframes swing{
  0%,100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}
.p2{ animation-name:swingCenter; }
@keyframes swingCenter{
  0%,100%{ transform:translateX(-50%) rotate(-2deg); }
  50%{ transform:translateX(-50%) rotate(2deg); }
}

.orbit{
  margin-top:clamp(140px, 24vh, 210px);
  margin-bottom:18px;
  position:relative;
  z-index:3;
}

.slide[data-index="1"] .quote{
  margin-top:10px;
  position:relative;
  z-index:4;              /* sits above photo-wall's z-index:1 so it's never visually hidden */
}

@media (max-width:420px){
  .photo{ width:clamp(105px, 30vw, 140px); padding:7px 7px 12px; }
  .photo img{ height:clamp(120px, 34vw, 160px); }
  .photo .caption{ font-size:10.5px; }
  .decor{ font-size:14px; }
}
@media (max-width:420px){
  .p4{ left:0%; }
  .p5{ right:0%; }
}




/* ===============================
   SCATTERED MEMORY CLUSTER (Slide 3)
================================*/
.memory-cluster{
  position:relative;
  width:100%;
  max-width:420px;
  height:150px;
  margin:6px auto 4px;
  pointer-events:none;
}

.mem-photo{
  position:absolute;
  width:clamp(84px, 15vw, 108px);
  background:#faf7f2;
  padding:6px 6px 8px;
  border-radius:4px;
  box-shadow:0 10px 20px rgba(0,0,0,.28);
  animation:memFloat 5s ease-in-out infinite;
}
.mem-photo img{
  width:100%;
  height:clamp(90px, 16vw, 116px);
  object-fit:cover;
  border-radius:2px;
  display:block;
}

/* Washi tape strip instead of a clip */
.mem-photo::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  width:44px;
  height:20px;
  background:repeating-linear-gradient(45deg, #ffb8cf, #ffb8cf 4px, #ff9fc0 4px, #ff9fc0 8px);
  opacity:.85;
  transform:translateX(-50%) rotate(-4deg);
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}

@keyframes memFloat{
  0%,100%{ transform:translateY(0) rotate(var(--r)); }
  50%{ transform:translateY(-5px) rotate(var(--r)); }
}

.m1{ top:0;   left:2%;  --r:-9deg;  transform:rotate(-9deg); z-index:2; }
.m2{ top:14px; left:38%; --r:5deg;  transform:rotate(5deg);  z-index:3; }
.m3{ top:4px;  right:3%; --r:8deg;  transform:rotate(8deg);  z-index:1; }

@media (max-width:420px){
  .memory-cluster{ height:130px; }
  .mem-photo{ width:78px; }
  .mem-photo img{ height:84px; }
}


.reasons{
  position:relative;
  z-index:1;
  margin-top:24px;
}
.memory-cluster{
  position:relative;
  z-index:2;
  height:170px;
  margin-bottom:28px;
}
@media (max-width:420px){
  .memory-cluster{ height:150px; margin-bottom:24px; }
  .mem-photo{ width:74px; }
  .mem-photo img{ height:78px; }
  .mem-photo{ animation-duration:6s; } /* slower float = smaller effective travel feel */
}



.slide[data-index="2"]{
  position:center;
}



.slide[data-index="2"] .decor{
  animation:tinyFloat 3s ease-in-out infinite;
}





.decor.big{
  font-size:clamp(24px, 4vw, 38px);
}



.decor-float{
  position:absolute;
  font-size:clamp(28px, 5vw, 44px);
  opacity:.8;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 0 8px rgba(255,200,220,.35));
  animation:tinyFloat 3.5s ease-in-out infinite;
}



.slide[data-index="0"]{
  position:relative;
}



.hero-row{
  display:flex;
  align-items: right;
  gap:40px;
  max-width:900px;
  width:100%;
}

.hero-text{
  flex:1;
  text-align:left;
}

.hero-photo{
  flex-shrink:0;
  width:clamp(220px, 34vw, 480px);
  align-self:stretch;
}

.hero-photo img{
  width:100%;
  height:100%;
  min-height:620px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 18px 34px rgba(0,0,0,.35);
}

/* on narrow phones, stack instead of side-by-side */
@media (max-width:640px){
  .hero-row{
  display:flex;
  align-items:stretch;   /* was center — now matches heights instead of vertically centering a small photo */
  gap:28px;
  max-width:900px;       /* was 760px */
  width:100%;
}
  .hero-text{
    text-align:center;
  }
  .hero-photo{
    width:clamp(150px, 55vw, 480px);
    order:-1; /* photo above text on mobile — flip if you'd rather it stay below */
  }
}


.slide[data-index="2"]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}



.memory-cluster{
    margin: 20px auto;
    left: 0;
    right: 0;
}

.reasons{
    width: 100%;
    max-width: 380px;
    margin: 20px auto;
}

.reason{
    width: 100%;
    box-sizing: border-box;
}



/* ================= WISH BOX ================= */

.wish-box{
    width:min(92%,460px);
    margin:15px auto 30px;
    padding:22px;
    border-radius:28px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    border:2px solid rgba(255,255,255,.18);
    text-align:center;
}

.wish-note{
    margin:12px 0 18px;
    line-height:1.6;
}

.wish-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:15px;
}

.wish-options label{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    cursor:pointer;
    transition:.3s;
    font-size:14px;
}

.wish-options label:hover{
    transform:scale(1.03);
}

.wish-options input{
    accent-color:#ff5ea8;
}

.divider{
    display:flex;
    align-items:center;
    margin:22px 0;
}

.divider::before,
.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.3);
}

.divider span{
    margin:0 12px;
    font-weight:bold;
    opacity:.9;
}

.wish-box textarea{
    width:100%;
    height:110px;
    margin-top:12px;
    padding:12px;
    border:none;
    outline:none;
    border-radius:18px;
    resize:none;
    box-sizing:border-box;
    font-size:15px;
}

.wish-box button{
    margin-top:18px;
    padding:12px 28px;
    border:none;
    border-radius:25px;
    cursor:pointer;
    font-size:16px;
    font-weight:700;
    transition:.3s;
}

.wish-box button:hover{
    transform:scale(1.05);
}




/* ===============================
      MAGIC WISH CLOUDS
================================ */

.wish-clouds{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:18px;

margin-top:20px;

}

.wish-cloud{

padding:14px 20px;

border-radius:999px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(15px);

border:2px solid rgba(255,255,255,.18);

cursor:pointer;

user-select:none;

font-size:15px;

transition:.4s;

animation:

appear .8s forwards,

floatCloud 5s ease-in-out infinite;

animation-delay:var(--d),calc(var(--d) + .8s);

opacity:0;

transform:translateY(50px);

}

.wish-cloud:hover{

transform:scale(1.08);

box-shadow:0 0 18px rgba(255,180,230,.6);

}

.wish-cloud.selected{

background:linear-gradient(135deg,#ff72b6,#ffb36b);

color:white;

border:none;

box-shadow:0 0 30px rgba(255,105,180,.7);

transform:scale(1.08);

}

@keyframes appear{

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes floatCloud{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}




/* ===========================
   THE WISH CEREMONY
=========================== */

.wish-intro{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}

.intro-cloud{

    max-width:420px;
    width:90%;

    padding:22px;

    border-radius:35px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border:2px solid rgba(255,255,255,.20);

    text-align:center;

    position:relative;

    box-shadow:0 0 25px rgba(255,192,203,.25);

    animation:cloudFloat 4s ease-in-out infinite;

}

.intro-cloud::before{

    content:"";

    position:absolute;

    width:32px;
    height:32px;

    border-radius:50%;

    background:inherit;

    left:35px;
    bottom:-18px;

}

.intro-cloud::after{

    content:"";

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:inherit;

    left:68px;
    bottom:-36px;

}

#wishTitle{

    margin:0;

    font-size:30px;

}

#wishSubtitle{

    margin-top:12px;

    font-size:18px;

    line-height:1.6;

    opacity:.95;

}

@keyframes cloudFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

}





/* ===============================
        FLY TO STARS
================================ */

.wish-cloud.fly{

animation:flyToStars 2.2s forwards ease-in;

}

@keyframes flyToStars{

0%{

opacity:1;

transform:translateY(0) scale(1);

}

30%{

transform:translateY(-80px) scale(1.05);

}

60%{

transform:translateY(-220px) scale(.9);

}

100%{

opacity:0;

transform:translateY(-600px) scale(.4);

}

}

/* Night Sky */

.star-layer{

position:absolute;

inset:0;

pointer-events:none;

opacity:0;

transition:1.5s;

z-index:250;

}

.star-layer.show{

opacity:1;

}

.star{

position:absolute;

font-size:16px;

animation:twinkle 2s infinite alternate;

}

@keyframes twinkle{

from{

opacity:.3;

transform:scale(.8);

}

to{

opacity:1;

transform:scale(1.3);

}

}





.shooting-star{

position:absolute;

font-size:28px;

left:-10%;

top:20%;

animation:shoot 2.5s linear forwards;

}

@keyframes shoot{

0%{

transform:translate(0,0);

opacity:1;

}

100%{

transform:translate(130vw,55vh);

opacity:0;

}

}


.wish-popup{
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


.wish-popup.show{
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}



/* ===================================================
            PREMIUM PASSCODE SCREEN
=================================================== */

#lockScreen{
    position:fixed;
    inset:0;
    z-index:999999;

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

    background:transparent;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}



.lock-card{
    width:360px;
    max-width:92%;
    padding:30px;
    border-radius:32px;

    background:var(--card);
    border:1.5px solid var(--card-border);
    box-shadow:0 15px 40px var(--card-shadow);

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

    color:var(--ink);

    text-align:center;

    transition:.4s ease;
}

.gift{

    font-size:72px;

    margin-bottom:18px;

    animation:giftFloat 3s ease-in-out infinite;
}

@keyframes giftFloat{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}

.top-title{

    letter-spacing:5px;

    color:var(--pink);

    font-size:13px;

    font-weight:700;

    margin-bottom:10px;
}

.name{

    color:var(--ink);

    font-size:54px;

    font-family:var(--serif);

    margin-bottom:10px;
}

.subtitle{

    color:var(--ink-dim);

    font-size:20px;

    margin-bottom:28px;
}

.pass-dots{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:30px;
}

.pass-dots span{

    width:18px;

    height:18px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.55);

    transition:.25s;
}

.pass-dots span.active{

    background:white;

    transform:scale(1.15);
}

.number-pad{

    display:grid;

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

    gap:18px;
}

.number-pad button{

    width:90px;

    height:78px;

    margin:auto;

    border:none;

    border-radius:22px;

    background:var(--card);

    color:var(--ink);

    border:1px solid var(--card-border);

    box-shadow:0 8px 18px var(--card-shadow);

    backdrop-filter:blur(12px);

    transition:.25s;

    font-size:38px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

    backdrop-filter:blur(12px);

    box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.number-pad button:hover{

    transform:scale(1.05);

    background:rgba(255,255,255,.18);
}

.number-pad button:active{

    transform:scale(.95);
}

.hint{

    color:var(--ink-dim);

    margin-top:24px;

    font-size:18px;
}

/* Unlock */

.unlock{

animation:unlock .8s forwards;
}

@keyframes unlock{

100%{

opacity:0;

visibility:hidden;

transform:scale(1.08);

}

}

/* Wrong Code */

.shake{

animation:shake .35s;
}

@keyframes shake{

20%{transform:translateX(-8px);}
40%{transform:translateX(8px);}
60%{transform:translateX(-6px);}
80%{transform:translateX(6px);}
100%{transform:translateX(0);}
}

/* Mobile */

@media(max-width:480px){

.lock-card{

padding:22px;
}

.gift{

font-size:64px;
}

.name{

font-size:44px;
}

.number-pad button{

width:84px;

height:74px;

font-size:34px;
}

.subtitle{

font-size:18px;
}
}




/* ===============================
        CONFETTI
================================ */

#confetti{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:999998;
}

.confetti{

    position:absolute;

    width:10px;

    height:16px;

    border-radius:3px;

    animation:fall 3s linear forwards;
}

@keyframes fall{

0%{

transform:translateY(-10vh) rotate(0deg);

opacity:1;

}

100%{

transform:translateY(110vh) rotate(720deg);

opacity:0;

}

}

/* Button Click Effect */

.number-pad button{

position:relative;

overflow:hidden;

}

.number-pad button::after{

content:"";

position:absolute;

width:0;

height:0;

border-radius:50%;

background:rgba(255,255,255,.35);

left:50%;

top:50%;

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

transition:.35s;
}

.number-pad button:active::after{

width:180px;

height:180px;
}

/* Gift glow */

.gift{

filter:drop-shadow(0 0 20px rgba(255,215,0,.6));

}





/* =========================================
            LETTER COLLECTION
========================================= */

.letters-page{
    position:relative;
    width:100%;
    max-width:950px;
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:26px;
}

.letters-header{
    text-align:center;
}

.letters-progress{
    display:flex;
    gap:12px;
    font-size:28px;
    margin-top:8px;
}

.progress-heart{
    transition:.35s;
}

.letters-grid{

    width:100%;
    max-width:760px;

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

    gap:30px;

    margin-top:20px;

}

/* ======================
      ENVELOPES
====================== */

.letter-envelope{

    position:relative;

    background:var(--card);

    border:2px solid var(--card-border);

    border-radius:22px;

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 15px 30px var(--card-shadow);

    padding:28px 20px;

    cursor:pointer;

    transition:.35s;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    overflow:hidden;

}

/* Envelope flap */

.letter-envelope::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:55%;

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

    clip-path:polygon(0 0,100% 0,50% 100%);

}

/* Wax Seal */

.letter-envelope::after{

    content:"❤";

    position:absolute;

    top:50%;

    left:50%;

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

    width:42px;

    height:42px;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #ff6b91,
        #ff2f68
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:16px;

    box-shadow:
        0 6px 16px rgba(0,0,0,.25);

}

.letter-envelope:hover{

    transform:
        translateY(-10px)
        rotate(-2deg);

    box-shadow:
        0 24px 40px var(--card-shadow);

}

.letter-envelope:active{

    transform:scale(.95);

}

.letter-envelope span{

    margin-top:52px;

    color:var(--ink);

    font-weight:700;

    font-size:14px;

    text-align:center;

    line-height:1.4;

}

.letter-envelope{

    font-size:40px;

    animation:letterFloat 4s ease-in-out infinite;

}

.letter-envelope:nth-child(2){

    animation-delay:.5s;

}

.letter-envelope:nth-child(3){

    animation-delay:1s;

}

.letter-envelope:nth-child(4){

    animation-delay:1.5s;

}

.letter-envelope:nth-child(5){

    animation-delay:2s;

}

.letter-envelope:nth-child(6){

    animation-delay:2.5s;

}

@keyframes letterFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/* Locked */

.locked{

opacity:.55;

filter:grayscale(.3);

}

.locked::after{

background:#999;

}

/* ======================
      LETTER VIEWER
====================== */

#letterViewer{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(14px);

}

#letterViewer.show{

display:flex;

animation:fadeViewer .4s;

}

@keyframes fadeViewer{

from{

opacity:0;

}

to{

opacity:1;

}

}

.letter-paper{

    position:relative;

    width:min(90%,650px);

    min-height:500px;

    padding:50px;

    border-radius:24px;

    background:
    linear-gradient(
        180deg,
        #fffdf7,
        #fff8ef
    );

    box-shadow:
        0 30px 60px rgba(0,0,0,.28);

    overflow:auto;

    animation:paperOpen .45s ease;

}

/* Floral corners */

.letter-paper::before{

content:"🌸";

position:absolute;

top:18px;

left:20px;

font-size:28px;

}

.letter-paper::after{

content:"🌸";

position:absolute;

bottom:18px;

right:20px;

font-size:28px;

}

@keyframes paperOpen{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

#letterTitle{

font-family:var(--serif);

font-size:34px;

text-align:center;

color:#8d4a63;

margin-bottom:24px;

}

#letterContent{

font-size:18px;

line-height:2;

color:#5c4c57;

white-space:pre-wrap;

}

#closeLetter{

position:absolute;

right:20px;

top:20px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#ff7aa2;

color:white;

font-size:20px;

cursor:pointer;

transition:.25s;

}

#closeLetter:hover{

transform:rotate(90deg);

}

.continue-btn{

display:none;

margin-top:18px;

padding:14px 30px;

border:none;

border-radius:40px;

background:linear-gradient(
90deg,
var(--pink),
var(--lavender)
);

color:white;

font-weight:700;

font-size:16px;

cursor:pointer;

box-shadow:0 10px 25px var(--card-shadow);

}

.continue-btn.show{

display:inline-block;

animation:popup .5s;

}

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

@media(max-width:650px){

.letters-grid{

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

gap:18px;

}

.letter-paper{

padding:30px;

min-height:420px;

}

#letterTitle{

font-size:28px;

}

#letterContent{

font-size:16px;

}

}



/* ==========================================
        LETTER PREMIUM ANIMATIONS
========================================== */

#petals{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:999998;
}

.petal{
    position:absolute;
    top:-30px;
    font-size:22px;
    animation:petalFall linear forwards;
}

@keyframes petalFall{

0%{
transform:translateY(-20px) rotate(0deg);
opacity:0;
}

10%{
opacity:1;
}

100%{
transform:
translateY(110vh)
translateX(120px)
rotate(540deg);

opacity:0;
}

}

/* Lift envelope */

.letter-envelope.opening{

animation:
liftEnvelope .6s ease forwards;

}

@keyframes liftEnvelope{

0%{
transform:scale(1);
}

40%{
transform:
translateY(-18px)
scale(1.08)
rotate(-4deg);
}

100%{
transform:
translateY(-60px)
scale(.2);
opacity:0;
}

}

/* Paper unfold */

.letter-paper{

transform-origin:top center;

}

.letter-paper.open{

animation:paperUnfold .6s ease;

}

@keyframes paperUnfold{

0%{

transform:
rotateX(-90deg)
scale(.85);

opacity:0;

}

100%{

transform:
rotateX(0)
scale(1);

opacity:1;

}

}

/* Close */

.letter-paper.close{

animation:paperClose .35s ease forwards;

}

@keyframes paperClose{

100%{

transform:
scale(.8);

opacity:0;

}

}



/* ======================================
        GRAND FINALE
====================================== */

.gift-box{

width:150px;
height:150px;

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

font-size:90px;

cursor:pointer;

transition:.4s;

animation:giftBounce 2.5s infinite;

}

@keyframes giftBounce{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

}

.letters-grid{
    width:100%;
    max-width:760px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:20px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(60px) scale(.85);
    transition:all .8s cubic-bezier(.2,.9,.2,1);
}

.letters-grid.show-grid{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.open-box{

animation:boxOpen .7s forwards;

}

@keyframes boxOpen{

100%{

transform:
scale(.6)
rotate(-12deg);

opacity:0;

}

}

.unlock-glow{

animation:unlockGlow 1.2s infinite;

}

@keyframes unlockGlow{

0%,100%{

box-shadow:0 0 0 rgba(255,120,160,0);

}

50%{

box-shadow:0 0 30px rgba(255,120,160,.7);

}

}



.letters-box{
    position: relative;
    width: 100%;
    min-height: 420px;

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

.gift-box{
    position: absolute;
    z-index: 20;
}

.letters-grid{
    position: absolute;
    z-index: 10;
}



.gift-box.opened{
    animation: giftOpen .8s ease forwards;
}

@keyframes giftOpen{
    0%{
        transform:scale(1) rotate(0deg);
    }
    30%{
        transform:scale(1.15) rotate(-8deg);
    }
    60%{
        transform:scale(0.95) rotate(8deg);
    }
    100%{
        transform:scale(0);
        opacity:0;
    }
}




.gift-box{
    width:130px;
    height:130px;
    margin:40px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:70px;
    cursor:pointer;
    animation:giftFloat 2s ease-in-out infinite;
    transition:.5s;
}

.gift-box:hover{
    transform:scale(1.08);
}

.gift-box.opened{
    animation:giftOpen .7s forwards;
}

@keyframes giftFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

@keyframes giftOpen{
    0%{
        transform:scale(1) rotate(0);
    }
    40%{
        transform:scale(1.15) rotate(-8deg);
    }
    100%{
        transform:scale(0);
        opacity:0;
    }
}




.magic-key{
    position:fixed;
    font-size:40px;
    z-index:99999;
    pointer-events:none;
    animation:keyFly 1.6s ease forwards;
}

@keyframes keyFly{

    0%{
        left:50%;
        top:90%;
        transform:translate(-50%,0) scale(.5);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    100%{
        left:50%;
        top:35%;
        transform:translate(-50%,0) scale(1.3) rotate(360deg);
        opacity:1;
    }

}

.unlockFlash{
    animation:unlockFlash .8s;
}

@keyframes unlockFlash{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.3);
        filter:drop-shadow(0 0 25px gold);
    }

    100%{
        transform:scale(1);
    }

}


/* =========================================
   CELEBRATION SLIDE
========================================= */

.celebration-stage{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:40px 20px;
    background:linear-gradient(-45deg,#ffdde8,#ffd6f5,#e8d8ff,#fff3d8);
    background-size:400% 400%;
    animation:bgMove 15s ease infinite;
}

/* Background */

.celebration-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

/* Content */

.celebration-content{
    position:relative;
    z-index:5;
    max-width:520px;
}

/* Heading */

.cele-title{
    font-family:var(--serif);
    font-size:2.2rem;
    color:#fff;
    text-shadow:0 0 18px rgba(255,120,200,.8);
    animation:floatText 3s ease-in-out infinite;
}

.cele-name{
    font-family:var(--serif);
    font-size:3rem;
    margin-top:8px;
    color:#ff4fa2;
    text-shadow:0 0 25px rgba(255,255,255,.9);
    animation:glowName 2.5s ease-in-out infinite;
}

/* Photo */

.photo-glow{
    width:220px;
    height:220px;
    margin:35px auto;
    border-radius:50%;
    padding:8px;
    background:linear-gradient(45deg,#ff8ac8,#ffd86b,#8dd8ff,#d78cff);
    animation:rotateGlow 8s linear infinite;
}

.cele-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    border:5px solid white;
    box-shadow:0 15px 45px rgba(0,0,0,.25);
    animation:photoPop .8s ease;
}

/* Message */

.cele-message{
    margin-top:18px;
    font-size:1.05rem;
    line-height:1.8;
    color:#5b4b6a


/* ==========================================
   LAST SLIDE — ALL MESSAGE TEXT SAME SIZE
   ========================================== */

.slide[data-index="5"] .quote {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* Keep THANK YOU heading itself at the same
   size as the surrounding message text */
.slide[data-index="5"] .quote h2 {
    font-size: 18px !important;
    line-height: 1.7 !important;
}



/* ================================
   LAST BIRTHDAY WISHES SLIDE
   SCROLLABLE ON MOBILE & DESKTOP
================================ */

.slide:last-child {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;

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


    /* Allow the complete content to be reached */
    display: block;

    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Keep the content from touching the edges */
.slide:last-child > * {
    box-sizing: border-box;
}

/* Better scrollbar */
.slide:last-child::-webkit-scrollbar {
    width: 5px;
}

.slide:last-child::-webkit-scrollbar-thumb {
    background: rgba(120, 90, 120, 0.35);
    border-radius: 10px;
}

.slide:last-child::-webkit-scrollbar-track {
    background: transparent;
}