/* map.craftik.bd — the room behind the page. Copied from the office sign-in
   (craftik-office/cms/gate/gate.css, "scene" part, .gate__scene -> .room) so the
   two stay recognisably the same place; the laptop map (.route/.pin) is new. */

/* ------------------------------------------------------------------ scene */

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

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

.room::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 */
.room > svg { opacity: 0; transition: opacity .7s ease; }
.room.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; }
.room.is-lit .lampwash,
.room.is-lit .lamplight,
.room.is-lit .bulbglow,
.room.is-lit .bulbrim,
.room.is-lit .screen-ui { opacity: 1; }
.room.is-lit .pool { opacity: .9; }
.room.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, .pin, .pinring, .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) }
}
.room: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; }
.room.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 }
}


/* the laptop's little map: dashes march to the office, the pin bobs, its ring pulses */
.is-moving .scene .route { animation: march 1.1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -12 } }
.scene .pin { transform-origin: 50% 100%; }
.is-moving .scene .pin { animation: bob 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes bob {
  0%, 55%, 100% { transform: translateY(0) scale(1, 1) }
  18% { transform: translateY(-3.5px) scale(1, 1) }
  34% { transform: translateY(0) scale(1.08, .92) }
  42% { transform: translateY(-1px) scale(1, 1) }
}
.scene .pinring { transform-origin: center; opacity: 0; }
.is-moving .scene .pinring { animation: ring 2.6s ease-out infinite; }
@keyframes ring { 0%, 30% { transform: scale(.4); opacity: 0 } 36% { opacity: .9 } 100% { transform: scale(1.8); opacity: 0 } }
.room:not(.is-moving) .pinring { opacity: .5; }

/* phone: the room is a hero strip; below it the page darkens so the cards read */
@media (max-width: 900px) {
  .room::after {
    background: linear-gradient(180deg, transparent calc(var(--hero) - 60px), rgba(0, 0, 0, .6) calc(var(--hero) + 80px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .room *, .room *::before, .room *::after { transition: none !important; animation: none !important; }
}