/* ══════════════════════════════════════════════════════════════════════════
   THE GIFT BOX, 8 Oct 2026. Same file on both sites (build/landing/site/css/gift.css
   and build/academy/site/css/gift.css): 🔴 change both.
   Moved here from the landing's stylesheet unchanged (built Sep 2026: pure CSS + SVG,
   ribbon cross-wrapped, staged opening, the per-particle values set by nth-child
   because the CSP forbids inline styles). The SVG gradients it paints with
   (#gbTop, #gbFront, …) sit once in each page's <svg class="gbox__defs">.
   Landing: the video gate opens it (js/main.js). Shop: founder, 8 Oct 2026, under
   «Inspira. Crea. Guía.»: «add the gift, same as in the landing (and when you open it
   the 3d object appears)» — js/gift.js; the album rises out of it (.gwrap below).
   ══════════════════════════════════════════════════════════════════════════ */
.gbox__defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── the gift box (shared by the video gate and the held line) ─────────────
   Carried over unchanged from css/styles.css (2026-09), restyled only where the
   paper envelope needs dark ink. Ribbon cross-wrapped, staged opening. */
.gbox{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:2px auto 0;cursor:pointer;display:block;width:240px;max-width:100%;border-radius:16px}
.gbox:focus-visible{outline:2px solid var(--gold);outline-offset:10px}
.gbox__stage{position:relative;display:block;width:100%;aspect-ratio:1/1}
.gbox__art{display:block;width:100%;height:100%;overflow:visible;position:relative;z-index:2}
.gbox__glow{position:absolute;left:50%;bottom:12%;width:80%;height:18%;z-index:0;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(245,201,127,.5) 0%,rgba(245,201,127,.10) 48%,transparent 74%);filter:blur(9px);animation:gbFloatGlow 4.2s ease-in-out infinite}
.gbox__rays{position:absolute;left:50%;top:44%;width:86%;height:86%;z-index:1;transform:translate(-50%,-50%) scale(.15);opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,243,220,.55) 0deg 4deg,transparent 4deg 26deg);
  -webkit-mask-image:radial-gradient(circle,#000 8%,rgba(0,0,0,.55) 38%,transparent 68%);mask-image:radial-gradient(circle,#000 8%,rgba(0,0,0,.55) 38%,transparent 68%)}
.gbox__flash{position:absolute;left:50%;top:46%;width:70%;height:70%;z-index:3;transform:translate(-50%,-50%) scale(.25);opacity:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#FFFDF6 0%,rgba(255,243,220,.75) 32%,transparent 68%)}
.gbox__column{position:absolute;left:50%;top:4%;width:34%;height:48%;z-index:1;transform:translateX(-50%) scaleY(.2);opacity:0;pointer-events:none;transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(245,201,127,.5),rgba(245,201,127,.12) 55%,transparent);filter:blur(7px)}
.gbox__float{animation:gbFloat 4.6s ease-in-out infinite;position:relative;z-index:2;display:block}
.gbox__nudge{animation:gbNudge 6.4s ease-in-out infinite;transform-origin:50% 92%;display:block}
.gbox .lid{transform-box:fill-box;transform-origin:50% 100%}
.gbox .body{transform-box:fill-box;transform-origin:50% 100%}
.gbox__conf{position:absolute;left:50%;top:46%;width:0;height:0;z-index:4;pointer-events:none}
.gbox__conf i{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px;background:var(--gold);border-radius:2px;opacity:0}
.gbox__conf i:nth-child(3n){background:#FFF3DC;border-radius:50%;width:7px;height:7px}
.gbox__conf i:nth-child(4n){background:var(--cream);width:6px;height:13px;border-radius:1px}
.gbox__conf i:nth-child(5n){background:#E0A64F;width:11px;height:5px}
.gbox__conf i:nth-child(1){--gx:-104px;--gy:-128px;--gr:380deg;--gd:0ms}
.gbox__conf i:nth-child(2){--gx:92px;--gy:-142px;--gr:-420deg;--gd:18ms}
.gbox__conf i:nth-child(3){--gx:-52px;--gy:-158px;--gr:300deg;--gd:36ms}
.gbox__conf i:nth-child(4){--gx:44px;--gy:-166px;--gr:-340deg;--gd:8ms}
.gbox__conf i:nth-child(5){--gx:-136px;--gy:-92px;--gr:420deg;--gd:52ms}
.gbox__conf i:nth-child(6){--gx:128px;--gy:-104px;--gr:-380deg;--gd:28ms}
.gbox__conf i:nth-child(7){--gx:-18px;--gy:-176px;--gr:260deg;--gd:64ms}
.gbox__conf i:nth-child(8){--gx:16px;--gy:-150px;--gr:-300deg;--gd:44ms}
.gbox__conf i:nth-child(9){--gx:-78px;--gy:-112px;--gr:340deg;--gd:76ms}
.gbox__conf i:nth-child(10){--gx:70px;--gy:-122px;--gr:-360deg;--gd:12ms}
.gbox__conf i:nth-child(11){--gx:-118px;--gy:-144px;--gr:400deg;--gd:88ms}
.gbox__conf i:nth-child(12){--gx:112px;--gy:-160px;--gr:-280deg;--gd:60ms}
.gbox__conf i:nth-child(13){--gx:-34px;--gy:-100px;--gr:320deg;--gd:96ms}
.gbox__conf i:nth-child(14){--gx:34px;--gy:-186px;--gr:-440deg;--gd:72ms}
.gbox__hint{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--gold-lt);transition:opacity .25s ease}
.gift .gbox__hint{color:var(--gold-ink);font-weight:600}
.gbox.is-open .gbox__hint{opacity:0}
.gbox.is-open .gbox__float{animation:none}
.gbox.is-open .gbox__nudge{animation:gbStagePop .9s cubic-bezier(.16,1,.3,1)}
.gbox.is-open .gbox__glow{animation:gbGlowKick 1.1s cubic-bezier(.16,1,.3,1) forwards}
.gbox.is-open .body{animation:gbBodyPop .95s cubic-bezier(.16,1,.3,1)}
.gbox.is-open .lid{animation:gbLidBlast 1.05s cubic-bezier(.22,.9,.24,1) forwards}
.gbox.is-open .gbox__flash{animation:gbFlash .34s ease-out .17s}
.gbox.is-open .gbox__rays{animation:gbRays 1s cubic-bezier(.16,1,.3,1) .19s}
.gbox.is-open .gbox__column{animation:gbColumn 1.15s cubic-bezier(.16,1,.3,1) .22s}
.gbox.is-open .gbox__conf i{animation:gbConfetti 1.25s cubic-bezier(.22,.7,.3,1) both;animation-delay:calc(200ms + var(--gd))}
.gbox.is-shake .gbox__nudge{animation:gbShake .5s ease}
@keyframes gbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes gbNudge{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-2.4deg)}92%{transform:rotate(1.9deg)}95%{transform:rotate(-.9deg)}}
@keyframes gbShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes gbFloatGlow{0%,100%{opacity:.42;transform:translateX(-50%) scale(1)}50%{opacity:.62;transform:translateX(-50%) scale(1.1)}}
@keyframes gbStagePop{0%{transform:scale(1)}18%{transform:scale(.975)}32%{transform:scale(1.045)}58%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes gbBodyPop{0%{transform:scale(1,1)}18%{transform:scale(1.075,.87)}31%{transform:scale(.93,1.13)}46%{transform:scale(1.045,.96)}64%{transform:scale(.99,1.02)}100%{transform:scale(1,1)}}
@keyframes gbLidBlast{0%{transform:translate3d(0,0,0) rotate(0);opacity:1}18%{transform:translate3d(0,14px,0) rotate(.5deg);opacity:1}31%{transform:translate3d(3px,-40px,0) rotate(-7deg);opacity:1}70%{opacity:1}100%{transform:translate3d(30px,-205px,0) rotate(-28deg);opacity:0}}
@keyframes gbGlowKick{0%{opacity:.42;transform:translateX(-50%) scale(1)}22%{opacity:.95;transform:translateX(-50%) scale(1.35)}100%{opacity:.8;transform:translateX(-50%) scale(1.12)}}
@keyframes gbFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}30%{opacity:.95;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes gbRays{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0)}26%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(32deg)}}
@keyframes gbColumn{0%{opacity:0;transform:translateX(-50%) scaleY(.2)}28%{opacity:.85;transform:translateX(-50%) scaleY(1.05)}100%{opacity:0;transform:translateX(-50%) scaleY(1.15)}}
@keyframes gbConfetti{0%{opacity:0;transform:translate(0,0) scale(.35) rotate(0)}10%{opacity:1}45%{transform:translate(calc(var(--gx) * .72),var(--gy)) scale(1) rotate(calc(var(--gr) * .55))}78%{opacity:1}100%{opacity:0;transform:translate(var(--gx),140px) scale(.75) rotate(var(--gr))}}
.gloot{margin-top:14px;text-align:left}
.gloot[hidden]{display:none}
.gloot__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gloot__i{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:11px;background:rgba(254,240,231,.06);border:1px solid rgba(254,240,231,.14);
  animation:gbRise .66s cubic-bezier(.2,1.3,.35,1) both;animation-delay:.42s}
