/* ===========================================================
   TOY STORY BIRTHDAY — SHARED STYLESHEET
   Palette:
   --sky        #4FB8E8  (Andy's-room sky blue)
   --sky-deep   #2E86C1
   --sun        #FFD23F  (Woody star / sun yellow)
   --barn       #E8432F  (Woody shirt red)
   --buzz       #3FA34D  (Buzz suit green)
   --cloud      #FFFDF7  (cream cloud white)
   --denim      #2B4C7E  (Woody jeans, used for dark text/footer)
   Fonts: 'Baloo 2' (bouncy display) + 'Nunito' (friendly body)
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --sky:#4FB8E8;
  --sky-deep:#2E86C1;
  --sun:#FFD23F;
  --barn:#E8432F;
  --buzz:#3FA34D;
  --cloud:#FFFDF7;
  --denim:#2B4C7E;
  --purple:#8E5DD1;
  --radius:22px;
  --shadow: 0 10px 0 rgba(43,76,126,0.25);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family:'Nunito',sans-serif;
  color:var(--denim);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
.bg-layer{
  position:fixed;
  inset:0;
  z-index:-2;
}
.bg-layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(7px);
}
.bg-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:-1;
  pointer-events:none;
}

h1,h2,h3,.display{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  color:var(--denim);
  margin:0;
}

a{text-decoration:none;color:inherit;}
button{font-family:'Baloo 2',cursive;cursor:pointer;border:none;}

/* ---------- Pixar minimalist clouds background (all pages) ---------- */
.cloud-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.cloud-layer .cloud{
  position:absolute;
  opacity:0.2;
  animation:cloudWalk linear infinite;
}
.cloud-layer .star{
  position:absolute;
  color:#fff;
  left:-40px;
  animation:cloudWalk linear infinite, starSpin 4s linear infinite;
}
@keyframes starSpin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
.cloud-layer .cloud::before,
.cloud-layer .cloud::after{
  content:'';
  position:absolute;
  background:var(--cloud);
  border-radius:50%;
}
.cloud-layer .cloud-1{
  top:8%;
  width:180px;height:60px;
  background:var(--cloud);
  border-radius:60px;
  animation-duration:45s;
  animation-delay:-5s;
  left:-200px;
}
.cloud-layer .cloud-1::before{
  width:80px;height:80px;
  top:-40px;left:20px;
}
.cloud-layer .cloud-1::after{
  width:100px;height:100px;
  top:-60px;left:50px;
}
.cloud-layer .cloud-2{
  top:22%;
  width:220px;height:70px;
  background:var(--cloud);
  border-radius:70px;
  animation-duration:55s;
  animation-delay:-15s;
  left:-240px;
}
.cloud-layer .cloud-2::before{
  width:90px;height:90px;
  top:-45px;left:30px;
}
.cloud-layer .cloud-2::after{
  width:120px;height:120px;
  top:-70px;left:70px;
}
.cloud-layer .cloud-3{
  bottom:18%;
  width:160px;height:50px;
  background:var(--cloud);
  border-radius:50px;
  animation-duration:40s;
  animation-delay:-25s;
  left:-180px;
}
.cloud-layer .cloud-3::before{
  width:70px;height:70px;
  top:-35px;left:15px;
}
.cloud-layer .cloud-3::after{
  width:90px;height:90px;
  top:-55px;left:40px;
}
.cloud-layer .cloud-4{
  bottom:35%;
  width:200px;height:65px;
  background:var(--cloud);
  border-radius:65px;
  animation-duration:50s;
  animation-delay:-10s;
  left:-220px;
}
.cloud-layer .cloud-4::before{
  width:85px;height:85px;
  top:-42px;left:25px;
}
.cloud-layer .cloud-4::after{
  width:110px;height:110px;
  top:-65px;left:60px;
}
.cloud-layer .cloud-5{
  top:50%;
  width:140px;height:45px;
  background:var(--cloud);
  border-radius:45px;
  animation-duration:38s;
  animation-delay:-30s;
  left:-160px;
}
.cloud-layer .cloud-5::before{
  width:60px;height:60px;
  top:-30px;left:10px;
}
.cloud-layer .cloud-5::after{
  width:80px;height:80px;
  top:-50px;left:35px;
}

