/* =========================================================
   Premium Birthday Microsite (Mobile-first)
   - Modern cute monotonic pink
   - Glass cards, soft shadows, premium motion
   ========================================================= */

:root{
  --bg0:#fff6f9;
  --bg1:#ffe8f1;
  --bg2:#ffd6e6;

  --ink:#3a2030;
  --muted: rgba(58,32,48,.68);

  --card: rgba(255,255,255,.64);
  --card2: rgba(255,255,255,.48);
  --stroke: rgba(255,255,255,.45);

  --shadow: 0 18px 45px rgba(58,32,48,.15);
  --shadow2: 0 10px 28px rgba(58,32,48,.14);

  --radius: 22px;
  --radius2: 28px;

  --accent:#ff5fa2;
  --accent2:#ff7bb6;
  --accent3:#ffd1e3;

  --easeOut: cubic-bezier(.22,1,.36,1);
  --easeIn: cubic-bezier(.4,0,1,1);

  --safeTop: env(safe-area-inset-top);
  --safeBottom: env(safe-area-inset-bottom);
}

/* Reset */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background: radial-gradient(1200px 900px at 20% 10%, var(--bg1), transparent 60%),
              radial-gradient(1000px 900px at 85% 30%, var(--bg2), transparent 58%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}

#fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.bg{
  position:fixed;
  inset:-40px;
  z-index:0;
  background:
    radial-gradient(800px 600px at 25% 15%, rgba(255,255,255,.65), transparent 65%),
    radial-gradient(700px 600px at 70% 35%, rgba(255,190,215,.50), transparent 62%),
    radial-gradient(900px 700px at 50% 75%, rgba(255,140,190,.22), transparent 70%);
  filter: blur(10px);
  opacity:.9;
}

.app{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  padding: calc(14px + var(--safeTop)) 14px calc(14px + var(--safeBottom));
  gap: 12px;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.40);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(12px);
}
.brandDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 18px rgba(255,95,162,.35);
}
.brandText{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(58,32,48,.72);
  font-weight:700;
}

.progress{
  display:flex;
  gap:6px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(10px);
}
.pDot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(58,32,48,.18);
  transform: scale(.9);
  transition: transform .25s var(--easeOut), background .25s var(--easeOut);
}
.pDot.is-active{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transform: scale(1.15);
  box-shadow: 0 10px 22px rgba(255,95,162,.33);
}

.iconBtn{
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.38);
  color: rgba(58,32,48,.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(58,32,48,.08);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .18s var(--easeOut);
}
.iconBtn:active{ transform: scale(.96); }

/* Menu */
.menu{
  position:fixed;
  inset:0;
  z-index:5;
  display:none;
  align-items:flex-end;
  justify-content:center;
  background: rgba(20,10,15,.28);
  backdrop-filter: blur(7px);
  padding: 16px;
}
.menu.is-open{ display:flex; }

