/* CraftikPrint scene (login + dashboard backdrop). Rules for the cat, squirrel and the print-shop props. */
/* ------------------------------------------------------------------ scene */

.gate__scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0d0906;
}

.gate__scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.gate__scene::after {                              /* vignette: quiet edges, crisp middle */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 80% at 32% 55%, transparent 55%, rgba(0, 0, 0, .5)),
    linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 22%);
}

/* the room fades in, then the lamp clicks on */
.gate__scene > svg { opacity: 0; transition: opacity .7s ease; }
.gate__scene.is-in > svg { opacity: 1; }

.scene .lampwash, .scene .lamplight, .scene .bulbglow, .scene .bulbrim, .scene .pool, .scene .screen-ui {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.scene .bulbrim { opacity: .25; }
.gate__scene.is-lit .lampwash,
.gate__scene.is-lit .lamplight,
.gate__scene.is-lit .bulbglow,
.gate__scene.is-lit .bulbrim,
.gate__scene.is-lit .screen-ui { opacity: 1; }
.gate__scene.is-lit .pool { opacity: .9; }
.gate__scene.is-lit .lamplight { animation: lamp-on .9s steps(1, end) both; }
@keyframes lamp-on {
  0% { opacity: 0 } 12% { opacity: .8 } 22% { opacity: .1 } 34% { opacity: 1 } 44% { opacity: .55 } 56%, 100% { opacity: 1 }
}

.scene .brand__h { font: 700 46px/1 var(--font); letter-spacing: -.02em; fill: #fff; }
.scene .brand__p { font: 500 19px/1 var(--font); fill: rgba(255, 255, 255, .5); }

/* everything below animates only with motion allowed (gate.js adds .is-moving) */
.scene :is(.fb, .rd, .trickle, .steam__p, .curtain, .vine, .pothos__crown, .mote, .squirrel, .sq-head,
  .sq-paws, .sq-tail, .cat__body, .cat__head, .cat__eye, .cat__ear, .heart) { transform-box: fill-box; }
/* only those: anything else keeps its SVG transform attribute relative to the user space */

.is-moving .scene .cone { animation: glow 7s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: 1 } 50% { opacity: .86 } }

.scene .fb { transform-origin: center; }
.is-moving .scene .fb { animation: twinkle var(--d, 3s) ease-in-out var(--dl, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.is-moving .scene .rd { animation: rain var(--t, .9s) linear var(--dl, 0s) infinite; }
@keyframes rain { from { transform: translate(0, 0) } to { transform: translate(-14px, 340px) } }

.is-moving .scene .trickle { animation: trickle 9s cubic-bezier(.6, 0, .9, .6) infinite; }
.is-moving .scene .trickle--2 { animation-duration: 13s; animation-delay: -5s; }
@keyframes trickle {
  0%, 30% { transform: translate(0, 0); opacity: 0 }
  34% { opacity: .5 }
  90% { transform: translate(1px, 290px); opacity: .45 }
  100% { transform: translate(1px, 300px); opacity: 0 }
}

.scene .steam__p { opacity: 0; stroke-dasharray: 70; }
.is-moving .scene .steam__p { animation: steam 4.6s ease-out infinite; }
.is-moving .scene .steam__p--2 { animation-delay: -1.5s; }
.is-moving .scene .steam__p--3 { animation-delay: -3s; }
@keyframes steam {
  0% { opacity: 0; stroke-dashoffset: 70; transform: translateY(8px) }
  25% { opacity: .22 }
  70% { opacity: .1 }
  100% { opacity: 0; stroke-dashoffset: -30; transform: translateY(-16px) }
}
.gate__scene:not(.is-moving) .steam__p { opacity: .14; stroke-dasharray: none; }

.scene .curtain { transform-origin: 50% 0; }
.is-moving .scene .curtain--l { animation: sway 9s ease-in-out infinite; }
.is-moving .scene .curtain--r { animation: sway 11s ease-in-out -4s infinite reverse; }
@keyframes sway { 0%, 100% { transform: skewX(0) } 50% { transform: skewX(-1.2deg) } }

.scene .vine { transform-origin: 50% 0; }
.is-moving .scene .vine--r { animation: vine 6s ease-in-out infinite; }
.is-moving .scene .vine--l { animation: vine 7.5s ease-in-out -2s infinite reverse; }
@keyframes vine { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(2.4deg) } }
.scene .pothos__crown { transform-origin: 50% 100%; }
.is-moving .scene .pothos__crown { animation: crown 8s ease-in-out infinite; }
@keyframes crown { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(1deg) } }

.scene .caret { opacity: 0; }
.is-moving .scene .caret { animation: caret 1.1s steps(1, end) infinite; }
.gate__scene.is-lit .caret { opacity: 1; }
@keyframes caret { 50% { opacity: 0 } }

/* dust in the lamp light */
.scene .mote { transform-origin: center; }
.is-moving .scene .mote { animation: mote var(--t, 14s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes mote {
  0% { transform: translate(0, 0); opacity: 0 }
  20% { opacity: var(--a, .6) }
  80% { opacity: var(--a, .6) }
  100% { transform: translate(var(--dx, 20px), var(--dy, -30px)); opacity: 0 }
}

/* city windows switch on and off */
.is-moving .scene .cw--blink { animation: cw var(--t, 12s) steps(1, end) var(--dl, 0s) infinite; }
@keyframes cw { 0%, 60% { opacity: var(--a, .8) } 61%, 100% { opacity: .05 } }

/* squirrel: nibbles in bursts, flicks its tail, hops when poked */
.scene .squirrel { cursor: pointer; }
.scene .sq-head { transform-origin: 30% 90%; }
.scene .sq-paws { transform-origin: 0% 100%; }
.scene .sq-tail { transform-origin: 80% 100%; }
.is-moving .scene .sq-head { animation: nibble 4.2s ease-in-out infinite; }
.is-moving .scene .sq-paws { animation: paws 4.2s ease-in-out infinite; }
.is-moving .scene .sq-tail { animation: flick 7s ease-in-out infinite; }
@keyframes nibble {
  0%, 48%, 100% { transform: rotate(0) }
  52%, 60%, 68%, 76% { transform: rotate(9deg) }
  56%, 64%, 72% { transform: rotate(4deg) }
}
@keyframes paws {
  0%, 48%, 100% { transform: translateY(0) }
  52%, 60%, 68%, 76% { transform: translateY(-1.4px) }
  56%, 64%, 72% { transform: translateY(0) }
}
@keyframes flick {
  0%, 70%, 100% { transform: rotate(0) }
  74% { transform: rotate(-9deg) }
  78% { transform: rotate(4deg) }
  82% { transform: rotate(-5deg) }
  88% { transform: rotate(0) }
}
.scene .squirrel { transform-origin: 50% 100%; }
.scene .squirrel.is-hop { animation: hop .7s cubic-bezier(.3, .7, .4, 1); }
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1) }
  18% { transform: translateY(0) scale(1.08, .9) }
  48% { transform: translateY(-26px) scale(.95, 1.06) }
  78% { transform: translateY(0) scale(1.06, .94) }
  100% { transform: translateY(0) scale(1, 1) }
}