@keyframes cloudWalk{
  from{transform:translateX(0);}
  to{transform:translateX(calc(100vw + 400px));}
}

/* ---------- Sunburst decoration ---------- */
.sunburst{
  position:absolute;
  border-radius:50%;
  background:repeating-conic-gradient(#5BA3D9 0deg 10deg, #FFE28A 10deg 20deg);
  opacity:0.9;
}

/* ---------- Toy-style pill button ---------- */
.toy-btn{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  font-size:1.5rem;
  padding:20px 48px;
  border-radius:50px;
  background:linear-gradient(180deg,#5BA3D9,#2E86C1);
  color:var(--cloud);
  box-shadow:0 8px 0 #1A5276, 0 14px 20px rgba(0,0,0,0.3);
  border:4px solid #1A5276;
  transition:transform .15s ease, box-shadow .15s ease;
  display:inline-block;
  text-shadow:0 2px 0 rgba(0,0,0,0.2);
}
.toy-btn:hover{
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 12px 0 #1A5276, 0 22px 28px rgba(0,0,0,0.35);
  background:linear-gradient(180deg,#6BB5E8,#3498DB);
}
.toy-btn:active{
  transform:translateY(2px) scale(0.97);
  box-shadow:0 4px 0 #1A5276;
}

/* ---------- Footer ---------- */
footer.toy-footer{
  position:relative;
  z-index:1;
  text-align:center;
  padding:28px 16px 34px;
  background:var(--denim);
  color:var(--cloud);
  font-family:'Baloo 2',cursive;
  font-size:1rem;
  border-top:6px dashed #5BA3D9;
}
footer.toy-footer .tiny{
  font-family:'Nunito',sans-serif;
  font-size:0.75rem;
  opacity:0.7;
  margin-top:6px;
}

/* =============== PAGE 1 : LANDING =============== */
.landing{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}
.landing-stage{
  position:relative;
  width:min(560px,90vw);
  height:min(560px,90vw);
  display:flex;
  align-items:center;
  justify-content:center;
}
.landing-title{
  position:absolute;
  top:-6%;
  width:100%;
  text-align:center;
  font-size:clamp(1.4rem,4vw,2.1rem);
  color:var(--cloud);
  text-shadow:0 3px 0 var(--denim);
  z-index:3;
}
.orbit-char{
  position:fixed;
  width:7rem;
  height:7rem;
  object-fit:contain;
  border:4px solid #fff;
  border-radius:16px;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,0.25));
  animation:float 3.6s ease-in-out infinite;
  z-index:2;
}
@keyframes float{
  0%,100%{transform:translateY(0px) rotate(-4deg);}
  50%{transform:translateY(-18px) rotate(4deg);}
}
.center-btn-wrap{
  position:relative;
  z-index:2;
  text-align:center;
}
.center-btn-wrap .sub{
  display:block;
  margin-top:14px;
  color:var(--cloud);
  font-weight:700;
  text-shadow:0 2px 0 var(--denim);
}
.above-btn{
  font-family:'Baloo 2',cursive;
  font-size:1.1rem;
  color:var(--cloud);
  text-shadow:0 2px 0 var(--denim);
  margin-bottom:16px;
  letter-spacing:0.05em;
}
.pin-wrap{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  justify-content:center;
  position:relative;
}
.pin-hidden{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:2;
  font-size:1.6rem;
  letter-spacing:40px;
  caret-color:transparent;
}
.pin-display{
  display:flex;
  gap:8px;
  pointer-events:none;
}
.pin-dot{
  width:38px;
  height:50px;
  background:var(--denim);
  border-radius:8px;
  border:3px solid #5BA3D9;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Baloo 2',cursive;
  font-size:1.6rem;
  color:var(--sun);
  transition:border-color .2s;
}
.pin-dot.filled{
  border-color:#FFD23F;
}
.pin-dot.error{
  border-color:#E8432F;
  animation:shake .4s ease;
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
.pin-dot.filled::after{
  content:'●';
}
.pulse-ring{
  position:absolute;
  inset:0;
  margin:auto;
  width:180px;height:180px;
  border-radius:50%;
  border:4px solid #5BA3D9;
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(0.9);opacity:0.9;}
  100%{transform:scale(1.9);opacity:0;}
}

/* =============== PAGE 2 : BIRTHDAY CARD =============== */
.page2-wrap{position:relative;z-index:1;padding:60px 18px 20px;}
.section-title{
  text-align:center;
  color:var(--cloud);
  font-size:clamp(1.6rem,4vw,2.4rem);
  margin-bottom:34px;
}
.logo-title{
  height:auto;
  width:clamp(140px,35vw,280px);
  display:inline-block;
  perspective:800px;
  transform-style:preserve-3d;
  animation:logo3d 6s ease-in-out infinite;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,0.6));
  border-radius:16px;
}
@keyframes logo3d{
  0%,100%{transform:perspective(800px) rotateY(-8deg) rotateX(4deg);}
  50%{transform:perspective(800px) rotateY(8deg) rotateX(-4deg);}
}

