/* ============ Foxy & Co — unboxing demo ============ */
:root{
  --bg:#140a0d; --bg2:#2a0f18; --plum:#3a0f1e;
  --pink:#f2c4cf; --rose:#d4708a; --gold:#d8b46a; --gold-l:#f6e2ad; --gold-d:#9c7631;
  --red:#c3141f; --ink:#fbf2ee; --muted:#d9c3bf;
  --W:360px; --H:120px; --D:250px; --F:34px;   /* box size, set by app.js */
  --rx:-24deg; --ry:-16deg;
  --serif:"Playfair Display",Georgia,serif; --cinzel:"Cinzel","Playfair Display",serif;
  --sans:"Montserrat",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(120% 80% at 50% 0%, #3b1422 0%, var(--bg2) 35%, var(--bg) 75%);
  background-color:var(--bg);
  color:var(--ink); font-family:var(--sans); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; min-height:100svh;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- ambience ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.bokeh{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(circle at 8% 22%, rgba(255,196,120,.35) 0 18px, transparent 40px),
    radial-gradient(circle at 92% 18%, rgba(255,140,150,.28) 0 26px, transparent 52px),
    radial-gradient(circle at 85% 70%, rgba(255,210,140,.22) 0 14px, transparent 34px),
    radial-gradient(circle at 12% 78%, rgba(242,196,207,.22) 0 22px, transparent 46px),
    radial-gradient(circle at 50% 8%, rgba(255,220,160,.18) 0 10px, transparent 26px),
    radial-gradient(circle at 70% 40%, rgba(255,180,120,.12) 0 30px, transparent 70px);
  filter:blur(2px); animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(0,-14px,0) scale(1.04)}}

/* ---------- header ---------- */
.top{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:16px max(16px,env(safe-area-inset-left)) 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.crest{--s:44px;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 35% 30%, #fff3f5, var(--pink) 45%, var(--rose));
  box-shadow:0 0 0 2px var(--gold), 0 0 0 4px rgba(216,180,106,.25), 0 6px 16px rgba(0,0,0,.4)}
.crest span{font-family:var(--cinzel);font-weight:700;font-size:calc(var(--s)*.5);
  background:linear-gradient(180deg,var(--gold-l),var(--gold) 50%,var(--gold-d));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(90,30,40,.5))}
.wordmark b{display:block;font-family:var(--cinzel);font-weight:700;font-size:20px;letter-spacing:.06em;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sound{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(216,180,106,.4);color:var(--gold-l);background:rgba(0,0,0,.25)}
.sound[aria-pressed="false"] .wave{opacity:0}

/* ---------- intro ---------- */
main{position:relative;z-index:10}
.intro{text-align:center;padding:18px 16px 0;transition:opacity .6s, transform .6s}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.intro h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,6vw,52px);margin:6px 0 4px;line-height:1.1;transition:font-size .8s, margin .8s}
.intro .eyebrow{transition:opacity .5s, max-height .8s;max-height:20px;overflow:hidden}
body.open .intro{opacity:0;transform:translateY(-20px);pointer-events:none}
body.open .intro .eyebrow{opacity:0;max-height:0}
.hint{color:var(--muted);font-size:14px;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
body.open .hint{animation:none}

/* ---------- stage & box ---------- */
.stage{position:relative;height:calc(100svh - 150px);min-height:460px;max-height:calc(var(--W)*2.3);
  perspective:1500px;perspective-origin:50% 35%;display:flex;justify-content:center;align-items:flex-end;
  padding-bottom:calc(var(--H)*.9);touch-action:pan-y}
.lifter{position:relative;width:var(--W);height:var(--H);transform-style:preserve-3d;
  transform:translateY(calc(var(--W)*-.5)) scale(1.35);transition:transform 1.2s cubic-bezier(.6,0,.2,1)}
body.open .lifter{transform:none}
.box-wrap{position:relative;width:var(--W);height:var(--H);transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry))}
.box{position:absolute;inset:0;transform-style:preserve-3d;cursor:pointer;outline:none;
  animation:bob 4.5s ease-in-out infinite}
body.open .box{animation:none;cursor:default}
@keyframes bob{50%{transform:translateY(-10px)}}
.box:focus-visible .front{box-shadow:inset 0 0 0 3px var(--gold-l)}

