@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,500;1,500&family=Caveat:wght@500&display=swap");

:root {
  --red: #b5121b;
  --dark: #5e0910;
  --cream: #fbf1f1;
  --script: "Great Vibes", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --hand: "Caveat", cursive;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
* {
  box-sizing: border-box;
  margin: 0;
}
html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--dark);
  font-family: var(--serif);
  color: #fff;
}
body {
  position: relative;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s,
    visibility 0.9s;
  background: radial-gradient(
    circle at 50% 30%,
    #c9202c,
    var(--red) 55%,
    var(--dark)
  );
}
.scene.active {
  opacity: 1;
  visibility: visible;
}
.scene > * {
  position: relative;
  z-index: 1;
}

.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 72px);
  line-height: 1.1;
  text-shadow: 0 2px 12px #0004;
}
.script.big {
  font-size: clamp(46px, 12vw, 100px);
}
.link {
  background: none;
  border: 0;
  color: inherit;
  font: italic 500 1.05rem var(--serif);
  text-decoration: underline;
  cursor: pointer;
  margin-top: 20px;
}
.back {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0));
  left: 16px;
  z-index: 5;
  border: 0;
  cursor: pointer;
  background: #0004;
  color: #fff;
  border-radius: 20px;
  padding: 6px 14px;
  font: italic 1rem var(--serif);
}

/* dekorasi gambar */
.deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px #0006);
}
.lily {
  width: min(36vw, 230px);
}
.l1 {
  top: -4%;
  left: -7%;
  rotate: 25deg;
}
.l2 {
  bottom: -5%;
  right: -7%;
  rotate: -155deg;
}
.balon {
  right: 4vw;
  bottom: 5vh;
  height: min(34vh, 280px);
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  50% {
    translate: 0 -14px;
  }
}

/* COVER */
#cover {
  background: var(--cream);
  color: var(--red);
  border: clamp(10px, 2.2vw, 22px) solid var(--red);
}
#cover h1 {
  margin-bottom: 3vh;
  text-shadow: none;
}
#cover .ceri {
  left: 4vw;
  bottom: 5vh;
  width: min(22vw, 130px);
  rotate: -10deg;
}
.env {
  width: min(78vw, 460px);
  box-shadow: 0 18px 40px #4a101088;
  transition:
    transform 0.9s,
    opacity 0.9s 0.2s;
}
.env img {
  display: block;
  width: 100%;
}
.env.open {
  transform: scale(1.12) rotate(-1.5deg);
  opacity: 0;
}
.seal {
  position: absolute;
  left: 50.9%;
  top: 55%;
  width: 17%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.seal::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 2px solid #f4dc8e;
  animation: ring 1.6s infinite;
}
@keyframes ring {
  from {
    scale: 0.85;
    opacity: 0.9;
  }
  to {
    scale: 1.4;
    opacity: 0;
  }
}
.cap {
  font-size: 0.9rem;
  margin-top: 3vh;
  font-style: italic;
}

/* HERO */
#hero {
  background:
    linear-gradient(#3f060bb3, #3f060b80),
    url(../assets/img/hero.jpg) center 30% / cover no-repeat,
    radial-gradient(circle at 50% 40%, #d02a36, var(--red) 50%, #3f060b);
}
#hero .date {
  letter-spacing: 0.25em;
  margin-bottom: 1vh;
}
#hero p {
  margin-top: 2vh;
  font-size: 1.1rem;
}
#hero .l1,
#hero .l2 {
  width: min(42vw, 300px);
}
#hero .balon {
  right: auto;
  left: 5vw;
}

/* GIFTS */
.row {
  display: flex;
  gap: clamp(14px, 5vw, 64px);
  align-items: flex-end;
  justify-content: center;
  margin-top: 5vh;
}
.item {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 10px;
  animation: float 3.4s ease-in-out infinite;
}
.item:nth-child(2) {
  animation-delay: -1.1s;
}
.item:nth-child(3) {
  animation-delay: -2.2s;
}
.item img {
  height: min(24vw, 170px);
  width: auto;
  max-width: 28vw;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px #0006);
}
.item:nth-child(3) img {
  height: min(30vw, 210px);
}
.lb {
  font: italic 1.05rem var(--serif);
  opacity: 0;
  transition: opacity 0.3s;
}
.item:hover .lb,
.item:focus-visible .lb {
  opacity: 1;
}
@media (hover: none) {
  .lb {
    opacity: 1;
  }
}