/* cat: breathes, blinks, twitches an ear, follows the pointer with its eyes (gate.js) */
.scene .cat { cursor: pointer; }
.scene .cat__body { transform-origin: 50% 100%; }
.is-moving .scene .cat__body { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.012, 1.018) } }

.scene .cat__head { transform-origin: 50% 100%; transition: transform .35s ease-out; }
.scene .cat__eye { transform-origin: center; transition: transform .09s ease-in; }
.scene .cat__closed path { opacity: 0; transition: opacity .12s; }
.scene .cat.is-blink .cat__eye { transform: scaleY(.08); }
.scene .cat.is-shy .cat__eye { transform: scaleY(.08); }
.scene .cat.is-shy .cat__closed path { opacity: 1; }
.scene .cat.is-shy.is-peek .cat__eye--r { transform: none; }
.scene .cat.is-shy.is-peek .cat__closed--r { opacity: 0; }
.scene .cat.is-happy .cat__eye { transform: scaleY(.08); transition-duration: .5s; }
.scene .cat.is-happy .cat__closed path { opacity: 1; transition-duration: .5s; }

.scene .cat__ear { transition: transform .18s ease; }
.scene .cat__ear--l { transform-origin: 70% 100%; }
.scene .cat__ear--r { transform-origin: 30% 100%; }
.scene .cat.is-twitch .cat__ear--l { transform: rotate(-12deg); }
.scene .cat.is-twitch-r .cat__ear--r { transform: rotate(12deg); }
.scene .cat.is-startled .cat__ear--l { transform: rotate(-32deg) scale(.9); }
.scene .cat.is-startled .cat__ear--r { transform: rotate(32deg) scale(.9); }

.scene .heart { transform-origin: center; animation: heart 1.8s ease-out forwards; }
@keyframes heart {
  0% { transform: translate(0, 0) scale(.3); opacity: 0 }
  15% { transform: translate(0, -8px) scale(1); opacity: 1 }
  100% { transform: translate(var(--dx, 0px), -70px) scale(.8); opacity: 0 }
}