.gloot__i--key{background:rgba(245,201,127,.12);border-color:rgba(245,201,127,.32)}
.gloot__tag{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-content:center;background:rgba(245,201,127,.18);color:var(--gold);font-size:13px;font-weight:700}
.gloot__txt{flex:1 1 auto;min-width:0}
.gloot__txt b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:#fff}
.gloot__txt span{display:block;font-size:12.5px;color:rgba(255,255,255,.72)}
.gloot__i .btn{flex:none}
/* inside the paper envelope the list needs dark ink */
.gift .gloot__i{background:rgba(46,17,40,.05);border-color:rgba(46,17,40,.14)}
.gift .gloot__i--key{background:rgba(240,183,96,.2);border-color:rgba(154,99,15,.35)}
.gift .gloot__tag{background:var(--plum);color:var(--gold)}
.gift .gloot__txt b{color:var(--ink)}
.gift .gloot__txt span{color:var(--body)}
@keyframes gbRise{0%{opacity:0;transform:translateY(30px) scale(.96)}100%{opacity:1;transform:none}}
.creed--gift .gbox{width:270px}
.creed--gift .gloot{max-width:430px;margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:reduce){
  .gbox__float,.gbox__nudge,.gbox__glow{animation:none!important}
  .gbox.is-open .lid{animation:none;opacity:0}
  .gbox.is-open .body,.gbox.is-open .gbox__nudge,.gbox.is-open .gbox__flash,.gbox.is-open .gbox__rays,.gbox.is-open .gbox__column,.gbox.is-open .gbox__conf i{animation:none;opacity:0}
  .gbox.is-open .gbox__glow{animation:none;opacity:.8}
  .gloot__i,.gift__open{animation:none;opacity:1;transform:none}
  .sticky-cta{transition:none}
}

