:root {
  --cat-width: clamp(220px, 23vw, 360px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #d9bd79;
}

.scene {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(to bottom, rgb(255 244 211 / 3%), rgb(116 91 35 / 5%)),
    url("autumn-courtyard.webp") center center / cover no-repeat;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, transparent 52%, rgb(92 63 20 / 8%) 115%);
  mix-blend-mode: multiply;
}

.cat-path {
  position: absolute;
  z-index: 1;
  left: 8vw;
  bottom: clamp(8%, 11vh, 15%);
  width: var(--cat-width);
  aspect-ratio: 360 / 260;
  transform-origin: center bottom;
  will-change: transform;
}

.cat-rig {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgb(74 55 28 / 15%));
}

.cat-view {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.turn-view {
  opacity: 0;
  pointer-events: none;
}

.cat-paint {
  filter: url("#watercolor-edge");
}

.cat-shadow {
  filter: blur(2.5px);
}

.leg {
  transform-box: fill-box;
  transform-origin: center top;
}

.leg-far {
  opacity: 0.78;
}

[data-segment="upper"],
[data-segment="lower"] {
  transform-box: fill-box;
  transform-origin: 0 50%;
}

[data-segment="paw"] {
  transform-box: fill-box;
  transform-origin: center center;
}

.limb-bone,
.static-leg {
  fill: none;
  stroke: #eee5d5;
  stroke-width: 17;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-segment="lower"] {
  stroke-width: 15;
}

.leg-far .limb-bone,
.static-leg.far {
  stroke: #cfc2b0;
  stroke-width: 15;
}

.paw-shape,
.static-paw {
  fill: #e7dcc9;
  stroke: rgb(118 104 88 / 22%);
  stroke-width: 0.8;
}

.leg-far .paw-shape {
  fill: #cfc2af;
}

.tail-segment {
  transform-box: fill-box;
}

#cat-tail-base {
  transform-origin: 6% 48%;
}

#cat-tail-tip {
  transform-origin: 3% 48%;
}

.tail-underpaint,
.static-tail {
  fill: none;
  stroke: url("#fur-main");
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#cat-tail-tip .tail-underpaint {
  stroke-width: 14;
}

.tail-marking {
  fill: none;
  stroke: url("#grey-marking");
  stroke-width: 10;
  stroke-linecap: round;
}

#cat-body > ellipse:first-child,
#cat-head > circle {
  stroke: rgb(123 109 89 / 17%);
  stroke-width: 1.1;
}

.body-marking,
.head-marking {
  fill: url("#grey-marking");
}

.body-marking.soft {
  opacity: 0.58;
}

.belly-wash {
  fill: #fffdf6;
  opacity: 0.28;
}

.join-cover {
  fill: #ebe1d0;
}

.ear {
  fill: url("#fur-light");
  stroke: rgb(111 100 86 / 22%);
  stroke-width: 1;
  stroke-linejoin: round;
}

.ear-inner {
  fill: #dcaea1;
  opacity: 0.5;
}

.head-stripe {
  fill: none;
  stroke: #77756f;
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.56;
}

.collar {
  fill: none;
  stroke: url("#collar-red");
  stroke-width: 6;
  stroke-linecap: round;
}

.collar-tag {
  fill: #b98c3e;
  stroke: #7b5c2b;
  stroke-width: 0.8;
}

.cheek {
  fill: #faf3e6;
  opacity: 0.92;
}

.eye {
  fill: #817542;
  opacity: 0.74;
}

.eye-line,
.mouth {
  fill: none;
  stroke: #564e45;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.nose {
  fill: #ad746d;
}

.whisker {
  fill: none;
  stroke: #81786e;
  stroke-width: 0.75;
  stroke-linecap: round;
  opacity: 0.56;
}

.static-leg {
  stroke-width: 16;
}

.static-leg.far {
  opacity: 0.72;
}

@media (max-width: 700px) {
  :root {
    --cat-width: clamp(150px, 39vw, 220px);
  }

  .scene {
    background-position: 54% center;
  }

  .cat-path {
    left: 6vw;
    bottom: clamp(10%, 14vh, 18%);
  }

  .cat-rig {
    filter: drop-shadow(0 1px 1px rgb(74 55 28 / 14%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-path {
    left: 50%;
    transform: translateX(-50%);
  }

  #profile-view {
    opacity: 1;
  }

  .turn-view {
    opacity: 0;
  }
}