.menuCard{
  width:min(560px, 100%);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.42);
  box-shadow: var(--shadow);
}
.menuTitle{
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.toggle{
  display:flex;
  gap:12px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.35);
  margin-bottom: 10px;
}
.toggle input{ display:none; }
.toggleUI{
  width:44px; height:26px;
  border-radius:999px;
  background: rgba(58,32,48,.18);
  position:relative;
}
.toggleUI::after{
  content:"";
  width:20px; height:20px;
  border-radius:999px;
  background: white;
  position:absolute;
  top:3px; left:3px;
  transition: transform .25s var(--easeOut);
  box-shadow: 0 10px 18px rgba(58,32,48,.18);
}
.toggle input:checked + .toggleUI{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.toggle input:checked + .toggleUI::after{
  transform: translateX(18px);
}
.toggleText{
  font-weight: 700;
  color: rgba(58,32,48,.82);
}

/* Scenes */
.scenes{
  position:relative;
  flex:1;
  overflow:hidden;
  border-radius: 26px;
}

.scene{
  position:absolute;
  inset:0;
  padding: 10px;
  opacity:0;
  transform: translateY(10px) scale(.995);
  pointer-events:none;
  transition: opacity .55s var(--easeOut), transform .55s var(--easeOut);
}
.scene.is-active{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

.center{
  height:100%;
  display:grid;
  place-items:center;
}

.stack{
  width:min(560px, 100%);
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.titleBlock h2{
  margin:0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.titleBlock p{
  margin:6px 0 0;
  color: var(--muted);
  font-weight: 600;
}

.muted{ color: var(--muted); }

/* Cards */
.card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}
.lift{
  position:relative;
}
.lift::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(600px 280px at 50% 0%, rgba(255,255,255,.55), transparent 60%);
  pointer-events:none;
  opacity:.7;
}

/* Buttons */
.btn{
  position:relative;
  border:0;
  cursor:pointer;
  border-radius: 999px;
  padding: 14px 16px;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--ink);
  user-select:none;
  touch-action: manipulation;
  transition: transform .18s var(--easeOut), filter .18s var(--easeOut), opacity .18s var(--easeOut);
}
.btn:active{ transform: scale(.965); }

.btnPrimary{
  color: white;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 0 16px 32px rgba(255,95,162,.30);
  overflow:hidden;
}
.btnPrimary .btnShine{
  position:absolute;
  inset:-60% -20%;
  transform: rotate(18deg) translateX(-30%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:.25;
  animation: shine 3.2s var(--easeOut) infinite;
}
@keyframes shine{
  0%{ transform: rotate(18deg) translateX(-60%); }
  55%{ transform: rotate(18deg) translateX(160%); }
  100%{ transform: rotate(18deg) translateX(160%); }
}

.btnGhost{
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 10px 22px rgba(58,32,48,.08);
}
.btnSmall{
  padding: 10px 12px;
  font-weight: 850;
}
.btnWide{
  width:100%;
}

.btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  filter: saturate(.9);
}

/* Scene 1: Hero */
.heroCard{
  width:min(560px, 100%);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.heroImg{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.35);
  height: 280px;
}
.heroImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}
.heroGlow{
  position:absolute;
  inset:0;
  background: radial-gradient(600px 300px at 50% 20%, rgba(255,255,255,.6), transparent 60%),
              radial-gradient(500px 300px at 30% 70%, rgba(255,160,200,.35), transparent 55%);
  mix-blend-mode: screen;
  pointer-events:none;
}
.heroText h1{
  margin:0;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.heroText p{
  margin:6px 0 0;
  color: var(--muted);
  font-weight: 650;
}
.spark{ filter: drop-shadow(0 10px 18px rgba(255,95,162,.25)); }
.heroActions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hint{
  font-size: 12px;
  color: rgba(58,32,48,.58);
  text-align:center;
  font-weight: 700;
}

/* Scene 2: Garden */
.gardenWrap{
  position:relative;
  height: 290px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.30);
  overflow:hidden;
  box-shadow: var(--shadow2);
}

.garden{
  position:absolute;
  inset:0;
}

.heartBubble{
  position:absolute;
  width: 52px;
  height: 52px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), rgba(255,255,255,.22) 55%, rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 16px 26px rgba(255,95,162,.14);
  cursor:pointer;
  user-select:none;
  transform: translateZ(0);
  transition: transform .2s var(--easeOut);
}
.heartBubble:active{ transform: scale(.94); }
.heartBubble .heart{
  font-size: 22px;
  filter: drop-shadow(0 10px 16px rgba(255,95,162,.25));
}

.jar{
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: 90px;
  height: 140px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
}
.jarTop{
  width: 62px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 10px 16px rgba(58,32,48,.08);
}
.jarBody{
  width: 90px;
  height: 110px;
  border-radius: 24px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.38);
  position:relative;
  overflow:hidden;
  box-shadow: 0 14px 22px rgba(58,32,48,.10);
}
.jarFill{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 0%;
  background: linear-gradient(180deg, rgba(255,95,162,.70), rgba(255,123,182,.50));
  filter: blur(.2px);
  transition: height .55s var(--easeOut);
}
.jarLabel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(58,32,48,.75);
}

.compliment{
  padding: 14px 14px 12px;
}
.complimentTitle{
  font-weight: 950;
  font-size: 16px;
}
.complimentBody{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.35;
}
.compliment .btn{
  margin-top: 10px;
}

/* Scene 3: Carousel */
.carousel{
  display:flex;
  align-items:center;
  gap: 10px;
}
.navBtn{
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.36);
  background: rgba(255,255,255,.45);
  box-shadow: 0 10px 22px rgba(58,32,48,.08);
  cursor:pointer;
  font-size: 22px;
  font-weight: 900;
  color: rgba(58,32,48,.76);
  transition: transform .18s var(--easeOut);
}
.navBtn:active{ transform: scale(.96); }

