:root {
  --buttercream: #FFF2C9;
  --strawberry: #FF9DB7;
  --lilac: #B79CFF;
  --mint: #A8F0D2;
  --window: #7ED7FF;
  --cocoa: #5A3D35;
  --lamp: #FFD35C;
  --raspberry: #E93F75;
  --pearl: #FFFDF4;
  --scene-progress: 0;
  --pointer-x: 0;
  --pointer-y: 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--cocoa);
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 157, 183, 0.35), transparent 24rem),
    radial-gradient(circle at 92% 10%, rgba(126, 215, 255, 0.28), transparent 23rem),
    linear-gradient(135deg, var(--pearl), var(--buttercream));
  font-family: "Gowun Dodum", "Nunito", sans-serif;
  overflow-x: hidden;
}

button { font: inherit; }

.makeover-scroll { min-height: 520vh; }

.room-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 116%, rgba(255, 211, 92, calc(var(--scene-progress) * 0.22)), transparent 42%),
    linear-gradient(180deg, #FFFDF4 0%, #FFF2C9 100%);
}

.room-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(90, 61, 53, .10) 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(183, 156, 255, .11) 1px, transparent 1px);
  background-size: 34px 34px, 92px 92px;
  opacity: .36;
}

.scene-meter {
  position: fixed;
  top: 22px;
  left: 28px;
  z-index: 30;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border: 3px solid var(--cocoa);
  border-radius: 22px 12px 22px 12px;
  background: rgba(255, 253, 244, .82);
  box-shadow: 0 8px 0 rgba(90, 61, 53, .12);
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  letter-spacing: .04em;
}

.scene-meter b {
  min-width: 38px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--raspberry);
  color: var(--pearl);
}

.swatch-nav {
  position: fixed;
  z-index: 35;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
  padding: 14px 10px;
  border: 3px solid var(--cocoa);
  border-radius: 30px;
  background: rgba(255, 253, 244, .72);
  box-shadow: inset 0 0 0 3px rgba(255, 157, 183, .25), 0 12px 0 rgba(90, 61, 53, .10);
}

.swatch {
  width: 72px;
  border: 0;
  background: transparent;
  color: var(--cocoa);
  cursor: pointer;
  transition: transform .28s ease;
}

.swatch span {
  display: block;
  width: 50px;
  height: 42px;
  margin: 0 auto 3px;
  border: 3px solid var(--cocoa);
  border-radius: 18px 18px 8px 18px;
  box-shadow: inset 0 5px 0 rgba(255,255,255,.45), 0 5px 0 rgba(90, 61, 53, .14);
}

.swatch:nth-child(1) span { background: var(--pearl); }
.swatch:nth-child(2) span { background: repeating-linear-gradient(45deg, var(--mint) 0 10px, var(--buttercream) 10px 20px); }
.swatch:nth-child(3) span { background: repeating-linear-gradient(90deg, var(--strawberry) 0 8px, var(--pearl) 8px 16px); }
.swatch:nth-child(4) span { background: radial-gradient(circle at 28% 26%, var(--pearl) 0 8px, transparent 9px), var(--lilac); }
.swatch:nth-child(5) span { background: radial-gradient(circle, var(--lamp), var(--window)); }
.swatch em { font-family: "Gamja Flower", cursive; font-size: 18px; font-style: normal; }
.swatch.is-active { transform: translateX(-10px) rotate(-5deg) scale(1.05); }

.room-shell {
  position: absolute;
  left: 50%;
  top: 53%;
  width: min(1180px, 86vw);
  height: min(690px, 74vh);
  transform: translate(-50%, -50%) perspective(1100px) rotateX(2deg) rotateY(calc((var(--pointer-x) * .012deg)));
  transform-style: preserve-3d;
}

.wall {
  position: absolute;
  border: 5px solid var(--cocoa);
  background: var(--buttercream);
  box-shadow: inset 0 0 0 8px rgba(255, 253, 244, .6), 18px 28px 0 rgba(90, 61, 53, .12);
  overflow: hidden;
}