/* LETTER: kartu + elemen tambahan */
.stage {
  height: min(90dvh, calc(94vw * 1.78));
  aspect-ratio: 1144/2040;
}
.sheet {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  background: url(../assets/img/kertas.jpg) center/100% 100% no-repeat;
  box-shadow: 0 20px 50px #0008;
}
.scene.active .sheet {
  animation: rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes rise {
  from {
    translate: 0 70vh;
    rotate: 4deg;
  }
}
.txt {
  position: absolute;
  left: 14%;
  right: 20%;
  top: 21%;
  bottom: 22%;
  overflow: auto;
  text-align: left;
  font: 500 5.6cqw/1.3 var(--hand);
  color: #4a2a2a;
}
.txt h3 {
  font: 400 11cqw/1 var(--script);
  color: #8a1420;
  margin-bottom: 0.3em;
}
.txt p + p {
  margin-top: 0.7em;
}
.sign {
  text-align: right;
}
#letter .fx {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px #0007);
}
#letter .flo {
  z-index: 0;
  left: -6vw;
  top: -4dvh;
  height: 40dvh;
  scale: -1 1;
}
#letter .lil {
  z-index: 3;
  right: 0;
  bottom: 0;
  width: min(38vw, 300px);
}
#letter .stage .vin {
  z-index: 2;
  left: -9%;
  bottom: -6%;
  width: 48%;
}
.scene.active .fx {
  animation: pop 0.9s 0.5s both;
}
@keyframes pop {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}
@media (min-width: 900px) {
  #letter .flo {
    left: 0;
    top: 0;
    height: 100dvh;
  }
  #letter .lil {
    width: min(26vw, 360px);
  }
  #letter .stage .vin {
    left: -22%;
    width: 44%;
  }
}

.lab {
  margin-top: 2vh;
}

/* MEMORIES */
.hint {
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.85;
  margin-top: 4px;
}
.wall {
  position: relative;
  width: min(94vw, 640px);
  aspect-ratio: 640/470;
  margin-top: 2vh;
}
.pol {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 28%;
  rotate: var(--r);
  background: #fff;
  padding: 3% 3% 11%;
  box-shadow: 0 10px 20px #0006;
  cursor: pointer;
  transition: scale 0.25s;
}
.pol:hover,
.pol:focus-visible {
  scale: 1.07;
  z-index: 3;
  outline: none;
}
.pol img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #f3e6e6;
}
.pol::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 2.5%;
  width: clamp(0.8rem, 3vw, 1.1rem);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b5121b' d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.5 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.song-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  color: #fff;
  font: italic 1.05rem var(--serif);
  cursor: pointer;
  margin-top: 12px;
}
.vinyl.mini {
  width: 44px;
  aspect-ratio: 1;
  display: block;
}
.vinyl {
  border-radius: 50%;
  border: 0;
  animation: spin 6s linear infinite;
  background:
    radial-gradient(circle, var(--red) 0 16%, #111 17% 19%, transparent 20%),
    repeating-radial-gradient(#111 0 3px, #262626 4px 5px);
  box-shadow: 0 10px 24px #0007;
}
.disc {
  position: absolute;
  left: 44%;
  top: 50%;
  width: 24%;
  aspect-ratio: 1;
  cursor: pointer;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}

/* VIEWER */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  background: #2a050ae6;
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s,
    visibility 0.35s;
}
.viewer.on {
  opacity: 1;
  visibility: visible;
}
.vbox {
  width: min(76vw, 380px);
  background: #fff;
  padding: 14px 14px 20px;
  rotate: -2deg;
  box-shadow: 0 20px 50px #000a;
  transform: scale(0.85);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.viewer.on .vbox {
  transform: scale(1);
}
.vbox img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #f3e6e6;
}
.vbox figcaption {
  color: #5a1a20;
  font: 500 1.5rem/1.25 var(--hand);
  padding: 16px 4px 0;
  text-align: center;
}
.vn {
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
.vx {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0));
  right: 16px;
  background: #0005;
  border: 0;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
}

