/* ===== Base ===== */
:root{
  --bg:#0e0e16;
  --bg-soft:#14151e;
  --text:#f4efe9;
  --muted:#cbb89a;
  --gold1:#f3c98a; --gold2:#d9a965;
  --rose:#f0cadd;
}
*{box-sizing:border-box}
html,body{height:100%; width:100%}
body{
  margin:0; overflow-x:hidden; /* cegah menjorok kanan */
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
  color:var(--text); background:var(--bg);
}

/* ===== Hero ===== */
.hero{
  position:relative; min-height:92vh;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, #0b0b14, #12131c 40%, #0e0e16);
  display:grid; place-items:center;
  overflow:hidden;
}
.hero .overlay { position:absolute; inset:0; overflow:hidden; }
.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:grayscale(30%);
  opacity:.18;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce){
  .bg-video{ display:none; }
}
#stars{position:absolute; inset:0; pointer-events:none; opacity:.6}
.hero-inner{position:relative; text-align:center; padding:24px; max-width:920px; z-index:2}
.eyebrow{opacity:.9; color:var(--muted); margin:0 0 6px; font-weight:500}
.title{font-family:'Playfair Display',serif; font-size:clamp(34px,9vw,64px); margin:.1em 0 .2em; letter-spacing:.5px}
.subtitle{margin:0 0 18px; opacity:.92}

.timebox{
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(25,25,35,.55), rgba(25,25,35,.45));
  backdrop-filter: blur(3px);
}

.timebox .label{font-size:13px; color:var(--muted); margin-bottom:6px}
.counter{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:baseline}
.counter span{font-weight:700; font-size:clamp(18px,7vw,30px)}
.counter small{color:var(--muted); margin-right:8px}

.music-btn{
  border:0; padding:10px 16px; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,var(--gold1),var(--gold2)); color:#111;
  font-weight:600; box-shadow:0 10px 26px rgba(255,204,128,.25);
}

/* ===== Sections ===== */
.section{padding:56px 18px}
.section-title{font-family:'Playfair Display',serif; font-size:clamp(24px,7vw,40px); text-align:center; margin:0 0 6px}
.section-subtitle{text-align:center; margin:0 0 24px; color:var(--muted)}

/* ===== Responsive Gallery Grid ===== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3.5vw, 18px);
  align-items:start;
}
@media (min-width:600px){ .gallery-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.photo-card,.video-card{
  padding:10px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255, 226, 180, .06), rgba(255,255,255,.03));
  border:1px solid rgba(255,215,160,.14);
  box-shadow: 0 8px 26px rgba(0,0,0,.25);
}

.media-frame{
  width:100%;
  aspect-ratio:9/16; /* keep portrait */
  overflow:hidden; border-radius:14px;
  border:1px solid rgba(255,220,170,.18);
  background:#0b0b12;
}
.media-frame img,.media-frame video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.caption{ margin-top:8px; text-align:center; color:#e9dcc8; font-size:clamp(12px, 2.8vw, 14px); opacity:.92 }

@media (max-width:420px){
  .photo-card,.video-card{ padding:8px; border-radius:16px }
}

/* ===== Letter ===== */
.letter .love-note{
  text-align:center; max-width:820px; margin:0 auto;
  font-family:'Playfair Display',serif; font-size:clamp(18px, 4.8vw, 22px);
  line-height:1.55; color:#f2e6d5;
}

/* ===== Gift ===== */
/* ===== Premium Gift Box ===== */
/* ===== Deluxe Gift Box Overrides (tanpa ubah HTML) ===== */
.gift {
  position: relative;
  display: grid;
  place-items: center;
  gap: 18px;
}

/* panggung glow di belakang box */
.gift::before{
  content:"";
  position:absolute; width:min(88vw,520px); height:min(88vw,520px);
  border-radius:50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,220,160,.12), rgba(0,0,0,0) 60%);
  filter: blur(18px);
  z-index: 0;
}