.wall-left {
  left: 8%;
  top: 10%;
  width: 45%;
  height: 62%;
  transform: skewY(-7deg);
  border-radius: 34px 8px 10px 34px;
}

.wall-right {
  right: 8%;
  top: 10%;
  width: 45%;
  height: 62%;
  transform: skewY(7deg);
  border-radius: 8px 34px 34px 10px;
}

.wallpaper-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  opacity: calc(var(--scene-progress) * 1.1);
  clip-path: inset(0 calc((1 - min(var(--scene-progress), .48) / .48) * 100%) 0 0 round 0 0 26px 0);
  background:
    radial-gradient(circle at 18px 18px, var(--strawberry) 0 4px, transparent 5px),
    radial-gradient(circle at 48px 48px, var(--lilac) 0 4px, transparent 5px),
    repeating-linear-gradient(0deg, rgba(255,253,244,.0) 0 24px, rgba(255,253,244,.62) 24px 28px),
    var(--mint);
  background-size: 66px 66px, 66px 66px, auto, auto;
}

.panel-a { left: 0; }
.panel-b { right: 0; transition-delay: .12s; }

.wallpaper-roll {
  position: absolute;
  left: 10%;
  top: 7%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(calc(var(--scene-progress) * 180px));
}

.wallpaper-roll i {
  width: 56px;
  height: 24px;
  border: 4px solid var(--cocoa);
  border-radius: 18px;
  background: repeating-linear-gradient(90deg, var(--mint) 0 12px, var(--pearl) 12px 24px);
}

.wallpaper-roll span, .wallpaper-label, .tag {
  font-family: "Gamja Flower", cursive;
  font-size: 23px;
}

.wallpaper-label {
  position: absolute;
  left: 50%;
  bottom: 12%;
  padding: 6px 13px;
  border: 2px solid var(--cocoa);
  border-radius: 999px;
  background: var(--pearl);
  opacity: clamp(0, calc((var(--scene-progress) - .16) * 6), 1);
  transform: rotate(-7deg) scale(clamp(.75, var(--scene-progress), 1));
}

.porthole {
  position: absolute;
  left: 12%;
  bottom: 20%;
  width: 115px;
  height: 115px;
  border: 5px solid var(--cocoa);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--pearl), var(--window));
  box-shadow: inset 0 -8px 0 rgba(183,156,255,.36);
}

.porthole span {
  position: absolute;
  right: -20px;
  top: 5px;
  font-family: "Gamja Flower", cursive;
  color: var(--raspberry);
  font-size: 32px;
}

.switch-plate {
  position: absolute;
  right: 10%;
  bottom: 18%;
  width: 62px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 4px solid var(--cocoa);
  border-radius: 24px;
  background: var(--pearl);
}

.switch-plate i { width: 20px; height: 14px; border-radius: 10px; background: var(--lamp); border: 2px solid var(--cocoa); }

.window-box {
  position: absolute;
  top: 14%;
  left: 18%;
  width: 245px;
  height: 185px;
}

.window-glass {
  position: absolute;
  inset: 32px 20px 0;
  border: 5px solid var(--cocoa);
  border-radius: 26px 26px 12px 12px;
  background:
    linear-gradient(90deg, transparent 48%, var(--cocoa) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, var(--cocoa) 49% 51%, transparent 52%),
    radial-gradient(circle at 50% 12%, rgba(255,253,244,.9), transparent 22%),
    linear-gradient(180deg, var(--window), var(--lilac));
  box-shadow: 0 0 calc(var(--scene-progress) * 46px) rgba(126,215,255,.76);
}

.window-glass span {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: "Gamja Flower", cursive;
  color: var(--pearl);
}

.curtain-rod {
  position: absolute;
  left: 0;
  top: 28px;
  width: 100%;
  height: 10px;
  border: 3px solid var(--cocoa);
  border-radius: 999px;
  background: var(--lamp);
  z-index: 4;
}