.face{position:absolute;left:0;top:0;width:var(--W);height:var(--H)}
.front{transform:translateZ(calc(var(--D)/2));overflow:hidden;
  background:
    radial-gradient(140% 120% at 30% 0%, rgba(255,255,255,.09), transparent 55%),
    linear-gradient(180deg,#1d1a1c,#0b0a0b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -10px 20px rgba(0,0,0,.6)}
.back{transform:rotateY(180deg) translateZ(calc(var(--D)/2));background:linear-gradient(180deg,#0c0b0c,#1a1718)}
.left,.right{width:var(--D);left:calc((var(--W) - var(--D))/2);
  background:linear-gradient(90deg,#141214,#211d1f)}
.left{transform:rotateY(-90deg) translateZ(calc(var(--W)/2))}
.right{transform:rotateY(90deg) translateZ(calc(var(--W)/2))}
.bottom{height:var(--D);top:calc((var(--H) - var(--D))/2);background:#070607;
  transform:rotateX(-90deg) translateZ(calc(var(--H)/2))}
.inner-front{display:none}
.shred{position:absolute;left:0;width:var(--W);height:var(--D);top:calc((var(--H) - var(--D))/2);
  transform:rotateX(90deg) translateZ(calc(var(--H)*.32));background-size:cover;border-radius:4px}

/* foil on the front */
.foil{position:absolute;right:9%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px}
.crest.big{--s:calc(var(--H)*.46)}
.foil-name{font-family:var(--cinzel);font-weight:700;font-size:calc(var(--H)*.2);letter-spacing:.08em;
  background:linear-gradient(100deg,var(--gold-d),var(--gold-l) 40%,var(--gold) 60%,var(--gold-d));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 5s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}

/* ribbons */
.ribbon-v,.ribbon-h{position:absolute;background:
  linear-gradient(90deg,#6e0711,#d01b2b 25%,#ff5a68 45%,#c8192a 60%,#6e0711)}
.ribbon-v{left:24%;width:calc(var(--W)*.09);top:0;bottom:0}
.ribbon-h{top:44%;height:calc(var(--W)*.09);left:0;right:0;
  background:linear-gradient(180deg,#6e0711,#d01b2b 25%,#ff5a68 45%,#c8192a 60%,#6e0711)}
.ribbon-v,.ribbon-h{transition:transform .5s cubic-bezier(.6,0,.8,.4),opacity .5s}
.ribbon-v{transform-origin:50% 0}
body.untied .ribbon-v{transform:scaleY(0);opacity:0}
body.untied .ribbon-h{transform:scaleX(0);opacity:0}

/* lid */
.lid-hinge{position:absolute;left:0;top:0;width:var(--W);height:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--D)/-2 - 2px))}
.lid{position:absolute;left:-3px;top:0;width:calc(var(--W) + 6px);height:calc(var(--D) + 5px);
  transform-style:preserve-3d;transform-origin:50% 0;transform:rotateX(90deg);
  transition:transform 1.25s cubic-bezier(.25,1.35,.45,1)}
body.open .lid{transform:rotateX(202deg)}
.lid-top,.lid-under{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}
.lid-top{background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.1), transparent 55%),
    linear-gradient(160deg,#242022,#0d0c0d);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 9px #0d0c0d, inset 0 0 0 10px rgba(216,180,106,.55)}
.lid-top .ribbon-v{left:24%}
.lid-top .ribbon-h{top:56%}
.lid-under{transform:translateZ(-1px) rotateX(180deg);
  background:
    radial-gradient(100% 80% at 50% 40%, #f8d9df, var(--pink) 55%, #c9879a);
  display:grid;place-items:center;text-align:center;
  box-shadow:inset 0 0 0 10px #0d0c0d, inset 0 0 0 11px var(--gold)}
.lid-under p{font-family:var(--serif);font-style:italic;color:var(--plum);font-size:calc(var(--W)*.06);line-height:1.25}
.lid-under p b{display:block;font-family:var(--cinzel);font-style:normal;font-size:calc(var(--W)*.075);color:#8b5a1c;letter-spacing:.06em}
.lid-flap{position:absolute;left:0;top:100%;width:100%;height:var(--F);transform-origin:50% 0;transform:rotateX(-90deg);
  background:linear-gradient(180deg,#1a1719,#0c0b0c);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(216,180,106,.5)}
.lid-flap span{display:none}
.lid-flap::before{content:"";position:absolute;left:24%;width:calc(var(--W)*.09);top:0;bottom:0;
  background:linear-gradient(90deg,#6e0711,#d01b2b 25%,#ff5a68 45%,#c8192a 60%,#6e0711);transition:opacity .4s}
body.untied .lid-flap::before{opacity:0}
.lid-side{position:absolute;top:0;width:var(--F);height:100%;background:#121012}
.lid-side.l{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.lid-side.r{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}

.bow{position:absolute;left:calc(24% + var(--W)*.045);top:56%;width:calc(var(--W)*.36);height:calc(var(--W)*.22);
  transform-origin:50% 100%;transform:translate(-50%,-100%) translateY(calc(var(--W)*.045)) rotateX(-72deg);
  transition:transform .7s cubic-bezier(.3,-.4,.6,1),opacity .6s .15s}
.bow svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45));transform-origin:50% 60%;
  animation:bowWiggle 4.5s ease-in-out infinite}
@keyframes bowWiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-5deg)}90%{transform:rotate(4deg)}95%{transform:rotate(-2deg)}}
body.untied .bow{transform:translate(-50%,-100%) translateY(calc(var(--W)*-.6)) rotateX(-72deg) rotateZ(25deg) scale(1.3);opacity:0}

.glow{position:absolute;left:50%;bottom:calc(var(--H)*1.4);width:calc(var(--W)*1.6);height:calc(var(--W)*1.2);
  transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity 1.2s .5s;
  background:radial-gradient(closest-side, rgba(255,214,140,.55), rgba(255,170,120,.18) 55%, transparent);
  mix-blend-mode:screen;filter:blur(8px)}
body.open .glow{opacity:1;animation:breathe 4s 1.7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.7}}
.shadow{position:absolute;top:calc(var(--H)*.85);left:50%;width:calc(var(--W)*1.35);height:calc(var(--W)*.22);
  transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);pointer-events:none}

/* ---------- floating items ---------- */
.items{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.item{position:absolute;left:0;top:0;transform-style:preserve-3d;opacity:0;pointer-events:none;will-change:transform}
.item.out{pointer-events:auto;cursor:pointer}
.item-in{transform-style:preserve-3d;animation:float var(--fd,5s) var(--fdel,0s) ease-in-out infinite;transition:transform .35s}
.item.out:hover .item-in,.item.out:focus-visible .item-in{transform:scale(1.08) translateZ(20px)}
@keyframes float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:var(--frot,1.5deg)}}
.item img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.item .layer{position:absolute;inset:0;width:100%;filter:brightness(.25)!important}
.item .label{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);white-space:nowrap;
  font-size:12px;letter-spacing:.06em;padding:5px 10px;border-radius:99px;background:rgba(20,10,13,.8);
  border:1px solid rgba(216,180,106,.45);color:var(--gold-l);opacity:0;transition:opacity .3s;pointer-events:none}
.item.out:hover .label,.item.out:focus-visible .label{opacity:1}
body.labels .item.out .label{opacity:.95}

/* ---------- tray under the box ---------- */
.tray{max-width:760px;margin:0 auto 40px;padding:18px 16px 4px;opacity:0;transform:translateY(20px);
  pointer-events:none;transition:opacity .8s, transform .8s}
body.revealed .tray{opacity:1;transform:none;pointer-events:auto}
.tray-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  border-bottom:1px solid rgba(216,180,106,.25);padding-bottom:12px}
.count{font-family:var(--serif);font-size:22px;margin-top:4px}
.price{font-family:var(--cinzel);font-size:26px;color:var(--gold-l);text-align:right}
.price small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding:14px 2px;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb{flex:0 0 auto;width:96px;text-align:center;font-size:11px;line-height:1.3;color:var(--muted);
  padding:8px 6px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(216,180,106,.18);
  transition:border-color .25s, transform .25s}
.thumb:hover{border-color:var(--gold);transform:translateY(-2px)}
.thumb .ti{height:58px;display:grid;place-items:center;margin-bottom:6px}
.thumb img{max-width:76px;max-height:58px;object-fit:contain}
.actions{display:flex;gap:10px;flex-wrap:wrap;padding:6px 0 10px}
.btn{flex:1 1 200px;text-align:center;padding:14px 18px;border-radius:99px;font-weight:600;letter-spacing:.04em;
  text-decoration:none;font-size:15px}
.btn.gold{color:#2a1408;background:linear-gradient(180deg,var(--gold-l),var(--gold) 55%,#b98f43);
  box-shadow:0 8px 24px rgba(216,180,106,.25), inset 0 1px 0 rgba(255,255,255,.6)}
.btn.ghost{border:1px solid rgba(216,180,106,.5);color:var(--gold-l)}

/* ---------- viewer ---------- */
.viewer{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;
  visibility:hidden;pointer-events:none}
.viewer.on{visibility:visible;pointer-events:auto}
.viewer-bg{position:absolute;inset:0;background:radial-gradient(80% 70% at 40% 45%, rgba(70,22,36,.88), rgba(10,5,7,.96));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .5s}
.viewer.on .viewer-bg{opacity:1}
.v-stage{position:relative;height:100%;display:grid;place-items:center;perspective:1100px;touch-action:none;cursor:grab}
.v-stage:active{cursor:grabbing}
.v-obj{position:relative;transform-style:preserve-3d;width:min(46vw,520px);
  transform:rotateX(var(--vx,0deg)) rotateY(var(--vy,0deg));will-change:transform}
.v-obj .vi{position:relative;transform-style:preserve-3d;opacity:0;transform:scale(.6) translateY(40px);
  transition:opacity .45s, transform .7s cubic-bezier(.2,1.3,.4,1)}
.viewer.on .v-obj .vi.show{opacity:1;transform:none}
.v-obj img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.v-obj .main{position:relative;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.v-obj .layer{position:absolute;inset:0;filter:brightness(.22)}
.v-obj .glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(var(--ga,120deg), transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,240,220,.15) 55%, transparent 70%);
  background-size:220% 220%;background-position:var(--gp,50%) 50%}
.v-floor{position:absolute;bottom:14%;left:50%;width:60%;height:40px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.v-info{position:relative;padding:24px 40px 24px 8px;max-width:440px;opacity:0;transform:translateX(30px);transition:opacity .5s .15s, transform .6s .15s}
.viewer.on .v-info{opacity:1;transform:none}
.v-info h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1.15;margin:8px 0 10px}
.v-tag{color:var(--muted);font-size:16px;line-height:1.5}
.v-info ul{list-style:none;margin:18px 0}
.v-info li{padding:9px 0 9px 26px;position:relative;border-top:1px solid rgba(216,180,106,.15);font-size:14px}
.v-info li::before{content:"✦";position:absolute;left:2px;color:var(--gold)}
.v-help{font-size:12px;color:#a88f8a}
.v-close{position:absolute;top:14px;right:16px;z-index:3;width:46px;height:46px;border-radius:50%;font-size:30px;line-height:1;
  border:1px solid rgba(216,180,106,.45);color:var(--gold-l);background:rgba(0,0,0,.3)}
.v-nav{position:absolute;top:50%;z-index:3;width:48px;height:48px;border-radius:50%;font-size:34px;line-height:1;
  transform:translateY(-50%);border:1px solid rgba(216,180,106,.4);color:var(--gold-l);background:rgba(0,0,0,.3)}
.v-nav.prev{left:14px}.v-nav.next{right:14px}
.viewer .v-info, .viewer .v-stage{z-index:2}

/* ---------- phone ---------- */
@media (max-width:760px){
  .viewer{grid-template-columns:1fr;grid-template-rows:1.15fr auto;align-items:stretch}
  .v-info{padding:4px 20px calc(24px + env(safe-area-inset-bottom));max-width:none;transform:translateY(20px)}
  .v-info ul{margin:10px 0}
  .v-info li{padding:7px 0 7px 24px}
  .v-nav{top:32%}
  .wordmark b{font-size:17px}
  .crest{--s:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
}
.open-hint{position:absolute;left:0;right:0;bottom:calc(var(--H)*.15);text-align:center;font-size:13px;letter-spacing:.08em;
  color:var(--gold-l);opacity:0;transition:opacity .8s;pointer-events:none}
body.revealed .open-hint{opacity:.85}