/* SONG */
.player {
  position: relative;
  width: min(94vw, 680px);
  height: min(46dvh, 340px);
  margin-top: 3vh;
}
.vinyl.big {
  position: absolute;
  left: -6%;
  top: 0;
  height: 100%;
  aspect-ratio: 1;
}
.yt {
  position: absolute;
  left: 30%;
  top: 12%;
  width: 60%;
  aspect-ratio: 16/9;
  background: #fff;
  padding: 6px;
  box-shadow: 0 10px 24px #0007;
}
.yt iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.notes {
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: 48px;
  color: #fff;
  filter: drop-shadow(0 0 8px #ffd27a);
}

/* COVER: dekorasi tambahan */
#cover {
  background: radial-gradient(circle at 50% 45%, #fffafa, var(--cream) 55%, #f1dcdc);
}
#cover .deco {
  filter: drop-shadow(0 8px 10px #5a101033);
}
#cover .l1 {
  top: -3%;
  left: -8%;
  width: min(34vw, 220px);
  rotate: 25deg;
}
#cover .ceri {
  left: auto;
  right: 6vw;
  top: 7vh;
  bottom: auto;
  width: min(20vw, 120px);
  rotate: 12deg;
  animation: sway 5s ease-in-out infinite;
}
#cover .balon {
  right: auto;
  left: 5vw;
  bottom: 4vh;
  height: min(26vh, 220px);
}
#cover .lk {
  right: 0;
  bottom: 0;
  width: min(34vw, 260px);
}
#cover .flo {
  display: none;
}
@keyframes sway {
  50% {
    rotate: 18deg;
  }
}

@media (min-width: 900px) {
  #cover .flo {
    display: block;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
  }
  #cover .lk {
    display: none;
  }
  #cover .l1 {
    width: min(20vw, 280px);
  }
  #cover .ceri {
    right: auto;
    left: 16vw;
    top: auto;
    bottom: 8vh;
  }
}

/* TOMBOL MUSIK */
.mute {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0));
  right: 16px;
  z-index: 30;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #fffa;
  background: #5e0910b3;
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}
.heart-icon {
  fill: currentColor;
  stroke: none;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.15em;
}
.sparkle-icon {
  fill: currentColor;
  stroke: none;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.2em;
  filter: drop-shadow(0 0 5px #ffd27a);
}
.wind-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.35em;
}
.lock .icon {
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.25em;
}
.back .icon,
.vn .icon,
.vx .icon,
.vmx .icon {
  width: 1.2em;
  height: 1.2em;
}
.notes .icon {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
  stroke: none;
}
.mute .icon {
  width: 1.2em;
  height: 1.2em;
}
.mute[hidden] {
  display: none;
}
.mute.on {
  animation: beat 1.6s ease-in-out infinite;
}
.mute.off::after {
  content: "";
  position: absolute;
  width: 62%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  rotate: -45deg;
}
@keyframes beat {
  50% {
    scale: 1.1;
  }
}
.vx {
  right: 66px;
}

/* GIFTS: dekorasi tambahan */
#gifts .deco {
  filter: drop-shadow(0 8px 12px #0006);
}
#gifts .l1 {
  top: -3%;
  left: -8%;
  width: min(32vw, 210px);
  rotate: 25deg;
}
#gifts .kupu {
  top: 2dvh;
  right: 3vw;
  width: min(34vw, 230px);
  animation: flutter 6s ease-in-out infinite;
}
#gifts .dl {
  left: -3vw;
  bottom: -2dvh;
  width: min(42vw, 270px);
}
#gifts .kam {
  right: 4vw;
  bottom: 5dvh;
  width: min(34vw, 230px);
  rotate: -8deg;
  animation: sway2 5s ease-in-out infinite;
}
#gifts .flo {
  display: none;
}
@keyframes flutter {
  50% {
    translate: -8px 12px;
    rotate: 3deg;
  }
}
@keyframes sway2 {
  50% {
    rotate: -3deg;
  }
}

@media (min-width: 900px) {
  #gifts .flo {
    display: block;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
  }
  #gifts .kupu {
    right: 20vw;
    width: min(18vw, 240px);
  }
  #gifts .kam {
    right: 18vw;
    width: min(16vw, 230px);
  }
  #gifts .dl {
    width: min(22vw, 300px);
  }
  #gifts .l1 {
    width: min(15vw, 230px);
  }
}

/* kupu-kupu pindah ke kiri */
#gifts .kupu {
  right: auto;
  left: 24vw;
  top: 2dvh;
  width: min(32vw, 220px);
}

@media (min-width: 900px) {
  #gifts .kupu {
    left: 12vw;
    top: 5dvh;
    width: min(14vw, 200px);
  }
}