.curtain {
  position: absolute;
  top: 37px;
  z-index: 3;
  width: 58px;
  height: 145px;
  border: 4px solid var(--cocoa);
  background: repeating-linear-gradient(90deg, var(--strawberry) 0 11px, #FFFDF4 11px 17px);
  transform: scaleX(clamp(.15, calc((var(--scene-progress) - .26) * 4), 1));
  transform-origin: top center;
  border-radius: 10px 10px 28px 28px;
}

.curtain-left { left: 5px; }
.curtain-right { right: 5px; }

.scallop-valance { position: absolute; left: 28px; top: 8px; display: flex; z-index: 5; }
.scallop-valance i { width: 38px; height: 38px; border: 3px solid var(--cocoa); border-radius: 0 0 50% 50%; background: var(--strawberry); margin-left: -3px; }

.shelf {
  position: absolute;
  right: 9%;
  bottom: 23%;
  width: 210px;
  height: 86px;
  border-bottom: 9px solid var(--cocoa);
  transform: translateY(calc((1 - min(var(--scene-progress), .7) / .7) * 70px));
  opacity: clamp(0, calc((var(--scene-progress) - .34) * 4), 1);
}

.lace { position: absolute; left: 0; bottom: -20px; width: 100%; height: 22px; background: radial-gradient(circle at 10px 0, transparent 11px, var(--pearl) 12px); background-size: 28px 22px; }
.mushroom, .vanity, .knob { position: absolute; bottom: 10px; border: 3px solid var(--cocoa); }
.mushroom { left: 14px; width: 54px; height: 44px; border-radius: 48% 48% 18px 18px; background: var(--strawberry); }
.vanity { left: 86px; width: 56px; height: 70px; border-radius: 50%; background: radial-gradient(circle, var(--pearl), var(--window)); }
.knob { right: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--lamp); }

.closet-door {
  position: absolute;
  bottom: 4%;
  width: 108px;
  height: 136px;
  border: 4px solid var(--cocoa);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pearl), var(--buttercream));
  transform: rotateY(calc(clamp(0, (var(--scene-progress) - .58) * 4, 1) * -28deg));
  transform-origin: left;
  opacity: clamp(0, calc((var(--scene-progress) - .42) * 4), 1);
}
.left-door { left: 15%; }
.right-door { left: calc(15% + 112px); background: linear-gradient(135deg, var(--lilac), var(--pearl)); }
.closet-door span { display: block; padding: 14px; font-family: "Gamja Flower", cursive; font-size: 20px; }

.floor-plane {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 4%;
  height: 34%;
  border: 5px solid var(--cocoa);
  border-radius: 26px 26px 70px 70px;
  transform: perspective(800px) rotateX(58deg);
  transform-origin: bottom;
  background:
    linear-gradient(90deg, rgba(90,61,53,.08) 2px, transparent 2px),
    linear-gradient(0deg, rgba(90,61,53,.06) 2px, transparent 2px),
    #FFFDF4;
  background-size: 72px 72px;
  box-shadow: 0 34px 0 rgba(90, 61, 53, .12);
}

.rug {
  position: absolute;
  left: 34%;
  top: 18%;
  width: 285px;
  height: 142px;
  border: 5px solid var(--cocoa);
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, var(--strawberry) 0 12px, var(--pearl) 12px 22px, var(--mint) 22px 34px);
  transform: scale(clamp(.05, calc((var(--scene-progress) - .25) * 2.4), 1));
  opacity: clamp(0, calc((var(--scene-progress) - .22) * 5), 1);
}

.rug span { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Bagel Fat One", system-ui; font-size: 31px; color: var(--raspberry); transform: rotate(-3deg); }

.cushion {
  position: absolute;
  width: 100px;
  height: 82px;
  border: 5px solid var(--cocoa);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--strawberry), var(--pearl));
  box-shadow: inset -12px -10px 0 rgba(233, 63, 117, .16);
  transform: scale(clamp(.12, calc((var(--scene-progress) - .25) * 2.7), 1));
  transition: border-radius .4s ease;
}
.scene-textile .cushion, .scene-charms .cushion, .scene-glow .cushion { border-radius: 38px 26px 42px 24px; animation: puff 1.2s ease both; }
.cushion-one { left: 20%; top: 30%; }
.cushion-two { right: 19%; top: 42%; background: linear-gradient(135deg, var(--lilac), var(--pearl)); }
.cushion i { position: absolute; inset: 14px; border: 3px dashed rgba(90,61,53,.6); border-radius: inherit; }