.viewport{
  flex:1;
  border-radius: 26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.20);
  box-shadow: var(--shadow2);
}
.track{
  display:flex;
  width:100%;
  transform: translateX(0);
  transition: transform .55s var(--easeOut);
}
.slide{
  min-width: 100%;
  padding: 12px;
}
.slideCard{
  height: 330px;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.40);
  position:relative;
  background: rgba(255,255,255,.30);
}
.slideCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  display:block;
}
.slideOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.34) 100%);
  pointer-events:none;
}
.caption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 60px;
  color: rgba(255,255,255,.96);
  font-weight: 900;
  font-size: 16px;
  text-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.revealCap{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 36px;
  color: rgba(255,255,255,.88);
  font-weight: 650;
  font-size: 13px;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .35s var(--easeOut), transform .35s var(--easeOut);
}
.slideCard.is-revealed .revealCap{
  opacity:1;
  transform: translateY(0);
}

.sliderRow{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.sliderTrack{
  flex:1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.35);
  overflow:hidden;
}
.sliderFill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,95,162,.95), rgba(255,123,182,.75));
  transition: width .1s linear;
}
.sliderStar{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.44);
  box-shadow: 0 16px 24px rgba(58,32,48,.12);
  cursor: grab;
  user-select:none;
  touch-action:none;
}
.sliderStar:active{ cursor: grabbing; transform: scale(.98); }
.sliderStar span{
  font-size: 18px;
  filter: drop-shadow(0 10px 18px rgba(255,95,162,.18));
}

.dots{
  display:flex;
  justify-content:center;
  gap: 8px;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(58,32,48,.18);
  transform: scale(.92);
  transition: transform .25s var(--easeOut), background .25s var(--easeOut);
}
.dot.is-active{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  transform: scale(1.18);
  box-shadow: 0 10px 18px rgba(255,95,162,.28);
}

/* Scene 4: Stars */
.stars{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.starBtn{
  height: 62px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.40);
  background: rgba(255,255,255,.45);
  box-shadow: 0 12px 22px rgba(58,32,48,.10);
  cursor:pointer;
  font-size: 22px;
  display:grid;
  place-items:center;
  transition: transform .18s var(--easeOut), background .25s var(--easeOut);
}
.starBtn:active{ transform: scale(.965); }
.starBtn.is-lit{
  background: linear-gradient(180deg, rgba(255,95,162,.50), rgba(255,123,182,.35));
}
.reveal{
  padding: 14px;
}
.revealTitle{
  font-weight: 950;
  font-size: 16px;
}
.revealBody{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.35;
}

/* Scene 5: Finale */
.finale{
  width:min(560px, 100%);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.finaleHero{
  position:relative;
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.40);
  height: 250px;
  background: rgba(255,255,255,.30);
}
.bigHeart{
  position:absolute;
  z-index:3;
  left: 14px;
  top: 14px;
  font-size: 42px;
  filter: drop-shadow(0 16px 26px rgba(255,95,162,.22));
  animation: floaty 2.8s var(--easeOut) infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.finaleImg{
  position:absolute;
  inset:0;
}
.finaleImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.03);
}
.finaleBlur{
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 280px at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.15) 100%);
  pointer-events:none;
}
.finaleText h2{
  margin:0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.finaleText p{ margin:6px 0 0; }

.finalMessage{
  padding: 10px 0 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.finalMessage .line{
  font-weight: 900;
  letter-spacing: -0.01em;
  min-height: 24px;
}
.finalActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 6px;
}
.shareBox{
  margin-top: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.35);
}
.shareTitle{
  font-weight: 900;
  margin-bottom: 6px;
}
.shareText{
  font-weight: 650;
  color: rgba(58,32,48,.78);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 10px;
}

/* Toast */
.toast{
  position:fixed;
  left: 50%;
  bottom: calc(16px + var(--safeBottom));
  transform: translateX(-50%) translateY(18px);
  opacity:0;
  pointer-events:none;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.45);
  box-shadow: var(--shadow2);
  color: rgba(58,32,48,.85);
  font-weight: 800;
  backdrop-filter: blur(12px);
  transition: opacity .25s var(--easeOut), transform .25s var(--easeOut);
}
.toast.is-show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* Small devices */
@media (max-width: 380px){
  .heroImg{ height: 250px; }
  .slideCard{ height: 300px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}