/* TOMBOL + MODAL VIDEO */
.play-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  position: relative;
  flex: none;
  animation: ppulse 1.8s ease-in-out infinite;
}
.play-ico::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
@keyframes ppulse {
  50% {
    scale: 1.1;
  }
}

.vmodal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #1c0306f2;
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s,
    visibility 0.35s;
}
.vmodal.on {
  opacity: 1;
  visibility: visible;
}
.vframe {
  width: min(94vw, 860px);
  aspect-ratio: 16/9;
  background: #000;
  border: 6px solid #fff;
  box-shadow: 0 20px 60px #000b;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.vmodal.on .vframe {
  transform: scale(1);
}
.vframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.vmx {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0));
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #ffffff33;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

/* MEMORIES: dekorasi */
#memories .deco {
  filter: drop-shadow(0 8px 12px #0006);
}
#memories .l1 {
  top: -3%;
  left: -8%;
  width: min(30vw, 200px);
  rotate: 25deg;
}
#memories .kupu {
  top: 2dvh;
  right: 3vw;
  width: min(30vw, 200px);
  animation: flutter 6s ease-in-out infinite;
}
#memories .vk {
  left: -4vw;
  bottom: 2dvh;
  width: min(40vw, 230px);
}
#memories .dl {
  right: -3vw;
  bottom: -2dvh;
  width: min(34vw, 220px);
}
#memories .flo {
  display: none;
}
.wall .ceri2 {
  position: absolute;
  right: -5%;
  top: -11%;
  width: 15%;
  rotate: 14deg;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px #0006);
  animation: tilt 5s ease-in-out infinite;
}
@keyframes tilt {
  50% {
    rotate: 20deg;
  }
}

@media (min-width: 900px) {
  #memories .flo {
    display: block;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
  }
  #memories .l1 {
    width: min(15vw, 230px);
  }
  #memories .kupu {
    right: auto;
    left: 16vw;
    top: 4dvh;
    width: min(13vw, 190px);
  }
  #memories .vk {
    left: 7vw;
    bottom: auto;
    top: 34dvh;
    width: min(15vw, 220px);
  }
  #memories .dl {
    right: auto;
    left: -2vw;
    bottom: -2dvh;
    width: min(22vw, 300px);
  }
}

