/* ══════════════════════════════════════════════════════════════════════════
   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}

/* «Не знаете, что делать дальше?» under the opened gift (founder, 14 Oct 2026): one tap slides the page
   down to the free masterclass book (#keep; js/main.js «gift-next») */
.gloot__next{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(46,17,40,.2);text-align:center;animation:gbRise .6s .35s both cubic-bezier(.16,1,.3,1)}
.gloot__q{margin:0 0 10px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.gloot__q{margin-bottom:16px}
/* 14 Oct, «make it more beautifull, 3d … something that will make them want to press it»: a plum velvet key
   with real thickness, sitting in the founder's gold «event» ring like in a socket; a little copy of the
   masterclass book rides on it and keeps lifting its cover to show the warm light inside. Pressing sinks it. */
.event.gnext-ring{display:block;margin:0 2px}
.event.gnext-ring::after{inset:-10px;filter:blur(16px);opacity:.3}
.gnext{position:relative;display:flex;align-items:center;gap:10px;min-height:70px;padding:8px 12px 8px 12px;border-radius:999px;
  text-decoration:none;color:#FFF6EC;-webkit-tap-highlight-color:transparent;perspective:520px;
  background:radial-gradient(130% 150% at 28% 0%,#6E3159 0%,#4C1F3C 46%,#381433 100%);
  box-shadow:inset 0 1px 0 rgba(255,226,190,.24),inset 0 -2px 0 rgba(20,4,18,.32),0 5px 0 #2A0E25,0 14px 24px rgba(55,21,54,.34);
  transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .2s cubic-bezier(.32,.72,0,1)}
.gnext:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,226,190,.28),inset 0 -2px 0 rgba(20,4,18,.32),0 7px 0 #2A0E25,0 18px 30px rgba(55,21,54,.38)}
.gnext:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,226,190,.18),inset 0 -1px 0 rgba(20,4,18,.3),0 1px 0 #2A0E25,0 5px 10px rgba(55,21,54,.3)}
.gnext:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
/* the book (14 Oct, «change the angle … to look more natural»): a real little book at the same angle as the big
   one in #keep (mclass.css: rotateX -17°, rotateY 25°, rotateZ -2°) — plum back and spine, cream page edges,
   the cover hinged on the spine; it keeps lifting its cover to show the warm light inside */
.gnext__stage{--w:66px;--h:37px;--d:7px;position:relative;flex:none;display:block;width:var(--w);height:var(--h);
  margin:-12px 0 -4px 3px;perspective:300px;perspective-origin:50% 35%}
.gnext__stage::before{content:"";position:absolute;left:4%;right:-6%;bottom:-9px;height:10px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,4,18,.55),rgba(20,4,18,0));filter:blur(1px)}
.gnext__stage::after{content:"";position:absolute;inset:-12px -8px -6px -14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(55% 60% at 38% 48%,rgba(255,240,190,.9),rgba(255,200,110,.38) 48%,rgba(255,200,110,0) 74%);
  opacity:0;animation:gnextGlow 4.4s cubic-bezier(.32,.72,0,1) 1.4s infinite}