/* ---- CraftikPrint additions: print shop props ---- */
.scene .brand__print { fill: #19c3f5; }
.scene .pp-sheet{opacity:0;transform:translateY(96px)}
.is-moving .scene .pp-sheet{animation:ppfeed 12s linear infinite}
.is-moving .scene .pp-sheet--b{animation-delay:-6s}
.gate__scene:not(.is-moving) .pp-sheet--a{opacity:1;transform:none}
@keyframes ppfeed{
  0%{opacity:1;transform:translateY(96px);animation-timing-function:steps(16,end)}
  30%{transform:translateY(0)}
  43%{opacity:1;transform:translateY(0);animation-timing-function:ease-in}
  49%{opacity:0;transform:translateY(-14px)}
  50.1%,100%{opacity:0;transform:translateY(96px)}
}
.is-moving .scene .pr-led{animation:prled 1.1s steps(1,end) infinite}
@keyframes prled{50%{opacity:.25}}
.scene .printer{transform-box:fill-box;transform-origin:50% 100%}
.is-moving .scene .printer{animation:prhum 12s steps(1,end) infinite}
@keyframes prhum{0%,28%{transform:translateY(0)}2%,6%,10%,14%,18%,22%,26%{transform:translateY(-.5px)}}
/* ink tanks slowly drain and refill */
.scene .lvl{transform-box:fill-box;transform-origin:50% 100%}
.is-moving .scene .ink--c .lvl{animation:inklvl 9s ease-in-out infinite}
.is-moving .scene .ink--m .lvl{animation:inklvl 11s ease-in-out -3s infinite}
.is-moving .scene .ink--y .lvl{animation:inklvl 8s ease-in-out -5s infinite}
.is-moving .scene .ink--k .lvl{animation:inklvl 12s ease-in-out -7s infinite}
@keyframes inklvl{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.62)}}
/* laminator: heat bar glows, a laminated sheet slides out with a shine */
.is-moving .scene .heatbar{animation:heat 2.4s ease-in-out infinite}
.is-moving .scene .heat-led{animation:prled .8s steps(1,end) infinite}
@keyframes heat{0%,100%{opacity:.45}50%{opacity:1}}
.scene .lm-sheet{opacity:0;transform:translateX(-110px)}
.is-moving .scene .lm-sheet{animation:lmfeed 8s linear infinite}
.gate__scene:not(.is-moving) .lm-sheet{opacity:1;transform:translateX(-40px)}
@keyframes lmfeed{
  0%{opacity:1;transform:translateX(-120px);animation-timing-function:ease-out}
  35%{transform:translateX(-30px)}
  70%{opacity:1;transform:translateX(-30px)}
  82%{opacity:0;transform:translateX(-20px)}
  100%{opacity:0;transform:translateX(-120px)}
}
.is-moving .scene .shine{animation:shine 8s linear infinite}
@keyframes shine{0%,20%{transform:translateX(-40px)}60%,100%{transform:translateX(150px)}}
.scene .pl-print{transform-box:fill-box}
.is-moving .scene .pl-print{animation:plfeed 14s linear infinite}
@keyframes plfeed{0%{transform:translateY(-150px)}100%{transform:translateY(0)}}
.scene .regmark{transform-box:fill-box;transform-origin:center}
.is-moving .scene .regmark{animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scene .dry{transform-box:fill-box;transform-origin:50% 0}
.is-moving .scene .dry--1{animation:dsway 6s ease-in-out infinite}
.is-moving .scene .dry--2{animation:dsway 7.5s ease-in-out -2s infinite reverse}
.is-moving .scene .dry--3{animation:dsway 6.8s ease-in-out -4s infinite}
@keyframes dsway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.6deg)}}
.scene .poster circle{transform-box:fill-box;transform-origin:center}
.is-moving .scene .poster g circle:nth-child(1){animation:drift 7s ease-in-out infinite}
.is-moving .scene .poster g circle:nth-child(2){animation:drift 8s ease-in-out -2s infinite reverse}
.is-moving .scene .poster g circle:nth-child(3){animation:drift 9s ease-in-out -4s infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
.scene .pool{opacity:0;transition:opacity .9s}
.gate__scene.is-lit .pool{opacity:.9}
.scene .squirrel-wrap .squirrel{transform-box:fill-box}
/* wrong password: the printer jams */
.gate__scene.is-jam .pp-sheet,.gate__scene.is-jam .lm-sheet{animation-play-state:paused!important}
.gate__scene.is-jam .pr-led{fill:#F0189B;animation-duration:.25s!important}
.gate__scene.is-jam .printer{animation:jam .42s linear 2}
@keyframes jam{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
/* dashboard backdrop: the whole room, dimmed behind the glass panels */
.bgscene{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#0b0d14}
.bgscene>svg{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
.bgscene.is-in>svg{opacity:1}
.bgscene .brand{display:none}
.bgscene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,13,20,.12),rgba(11,13,20,.08) 60%,rgba(11,13,20,.5))}

@media (max-width:999px){
  .bgscene{bottom:auto;height:calc(44vh + env(safe-area-inset-top))}
  .bgscene::after{background:linear-gradient(180deg,rgba(11,13,20,.35),rgba(11,13,20,0) 30%,rgba(11,13,20,0) 62%,#0b0d14)}
}