.card-stage{
  perspective:1200px;
  display:flex;
  justify-content:center;
  margin-bottom:46px;
}
.floating-card{
  width:min(340px,86vw);
  background:var(--cloud);
  border-radius:28px;
  padding:20px;
  border:6px solid #5BA3D9;
  box-shadow:0 24px 40px rgba(0,0,0,0.35);
  transform-style:preserve-3d;
  animation:card-float 5s ease-in-out infinite;
  text-align:center;
}
@keyframes card-float{
  0%,100%{transform:translateY(0) rotateX(4deg) rotateY(-3deg);}
  50%{transform:translateY(-22px) rotateX(-4deg) rotateY(3deg);}
}
.floating-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  border:4px solid var(--sky-deep);
}
.floating-card .name{
  font-family:'Baloo 2',cursive;
  font-size:1.5rem;
  margin-top:14px;
  color:var(--barn);
}
.floating-card .dob{
  font-weight:700;
  color:var(--denim);
  margin-top:2px;
}

/* Countdown / Date display */
.countdown-wrap{
  display:flex;
  justify-content:center;
  margin:0 auto 50px;
}
.countdown, .date-display{
  display:flex;
  gap:6px;
  align-items:center;
  background:rgba(255,255,255,0.15);
  padding:16px 18px;
  border-radius:20px;
  border:3px dashed #5BA3D9;
}
.date-sep{
  font-family:'Baloo 2',cursive;
  font-size:2rem;
  color:transparent;
  text-shadow:none;
  margin:0 4px;
}
.date-slot{
  width:40px;
  height:54px;
  background:var(--denim);
  color:var(--sun);
  font-family:'Baloo 2',cursive;
  font-size:2rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,0.25);
}
.count-unit .digits{
  display:flex;
  gap:4px;
}
.digit-slot{
  width:34px;height:46px;
  background:var(--denim);
  color:#5BA3D9;
  font-family:'Baloo 2',cursive;
  font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,0.25);
}
.digit-slot.flip{animation:flip .5s ease;}
@keyframes flip{
  0%{transform:rotateX(0deg);}
  50%{transform:rotateX(90deg);opacity:0.4;}
  100%{transform:rotateX(0deg);}
}
.count-unit label{
  font-size:0.75rem;
  color:var(--cloud);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

/* Gallery */
.gallery-title{
  text-align:center;
  color:var(--cloud);
  text-shadow:0 2px 0 var(--denim);
  font-size:1.5rem;
  margin-bottom:20px;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:760px;
  margin:0 auto 50px;
  padding:0 16px;
}
.gallery figure{
  margin:0;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:4px dashed #5BA3D9;
  transform:rotate(var(--tilt,0deg));
  transition:transform .25s ease;
  background:transparent;
}
.gallery figure:nth-child(1){--tilt:-3deg;}
.gallery figure:nth-child(2){--tilt:2deg;}
.gallery figure:nth-child(3){--tilt:-2deg;}
.gallery figure:nth-child(4){--tilt:3deg;}
.gallery figure:nth-child(5){--tilt:-2deg;}
.gallery figure:nth-child(6){--tilt:2deg;}
.gallery figure:hover{transform:rotate(0deg) scale(1.06);z-index:2;}
.gallery img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.next-page-cta{
  text-align:center;
  margin-bottom:60px;
}

/* =============== PAGE 3 : MESSAGE FORM =============== */
.page3-wrap{
  position:relative;z-index:1;
  min-height:calc(100vh - 110px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 18px 40px;
}
.msg-card{
  width:min(480px,92vw);
  background:linear-gradient(160deg,var(--cloud) 0%, #FFF3D0 100%);
  border-radius:28px;
  padding:30px 26px;
  border:6px solid #5BA3D9;
  box-shadow:0 20px 0 rgba(0,0,0,0.15), 0 30px 40px rgba(0,0,0,0.3);
  position:relative;
}
.msg-card::before{
  content:"";
  position:absolute;
  top:-35px;left:50%;
  transform:translateX(-50%);
  width:60px;height:60px;
  background:url('asset/lily.png') center/cover no-repeat;
  border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
  border-radius:8px;
}
.msg-card h2{
  text-align:center;
  color:#5BA3D9;
  margin-bottom:6px;
  font-size:1.5rem;
}
.msg-card p.lead{
  text-align:center;
  margin:0 0 20px;
  font-weight:600;
  color:var(--denim);
}
.msg-card label{
  display:block;
  font-weight:800;
  margin:14px 0 6px;
  color:var(--denim);
  font-family:'Baloo 2',cursive;
}
.msg-card input,
.msg-card textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:3px solid var(--sky-deep);
  font-family:'Nunito',sans-serif;
  font-size:1rem;
  resize:vertical;
  background:#fff;
}
.msg-card input:focus,
.msg-card textarea:focus{
  outline:none;
  border-color:var(--buzz);
}
.msg-card .submit-row{
  text-align:center;
  margin-top:22px;
}
.msg-card .submit-btn{
  font-size:1.1rem;
  padding:14px 36px;
  border-radius:50px;
  background:linear-gradient(180deg,#5BA3D9,#2E86C1);
  color:var(--cloud);
  box-shadow:0 6px 0 #1A5276;
  border:4px solid #1A5276;
  transition:transform .15s ease;
  text-shadow:0 2px 0 rgba(0,0,0,0.2);
}
.msg-card .submit-btn:hover{transform:translateY(-4px);background:linear-gradient(180deg,#6BB5E8,#3498DB);}
.msg-card .submit-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #1A5276;}

.thanks-overlay{
  position:fixed;inset:0;
  background:rgba(43,76,126,0.85);
  display:none;
  align-items:center;justify-content:center;
  z-index:50;
  text-align:center;
  padding:20px;
}
.thanks-overlay.show{display:flex;}
.thanks-box{
  background:var(--cloud);
  padding:36px 30px;
  border-radius:24px;
  border:6px solid #5BA3D9;
  max-width:360px;
}
.thanks-box h3{color:var(--barn);margin-bottom:10px;font-size:1.6rem;}
.thanks-box p{color:var(--denim);font-weight:600;}
.thanks-box .toy-btn{margin-top:16px;}

/* ---------- Wallet Card (Toy Story theme) ---------- */
.wallet {
  position: relative;
  width: 280px;
  height: 230px;
  cursor: pointer;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: transform 0.4s ease;
}
.wallet-back {
  position: absolute;
  bottom: 0;
  width: 280px;
  height: 200px;
  background: #2B4C7E;
  border-radius: 22px 22px 60px 60px;
  z-index: 5;
  box-shadow: inset 0 25px 35px rgba(0,0,0,0.4), inset 0 5px 15px rgba(0,0,0,0.5);
}
@keyframes slideIntoPocket {
  0%{transform:translateY(-100px);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}
.card {
  position: absolute;
  width: 260px;
  height: 140px;
  left: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 -4px 15px rgba(0,0,0,0.1);
  transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1), z-index 0s;
  animation: slideIntoPocket 0.8s cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-icon-overlay {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border: 2px solid #fff;
  border-radius: 6px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  z-index: 2;
}
/* Card variants */
.woody {
  background: #E8432F;
  bottom: 90px;
  z-index: 10;
  animation-delay: .1s;
  border-color: #E8432F;
}
.buzz {
  background: #FFD23F;
  bottom: 65px;
  z-index: 20;
  animation-delay: .2s;
  border-color: #FFD23F;
}
.alien {
  background: #4FB8E8;
  bottom: 40px;
  z-index: 30;
  animation-delay: .3s;
  border-color: #4FB8E8;
}
/* Pocket */
.pocket {
  position: absolute;
  bottom: 0;
  width: 280px;
  height: 160px;
  z-index: 40;
  filter: drop-shadow(0 15px 25px rgba(20,40,20,0.4));
}
.pocket-content {
  position: absolute;
  top: 50px;
  width: 100%;
  text-align: center;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pocket-text {
  color: #FFD23F;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
  letter-spacing: 0.05em;
}
/* Hover */
.wallet:hover { transform: translateY(-5px); }
.wallet:hover .woody { transform: translateY(-75px) rotate(-3deg); }
.wallet:hover .buzz { transform: translateY(-45px) rotate(2deg); }
.wallet:hover .alien { transform: translateY(-10px); }
.card:hover { z-index: 100 !important; transition-delay: 0s !important; }
.wallet:hover .woody:hover { transform: translateY(-60px) scale(1.05) rotate(0); }
.wallet:hover .buzz:hover { transform: translateY(-70px) scale(1.05) rotate(0); }
.wallet:hover .alien:hover { transform: translateY(-60px) scale(1.05) rotate(0); }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .page2-wrap{padding:40px 14px 16px;}
  .section-title{font-size:clamp(1.2rem,3.5vw,1.6rem);margin-bottom:24px;}
  .landing-stage{width:min(440px,88vw);height:min(440px,88vw);}
  .orbit-char{width:4rem;height:4rem;}
  .pos-c{bottom:auto !important; top:calc(35% - 20px) !important; left:15% !important;}
  .toy-btn{font-size:1.2rem;padding:16px 36px;}
  .pin-dot{width:32px;height:42px;font-size:1.3rem;}
  .pulse-ring{width:140px;height:140px;}
  .date-slot{width:32px;height:44px;font-size:1.5rem;}
  .date-display{padding:12px 14px;}
  .floating-card{padding:16px;}
  .floating-card .name{font-size:1.2rem;}
  .wallet{transform:scale(0.85);}
  .wallet:hover{transform:scale(0.85) translateY(-5px);}
  .gallery-title{font-size:1.2rem;}
  .gallery{gap:12px;}
  .next-page-cta{margin-bottom:40px;}
  .msg-card{padding:24px 20px;}
  .msg-card h2{font-size:1.2rem;}
  .cloud-layer .cloud-1{width:100px;height:35px;}
  .cloud-layer .cloud-1::before{width:45px;height:45px;top:-22px;left:12px;}
  .cloud-layer .cloud-1::after{width:55px;height:55px;top:-33px;left:28px;}
  .cloud-layer .cloud-2{width:120px;height:38px;}
  .cloud-layer .cloud-2::before{width:50px;height:50px;top:-25px;left:16px;}
  .cloud-layer .cloud-2::after{width:65px;height:65px;top:-38px;left:38px;}
  .cloud-layer .cloud-3{width:90px;height:30px;}
  .cloud-layer .cloud-3::before{width:40px;height:40px;top:-20px;left:8px;}
  .cloud-layer .cloud-3::after{width:50px;height:50px;top:-30px;left:22px;}
  .cloud-layer .cloud-4{width:110px;height:36px;}
  .cloud-layer .cloud-4::before{width:48px;height:48px;top:-24px;left:14px;}
  .cloud-layer .cloud-4::after{width:60px;height:60px;top:-35px;left:32px;}
  .cloud-layer .cloud-5{width:80px;height:26px;}
  .cloud-layer .cloud-5::before{width:35px;height:35px;top:-18px;left:6px;}
  .cloud-layer .cloud-5::after{width:45px;height:45px;top:-28px;left:20px;}
  footer.toy-footer{font-size:0.85rem;padding:20px 12px 26px;}
}
@media (max-width:520px){
  .landing-stage{width:min(340px,92vw);height:min(340px,92vw);}
  .landing-title{font-size:clamp(1rem,3.5vw,1.3rem);}
  .above-btn{font-size:0.85rem;}
  .toy-btn{font-size:1rem;padding:14px 28px;}
  .pin-dot{width:26px;height:36px;font-size:1rem;border-radius:6px;}
  .pin-wrap{gap:6px;}
  .pulse-ring{width:110px;height:110px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .orbit-char{width:3rem;height:3rem;}
  .pos-c{bottom:auto !important; top:calc(33% - 20px) !important; left:15% !important;}
  .pos-bee{top:calc(52% + 60px) !important;}
  .wallet{transform:scale(0.7);}
  .wallet:hover{transform:scale(0.7) translateY(-5px);}
  .section-title{font-size:1.1rem;margin-bottom:18px;}
  .page2-wrap{padding:30px 10px 12px;}
  .date-slot{width:26px;height:36px;font-size:1.2rem;}
  .date-display{padding:8px 10px;gap:3px;border-width:2px;}
  .digit-slot{width:22px;height:30px;font-size:1rem;}
  .date-separator{font-size:0.7rem;}
  .date-label{font-size:0.6rem;}
  .count-unit label{font-size:0.6rem;}
  .date-sep{font-size:1.2rem;}
  .floating-card{border-width:4px;}
  .floating-card .name{font-size:1rem;}
  .floating-card .dob{font-size:0.85rem;}
  .gallery-title{font-size:1rem;margin-bottom:14px;}
  .gallery{gap:8px;}
  .next-page-cta{margin-bottom:30px;}
  .msg-card{padding:18px 14px;border-width:4px;}
  .msg-card h2{font-size:1.1rem;}
  .msg-card p.lead{font-size:0.85rem;}
  .msg-card input,.msg-card textarea{padding:10px 12px;font-size:0.9rem;}
  .msg-card .submit-btn{font-size:0.95rem;padding:12px 28px;}
  footer.toy-footer{font-size:0.75rem;padding:16px 10px 20px;}
  footer.toy-footer .tiny{font-size:0.6rem;}
  .cloud-layer .cloud-1{width:80px;height:28px;}
  .cloud-layer .cloud-1::before{width:36px;height:36px;top:-18px;left:8px;}
  .cloud-layer .cloud-1::after{width:44px;height:44px;top:-26px;left:22px;}
  .cloud-layer .cloud-2{width:95px;height:30px;}
  .cloud-layer .cloud-2::before{width:40px;height:40px;top:-20px;left:12px;}
  .cloud-layer .cloud-2::after{width:52px;height:52px;top:-30px;left:30px;}
  .cloud-layer .cloud-3{width:70px;height:24px;}
  .cloud-layer .cloud-3::before{width:32px;height:32px;top:-16px;left:6px;}
  .cloud-layer .cloud-3::after{width:40px;height:40px;top:-24px;left:18px;}
  .cloud-layer .cloud-4{width:88px;height:28px;}
  .cloud-layer .cloud-4::before{width:38px;height:38px;top:-19px;left:10px;}
  .cloud-layer .cloud-4::after{width:48px;height:48px;top:-28px;left:26px;}
  .cloud-layer .cloud-5{width:64px;height:22px;}
  .cloud-layer .cloud-5::before{width:28px;height:28px;top:-14px;left:4px;}
  .cloud-layer .cloud-5::after{width:36px;height:36px;top:-22px;left:16px;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .orbit-char,.floating-card,.pulse-ring,.cloud-layer .cloud,.cloud-layer .star,.cloud-layer .star-wrap{animation:none !important;}
}