/* ── a gift with something inside: the box and what comes out share one place ──
   (.gwrap; js/gift.js). The box opens, its contents rise out of it, the box goes. */
.gwrap{position:relative;display:grid;justify-items:center;align-items:start;transition:height .75s cubic-bezier(.16,1,.3,1)}
.gwrap > .gbox,.gwrap > .gwrap__loot{grid-area:1/1}
.gwrap__loot{width:100%;position:relative;z-index:2}
.gwrap__loot[hidden]{display:none}
.gwrap.is-open .gwrap__loot{animation:gwRise 1.05s cubic-bezier(.2,1.05,.3,1) both;transform-origin:50% 18%}
.gwrap.is-open .gbox{animation:gwBoxOut .55s ease-in .5s both;pointer-events:none}
.gwrap .gbox.is-gone{display:none}
@keyframes gwRise{0%{opacity:0;transform:translateY(46px) scale(.22)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes gwBoxOut{to{opacity:0;transform:scale(.82) translateY(20px)}}
@media (prefers-reduced-motion:reduce){
  .gwrap{transition:none}
  .gwrap.is-open .gwrap__loot,.gwrap.is-open .gbox{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE GIFT BOX IN 3D, 8 Oct 2026. Founder: «upgrade the gift box and make it 3d and just
   make it as good as the masterclass journal, and enhance the animation and sounds».
   A real box in CSS 3D, like the album (css/mclass.css): five lit faces with the plum paper
   texture, a gold ribbon wrapped round every side and crossed on the lid, a bow of two
   crossing gold planes, a contact shadow. It sways slowly; js/gift3d.js tilts it toward the
   mouse and plays the sounds (js/sound.js). Opening: a squeeze, the bow spins, the lid
   pops off and tumbles away in 3D, light rises out of the box, gold paper flutters down.
   Sizes follow the box's own width (cqi), so one drawing serves every size it is shown at.
   ══════════════════════════════════════════════════════════════════════════ */
.gbox__stage{container-type:inline-size}
/* the float and nudge wrappers fill the stage, so the box stands where the stage is (they used to take their height from the flat drawing) */
.gbox__float,.gbox__nudge{position:absolute;inset:0}
.g3{position:absolute;inset:0;z-index:2;perspective:900px;perspective-origin:50% 30%;pointer-events:none;
  --bw:50cqi;--bh:37cqi;--bd:50cqi;--lw:55cqi;--lh:12.5cqi;--ld:55cqi;--band:9cqi;
  --band-x:linear-gradient(90deg,#8A5512,#C88F3E 16%,#F7D58A 38%,#FFF4D2 50%,#E9B967 64%,#B57A22 84%,#7E4E10);
  --band-y:linear-gradient(180deg,#8A5512,#C88F3E 16%,#F7D58A 38%,#FFF4D2 50%,#E9B967 64%,#B57A22 84%,#7E4E10);
  --plum-tex:url(../assets/img/tex-paper-plum.webp) 0 0/180px 180px}
.g3__sway{position:absolute;left:50%;top:60%;width:0;height:0;transform-style:preserve-3d;animation:g3Sway 7s ease-in-out infinite}
.g3__box{position:absolute;left:calc(var(--bw) / -2);top:calc(var(--bh) / -2);width:var(--bw);height:var(--bh);
  transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-36deg);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.g3 i{font-style:normal}
.g3__f,.g3__l,.g3__hole{position:absolute;left:0;top:0;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* the body: front, back, the two sides, the floor */
.g3__f{width:var(--bw);height:var(--bh);
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(170deg,rgba(255,236,240,.16),rgba(40,6,30,.28) 75%),var(--plum-tex),#7A2F62;
  box-shadow:inset 0 0 0 1px rgba(255,220,240,.08)}
.g3__f--front{transform:translateZ(calc(var(--bd) / 2))}
.g3__f--back{transform:rotateY(180deg) translateZ(calc(var(--bd) / 2))}
.g3__f--right,.g3__f--left{width:var(--bd);left:calc((var(--bw) - var(--bd)) / 2)}
.g3__f--right{transform:rotateY(90deg) translateZ(calc(var(--bw) / 2));
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(170deg,rgba(0,0,0,.10),rgba(26,2,20,.5) 80%),var(--plum-tex),#6A2856}
.g3__f--left{transform:rotateY(-90deg) translateZ(calc(var(--bw) / 2))}
.g3__f--bottom{height:var(--bd);top:calc((var(--bh) - var(--bd)) / 2);transform:rotateX(-90deg) translateZ(calc(var(--bh) / 2));
  background:#3A1230}
/* the inside, seen once the lid is off: dark, then lit from within */
.g3__hole{width:var(--bw);height:var(--bd);top:calc((var(--bh) - var(--bd)) / 2);transform:rotateX(90deg) translateZ(calc(var(--bh) / 2 - 1px));
  background:radial-gradient(60% 60% at 50% 50%,#2A0A20,#14040F);transition:background .4s}

/* the lid: a little wider and deeper than the box, its rim over the top */
.g3__lid{position:absolute;left:calc((var(--bw) - var(--lw)) / 2);top:calc(var(--lh) * -1 + 2cqi);width:var(--lw);height:var(--lh);
  transform-style:preserve-3d;transform-origin:50% 100%}
.g3__l{width:var(--lw);height:var(--lh);
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(175deg,rgba(255,236,240,.22),rgba(40,6,30,.22)),var(--plum-tex),#86386C;
  box-shadow:inset 0 -2px 0 rgba(30,4,24,.35),inset 0 1px 0 rgba(255,230,240,.25)}
.g3__l--front{transform:translateZ(calc(var(--ld) / 2))}
.g3__l--back{transform:rotateY(180deg) translateZ(calc(var(--ld) / 2))}
.g3__l--right,.g3__l--left{width:var(--ld);left:calc((var(--lw) - var(--ld)) / 2)}
.g3__l--right{transform:rotateY(90deg) translateZ(calc(var(--lw) / 2));
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(175deg,rgba(0,0,0,.08),rgba(26,2,20,.45)),var(--plum-tex),#70295C}
.g3__l--left{transform:rotateY(-90deg) translateZ(calc(var(--lw) / 2))}
.g3__l--top{height:var(--ld);top:calc((var(--lh) - var(--ld)) / 2);transform:rotateX(90deg) translateZ(calc(var(--lh) / 2));
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,var(--band-y) 0 50%/100% var(--band) no-repeat,
    radial-gradient(90% 90% at 30% 25%,rgba(255,236,246,.28),rgba(40,6,30,.18) 70%),var(--plum-tex),#97467E}
.g3__l--under{height:var(--ld);top:calc((var(--lh) - var(--ld)) / 2);transform:rotateX(-90deg) translateZ(calc(var(--lh) / 2));
  background:#2A0A20}

/* the bow: two crossing planes of gold loops standing on the lid */
.g3__bow{position:absolute;left:50%;top:calc(var(--lh) / 2);width:0;height:0;transform-style:preserve-3d;
  transform:translateY(calc(var(--lh) / -2))}
.g3__bowp{position:absolute;left:-23cqi;top:-24cqi;width:46cqi;height:28cqi;display:block}
.g3__bowp svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 2px rgba(60,20,4,.35))}
.g3__bowp--b{transform:rotateY(90deg)}

/* the floor under it */
.g3__shadow{position:absolute;left:50%;top:79%;width:64cqi;height:12cqi;margin-left:-32cqi;border-radius:50%;
  background:radial-gradient(closest-side,rgba(18,3,14,.55),rgba(18,3,14,0));filter:blur(3px);animation:g3Shadow 4.6s ease-in-out infinite}

@keyframes g3Sway{0%,100%{transform:rotateY(-5deg)}50%{transform:rotateY(6deg)}}
@keyframes g3Shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.75}}

/* ── opening ──────────────────────────────────────────────────────────── */
.gbox.is-open .g3__sway{animation:none}
.gbox.is-open .g3__lid{animation:g3Lid 1.25s cubic-bezier(.2,.75,.3,1) forwards}
.gbox.is-open .g3__bow{animation:g3Bow 1.25s cubic-bezier(.3,.7,.3,1) forwards}
.gbox.is-open .g3__hole{background:radial-gradient(60% 60% at 50% 50%,#FFF6DA,#F0B760 45%,#8A4A1A)}
.gbox.is-open .g3__shadow{animation:none;opacity:.8}
@keyframes g3Lid{
  0%{transform:none;opacity:1}
  12%{transform:translateY(1.6cqi) rotateX(2deg);opacity:1}
  30%{transform:translateY(-30cqi) rotateX(-16deg) rotateZ(-7deg) translateZ(4cqi);opacity:1}
  62%{transform:translate3d(16cqi,-62cqi,10cqi) rotateX(-46deg) rotateY(70deg) rotateZ(22deg);opacity:1}
  100%{transform:translate3d(30cqi,-96cqi,14cqi) rotateX(-80deg) rotateY(160deg) rotateZ(40deg);opacity:0}}
@keyframes g3Bow{
  0%{transform:translateY(calc(var(--lh) / -2)) scale(1)}
  14%{transform:translateY(calc(var(--lh) / -2)) scale(1.18)}
  100%{transform:translateY(calc(var(--lh) / -2 - 8cqi)) rotateY(540deg) scale(.9)}}
/* gold paper falling: each bit also flips, like real paper */
.gbox.is-open .gbox__conf i{animation:g3Conf 1.5s cubic-bezier(.22,.7,.3,1) both;animation-delay:calc(240ms + var(--gd))}
@keyframes g3Conf{
  0%{opacity:0;transform:translate(0,0) scale(.35) rotate(0) rotateX(0)}
  10%{opacity:1}
  45%{transform:translate(calc(var(--gx) * .72),var(--gy)) scale(1) rotate(calc(var(--gr) * .55)) rotateX(240deg)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(var(--gx),160px) scale(.8) rotate(var(--gr)) rotateX(620deg)}}

@media (prefers-reduced-motion:reduce){
  .g3__sway,.g3__shadow{animation:none}
  .g3__box{transition:none}
  .gbox.is-open .g3__lid,.gbox.is-open .g3__bow{animation:none;opacity:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   9 Oct 2026, founder: «make a light version of the gift (because its hard to see in the
   purple website) … keep the dark version of the gift on the light website and the light
   gift on the dark version of the web» + «improve the animation a little».
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · THE IVORY BOX, wherever the box stands on the dark plum page: the shop's «Inspira»
   section in the purple version. The light version keeps the plum box (the rules above);
   the €15 page's box sits on a paper card in both versions, so it stays plum there. */
html:not([data-theme="light"]) .held__gift .g3{--ivory-tex:url(../assets/img/tex-paper-ivory.webp) 0 0/220px 220px}
html:not([data-theme="light"]) .held__gift .g3__f{
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(170deg,rgba(255,255,255,.55),rgba(150,96,52,.16) 78%),var(--ivory-tex),#F8EBDA;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
html:not([data-theme="light"]) .held__gift .g3__f--right{
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(170deg,rgba(120,70,30,.10),rgba(96,52,24,.34) 82%),var(--ivory-tex),#E9D3B8}
html:not([data-theme="light"]) .held__gift .g3__f--bottom{background:#C9A983}
html:not([data-theme="light"]) .held__gift .g3__hole{background:radial-gradient(60% 60% at 50% 50%,#6B4A30,#3E2614)}
html:not([data-theme="light"]) .held__gift .gbox.is-open .g3__hole{background:radial-gradient(60% 60% at 50% 50%,#FFF6DA,#F0B760 45%,#8A4A1A)}
html:not([data-theme="light"]) .held__gift .g3__l{
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(175deg,rgba(255,255,255,.6),rgba(150,96,52,.14)),var(--ivory-tex),#FBF1E4;
  box-shadow:inset 0 -2px 0 rgba(120,72,30,.22),inset 0 1px 0 rgba(255,255,255,.7)}
html:not([data-theme="light"]) .held__gift .g3__l--right{
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,
    linear-gradient(175deg,rgba(120,70,30,.08),rgba(96,52,24,.30)),var(--ivory-tex),#EDDAC1}
html:not([data-theme="light"]) .held__gift .g3__l--top{
  background:var(--band-x) 50% 0/var(--band) 100% no-repeat,var(--band-y) 0 50%/100% var(--band) no-repeat,
    radial-gradient(90% 90% at 30% 25%,rgba(255,255,255,.7),rgba(150,96,52,.12) 70%),var(--ivory-tex),#FFF7EC}
html:not([data-theme="light"]) .held__gift .g3__l--under{background:#BFA07D}

/* 2 · MOTION, a little better: one slow sine-like breath for the sway, the float, the glow
   and the floor shadow; the lid peeks up under the mouse; a tap presses the box in; the
   first time it comes into view it drops in and settles (js/gift3d.js adds .g3-wait/.g3-in);
   opening dips first, then the lid springs off in an arc and spins away. Transform and
   opacity only. Under «reduce motion» none of this runs (the block at the end). */
.g3__sway{animation:g3Sway 7s cubic-bezier(.37,0,.63,1) infinite}
.gbox__float,.g3__shadow,.gbox__glow{animation-timing-function:cubic-bezier(.37,0,.63,1)}
.gbox__nudge{animation-timing-function:cubic-bezier(.45,0,.2,1)}

.gbox__stage{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.gbox:not(.is-open):active .gbox__stage{transform:scale(.965);transition-duration:.12s}
@media (hover:hover) and (pointer:fine){
  .g3__lid{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
  .gbox:hover .g3__lid{transform:translateY(-2.2cqi) rotateX(-5deg)}
}

/* the arrival, once */
.gbox.g3-wait .g3__sway{opacity:0;translate:0 -26cqi}
.gbox.g3-wait .g3__shadow{opacity:0;scale:.4}
.gbox.g3-in .g3__sway{animation:g3Drop .95s cubic-bezier(.22,1,.36,1) both,g3Sway 7s cubic-bezier(.37,0,.63,1) .95s infinite}
.gbox.g3-in .g3__shadow{animation:g3ShadowIn .95s cubic-bezier(.22,1,.36,1) both,g3Shadow 4.6s cubic-bezier(.37,0,.63,1) .95s infinite}
@keyframes g3Drop{
  0%{opacity:0;translate:0 -26cqi;scale:1 1}
  52%{opacity:1;translate:0 1.2cqi;scale:1.035 .955}
  72%{translate:0 -.9cqi;scale:.985 1.02}
  100%{opacity:1;translate:0 0;scale:1 1}}
@keyframes g3ShadowIn{0%{opacity:0;scale:.4}52%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}

/* opening: the box squashes as the lid leaves, the lid springs up and arcs away */
.gbox.is-open .g3__sway,.gbox.is-open.g3-in .g3__sway{animation:g3Open .9s cubic-bezier(.16,1,.3,1) both}
.gbox.is-open .g3__shadow,.gbox.is-open.g3-in .g3__shadow{animation:none;opacity:.8}
@keyframes g3Open{
  0%{scale:1 1;translate:0 0}
  14%{scale:1.07 .9;translate:0 1cqi}
  32%{scale:.95 1.07;translate:0 -2cqi}
  52%{scale:1.02 .98;translate:0 0}
  100%{scale:1 1;translate:0 0}}
.gbox.is-open .g3__lid{animation:g3LidArc 1.2s cubic-bezier(.3,0,.5,1) both;transition:none}
@keyframes g3LidArc{
  12%{transform:translateY(1.4cqi) rotateX(3deg);animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
  34%{transform:translateY(-34cqi) rotateX(-18deg) rotateZ(-8deg) translateZ(5cqi);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  48%{transform:translate3d(4cqi,-40cqi,7cqi) rotateX(-26deg) rotateY(22deg) rotateZ(-2deg);animation-timing-function:cubic-bezier(.55,0,.7,.4)}
  70%{opacity:1}
  100%{transform:translate3d(34cqi,-92cqi,14cqi) rotateX(-84deg) rotateY(170deg) rotateZ(38deg);opacity:0}}

/* seal the hairline seams where the 3D faces meet (the dark page showed through as a dotted line on ivory) */
html:not([data-theme="light"]) .held__gift .g3__l--top{box-shadow:0 0 0 1px #F6EADB;transform:rotateX(90deg) translateZ(calc(var(--lh) / 2)) scale(1.012)}
html:not([data-theme="light"]) .held__gift .g3__l{box-shadow:inset 0 -2px 0 rgba(120,72,30,.22),inset 0 1px 0 rgba(255,255,255,.7),0 0 0 .75px #EBD9C2}
html:not([data-theme="light"]) .held__gift .g3__f{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 .75px #E6D1B5}

@media (prefers-reduced-motion:reduce){
  .gbox__stage,.g3__lid{transition:none}
  .gbox:not(.is-open):active .gbox__stage,.gbox:hover .g3__lid{transform:none}
  .gbox.g3-wait .g3__sway,.gbox.g3-wait .g3__shadow{opacity:1;translate:none;scale:none}
  .gbox.g3-in .g3__sway,.gbox.g3-in .g3__shadow,.gbox.is-open .g3__sway,.gbox.is-open.g3-in .g3__sway{animation:none}
  .gbox.is-open .g3__lid{animation:none;opacity:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   16 Oct 2026 (bug and leak check, build/AUDIT-2026-10-16-ACADEMY-SITES.md §3.3): iPhones on
   iOS 15 and older (6s, 7 and the first SE cannot update further) and Chrome before 105 do not
   know the cqi unit, so every size of the 3D box above was invalid and the box did not show —
   only «Нажмите, чтобы открыть» over the glow. Here are the same sizes in px for them; browsers
   that know cqi never read this block. --u = 1% of the stage: 240px, 270px in the shop's
   «Inspira» (min(270px, 70vw)) and in the creed card. Safari 14 also lacks aspect-ratio and inset.
   ══════════════════════════════════════════════════════════════════════════ */
@supports not (width:1cqi){
  .gbox__stage{--u:2.4px}
  .creed--gift .gbox__stage{--u:2.7px}
  .held__gift .gbox__stage{--u:min(2.7px,.7vw)}
  .g3{--bw:calc(50 * var(--u));--bh:calc(37 * var(--u));--bd:calc(50 * var(--u));--lw:calc(55 * var(--u));
    --lh:calc(12.5 * var(--u));--ld:calc(55 * var(--u));--band:calc(9 * var(--u))}
  .g3__lid{top:calc(var(--lh) * -1 + 2 * var(--u))}
  .g3__bowp{left:calc(-23 * var(--u));top:calc(-24 * var(--u));width:calc(46 * var(--u));height:calc(28 * var(--u))}
  .g3__shadow{width:calc(64 * var(--u));height:calc(12 * var(--u));margin-left:calc(-32 * var(--u))}
  .gbox.g3-wait .g3__sway{translate:0 calc(-26 * var(--u))}
  @media (hover:hover) and (pointer:fine){
    .gbox:hover .g3__lid{transform:translateY(calc(-2.2 * var(--u))) rotateX(-5deg)}
  }
  @keyframes g3Lid{
    0%{transform:none;opacity:1}
    12%{transform:translateY(calc(1.6 * var(--u))) rotateX(2deg);opacity:1}
    30%{transform:translateY(calc(-30 * var(--u))) rotateX(-16deg) rotateZ(-7deg) translateZ(calc(4 * var(--u)));opacity:1}
    62%{transform:translate3d(calc(16 * var(--u)),calc(-62 * var(--u)),calc(10 * var(--u))) rotateX(-46deg) rotateY(70deg) rotateZ(22deg);opacity:1}
    100%{transform:translate3d(calc(30 * var(--u)),calc(-96 * var(--u)),calc(14 * var(--u))) rotateX(-80deg) rotateY(160deg) rotateZ(40deg);opacity:0}}
  @keyframes g3Bow{
    0%{transform:translateY(calc(var(--lh) / -2)) scale(1)}
    14%{transform:translateY(calc(var(--lh) / -2)) scale(1.18)}
    100%{transform:translateY(calc(var(--lh) / -2 - 8 * var(--u))) rotateY(540deg) scale(.9)}}
  @keyframes g3Drop{
    0%{opacity:0;translate:0 calc(-26 * var(--u));scale:1 1}
    52%{opacity:1;translate:0 calc(1.2 * var(--u));scale:1.035 .955}
    72%{translate:0 calc(-.9 * var(--u));scale:.985 1.02}
    100%{opacity:1;translate:0 0;scale:1 1}}
  @keyframes g3Open{
    0%{scale:1 1;translate:0 0}
    14%{scale:1.07 .9;translate:0 var(--u)}
    32%{scale:.95 1.07;translate:0 calc(-2 * var(--u))}
    52%{scale:1.02 .98;translate:0 0}
    100%{scale:1 1;translate:0 0}}
  @keyframes g3LidArc{
    12%{transform:translateY(calc(1.4 * var(--u))) rotateX(3deg);animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
    34%{transform:translateY(calc(-34 * var(--u))) rotateX(-18deg) rotateZ(-8deg) translateZ(calc(5 * var(--u)));animation-timing-function:cubic-bezier(.45,0,.55,1)}
    48%{transform:translate3d(calc(4 * var(--u)),calc(-40 * var(--u)),calc(7 * var(--u))) rotateX(-26deg) rotateY(22deg) rotateZ(-2deg);animation-timing-function:cubic-bezier(.55,0,.7,.4)}
    70%{opacity:1}
    100%{transform:translate3d(calc(34 * var(--u)),calc(-92 * var(--u)),calc(14 * var(--u))) rotateX(-84deg) rotateY(170deg) rotateZ(38deg);opacity:0}}
}
@supports not (aspect-ratio:1/1){
  .gbox__stage{height:0;padding-bottom:100%}
  .gbox__float,.gbox__nudge,.g3{top:0;right:0;bottom:0;left:0}
}