.beads { position: absolute; display: flex; gap: 12px; }
.floor-beads { left: 20%; bottom: 10%; opacity: clamp(0, calc((var(--scene-progress) - .5) * 4), 1); }
.beads i, .garland i {
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--cocoa);
  border-radius: 50%;
  background: radial-gradient(circle at 28% 25%, var(--pearl), var(--lilac) 55%, var(--strawberry));
}

.hanging-sign {
  position: absolute;
  top: 3%;
  left: 50%;
  z-index: 12;
  transform: translateX(-50%) rotate(calc(var(--pointer-x) * .035deg));
  transform-origin: 50% -70px;
  animation: signBob 3.4s ease-in-out infinite;
}

.thread { position: absolute; top: -78px; width: 3px; height: 90px; background: var(--cocoa); transform-origin: top; }
.thread-left { left: 48px; transform: rotate(9deg); }
.thread-right { right: 48px; transform: rotate(-9deg); }

.plush-sign {
  min-width: 390px;
  padding: 16px 34px 20px;
  text-align: center;
  border: 5px solid var(--cocoa);
  border-radius: 42px 42px 30px 30px;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.7), transparent 18%),
    linear-gradient(180deg, var(--pearl), var(--strawberry));
  box-shadow: inset 0 -10px 0 rgba(233, 63, 117, .22), 0 12px 0 rgba(90, 61, 53, .13);
  font-family: "Bagel Fat One", system-ui;
  font-size: clamp(42px, 5.8vw, 78px);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--raspberry);
  text-shadow: 3px 3px 0 var(--pearl), -2px 2px 0 var(--lamp);
}

.garland {
  position: absolute;
  z-index: 16;
  display: flex;
  gap: 16px;
  padding-top: 38px;
  transform-origin: 50% 0;
  opacity: clamp(0, calc((var(--scene-progress) - .52) * 4), 1);
}
.garland::before { content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 38px; border-top: 4px solid var(--cocoa); border-radius: 50%; }
.garland-back { top: 26%; right: 16%; transform: rotate(calc(-7deg + var(--pointer-x) * .02deg)); }
.garland-front { top: 16%; left: 14%; transform: rotate(calc(5deg + var(--pointer-x) * .025deg)); }

.acrylic-charm {
  position: absolute;
  z-index: 18;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 4px solid var(--cocoa);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,253,244,.8), rgba(183,156,255,.72));
  box-shadow: inset 10px 10px 0 rgba(255,255,255,.36), 0 12px 0 rgba(90, 61, 53, .13);
  font-family: "Bagel Fat One", system-ui;
  font-size: 40px;
  color: var(--raspberry);
  opacity: clamp(0, calc((var(--scene-progress) - .50) * 4), 1);
  overflow: hidden;
}
.acrylic-charm::after { content: ""; position: absolute; inset: -40% 70% -40% -60%; background: rgba(255,255,255,.55); transform: rotate(22deg) translateX(calc(var(--scene-progress) * 260px)); }
.heart { right: 12%; top: 47%; transform: rotate(calc(10deg + var(--pointer-x) * .03deg)); }
.star { left: 10%; top: 47%; border-radius: 50%; transform: rotate(calc(-11deg + var(--pointer-y) * .03deg)); }
.ribbon { right: 25%; top: 7%; width: 70px; height: 70px; transform: rotate(calc(-18deg + var(--pointer-x) * .03deg)); }

