.krabica{--karton:#d4d4d4;--karton-svetly:#e1e1e1;--karton-tmavy:#c4c4c4;--paska:#a5b523;--otvorenie:800ms;--krivka-otvorenia:cubic-bezier(0.45,0,0.25,1)}.karton{background-color:var(--karton);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"),radial-gradient(ellipse 34% 30% at 18% 24%,rgb(255 255 255/.32),rgb(255 255 255/0) 70%),radial-gradient(ellipse 30% 26% at 63% 16%,rgb(90 90 90/.07),rgb(90 90 90/0) 70%),radial-gradient(ellipse 40% 34% at 82% 76%,rgb(90 90 90/.1),rgb(90 90 90/0) 70%),radial-gradient(ellipse 28% 24% at 34% 84%,rgb(255 255 255/.2),rgb(255 255 255/0) 70%),linear-gradient(160deg,var(--karton-svetly) 0,var(--karton) 45%,var(--karton-tmavy) 100%);background-size:220px 220px,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh,100vw 100vh;background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;background-position:0 0}.chlopna-p.karton{background-position:0 0,-50vw 0,-50vw 0,-50vw 0,-50vw 0,-50vw 0}.chlopna{position:fixed;top:0;bottom:0;width:50%;overflow:hidden;transition:transform var(--otvorenie) var(--krivka-otvorenia);will-change:transform}.chlopna-l{left:0}.chlopna-p{right:0}.chlopna:after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity var(--otvorenie) var(--krivka-otvorenia)}.chlopna-l:after{background:linear-gradient(90deg,transparent 70%,rgb(40 40 40/.12))}.chlopna-p:after{background:linear-gradient(270deg,transparent 70%,rgb(40 40 40/.12))}.chlopna-tien{position:absolute;inset:0;pointer-events:none;background:#1c1c1c;opacity:0;transition:opacity var(--otvorenie) var(--krivka-otvorenia)}.paska{position:absolute;top:0;bottom:0;width:76px;background:linear-gradient(90deg,rgb(255 255 255/.18),rgb(255 255 255/0) 30%,rgb(255 255 255/0) 62%,rgb(255 255 255/.22) 72%,rgb(255 255 255/0) 86%),var(--paska);opacity:.93;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 0 6.5 21.818' preserveAspectRatio='none'%3E%3Cpath transform='translate(18.5 0) scale(-1 1)' d='M0,0L8.8866,0L9.6866,1.4C9.6866,1.4 12.4866,6.2 9.6866,10.909L8.8866,12.309C8.8866,12.309 6.0866,17.109 8.8866,21.818L0,21.818Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 0 6.5 21.818' preserveAspectRatio='none'%3E%3Cpath d='M0,0L8.8866,0L9.6866,1.4C9.6866,1.4 12.4866,6.2 9.6866,10.909L8.8866,12.309C8.8866,12.309 6.0866,17.109 8.8866,21.818L0,21.818Z'/%3E%3C/svg%3E");-webkit-mask-size:8px 26.85px,calc(100% - 14px) 100%,8px 26.85px;-webkit-mask-position:left top,center,right top;-webkit-mask-repeat:repeat-y,no-repeat,repeat-y;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 0 6.5 21.818' preserveAspectRatio='none'%3E%3Cpath transform='translate(18.5 0) scale(-1 1)' d='M0,0L8.8866,0L9.6866,1.4C9.6866,1.4 12.4866,6.2 9.6866,10.909L8.8866,12.309C8.8866,12.309 6.0866,17.109 8.8866,21.818L0,21.818Z'/%3E%3C/svg%3E"),linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 0 6.5 21.818' preserveAspectRatio='none'%3E%3Cpath d='M0,0L8.8866,0L9.6866,1.4C9.6866,1.4 12.4866,6.2 9.6866,10.909L8.8866,12.309C8.8866,12.309 6.0866,17.109 8.8866,21.818L0,21.818Z'/%3E%3C/svg%3E");mask-size:8px 26.85px,calc(100% - 14px) 100%,8px 26.85px;mask-position:left top,center,right top;mask-repeat:repeat-y,no-repeat,repeat-y}.chlopna-l .paska{right:-38px}.chlopna-p .paska{left:-38px}.paska-potlac{position:absolute;inset:-12px 0 0;display:flex;flex-direction:column;align-items:center;gap:44px;font-size:12px;font-weight:700;letter-spacing:.32em;color:rgb(33 33 33/.78);white-space:nowrap;user-select:none}.paska-potlac span{flex:none;writing-mode:vertical-rl}.vnutro{--dno:0.84;--stena:8%;--vstup:460ms;--vstup-start:420ms;--krivka-vstupu:cubic-bezier(0.3,0,0.2,1);position:fixed;inset:0;overflow:hidden;background:var(--color-surface)}.vnutro-dno{overflow:hidden;transform:scale(var(--dno));transition:transform var(--vstup) var(--krivka-vstupu) var(--vstup-start)}.vnutro-dno,.vnutro-steny{position:absolute;inset:0;transform-origin:50% 50%}.vnutro-steny{pointer-events:none;transition:transform var(--vstup) var(--krivka-vstupu) var(--vstup-start),opacity var(--vstup) cubic-bezier(.5,0,.75,0) var(--vstup-start)}.vnutro-steny>*{position:absolute;inset:0}.stena-h{background:linear-gradient(180deg,#6e6e6e,#828282);clip-path:polygon(0 0,100% 0,calc(100% - var(--stena)) var(--stena),var(--stena) var(--stena))}.stena-d{background:linear-gradient(0deg,#c2c2c2,#b0b0b0);clip-path:polygon(var(--stena) calc(100% - var(--stena)),calc(100% - var(--stena)) calc(100% - var(--stena)),100% 100%,0 100%)}.stena-l{background:linear-gradient(90deg,#7c7c7c,#919191);clip-path:polygon(0 0,var(--stena) var(--stena),var(--stena) calc(100% - var(--stena)),0 100%)}.stena-p{background:linear-gradient(270deg,#9b9b9b,#aaaaaa);clip-path:polygon(100% 0,100% 100%,calc(100% - var(--stena)) calc(100% - var(--stena)),calc(100% - var(--stena)) var(--stena))}.stena-tien{inset:var(--stena)!important;box-shadow:inset 0 14px 22px -12px rgb(30 30 30/.35),inset 10px 0 18px -12px rgb(30 30 30/.22)}@keyframes stitok-tras{0%,to{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}.stitok[data-tras="1"]{animation:stitok-tras .36s cubic-bezier(.36,.07,.19,.97)}.stitok-vrstva{transition:transform var(--otvorenie) var(--krivka-otvorenia),opacity .26s ease-in}.potlac{color:var(--color-ink);mix-blend-mode:multiply}.chlopna-l{transform-origin:100% 50%;transform:perspective(1900px) translateX(-100%) rotateY(0deg) translateX(100%)}.chlopna-p{transform-origin:0 50%;transform:perspective(1900px) translateX(100%) rotateY(0deg) translateX(-100%)}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .chlopna-l{transform:perspective(1900px) translateX(-100%) rotateY(-115deg) translateX(100%)}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .chlopna-p{transform:perspective(1900px) translateX(100%) rotateY(115deg) translateX(-100%)}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .chlopna:after{opacity:0}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .chlopna-tien{opacity:.45}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .vnutro-dno{transform:scale(1)}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .vnutro-steny{opacity:0;transform:scale(calc(1 / var(--dno)))}@media (max-width:1023.98px){.krabica .chlopna,.krabica .chlopna-tien{transition-delay:.16s}.krabica .vnutro{--vstup-start:560ms;--vstup:360ms}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .stitok-vrstva{opacity:0;transform:translateY(-28px) scale(.97);transition:transform .26s cubic-bezier(.55,0,1,.45),opacity .17s ease-in}}@media (min-width:1024px){.stitok-vrstva{transform-origin:0 50%;transform:perspective(1900px) translateX(100%) rotateY(0deg) translateX(-100%);backface-visibility:hidden}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .stitok-vrstva{transform:perspective(1900px) translateX(100%) rotateY(115deg) translateX(-100%)}.stitok{position:relative}.stitok:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#1c1c1c;opacity:0;transition:opacity var(--otvorenie) var(--krivka-otvorenia)}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .stitok:after{opacity:.45}}.krabica[data-faza=otvorena] .chlopna,.krabica[data-faza=otvorena] .chlopna-tien,.krabica[data-faza=otvorena] .chlopna:after,.krabica[data-faza=otvorena] .stitok-vrstva,.krabica[data-faza=otvorena] .stitok:after,.krabica[data-faza=otvorena] .vnutro-dno,.krabica[data-faza=otvorena] .vnutro-steny{transition:none!important}.krabica[data-faza=zatvara] .vnutro-dno{transition:transform .36s cubic-bezier(.4,0,.2,1)}.krabica[data-faza=zatvara] .vnutro-steny{transition:transform .36s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.22,1,.36,1)}.krabica[data-faza=zatvara] .chlopna,.krabica[data-faza=zatvara] .chlopna-tien,.krabica[data-faza=zatvara] .chlopna:after{transition:transform .58s cubic-bezier(.5,0,.2,1) .22s,opacity .58s cubic-bezier(.5,0,.2,1) .22s}@media (min-width:1024px){.krabica[data-faza=zatvara] .stitok-vrstva,.krabica[data-faza=zatvara] .stitok:after{transition:transform .58s cubic-bezier(.5,0,.2,1) .22s,opacity .58s cubic-bezier(.5,0,.2,1) .22s}}@media (max-width:1023.98px){.krabica[data-faza=zatvara] .stitok-vrstva{transition:transform .26s cubic-bezier(.2,.8,.2,1) .8s,opacity .2s ease-out .8s}}@media (prefers-reduced-motion:reduce){.chlopna,.chlopna-tien,.chlopna:after,.stitok-vrstva,.stitok:after,.vnutro-dno,.vnutro-steny{transition:none!important}.stitok[data-tras="1"]{animation:none}.krabica:is([data-faza=otvara],[data-faza=otvorena]) .chlopna,.krabica:is([data-faza=otvara],[data-faza=otvorena]) .stitok-vrstva{transform:none;opacity:0}}