/* GIFTS: 4 item + gembok */
.row {
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 10px;
    justify-items: center;
  }
  .item img {
    height: min(26vw, 130px);
    max-width: 40vw;
  }
}
.lock {
  font: italic 0.9rem var(--serif);
  opacity: 0.9;
}
.item.locked img {
  filter: grayscale(0.7) brightness(0.65) drop-shadow(0 10px 12px #0006);
}
.item.ready {
  animation: glow 1.6s ease-in-out infinite;
}
@keyframes glow {
  50% {
    translate: 0 -10px;
    filter: drop-shadow(0 0 18px #ffd27a);
  }
}
.item.shake {
  animation: shake 0.45s;
}
@keyframes shake {
  25% {
    translate: -8px 0;
  }
  75% {
    translate: 8px 0;
  }
}

/* CAKE */
#cake {
  background: radial-gradient(circle at 50% 45%, #5a0a14, #1c0306 72%);
}
#cake .l1 {
  width: min(26vw, 200px);
}
#cake .kupu {
  top: 2dvh;
  right: 3vw;
  width: min(26vw, 190px);
  animation: flutter 6s ease-in-out infinite;
}
.wish {
  font: italic 1.5rem/1.3 var(--serif);
  text-shadow: 0 0 14px #ffd27a88;
  animation: fadein 1.2s both;
}
.wish small {
  font-size: 1rem;
  opacity: 0.8;
}
@keyframes fadein {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}
.cakebox {
  position: relative;
  width: min(74vw, 44dvh, 420px);
  margin-top: clamp(40px, 9dvh, 80px);
}
.kue {
  display: block;
  width: 100%;
  filter: drop-shadow(0 16px 24px #000a);
}
.candle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3.4%;
  aspect-ratio: 1/6;
  translate: -50% -100%;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 0 1px #0003;
  background: repeating-linear-gradient(135deg, #fff 0 5px, #d83a4a 5px 10px);
}
.flame {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 230%;
  aspect-ratio: 1/1.7;
  translate: -50% 8%;
  border-radius: 50% 50% 50% 50%/62% 62% 38% 38%;
  transform-origin: 50% 90%;
  background: radial-gradient(ellipse at 50% 75%, #fff6c8 0 18%, #ffc83d 45%, #ff7a18 80%, transparent 100%);
  filter: drop-shadow(0 0 8px #ffb347) drop-shadow(0 0 18px #ff9a2e);
  animation: flick 0.5s ease-in-out infinite alternate;
  transition: opacity 0.25s, scale 0.25s;
}
@keyframes flick {
  from {
    rotate: -4deg;
    scale: 1 1;
  }
  to {
    rotate: 4deg;
    scale: 0.92 1.08;
  }
}
.smoke {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 200%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(#ffffffaa, transparent 70%);
  opacity: 0;
}
.candle.out .flame {
  opacity: 0;
  scale: 0.2;
}
.candle.out .smoke {
  animation: smoke 2.2s ease-out;
}
@keyframes smoke {
  from {
    opacity: 0.9;
    translate: -50% 0;
    scale: 0.5;
  }
  to {
    opacity: 0;
    translate: -30% -260%;
    scale: 2.2;
  }
}
.blow {
  margin-top: 22px;
  padding: 10px 26px;
  border-radius: 30px;
  border: 1.5px solid #fff;
  background: #ffffff1f;
  color: #fff;
  font: italic 1.1rem var(--serif);
  cursor: pointer;
}
.final {
  display: none;
  margin-top: 18px;
}
.final p {
  font-size: 1.1rem;
  margin-top: 6px;
}
#cake.done .wish,
#cake.done .blow {
  display: none;
}
#cake.done .final {
  display: block;
  animation: fadein 1.2s both;
}
#cake #confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* GIFTS: kado pembuka */
#gifts .giftwrap {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.giftbox {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 14px 22px #0008) drop-shadow(0 0 16px #ffd27a55);
  animation: wobble 2.4s ease-in-out infinite;
}
.giftbox img {
  display: block;
  width: min(48vw, 260px);
}
@media (min-width: 900px) {
  .giftbox img {
    width: min(32vw, 320px);
  }
}
@keyframes wobble {
  0%,
  100% {
    rotate: -3deg;
    translate: 0 0;
  }
  50% {
    rotate: 3deg;
    translate: 0 -8px;
  }
}
.giftbox.shake {
  animation: rattle 0.65s both;
}
@keyframes rattle {
  0% {
    rotate: 0;
    scale: 1;
  }
  15% {
    rotate: -9deg;
  }
  30% {
    rotate: 9deg;
    scale: 1.06;
  }
  45% {
    rotate: -11deg;
  }
  60% {
    rotate: 11deg;
    scale: 1.12;
  }
  80% {
    rotate: -6deg;
    scale: 1.18;
  }
  100% {
    rotate: 0;
    scale: 1.24;
  }
}
.gift-hint {
  font: italic 1.25rem/1.3 var(--serif);
  text-shadow: 0 2px 10px #0006;
  transition: opacity 0.3s;
}
.gift-hint small {
  font-size: 0.95rem;
  opacity: 0.85;
}
.giftwrap.gone {
  opacity: 0;
  scale: 1.4;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s, scale 0.35s, visibility 0.35s;
}

/* 4 hadiah tersembunyi sampai kado dibuka */
#gifts .reveal {
  opacity: 0;
  visibility: hidden;
}
#gifts.opened .reveal {
  opacity: 1;
  visibility: visible;
}
.row .item:nth-child(1) {
  --i: 0;
}
.row .item:nth-child(2) {
  --i: 1;
}
.row .item:nth-child(3) {
  --i: 2;
}
.row .item:nth-child(4) {
  --i: 3;
}
#gifts.opened .reveal h2 {
  animation: popin 0.6s 0.25s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
#gifts.opened .item:not(.ready):not(.shake) {
  animation:
    popin 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) backwards,
    float 3.4s ease-in-out infinite;
  animation-delay: calc(0.5s + var(--i) * 0.16s), calc(1.6s + var(--i) * 0.3s);
}
@keyframes popin {
  from {
    opacity: 0;
    scale: 0.3;
    translate: 0 50px;
  }
}
#gifts #gconf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

