/* KallisToys — animated archive / catalogue banner (homepage side tile, dark).
   3D coverflow of real catalogue covers; the front one lifts its cover. Whole tile opens the archive popup. */
.kcb{--kcb-ease:cubic-bezier(.22,.61,.36,1);position:relative;display:block;height:100%;min-height:170px;border-radius:var(--r,14px);overflow:hidden;isolation:isolate;cursor:pointer;color:#fbf4ea;container-type:inline-size;
  background:radial-gradient(70% 120% at 72% 40%,#3b2b1f 0%,#1d1611 48%,#110d0a 100%);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:transform .35s var(--kcb-ease)}
.kcb::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(30% 62% at 71% 36%,rgba(255,200,130,.20),transparent 72%),
  linear-gradient(0deg,rgba(0,0,0,.5),transparent 32%)}
.kcb::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kcb:hover{transform:translateY(-2px)}
.kcb:focus-visible{outline:2px solid #fbf4ea;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.kcb{animation:kcbIn .9s .18s cubic-bezier(.2,.8,.2,1) both}}
@keyframes kcbIn{from{opacity:0;transform:translateY(10px)}}

/* copy */
.kcb-copy{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;height:100%;box-sizing:border-box;padding:18px 0 18px 22px;max-width:calc(100% - 296px)}
.kcb-kicker{margin:0 0 8px;font:700 11px/1.3 'Manrope',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e9c89a;opacity:.9}
.kcb-h{margin:0;font:500 23px/1.14 'Source Serif 4',Georgia,serif;letter-spacing:-.01em;text-wrap:balance;color:#fbf4ea}
.kcb-h em{font-style:italic;color:#f0d3a8}
.kcb-arrow{position:absolute;right:18px;bottom:18px;z-index:5;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(251,244,234,.35);background:rgba(17,13,10,.35);backdrop-filter:blur(4px);transition:background .3s,color .3s,border-color .3s,transform .3s}
.kcb-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kcb:hover .kcb-arrow,.kcb:focus-visible .kcb-arrow{background:#fbf4ea;border-color:#fbf4ea;color:#1d1611;transform:translateX(2px)}

/* stage */
.kcb-stage{position:absolute;right:0;top:0;bottom:0;z-index:1;width:320px;perspective:700px;perspective-origin:50% 38%;pointer-events:none}
.kcb-book{--x:0px;--z:-160px;--ry:0deg;--o:0;--dim:.8;position:absolute;left:46%;bottom:40px;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);transform-style:preserve-3d;
  opacity:var(--o);transform:translateX(var(--x)) translateZ(var(--z)) rotateY(var(--ry));
  transition:transform 1.6s var(--kcb-ease),opacity 1.2s var(--kcb-ease);
  -webkit-box-reflect:below 2px linear-gradient(transparent 70%,rgba(255,255,255,.2))}
.kcb-pages{position:absolute;inset:2px 0 2px 3px;border-radius:1px 3px 3px 1px;background:repeating-linear-gradient(90deg,#efe5d2 0 1px,#e0d2b8 1px 2px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.kcb-pages::before{content:"";position:absolute;inset:12% 14%;background:repeating-linear-gradient(0deg,rgba(90,70,50,.22) 0 1px,transparent 1px 6px)}
.kcb-cover{position:absolute;inset:0;border-radius:2px 4px 4px 2px;overflow:hidden;transform-origin:0 50%;backface-visibility:hidden;
  box-shadow:0 18px 30px rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.4)}
.kcb-cover img{display:block;width:100%;height:100%;object-fit:cover}
.kcb-cover::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.14) 2.5%,transparent 6%),linear-gradient(118deg,rgba(255,255,255,.18) 0%,transparent 38%)}
.kcb-cover::after{content:"";position:absolute;inset:0;z-index:2;background:#0c0907;opacity:var(--dim);transition:opacity 1.4s var(--kcb-ease)}

/* positions */
.kcb-book[data-pos="0"]{--x:0px;--z:0px;--ry:0deg;--o:1;--dim:0;z-index:5}
.kcb-book[data-pos="-1"]{--x:-78px;--z:-90px;--ry:44deg;--o:1;--dim:.38;z-index:4}
.kcb-book[data-pos="1"]{--x:78px;--z:-90px;--ry:-44deg;--o:1;--dim:.38;z-index:4}
.kcb-book[data-pos="-2"]{--x:-122px;--z:-170px;--ry:56deg;--o:.5;--dim:.66;z-index:3}
.kcb-book[data-pos="2"]{--x:122px;--z:-170px;--ry:-56deg;--o:.5;--dim:.66;z-index:3}
.kcb-book[data-pos="-3"]{--x:-160px;--z:-240px;--ry:62deg;--o:0;--dim:.9;z-index:2}
.kcb-book[data-pos="3"]{--x:160px;--z:-240px;--ry:-62deg;--o:0;--dim:.9;z-index:2}
/* caption under the covers: the catalogue in front */
.kcb-cap{position:absolute;left:46%;bottom:12px;z-index:7;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;margin:0;white-space:nowrap;pointer-events:none}
.kcb-cap-t{display:flex;align-items:baseline;gap:8px;transition:opacity .55s ease,transform .8s var(--kcb-ease),filter .55s ease}
.kcb-cap-t b{font:700 10.5px/1 'Manrope',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#fbf4ea}
.kcb-cap-t i{font:italic 500 14px/1 'Source Serif 4',Georgia,serif;color:#f0d3a8}
.kcb-cap-line{position:relative;width:74px;height:1px;background:linear-gradient(90deg,transparent,#e9c89a,transparent);transform:scaleX(0);opacity:.9}
.kcb-cap-line::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff3dc;box-shadow:0 0 8px 2px rgba(255,210,150,.7);opacity:0}
.kcb-cap.is-in .kcb-cap-line{animation:kcbLine 1.4s var(--kcb-ease) both}
.kcb-cap.is-in .kcb-cap-line::after{animation:kcbGlint 1.6s .2s ease-out both}
.kcb-cap.is-swap .kcb-cap-t{opacity:0;transform:translateY(5px);filter:blur(3px)}
.kcb-cap.is-swap .kcb-cap-line{transform:scaleX(0);transition:transform .4s ease}
@keyframes kcbLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kcbGlint{0%{opacity:0;transform:translateX(-36px)}30%{opacity:1}100%{opacity:0;transform:translateX(36px)}}

/* the front catalogue lifts its cover */
.kcb-book[data-pos="0"] .kcb-cover{animation:kcbPeek 2.8s 1.5s cubic-bezier(.45,0,.25,1) both}
@keyframes kcbPeek{0%,100%{transform:rotateY(0)}38%,64%{transform:rotateY(-30deg)}}
.kcb-glow{position:absolute;left:46%;bottom:26px;width:220px;height:30px;margin-left:-110px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,130,.2),transparent);filter:blur(3px)}

.kcb.is-paused .kcb-cover{animation-play-state:paused}

/* sizes (container-based: the tile's own width) */
@container (max-width:500px){.kcb-stage{width:260px;transform:scale(.8);transform-origin:100% 60%}.kcb-copy{max-width:calc(100% - 214px)}.kcb-h{font-size:21px}}
@container (max-width:400px){.kcb-stage{transform:scale(.66)}.kcb-copy{max-width:calc(100% - 168px);padding-left:18px}.kcb-h{font-size:19px}.kcb-arrow{display:none}}

@media (prefers-reduced-motion:reduce){.kcb,.kcb-book,.kcb-cap-t{transition:none!important}.kcb-cap-line{transform:none!important;animation:none!important}.kcb-book .kcb-cover{animation:none!important}}

.kcb{text-decoration:none}.kcb>.kcb-copy:not(.kcb-museum-copy),.kcb-stage{transition:opacity .8s,filter .8s}.kcb.is-museum>.kcb-copy:not(.kcb-museum-copy),.kcb.is-museum .kcb-stage{opacity:0;filter:blur(5px)}.kcb .kcb-museum-copy{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .8s .2s,transform 1s .2s;max-width:calc(100% - 244px)}.kcb.is-museum .kcb-museum-copy{opacity:1;transform:none}.kcb.is-museum{background:radial-gradient(90% 150% at 76% 42%,#455149,#202a25 55%,#121b18)}.kcb-museum-cta{margin-top:13px;font:700 12px/1.4 'Manrope',sans-serif;color:#f4d8a9}.kcb-museum-art{position:absolute;right:55px;top:50%;width:180px;height:152px;margin-top:-76px;opacity:0;transform:translateY(22px) scale(.9);transition:opacity .9s .25s,transform 1.2s .25s}.kcb.is-museum .kcb-museum-art{opacity:1;transform:none}.kcb-museum-case{position:absolute;inset:8px 12px 18px;border:1px solid #c6d5bc66;border-radius:65px 65px 4px 4px;background:linear-gradient(110deg,#fff1,transparent 45%,#fff1);box-shadow:inset 0 1px 8px #eefce422;overflow:hidden}.kcb-museum-object{position:absolute;inset:15px 13px 16px;z-index:2}.kcb-museum-object img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 9px 5px #08110b99)}.kcb-museum-plinth{position:absolute;left:7%;right:7%;bottom:4px;height:13px;border-radius:50%;background:linear-gradient(#b6b49c,#545b50);box-shadow:0 5px 0 #434b3f}.kcb-museum-light{position:absolute;inset:-8px -10px;background:conic-gradient(from 155deg at 50% 0,transparent 0deg,#f4df9820 15deg,transparent 50deg);filter:blur(3px);transform-origin:50% 0}.kcb.is-museum .kcb-museum-light{animation:kcbSpotlight 6s ease-in-out infinite}.kcb.is-museum .kcb-museum-object{animation:kcbObject 6s ease-in-out infinite}.kcb-museum-label{position:absolute;bottom:0;width:100%;text-align:center;font:600 7px/1.5 'Manrope',sans-serif;letter-spacing:.1em;color:#e8d5ad}.kcb.is-paused .kcb-museum-object,.kcb.is-paused .kcb-museum-light{animation-play-state:paused}@keyframes kcbSpotlight{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}@keyframes kcbObject{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@container(max-width:500px){.kcb .kcb-museum-copy{max-width:calc(100% - 190px)}.kcb-museum-art{right:36px;transform:scale(.8) translateY(20px);transform-origin:right center}.kcb.is-museum .kcb-museum-art{transform:scale(.8)}}@container(max-width:400px){.kcb .kcb-museum-copy{max-width:calc(100% - 135px)}.kcb .kcb-museum-copy .kcb-h{font-size:18px}.kcb-museum-art{right:12px;transform:scale(.64) translateY(20px)}.kcb.is-museum .kcb-museum-art{transform:scale(.64)}.kcb-museum-cta{font-size:11px}}
@media(prefers-reduced-motion:reduce){.kcb .kcb-museum-copy,.kcb-museum-art{transition:none}.kcb.is-museum .kcb-museum-light,.kcb.is-museum .kcb-museum-object{animation:none}}
.kcb-museum-object img{position:absolute;inset:0;opacity:0;transition:opacity .65s ease}
.kcb-museum-object img.is-current{opacity:1}
.kcb-museum-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
@media(prefers-reduced-motion:reduce){.kcb-museum-object img{transition:none}}