/* Kado kejutan (bersama untuk template ucapan ulang tahun; salinan induk di api/scripts/kado-kejutan/).
   Tiap template mengisi variabel --k-* (warna & font) di style.css-nya dan memilih satu bentuk wadah lewat kelas
   section: .kado-popper | .kado-balon | .kado-bintang | .kado-amplop | .kado-gosok | .kado-kaset | .kado-gacha |
   .kado-garasi | .kado-bendera. Tanpa JS wadahnya disembunyikan dan isi tiap kejutan tampil sebagai kartu. */
:where(.kado-sec, .kartu-kado) { --k-kertas: #fffaf2; --k-tinta: #2b2024; --k-aksen: #c2375f; --k-aksen2: #ffd56b; --k-judul: Georgia, serif; --k-teks: system-ui, sans-serif; --k-judul-tinta: currentColor;
  --k-tag: #ffffff; --k-tag-tinta: #2b2024; --k-latar: rgba(20, 10, 15, .62); --k-tombol-tinta: #ffffff; }
.kado-sec { position: relative; box-sizing: border-box; width: 100%; padding: 56px 22px 64px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.kado-sec *, .kartu-kado * { box-sizing: border-box; }
.kado-eyebrow { margin: 0; font: 700 12px/1.3 var(--k-teks); letter-spacing: .24em; text-transform: uppercase; color: var(--k-aksen); }
.kado-judul { margin: 0; font: var(--k-judul-w, 700) 32px/1.1 var(--k-judul); color: var(--k-judul-tinta); }
.kado-lead { display: none; margin: 0; font: 600 15px/1.45 var(--k-teks); opacity: .8; }
.js .kado-lead { display: block; }
.kado-grid { width: 100%; max-width: 420px; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; counter-reset: kado; }
.kado { counter-increment: kado; position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kado:nth-child(even) { translate: 0 18px; }
.kado:last-child:nth-child(odd) { grid-column: 1 / -1; width: 56%; justify-self: center; translate: none; }
.kotak { display: none; position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.js .kotak { display: block; }
.kotak:focus-visible { outline: 2px solid var(--k-aksen); outline-offset: 5px; border-radius: 14px; }
.wadah { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wadah i, .wadah b { position: absolute; display: block; }
.intip { position: absolute; z-index: 1; left: 50%; top: 46%; width: 62%; aspect-ratio: 1; object-fit: cover; translate: -50% -50%; border: 4px solid #fff; border-radius: 4px; box-shadow: 0 8px 18px rgba(0, 0, 0, .28); opacity: 0; scale: .5; rotate: -4deg;
  transition: opacity .35s ease .15s, scale .7s cubic-bezier(.3, 1.5, .5, 1) .15s, translate .7s cubic-bezier(.3, 1.5, .5, 1) .15s, rotate .7s ease .15s; }
.intip-x { position: absolute; z-index: 1; left: 50%; top: 46%; translate: -50% -50%; font-size: 40px; line-height: 1; opacity: 0; scale: .5; transition: opacity .35s ease .15s, scale .7s cubic-bezier(.3, 1.5, .5, 1) .15s; }
.kotak:has(.intip) .intip-x { display: none; }
.terbuka .intip, .terbuka .intip-x { opacity: 1; scale: 1; }
.tag { margin: 0; padding: 5px 13px 4px; max-width: 100%; border-radius: 999px; background: var(--k-tag); color: var(--k-tag-tinta); font: 700 14px/1.3 var(--k-teks); overflow-wrap: anywhere; box-shadow: 0 4px 12px rgba(0, 0, 0, .14); }
.terbuka .tag::after { content: " ✓"; color: var(--k-aksen); }
.cipratan { position: absolute; left: 50%; top: 42%; z-index: 6; width: 8px; height: 8px; border-radius: 50%; background: var(--c); pointer-events: none; animation: k-ciprat .9s cubic-bezier(.1, .7, .3, 1) both; }
.cipratan.bintang { border-radius: 0; width: 14px; height: 14px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.cipratan.pita { border-radius: 2px; width: 5px; height: 13px; }
.kado-semua { margin: 30px 0 0; font: var(--k-judul-w, 700) 20px/1.3 var(--k-judul); color: var(--k-aksen); position: relative; }
.kado-semua:empty { display: none; }

/* Isi: tanpa JS tampil sebagai kartu; dengan JS disalin ke dialog .kartu-kado. */
.isi { width: 100%; padding: 14px 12px 16px; border-radius: 14px; background: var(--k-kertas); color: var(--k-tinta); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }
.js .kado .isi { display: none; }
.polaroid { position: relative; margin: 0 auto 14px; width: 86%; padding: 9px 9px 30px; background: #fff; border-radius: 3px; rotate: -2deg; box-shadow: 0 14px 28px rgba(0, 0, 0, .22); }
.polaroid::before { content: ""; position: absolute; left: 50%; top: -11px; width: 72px; height: 22px; translate: -50% 0; rotate: 3deg; background: color-mix(in srgb, var(--k-aksen2) 80%, transparent); }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.isi-judul { margin: 0; font: var(--k-judul-w, 700) 25px/1.25 var(--k-judul); color: var(--k-aksen); overflow-wrap: anywhere; }
.isi-doa { margin: 8px 0 0; font: 500 16px/1.6 var(--k-teks); color: var(--k-tinta); white-space: pre-line; }
.kartu-kado { width: min(88vw, 380px); max-height: 92vh; padding: 28px 22px 22px; border: 0; border-radius: 24px; background: var(--k-kertas, #fffaf2); color: var(--k-tinta, #2b2024); text-align: center; overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.kartu-kado::backdrop { background: var(--k-latar, rgba(20, 10, 15, .62)); }
.kartu-kado[open] { animation: k-kartu .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.kartu-kado .isi { display: block; padding: 0; background: none; box-shadow: none; }
.kartu-kado .polaroid { animation: k-polaroid .8s .15s cubic-bezier(.3, 1.3, .5, 1) both; }
.kartu-tutup { margin-top: 18px; width: 100%; min-height: 50px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--k-aksen, #c2375f); color: var(--k-tombol-tinta, #fff); font: 700 16px/1 var(--k-teks, inherit); cursor: pointer; }
.kartu-tutup:focus-visible { outline: 3px solid var(--k-aksen2); outline-offset: 3px; }

/* ---------- Popper (ceria): terompet pesta bergaris; dibuka = pita & konfeti menyembur dari mulutnya. ---------- */
.kado-popper .wadah { rotate: 16deg; transform-origin: 50% 90%; transition: rotate .35s ease; }
.kado-popper .wadah i:nth-child(1) { left: 28%; top: 30%; width: 44%; height: 62%; clip-path: polygon(0 0, 100% 0, 54% 100%, 46% 100%);
  background: repeating-linear-gradient(120deg, var(--k-aksen) 0 9px, var(--k-aksen2) 9px 18px); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .05); }
.kado-popper .wadah i:nth-child(2) { left: 27%; top: 25%; width: 46%; height: 11%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--k-aksen) 45%, #000), color-mix(in srgb, var(--k-aksen) 70%, #000)); box-shadow: 0 0 0 3px #fff; }
.kado-popper .wadah i:nth-child(3) { left: 30%; top: 4%; width: 40%; height: 24%; border-radius: 40% 40% 10% 10%; transition: opacity .35s, translate .5s, scale .5s;
  background: radial-gradient(circle, var(--k-aksen2) 0 3px, transparent 3.5px) 0 0 / 11px 11px, radial-gradient(circle, var(--k-aksen) 0 2.5px, transparent 3px) 5px 6px / 11px 11px, radial-gradient(circle, #fff 0 2px, transparent 2.5px) 2px 8px / 9px 9px; }
.kado-popper .wadah b { left: 50%; bottom: 4%; width: 16%; height: 7%; translate: -50% 0; border-radius: 4px; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.kado-popper .buka .wadah { rotate: 0deg; }
.kado-popper .buka .wadah i:nth-child(3) { translate: 0 -70%; scale: 2.6; opacity: 0; }
.kado-popper .terbuka .wadah { opacity: .3; }
.kado-popper .intip { top: 36%; z-index: 3; }

/* ---------- Balon (kejutan): balon mengilap bertali; dibuka = membesar lalu meletus, foto turun di tempatnya. ---------- */
.kado-balon .kotak { aspect-ratio: 1 / 1.15; }
.kado-balon .wadah i:nth-child(1) { left: 18%; top: 2%; width: 64%; height: 70%; border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9) 0 7%, rgba(255, 255, 255, .25) 16%, transparent 32%), radial-gradient(circle at 50% 60%, var(--k-aksen) 40%, color-mix(in srgb, var(--k-aksen) 70%, #000)); box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .18); transition: scale .45s cubic-bezier(.3, 1.4, .5, 1), opacity .15s; }
.kado-balon .kado:nth-child(3n+2) .wadah { --k-aksen: var(--k-aksen-b, #3d7bff); }
.kado-balon .kado:nth-child(3n) .wadah { --k-aksen: var(--k-aksen-c, #ffb020); }
.kado-balon .wadah i:nth-child(2) { left: 46%; top: 70%; width: 8%; height: 5%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: color-mix(in srgb, var(--k-aksen) 70%, #000); }
.kado-balon .wadah i:nth-child(3) { left: 49.5%; top: 75%; width: 1.5px; height: 25%; background: currentColor; opacity: .5; transform-origin: 50% 0; }
.kado-balon .buka .wadah i:nth-child(1) { scale: 1.25; }
.kado-balon .terbuka .wadah i:nth-child(1), .kado-balon .terbuka .wadah i:nth-child(2) { opacity: 0; scale: 1.6; }
.kado-balon .intip { top: 38%; }

/* ---------- Bintang (galaksi): bintang bercahaya yang melayang; dibuka = menyala terang lalu jadi bingkai cahaya. ---------- */
.kado-bintang .wadah i:nth-child(1) { inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--k-aksen2) 55%, transparent), transparent); transition: scale .6s ease, opacity .6s ease; }
.kado-bintang .wadah i:nth-child(2) { left: 18%; top: 14%; width: 64%; height: 64%; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: radial-gradient(circle at 50% 45%, #fffbe8, var(--k-aksen2) 55%, color-mix(in srgb, var(--k-aksen2) 60%, #b87a1a)); transition: scale .6s cubic-bezier(.3, 1.5, .5, 1), opacity .4s ease .2s, rotate .6s ease; }
.kado-bintang .wadah i:nth-child(3) { left: 50%; top: 46%; width: 76%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--k-aksen2) 80%, #fff); box-shadow: 0 0 18px color-mix(in srgb, var(--k-aksen2) 70%, transparent), inset 0 0 14px color-mix(in srgb, var(--k-aksen2) 50%, transparent); opacity: 0; scale: .4; transition: opacity .5s ease .25s, scale .6s cubic-bezier(.3, 1.5, .5, 1) .25s; }
.kado-bintang .buka .wadah i:nth-child(2) { scale: 1.5; rotate: 72deg; opacity: 0; }
.kado-bintang .buka .wadah i:nth-child(1) { scale: 1.6; }
.kado-bintang .terbuka .wadah i:nth-child(3) { opacity: 1; scale: 1; }
.kado-bintang .terbuka .wadah i:nth-child(1) { opacity: .6; scale: 1.1; }
.kado-bintang .intip { width: 62%; border-radius: 50%; border-color: #fff8e0; z-index: 3; }

/* ---------- Amplop (konfeti): amplop bersegel emas; dibuka = segel lepas, tutup terbuka, foto naik dari dalam. ---------- */
.kado-amplop .kotak { aspect-ratio: 1 / .9; }
.kado-amplop .wadah i:nth-child(1) { left: 4%; right: 4%; bottom: 4%; height: 62%; border-radius: 8px; background: linear-gradient(160deg, var(--k-amplop, #f3cbb9), color-mix(in srgb, var(--k-amplop, #f3cbb9) 85%, #7a3d2a)); box-shadow: 0 12px 22px rgba(0, 0, 0, .18); }
.kado-amplop .wadah i:nth-child(1)::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(to top right, transparent 49.5%, rgba(0, 0, 0, .08) 50%, transparent 51%), linear-gradient(to top left, transparent 49.5%, rgba(0, 0, 0, .08) 50%, transparent 51%); }
.kado-amplop .wadah i:nth-child(2) { left: 4%; right: 4%; top: 34%; height: 40%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--k-amplop, #f3cbb9) 80%, #fff), var(--k-amplop, #f3cbb9)); transform-origin: 50% 0; transition: transform .5s ease .25s, z-index 0s .5s; z-index: 3; }
.kado-amplop .wadah b { left: 50%; top: 66%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 4; background: radial-gradient(circle at 35% 30%, #f6e2b1, #c99a52 55%, #8f6428); box-shadow: 0 3px 8px rgba(0, 0, 0, .3), inset 0 0 0 3px rgba(255, 240, 200, .35); transition: scale .3s ease, opacity .3s ease; }
.kado-amplop .wadah b::after { content: counter(kado); position: absolute; inset: 0; display: grid; place-items: center; color: #fff8e6; font: 700 15px/1 var(--k-judul); }
.kado-amplop .buka .wadah b { scale: 1.4; opacity: 0; }
.kado-amplop .buka .wadah i:nth-child(2) { transform: rotateX(180deg); z-index: 0; }
.kado-amplop .intip { top: 56%; width: 56%; z-index: 1; }
.kado-amplop .terbuka .intip { translate: -50% -104%; rotate: 3deg; }
.kado-amplop .wadah { z-index: auto; } .kado-amplop .wadah i:nth-child(1) { z-index: 2; }

/* ---------- Gosok (struk): kartu undian; lapisan perak digosok (kanvas dari kado.js) untuk melihat hadiahnya. ---------- */
.kado-gosok .kado-grid { grid-template-columns: 1fr; max-width: 300px; gap: 26px; }
.kado-gosok .kado:nth-child(even) { translate: none; } .kado-gosok .kado:last-child:nth-child(odd) { width: 100%; }
.kado-gosok .kotak { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--k-kertas); box-shadow: 0 0 0 2px var(--k-tinta), 0 10px 22px rgba(0, 0, 0, .3); touch-action: none; }
.kado-gosok .kotak::before { content: "HADIAH #" counter(kado); position: absolute; left: 0; right: 0; top: 0; padding: 5px; z-index: 1; font: 700 11px/1 var(--k-teks); letter-spacing: .2em; color: var(--k-kertas); background: var(--k-aksen); }
.kado-gosok .intip { top: 56%; width: auto; height: 66%; opacity: 1; scale: 1; rotate: 0deg; border-width: 3px; transition: none; }
.kado-gosok .intip-x { top: 56%; opacity: 1; scale: 1; transition: none; }
.lapis-gosok { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border-radius: 10px; cursor: crosshair; transition: opacity .5s ease; }
.lapis-gosok.habis { opacity: 0; pointer-events: none; }

/* ---------- Kaset (mixtape): kaset berlabel; dibuka = gulungan berputar, kaset turun, foto naik di belakangnya. ---------- */
.kado-kaset .kotak { aspect-ratio: 1 / .92; }
.kado-kaset .wadah i:nth-child(1) { left: 4%; right: 4%; bottom: 6%; height: 58%; border-radius: 10px; background: linear-gradient(180deg, var(--k-kaset, #1d2433), color-mix(in srgb, var(--k-kaset, #1d2433) 80%, #000)); box-shadow: 0 12px 22px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 255, 255, .08); transition: translate .5s ease; }
.kado-kaset .wadah i:nth-child(1)::before { content: ""; position: absolute; left: 8%; right: 8%; top: 10%; height: 34%; border-radius: 4px; background: repeating-linear-gradient(180deg, var(--k-kertas) 0 7px, color-mix(in srgb, var(--k-aksen) 25%, var(--k-kertas)) 7px 8px); }
.kado-kaset .wadah i:nth-child(1)::after { content: ""; position: absolute; left: 22%; right: 22%; top: 52%; height: 28%; border-radius: 999px; background: color-mix(in srgb, var(--k-kaset, #1d2433) 60%, #000); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.kado-kaset .wadah i:nth-child(2), .kado-kaset .wadah i:nth-child(3) { bottom: 18%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#fff 0 30deg, #d8d2c4 30deg 60deg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-kaset, #1d2433) 60%, #000); transition: translate .5s ease; }
.kado-kaset .wadah i:nth-child(2) { left: 27%; } .kado-kaset .wadah i:nth-child(3) { right: 27%; }
.kado-kaset .wadah b { left: 13%; right: 13%; top: 45%; color: var(--k-tinta); font: 700 9px/1 var(--k-teks); letter-spacing: .06em; text-align: left; white-space: nowrap; overflow: hidden; transition: translate .5s ease; }
.kado-kaset .wadah b::before { content: "SIDE A · TRACK " counter(kado); }
.kado-kaset .buka .wadah i:nth-child(2), .kado-kaset .buka .wadah i:nth-child(3) { animation: k-putar .5s linear infinite; }
.kado-kaset .terbuka .wadah i, .kado-kaset .terbuka .wadah b { translate: 0 22%; }
.kado-kaset .terbuka .wadah i:nth-child(2), .kado-kaset .terbuka .wadah i:nth-child(3) { animation: none; }
.kado-kaset .intip { top: 40%; z-index: 1; } .kado-kaset .terbuka .intip { translate: -50% -78%; rotate: 5deg; }

/* ---------- Gacha (mainan): kapsul dua warna; dibuka = belahan atas terlempar, foto melompat keluar. ---------- */
.kado-gacha .wadah i:nth-child(1) { left: 14%; top: 10%; width: 72%; height: 40%; border-radius: 999px 999px 0 0; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85) 0 8%, transparent 26%), var(--k-aksen); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); transform-origin: 90% 100%; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); z-index: 3; }
.kado-gacha .kado:nth-child(4n+2) .wadah i:nth-child(1) { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85) 0 8%, transparent 26%), var(--k-aksen-b, #2f6fed); }
.kado-gacha .kado:nth-child(4n+3) .wadah i:nth-child(1) { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85) 0 8%, transparent 26%), var(--k-aksen-c, #2a9d5c); }
.kado-gacha .kado:nth-child(4n+4) .wadah i:nth-child(1) { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85) 0 8%, transparent 26%), var(--k-aksen2, #ffd23f); }
.kado-gacha .wadah i:nth-child(2) { left: 14%; top: 50%; width: 72%; height: 40%; border-radius: 0 0 999px 999px; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7) 0 8%, transparent 26%), rgba(255, 255, 255, .78); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .08), 0 10px 18px rgba(0, 0, 0, .18); z-index: 2; }
.kado-gacha .wadah i:nth-child(3) { left: 12%; top: 47%; width: 76%; height: 6%; border-radius: 4px; background: color-mix(in srgb, var(--k-tinta) 80%, transparent); z-index: 4; transition: opacity .3s; }
.kado-gacha .buka .kotak { animation: k-getar .3s linear 2; }
.kado-gacha .buka .wadah i:nth-child(1) { transform: translate(18%, -55%) rotate(38deg); }
.kado-gacha .buka .wadah i:nth-child(3) { opacity: 0; }
.kado-gacha .intip { top: 56%; z-index: 1; width: 52%; } .kado-gacha .terbuka .intip { translate: -50% -108%; rotate: -6deg; }

/* ---------- Garasi (gaspol): pintu garasi bergulung; dibuka = rolling door naik, foto di dalam garasi tersorot. ---------- */
.kado-garasi .kotak { aspect-ratio: 1 / .95; }
.kado-garasi .wadah { overflow: hidden; border-radius: 6px 6px 2px 2px; box-shadow: inset 0 0 0 5px var(--k-bingkai, #38332d), 0 12px 22px rgba(0, 0, 0, .35); }
.kado-garasi .wadah i:nth-child(1) { left: 5px; right: 5px; top: 5px; bottom: 0; background: repeating-linear-gradient(180deg, var(--k-rolling, #b9bec6) 0 9px, color-mix(in srgb, var(--k-rolling, #b9bec6) 60%, #000) 9px 11px); transition: translate .9s cubic-bezier(.6, 0, .3, 1); }
.kado-garasi .wadah i:nth-child(2) { left: 50%; bottom: 10px; width: 22%; height: 6px; translate: -50% 0; border-radius: 3px; background: color-mix(in srgb, var(--k-rolling, #b9bec6) 40%, #000); transition: translate .9s cubic-bezier(.6, 0, .3, 1); }
.kado-garasi .wadah b { left: 0; right: 0; top: 30%; color: var(--k-aksen); font: 800 15px/1 var(--k-judul); letter-spacing: .12em; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); transition: translate .9s cubic-bezier(.6, 0, .3, 1); }
.kado-garasi .wadah b::before { content: "GARASI " counter(kado); }
.kado-garasi .buka .wadah i, .kado-garasi .buka .wadah b { translate: 0 -104%; }
.kado-garasi .buka .wadah b { translate: 0 -500%; }
.kado-garasi .wadah i:nth-child(2) { transition: opacity .3s ease; } .kado-garasi .buka .wadah i:nth-child(2) { opacity: 0; }
.kado-garasi .intip { left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 5px); aspect-ratio: auto; object-fit: cover; translate: none; rotate: 0deg; border: 0; border-radius: 2px; scale: 1; opacity: 1; transition: filter .6s ease .5s; filter: brightness(.2); }
.kado-garasi .terbuka .intip { filter: none; }
.kado-garasi .kotak::after { content: ""; position: absolute; inset: 5px 5px 0; z-index: 1; background: radial-gradient(ellipse 60% 70% at 50% 0, rgba(255, 230, 170, .35), transparent 70%); opacity: 0; transition: opacity .6s ease .6s; pointer-events: none; }
.kado-garasi .terbuka .kotak::after { opacity: 1; }
.kado-garasi .intip-x { opacity: 1; scale: 1; }

/* ---------- Bendera (rute): papan foto tertutup bendera finis kotak-kotak; dibuka = bendera dikibas lepas. ---------- */
.kado-bendera .kotak { aspect-ratio: 1 / .95; border-radius: 8px; overflow: hidden; background: var(--k-kertas); box-shadow: 0 0 0 3px var(--k-aksen), 0 12px 22px rgba(0, 0, 0, .35); }
.kado-bendera .kotak::before { content: "P" counter(kado); position: absolute; left: 6px; top: 6px; z-index: 3; padding: 3px 7px; border-radius: 4px; background: var(--k-aksen); color: #fff; font: 800 12px/1 var(--k-judul); }
.kado-bendera .wadah i:nth-child(1) { inset: -2%; border-radius: 6px; background: conic-gradient(var(--k-flag-a, #f5f6f8) 25%, var(--k-flag-b, #0a0b0f) 0 50%, var(--k-flag-a, #f5f6f8) 0 75%, var(--k-flag-b, #0a0b0f) 0) 0 0 / 22% 22%; box-shadow: inset 0 0 18px rgba(0, 0, 0, .35); transform-origin: 0 0; transition: transform .7s cubic-bezier(.5, 0, .3, 1), opacity .5s ease .25s; }
.kado-bendera .buka .wadah i:nth-child(1) { transform: translate(60%, -90%) rotate(28deg) skewX(-12deg) scale(.6); opacity: 0; }
.kado-bendera .intip { left: 7%; top: 7%; width: 86%; height: 86%; aspect-ratio: auto; object-fit: cover; translate: none; rotate: 0deg; border: 0; border-radius: 4px; scale: 1; opacity: 1; transition: none; }
.kado-bendera .intip-x { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .kado:not(.buka) .kotak { animation: k-goyang 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
  .js .kado:nth-child(2):not(.buka) .kotak { animation-delay: -.9s; } .js .kado:nth-child(3):not(.buka) .kotak { animation-delay: -1.8s; }
  .js .kado:nth-child(4):not(.buka) .kotak { animation-delay: -2.7s; } .js .kado:nth-child(5):not(.buka) .kotak { animation-delay: -.4s; }
  .js .kado:nth-child(6):not(.buka) .kotak { animation-delay: -2.2s; }
  .js .kado-balon .kado:not(.buka) .kotak, .js .kado-bintang .kado:not(.buka) .kotak { animation-name: k-melayang; }
  .js .kado-gosok .kado .kotak, .js .kado-garasi .kado .kotak { animation: none; }
  .kado-bintang .terbuka .wadah i:nth-child(3) { animation: k-kilau 2.4s ease-in-out infinite; }
  .kado-balon .wadah i:nth-child(3) { animation: k-ayun 2.6s ease-in-out infinite; }
}
@keyframes k-goyang { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -5deg; } 82% { rotate: 4deg; } 88% { rotate: -3deg; } 94% { rotate: 2deg; } }
@keyframes k-melayang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes k-ayun { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes k-kilau { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes k-putar { to { rotate: 360deg; } }
@keyframes k-getar { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: -4px 0; rotate: -4deg; } 75% { translate: 4px 0; rotate: 4deg; } }
@keyframes k-ciprat { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--r)); } }
@keyframes k-kartu { from { opacity: 0; scale: .6; rotate: -6deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes k-polaroid { from { opacity: 0; translate: 0 40px; rotate: 10deg; } to { opacity: 1; translate: 0 0; rotate: -2deg; } }
@media (prefers-reduced-motion: reduce) { .kado-sec *, .kartu-kado { animation: none !important; transition: none !important; } }