/* FLOWER: dekorasi */
#flower .deco {
  filter: drop-shadow(0 8px 12px #0006);
}
#flower .l1 {
  top: -3%;
  left: -8%;
  width: min(26vw, 180px);
  rotate: 25deg;
}
#flower .kupu {
  top: 2dvh;
  right: 3vw;
  width: min(28vw, 190px);
  animation: flutter 6s ease-in-out infinite;
}
#flower .dl {
  left: -3vw;
  bottom: -2dvh;
  width: min(36vw, 230px);
}
#flower .flo {
  display: none;
}
@media (min-width: 900px) {
  #flower .flo {
    display: block;
    right: 0;
    top: 0;
    height: 100%;
    width: auto;
  }
  #flower .l1 {
    width: min(15vw, 230px);
  }
  #flower .kupu {
    right: auto;
    left: 16vw;
    top: 4dvh;
    width: min(13vw, 190px);
  }
  #flower .dl {
    width: min(22vw, 300px);
  }
}

/* FLOWER: buket + kartu pujian */
.cardslot {
  display: grid;
  place-items: center;
  width: min(86vw, 420px);
  height: clamp(86px, 14dvh, 120px);
}
.fcard {
  padding: 12px 20px;
  border: 1px solid #fff8;
  border-radius: 12px;
  background: #ffffff1c;
  backdrop-filter: blur(3px);
  font: italic 1.2rem/1.35 var(--serif);
  text-shadow: 0 2px 8px #0005;
  opacity: 0;
}
.fcard.hint {
  opacity: 1;
  animation: hintpulse 1.8s ease-in-out infinite;
}
.fcard.show {
  animation: cardin 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes hintpulse {
  50% {
    scale: 1.05;
    opacity: 0.75;
  }
}
@keyframes cardin {
  from {
    opacity: 0;
    scale: 0.8;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
.bloom {
  position: relative;
  width: min(62vw, 38dvh, 340px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.bq {
  display: block;
  width: 100%;
  filter: drop-shadow(0 14px 18px #0007);
  animation: float 4s ease-in-out infinite;
}
.bloom:hover .bq {
  filter: drop-shadow(0 14px 18px #0007) drop-shadow(0 0 16px #ffd27a88);
}
.bloom.pop {
  animation: bpop 0.5s;
}
@keyframes bpop {
  40% {
    scale: 1.1;
    rotate: -2deg;
  }
  70% {
    scale: 0.97;
    rotate: 2deg;
  }
}
.fdots {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.fdots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff55;
  transition: all 0.3s;
}
.fdots i.seen {
  background: #ffd27a;
}
.fdots i.on {
  background: #fff;
  scale: 1.4;
}

/* FLOWER: kelopak */
#flower .petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.petal {
  position: absolute;
  width: var(--s);
  height: calc(var(--s) * 1.35);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, var(--c), #d8304a);
  box-shadow: 0 2px 4px #0004;
}
.petal.fall {
  animation: pfall var(--dur) linear forwards;
}
@keyframes pfall {
  from {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
  8% {
    opacity: 0.9;
  }
  to {
    opacity: 0.9;
    translate: var(--sw) 115dvh;
    rotate: var(--rot);
  }
}
.petal.burst {
  animation: pburst 1.8s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes pburst {
  0% {
    opacity: 0;
    translate: 0 0;
    scale: 0.4;
  }
  10% {
    opacity: 1;
  }
  40% {
    translate: var(--ux) var(--uy);
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: var(--dx) var(--dy);
    rotate: var(--rot);
  }
}

/* COVER: beruang + penataan ulang */
#cover .bear {
  left: 2vw;
  right: auto;
  bottom: 1dvh;
  top: auto;
  width: min(34vw, 200px);
  transform-origin: 50% 100%;
  animation: bearbob 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px #5a101040);
}
@keyframes bearbob {
  50% {
    rotate: 2.5deg;
    translate: 0 -4px;
  }
}

#cover .ceri {
  left: 44vw;
  right: auto;
  top: auto;
  bottom: 3dvh;
  width: min(15vw, 90px);
  rotate: -10deg;
  animation: cjig 5s ease-in-out infinite;
}
@keyframes cjig {
  50% {
    rotate: -4deg;
  }
}

@media (min-width: 900px) {
  #cover .bear {
    left: 6vw;
    width: min(18vw, 270px);
    bottom: 0;
  }
  #cover .ceri {
    left: 25vw;
    top: auto;
    bottom: 6dvh;
    width: min(8vw, 110px);
  }
}