.mimi-sprite {
  position: absolute;
  z-index: 22;
  left: calc(20% + var(--scene-progress) * 48%);
  top: calc(68% - var(--scene-progress) * 34%);
  width: 82px;
  height: 62px;
  border: 4px solid var(--cocoa);
  border-radius: 55% 45% 55% 45%;
  background: var(--pearl);
  box-shadow: inset -8px -8px 0 rgba(255,157,183,.32), 0 9px 0 rgba(90,61,53,.12);
  transform: rotate(calc(-12deg + var(--scene-progress) * 24deg));
}
.mimi-sprite::before { content: ""; position: absolute; left: -54px; top: 31px; width: 62px; height: 3px; background: var(--cocoa); transform: rotate(18deg); }
.mimi-sprite i, .mimi-sprite b { position: absolute; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--cocoa); }
.mimi-sprite i { left: 28px; }
.mimi-sprite b { left: 49px; }
.mimi-sprite span { position: absolute; right: -23px; top: 19px; width: 36px; height: 28px; border: 4px solid var(--cocoa); border-radius: 70% 10% 70% 10%; background: var(--strawberry); transform: rotate(-24deg); }

.tap-stamp {
  position: absolute;
  z-index: 40;
  padding: 5px 12px;
  border: 3px solid var(--cocoa);
  border-radius: 999px 999px 999px 12px;
  background: var(--lamp);
  color: var(--raspberry);
  font-family: "Gamja Flower", cursive;
  font-size: 34px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 5px 5px 0 rgba(90, 61, 53, .15);
  animation: stampBurst .9s ease forwards;
}

.free-stamp { transform: translate(-50%, -50%) rotate(-8deg); }

.lamp-glow {
  position: absolute;
  inset: auto 11% 2% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 92, .84), rgba(255, 211, 92, 0) 68%);
  opacity: clamp(0, calc((var(--scene-progress) - .78) * 6), 1);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.prop-copy {
  position: fixed;
  left: 36px;
  bottom: 34px;
  z-index: 28;
  width: min(410px, calc(100vw - 150px));
}

.tag {
  display: none;
  margin: 0;
  padding: 12px 18px;
  border: 3px dashed var(--cocoa);
  border-radius: 18px;
  background: rgba(255, 253, 244, .86);
  box-shadow: 8px 8px 0 rgba(183, 156, 255, .25);
  font-size: clamp(24px, 3vw, 38px);
}
.scene-bare .bare-copy, .scene-wallpaper .wallpaper-copy, .scene-textile .textile-copy, .scene-charms .charms-copy, .scene-glow .glow-copy { display: block; animation: tagPop .46s cubic-bezier(.2,1.5,.5,1) both; }

.scroll-step {
  min-height: 104vh;
  display: grid;
  place-items: end start;
  padding: 0 0 9vh 7vw;
  pointer-events: none;
}
.scroll-step span {
  opacity: .08;
  font-family: "Bagel Fat One", system-ui;
  color: var(--cocoa);
  font-size: clamp(60px, 11vw, 160px);
}

.scene-glow .room-stage, .scene-glow .room-shell { filter: saturate(1.12); }
.scene-glow .plush-sign { background: linear-gradient(180deg, var(--pearl), var(--lamp)); box-shadow: 0 0 38px rgba(255,211,92,.55), inset 0 -10px 0 rgba(233,63,117,.12); }

@keyframes signBob { 0%,100% { margin-top: 0; } 50% { margin-top: 8px; } }
@keyframes puff { 0% { transform: scale(.7); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes tagPop { from { opacity: 0; transform: translateY(18px) rotate(-2deg) scale(.94); } to { opacity: 1; transform: translateY(0) rotate(-1deg) scale(1); } }
@keyframes stampBurst { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(.5); } 28% { opacity: 1; transform: translate(-50%, -50%) rotate(4deg) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -90%) rotate(-8deg) scale(.9); } }

@media (max-width: 780px) {
  .room-stage { min-height: 720px; }
  .room-shell { width: 980px; height: 620px; left: 47%; transform: translate(-50%, -50%) scale(.66); transform-origin: center; }
  .plush-sign { min-width: 330px; }
  .swatch-nav { right: 10px; transform: translateY(-50%) scale(.82); }
  .scene-meter { left: 12px; top: 12px; transform: scale(.86); transform-origin: left top; }
  .prop-copy { left: 14px; bottom: 18px; width: calc(100vw - 112px); }
}