.gift-box{
  --gold1:#f8e8c7; --gold2:#e7c17a; --gold3:#c89342;
  --edge:#9b6a2a; --ribbon:#7a4a12; --ribbon-hi:#c98a3a;
  width:min(70vw,320px); height:min(70vw,320px);
  position:relative; z-index:1; cursor:pointer;
  transform-style: preserve-3d;
  transition: transform .15s ease-out, filter .25s ease;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.35));
}

/* BODY dengan bevel + inner highlight */
.gift-box .body{
  position:absolute; inset:18% 12% 10%;
  border-radius:18px;
  background:
    linear-gradient(180deg, var(--gold1), var(--gold2) 60%, var(--gold3));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 10px 28px rgba(0,0,0,.25);
}
/* garis tepi halus */
.gift-box .body::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 30px rgba(255,255,255,.08);
  pointer-events:none;
}

/* LID dengan lip & bevel */
.gift-box .lid{
  position:absolute; left:12%; right:12%; top:12%; height:15%;
  border-radius:14px;
  background:
    linear-gradient(180deg, #f3d9a9, #e1b975 65%, #b47a2d);
  transform-origin: 50% 100%;
  transform: perspective(700px) rotateX(0deg);
  box-shadow:
    0 8px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .7s cubic-bezier(.2,.8,.1,1), box-shadow .4s ease;
}
/* lip tebal di bawah tutup */
.gift-box .lid::after{
  content:"";
  position:absolute; left:4%; right:4%; bottom:-8%;
  height:10px; border-radius:10px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
  filter: blur(.4px);
}

/* RIBBON: vertikal + garis horizontal otomatis */
.gift-box .ribbon{
  position:absolute; inset:12% 49% 10% 49%;
  background: linear-gradient(180deg, var(--ribbon-hi), var(--ribbon));
  border-radius:4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 12px rgba(0,0,0,.15);
}
/* Band pita horizontal melintang di tengah body */
.gift-box .ribbon::before{
  content:"";
  position:absolute;
  left:-50%; right:-50%;
  top:calc(100% + 6px);     /* geser ke area body (bukan dekat lid) */
  height:14px;
  border-radius:8px;
  background:linear-gradient(180deg,#dca45a,#8a5619);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.25);
  z-index:2;
}
/* Knot (pita kecil tegak di atas) */
.gift-box .ribbon::after{
  content:"";
  position:absolute;
  top:-26px; left:50%; transform:translateX(-50%);
  width:16px; height:26px; border-radius:8px;
  background:linear-gradient(180deg,#f3cf98,#c98a3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.2);
  z-index:4;
}

/* Kuping pita kiri/kanan (bow loops) */
.gift-box::before,
.gift-box::after{
  content:"";
  position:absolute; top:10%;
  width:62px; height:38px; z-index:3;
  background:linear-gradient(180deg,#f3cf98,#cc9246);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.18);
}
.gift-box::before{
  left:34%;
  border-radius:44px 44px 0 44px;
  transform:rotate(-18deg);
}
.gift-box::after{
  right:34%;
  border-radius:44px 44px 44px 0;
  transform:rotate(18deg);
}


/* SHIMMER diagonal tipis di body */
.gift-box .body::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  background: linear-gradient(120deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 35% 65%, rgba(255,255,255,.15) 100%);
  mix-blend-mode: soft-light; opacity:.35;
  transform: translateX(-120%) rotate(8deg);
  transition: transform .9s ease;
}
/* trigger shimmer via class */
.gift-box .body.shine-once::after{
  transform: translateX(0) rotate(8deg);
}

.gift-box:hover .body::after{ transform: translateX(0) rotate(8deg); }

/* GLOW saat open */
.gift-box .glow{
  position:absolute; inset:-4%; border-radius:22px;
  box-shadow: 0 0 0 rgba(255,220,170,0);
  transition: box-shadow .5s ease, filter .5s ease;
}
.gift-box.open .lid{
  transform: perspective(700px) rotateX(-72deg) translateZ(2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.75);
}
.gift-box.open .glow{
  box-shadow: 0 0 90px rgba(253,224,170,.55), 0 0 130px rgba(253,224,170,.33);
  filter: blur(1.5px);
}

/* sedikit tilt biar hidup */
.gift-box:hover{ transform: translateY(-2px) rotateX(2deg) rotateY(-2deg); }

/* tombol klaim muncul smooth (kalau dipakai) */
.claim-btn{ opacity:0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.claim-btn.show{ opacity:1; transform: translateY(0) }


/* ===== Confetti Canvas ===== */
#confettiCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:0; transition: opacity .2s ease;
}
#confettiCanvas.show{ opacity:1 }

/* hormati preferensi user */
@media (prefers-reduced-motion: reduce){
  .gift-box, .gift-box .lid, .claim-btn { transition:none !important }
}

.claim-btn{ display:block; border:0; padding:10px 16px; border-radius:12px; background:linear-gradient(135deg,var(--gold1),var(--gold2)); color:#111; font-weight:600 }


/* ===== Footer ===== */
.footer{ padding:30px 16px; text-align:center; color:#cbb89a; opacity:.9 }

/* ===== Fade-in on scroll ===== */
.fade{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease }
.fade.show{ opacity:1; transform: translateY(0) }

/* ===== Opening / Gate Screen ===== */
body.locked{ overflow:hidden }
.intro{
  position:fixed; inset:0; display:grid; place-items:center;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.08), transparent 60%),
              linear-gradient(180deg, rgba(15,15,24,.96), rgba(10,10,16,.98));
  z-index:9999; opacity:0; pointer-events:none; transition:opacity .45s ease;
  backdrop-filter:blur(2px);
}
.intro.show{ opacity:1; pointer-events:auto }
.intro-card{
  width:min(92vw,520px); background:rgba(19,19,28,.75);
  border:1px solid rgba(255,215,160,.25); border-radius:20px;
  padding:28px 22px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  animation:pop-in .5s ease both;
}
@keyframes pop-in{ from{ transform:translateY(10px) scale(.98); opacity:.7 } to{ transform:translateY(0) scale(1); opacity:1 } }
.intro-card h1{
  font-family:"Great Vibes","Playfair Display",serif;
  font-size:clamp(36px,8vw,54px); line-height:1.05; margin:0 0 8px; color:#f7e8c9;
  text-shadow:0 6px 30px rgba(255,210,150,.25);
}
.intro-card p{ margin:0 0 18px; color:#e7d7c6; font-size:clamp(14px, 2.9vw, 16px); opacity:.9 }
.btn-enter{ display:inline-block; border:0; padding:12px 22px; border-radius:999px;
  background:linear-gradient(135deg,var(--gold1),var(--gold2)); color:#14131c; font-weight:600;
  font-size:15px; letter-spacing:.2px; box-shadow:0 10px 26px rgba(255,204,128,.25); cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-enter:hover{ transform: translateY(-1px); box-shadow:0 12px 30px rgba(255,204,128,.32) }
.hint{ display:block; color:#cbb89a; opacity:.9; margin-top:10px }
/* ===== Lightbox (minimal, tidak full-screen) ===== */
#lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9998;
}
#lightbox.show{ display:flex }
#lightbox .lb-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
#lightbox .lb-frame{ position:relative; z-index:1; }
#lightbox .lb-media{
  max-width:min(90vw,540px); max-height:85vh; border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.35); display:block;
}
#lightbox .lb-close{
  position:absolute; top:-10px; right:-10px; width:36px; height:36px;
  border-radius:999px; border:0; cursor:pointer; font-size:22px; line-height:1;
  background:#fff; color:#111;
}

/* --- Anti 'menjorok ke kanan' hard-fix --- */
html, body { width:100%; overflow-x: clip; } /* clip lebih aman dari hidden utk iOS/Chrome */

.hero { overflow: visible; } /* jangan potong isi hero */
.hero-inner {
  margin-inline: auto;
  width: min(100%, 920px);               /* pastikan ga melebar */
  padding-inline: clamp(16px, 4vw, 24px);/* buffer aman sisi kanan */
}

/* Canvas bintang kadang bikin overflow di beberapa device */
#stars{
  display:block; /* default inline bisa bikin aneh */
  width:100% !important;
  height:100% !important;
  max-width:100vw;           /* jangan lebih dari viewport */
  inset:0; position:absolute; pointer-events:none; opacity:.6;
}

/* Kartu counter kadang melebar karena text + shadow */
.timebox{
  box-sizing:border-box;
  width:auto;                 /* jangan max-content */
  max-width: calc(100vw - 32px);  /* selalu muat dengan padding */
  margin-left:auto; margin-right:auto;
}

/* Jaga elemen besar lain tak melewati viewport */
.gallery-grid, .photo-card, .video-card, .media-frame { max-width:100%; }

/* Safe-area untuk notch & gesture bar */
:root { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
.hero-inner { padding-top: max(24px, var(--safe-top)); }
.footer { padding-bottom: max(30px, calc(16px + var(--safe-bottom))); }

/* Glassy premium touch */
.timebox{
  box-shadow: 0 12px 40px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(20,20,28,.55), rgba(20,20,28,.42));
}

/* Button premium glow */
.music-btn, .btn-enter, .claim-btn{
  box-shadow: 0 10px 26px rgba(255,204,128,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Lightbox: caption + nav */
#lightbox .lb-frame{ display:flex; flex-direction:column; align-items:center; gap:10px; }
#lightbox .lb-caption{
  max-width:min(90vw,540px); text-align:center; color:#f1e7d6;
  font-size:14px; line-height:1.4; opacity:.95;
}
#lightbox .lb-prev, #lightbox .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:0;
  background:rgba(255,255,255,.9); color:#111; font-weight:700; cursor:pointer;
}
#lightbox .lb-prev{ left:-14px }  /* tetap mini, tidak nutup layar */
#lightbox .lb-next{ right:-14px }

/* Parallax halus (hero tilt) */
.hero .overlay, #stars { will-change: transform; transition: transform .12s ease-out; }

/* Prefer-reduced-motion: hormati user */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* ===== Gift Popup Premium ===== */
.gift-popup{
  position: fixed; inset: 0; display: none; place-items: center;
  z-index: 10000;
}
.gift-popup.show{ display: grid; }

.gp-backdrop{
  position:absolute; inset:0;
  background: rgba(10,10,16,.62);
  backdrop-filter: blur(4px);
  animation: gpFade .25s ease both;
}

.gp-card{
  position: relative; width: min(92vw, 420px);
  border-radius: 18px; padding: 18px 16px 16px;
  background: linear-gradient(180deg, rgba(26,26,36,.82), rgba(20,20,30,.78));
  box-shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  color: #f5efe3; text-align: center;
  transform-origin: 50% -60%;
  animation: gpPop .45s cubic-bezier(.2,.7,.1,1) both;
}

.gp-close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:999px; border:0;
  background:#fff; color:#111; font-size:20px; cursor:pointer;
}