.gnext__book{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateX(-17deg) rotateY(25deg) rotateZ(-2deg)}
.gnext__f{position:absolute;left:0;top:0;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.gnext__back{width:var(--w);height:var(--h);transform:rotateY(180deg) translateZ(calc(var(--d) / 2));border-radius:3px 1px 1px 3px;background:#3D213D}
.gnext__spine{width:var(--d);height:var(--h);left:calc(var(--d) / -2);transform:rotateY(-90deg);border-radius:1px;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.1) 40%,rgba(0,0,0,.3)),#4C1F3C}
.gnext__pg{background:repeating-linear-gradient(90deg,#E9DAC6 0 1px,#FFF9F0 1px 2px)}
.gnext__pg--r{width:var(--d);height:calc(var(--h) - 3px);top:1.5px;left:calc(var(--w) - var(--d) / 2 - 1.5px);transform:rotateY(90deg)}
.gnext__pg--t{width:calc(var(--w) - 2px);height:var(--d);top:calc(var(--d) / -2 + 1.5px);transform:rotateX(90deg);
  background:repeating-linear-gradient(0deg,#E9DAC6 0 1px,#FFF9F0 1px 2px)}
.gnext__pg--b{width:calc(var(--w) - 2px);height:var(--d);top:calc(var(--h) - var(--d) / 2 - 1.5px);transform:rotateX(-90deg);
  background:repeating-linear-gradient(0deg,#DCCAB3 0 1px,#F4E8D8 1px 2px)}
.gnext__inside{width:calc(var(--w) - 2px);height:calc(var(--h) - 2px);top:1px;transform:translateZ(calc(var(--d) / 2 - .5px));border-radius:1px 2px 2px 1px;
  background:radial-gradient(90% 120% at 8% 50%,#FFF1C9 0%,#F6C877 34%,#EBCFA2 70%,#F7EBDA 100%)}
.gnext__cover{position:absolute;left:0;top:0;width:var(--w);height:var(--h);display:block;border-radius:1px 3px 3px 1px;overflow:hidden;
  transform-origin:0 50%;transform:translateZ(calc(var(--d) / 2));-webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,236,200,.3);animation:gnextPeek 4.4s cubic-bezier(.32,.72,0,1) 1.4s infinite}
.gnext__cover img{display:block;width:100%;height:100%;object-fit:cover}
.gnext:hover .gnext__cover{animation:none;transform:translateZ(calc(var(--d) / 2)) rotateY(-80deg);transition:transform .45s cubic-bezier(.32,.72,0,1)}
.gnext:hover .gnext__stage::after{animation:none;opacity:1}
@keyframes gnextPeek{0%,56%,100%{transform:translateZ(3.5px) rotateY(0)}68%,86%{transform:translateZ(3.5px) rotateY(-76deg)}}
@keyframes gnextGlow{0%,56%,100%{opacity:0}68%,86%{opacity:1}}
.gnext__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2}
.gnext__txt b{font-size:17px;font-weight:700;letter-spacing:.005em;white-space:nowrap;color:#FFF6EC}
.gnext__txt i{margin-top:3px;font-style:normal;font-size:13.5px;font-weight:600;color:var(--gold)}
.gnext__go{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-content:center;font-size:18px;font-weight:700;line-height:1;
  color:var(--plum-d);background:linear-gradient(180deg,#F8CD82,#E9A94E);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #9A630F;
  transition:transform .2s cubic-bezier(.32,.72,0,1)}
.gnext:hover .gnext__go{transform:translateY(3px)}

@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,.gloot__next{animation:none;opacity:1;transform:none}
  .gnext__cover{animation:none;transform:translateZ(3.5px) rotateY(-24deg)}
  .gnext__stage::after{animation:none;opacity:.6}
  .gnext,.gnext__go{transition: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}
}

/* 19 Oct 2026: «Скачать» inside Instagram's / Facebook's own browser (js/main.js 6c): a sheet that says how to open
   the page in the phone's browser, where the gift is already open. Paper card, plum words, one gold button. */
.msave{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(35,15,27,.55)}
.msave[hidden]{display:none}
.msave__card{position:relative;width:100%;max-width:440px;padding:26px 22px 22px;border-radius:18px;box-shadow:0 18px 44px rgba(35,15,27,.35);text-align:left;outline:none}
.msave__x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--plum);font-size:28px;line-height:1;cursor:pointer}
.msave__h{margin:0 40px 10px 0;font:600 22px/1.25 var(--serif);color:var(--ink)}
.msave__p{margin:0 0 16px;font-size:16px;line-height:1.5;color:var(--body)}
.msave__steps{list-style:decimal;margin:0 0 16px;padding-left:24px;font-size:17px;line-height:1.6;font-weight:600;color:var(--ink)}
.msave__go{display:block;width:100%;text-align:center;margin:0 0 14px}
.msave__pic{display:inline-block;padding:8px 0;font-size:15px;font-weight:600;color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.msave__steps li{display:list-item}
.msave__steps li::marker{color:var(--gold-ink)}