.gp-ribbon{
  position: absolute; top:-10px; left: 50%; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg, #f3c98a, #d9a965); color:#111;
  box-shadow: 0 8px 18px rgba(255,204,128,.25);
}

.gp-title{ margin: 16px 0 6px; font-family: 'Playfair Display', serif; font-size: 22px; }
.gp-text{ margin: 0 10px 14px; color: #e9dcc8; font-size: 14px; line-height: 1.5; }

.gp-cta{
  display:inline-block; text-decoration:none; cursor:pointer;
  padding: 10px 16px; border-radius: 12px; font-weight: 700;
  background: linear-gradient(135deg, #f3c98a, #d9a965); color:#111;
  box-shadow: 0 10px 26px rgba(255,204,128,.25), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.gp-cta:active{ transform: translateY(1px) }

.gp-note{ margin-top:10px; font-size: 12px; color:#cbb89a; opacity:.9 }

@keyframes gpPop{
  from{ transform: translateY(8px) scale(.96) rotateX(8deg); opacity: .6 }
  to{   transform: translateY(0)   scale(1)   rotateX(0);    opacity: 1  }
}
@keyframes gpFade{ from{ opacity: 0 } to{ opacity: 1 } }

/* Safe area untuk notch */
.gp-card{ padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* Sesuaikan posisi kuping pita & ukuran di HP kecil */
@media (max-width:420px){
  .gift-box::before{ left:32%; transform:rotate(-16deg); }
  .gift-box::after{ right:32%; transform:rotate(16deg); }
}
/* Box sedikit lebih lega di layar sempit */
@media (max-width:360px){
  .gift-box{ width:min(78vw,300px); height:min(78vw,300px); }
}
/* === GIFT BOX — FINAL DROP-IN (shape & stacking fix) === */

/* pastikan section gift tidak memangkas pseudo */
.gift{ overflow: visible; }

/* urutan layer */
.gift-box{ position:relative; z-index: 1; }
.gift-box .lid{ z-index: 5; }      /* tutup paling depan saat tertutup */
.gift-box .body{ z-index: 1; }
.gift-box .glow{ z-index: 0; }
.gift-box .ribbon{ z-index: 4; }   /* di atas lid (untuk knot), tapi band melintang di body → z-index diatur per pseudo */

/* BAND PITA HORIZONTAL — melintang tengah body */
.gift-box .ribbon::before{
  content:"";
  position:absolute;
  left:-60%; right:-60%;
  /* letakkan tepat di tengah tinggi body */
  top: calc(100% + ( (15% + 10%) / 2 ) - 7px); /* lid height 15%, bottom inset 10% → kira-kira pusat body */
  height:14px; border-radius: 8px;
  background: linear-gradient(180deg,#e9b56f,#8a5619);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.25);
  z-index: 2; /* di atas body, di bawah lid */
}

/* KNOT (benjolan pita tegak) */
.gift-box .ribbon::after{
  content:"";
  position:absolute;
  top:-26px; left:50%; transform:translateX(-50%);
  width:16px; height:26px; border-radius:8px;
  background:linear-gradient(180deg,#f3cf98,#c98a3a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.2);
  z-index:6; /* di atas lid */
}

/* KUPING PITA KIRI/ KANAN (bow loops) */
.gift-box::before,
.gift-box::after{
  content:"";
  position:absolute;
  top: calc(12% - 8px); /* sejajar tepi atas body */
  width:64px; height:40px;
  background:linear-gradient(180deg,#f3cf98,#cc9246);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.18);
  z-index:3; /* di depan body, di belakang lid */
}
.gift-box::before{
  left:32%;
  border-radius:44px 44px 0 44px;
  transform:rotate(-16deg);
}
.gift-box::after{
  right:32%;
  border-radius:44px 44px 44px 0;
  transform:rotate(16deg);
}

/* LID lebih “tutup” beneran: ada bibir/overhang */
.gift-box .lid{
  left:12%; right:12%; top:12%; height:15%;
  border-radius:14px;
  background: linear-gradient(180deg,#f3d9a9,#e1b975 65%,#b47a2d);
  transform-origin:50% 100%;
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7);
}
.gift-box .lid::after{
  content:""; position:absolute; left:4%; right:4%; bottom:-8%;
  height:10px; border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0));
}

/* BODY tetap 3D + shimmer (pakai yang sudah ada) */
.gift-box .body{
  inset:18% 12% 10%; border-radius:18px;
  background:linear-gradient(180deg,#f8e8c7,#e7c17a 60%,#c89342);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.25);
}
.gift-box .body::before{ content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 30px rgba(255,255,255,.08);
}
.gift-box .body::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  background:linear-gradient(120deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 35% 65%,rgba(255,255,255,.15) 100%);
  mix-blend-mode:soft-light; opacity:.35;
  transform:translateX(-120%) rotate(8deg);
  transition:transform .9s ease;
}
.gift-box:hover .body::after,
.gift-box.open .body::after{ transform:translateX(0) rotate(8deg); }

/* OPEN state dramatis */
.gift-box.open .lid{
  transform: perspective(700px) rotateX(-70deg) translateZ(2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.75);
}
.gift-box .glow{ position:absolute; inset:-4%; border-radius:22px; box-shadow:0 0 0 rgba(255,220,170,0); transition:box-shadow .5s, filter .5s; }
.gift-box.open .glow{ box-shadow:0 0 90px rgba(253,224,170,.55), 0 0 130px rgba(253,224,170,.33); filter:blur(1.5px); }