/*
 * Home page: animated illustration under the menu.
 * Markup: resources/views/frontend/home/partials/illustration.blade.php
 * Everything is scoped to .home-illustration so it cannot affect other pages.
 */

/* Section: fills the screen below the fixed menu and centres the image */
.home-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 0 48px;
  box-sizing: border-box;
}

.home-illustration__media {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.home-illustration__media svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 190px);
  margin: 0 auto;
  overflow: visible;
}

/* Dark theme: a light card keeps the black outlines of the drawing readable */
body.dark .home-illustration__media {
  padding: clamp(16px, 3vw, 32px);
  border-radius: 24px;
  background-color: #f7f5fb;
}

@media (max-width: 991.98px) {
  .home-illustration {
    padding: 104px 0 40px;
  }
}

@media (max-width: 767.98px) {
  .home-illustration {
    padding: 80px 0 24px;
  }

  .home-illustration__media svg {
    max-height: none;
  }
}

/* Palette of the drawing */
.home-illustration .hi-st0 { fill: #f7f7f7; }
.home-illustration .hi-st1 { fill: #202020; }
.home-illustration .hi-st2 { fill: #e5e5e5; }
.home-illustration .hi-st3 { fill: #f9f4f4; }
.home-illustration .hi-st4 { opacity: 0.8; fill: #f2f2f2; }
.home-illustration .hi-st5 { fill: #e7d2d6; }
.home-illustration .hi-st6 { fill: #f5edf0; }
.home-illustration .hi-st7 { fill: #551519; }
.home-illustration .hi-st8 { fill: #ea212e; }
.home-illustration .hi-st9 { fill: #ffffff; }
.home-illustration .hi-st10 { fill: #ffb281; }
.home-illustration .hi-st11 { fill: #6faacc; }
.home-illustration .hi-st12 { fill: #ff9469; }
.home-illustration .hi-st13 { fill: #2bc8f5; }
.home-illustration .hi-st14 { fill: #eaf3fa; }
.home-illustration .hi-st15 { fill: #3a3a3a; }
.home-illustration .hi-st16 { fill: #fffa87; }
.home-illustration .hi-st17 { fill: #e97f62; }
.home-illustration .hi-st18 { fill: #e87f62; }
.home-illustration .hi-st19 { fill: #337baf; }
.home-illustration .hi-st20 { fill: #fdfafa; }

/* Animated parts (pivot points are in the drawing's own coordinates) */
.home-illustration #XMLID_8953_ {
  transform-origin: 224px 139px;
  animation: hi-woman-mouth 1s infinite alternate ease-in-out;
}

.home-illustration #XMLID_8566_ {
  transform-origin: 211px 155px;
  animation: hi-woman-map-hand 1.5s infinite alternate ease-in-out;
}

.home-illustration #XMLID_9961_ {
  transform-origin: 226.303px 157.3px;
  animation: hi-woman-point-hand 1s infinite alternate ease-in-out;
}

.home-illustration #XMLID_1691_ {
  transform-origin: 483.5px 127.3px;
  animation: hi-painter-tool 1s infinite alternate ease-in-out;
}

.home-illustration #XMLID_1510_ {
  transform-origin: 424.363px 270.3px;
  animation: hi-painter-torso 1s infinite alternate ease-in-out;
}

.home-illustration #XMLID_327_,
.home-illustration #XMLID_1737_,
.home-illustration #XMLID_1678_ {
  transform-origin: 155.881px 134.65px;
  animation: hi-painter-hand 1s infinite alternate ease-in-out;
}

.home-illustration #XMLID_3327_ {
  transform-origin: 594.368px 149.8px;
  animation: hi-hammer-worker-left 2s infinite alternate ease-in-out;
}

.home-illustration #XMLID_1819_ {
  transform-origin: 560.06px 153.6px;
  animation: hi-hammer-worker-hand 2s infinite alternate ease-in-out;
}

.home-illustration #XMLID_2191_ {
  transform-origin: 614.363px 201.2px;
  animation: hi-hammer-worker-torso 2s infinite alternate ease-in-out;
}

.home-illustration #worker2_level {
  transform-origin: 333px 143px;
  animation: hi-level-move 1s infinite alternate ease-in-out;
}

.home-illustration #worker4_hammer {
  transform-origin: 608.436px 173.3px;
  animation: hi-hammer-hit 2s infinite alternate ease-in-out;
}

@keyframes hi-woman-mouth {
  0% { transform: scale(1, 1); }
  20% { transform: scale(0.9, 0.2); }
  40% { transform: scale(1.05, 1); }
  80% { transform: scale(0.95, 0.2); }
  100% { transform: scale(1.05, 1); }
}

@keyframes hi-woman-map-hand {
  0% { transform: scale(1, 1) rotateZ(-28deg); }
  20% { transform: scale(0.99, 1) rotateZ(0deg); }
  40% { transform: scale(1.01, 1) rotateZ(-48deg); }
  80% { transform: scale(0.98, 1) rotateZ(0deg); }
  100% { transform: scale(1.01, 1) rotateZ(-28deg); }
}

@keyframes hi-woman-point-hand {
  0% { transform: scale(1, 1); }
  20% { transform: scale(0.9, 1); }
  40% { transform: scale(1.05, 1); }
  80% { transform: scale(0.95, 1); }
  100% { transform: scale(1.05, 1); }
}

@keyframes hi-painter-torso {
  0% { transform: scaleY(1); }
  20% { transform: scaleY(0.98); }
  40% { transform: scaleY(0.99); }
  80% { transform: scaleY(1.01); }
  100% { transform: scaleY(1); }
}

@keyframes hi-painter-tool {
  0% { transform: translateY(0); }
  20% { transform: translateY(4px); }
  40% { transform: translateY(2px); }
  80% { transform: translateY(-2px); }
  100% { transform: translateY(1px); }
}

@keyframes hi-painter-hand {
  0% { transform: translateY(0); }
  20% { transform: translateY(4px); }
  40% { transform: translateY(2px); }
  80% { transform: translateY(-2px); }
  100% { transform: translateY(1px); }
}

@keyframes hi-hammer-worker-left {
  0% { transform: translate(-7px, -2px) rotateZ(-29deg) scaleX(0.99); }
  20% { transform: translate(-7px, -2px) rotateZ(-29deg) scaleX(0.98); }
  40% { transform: translate(-7px, -2px) rotateZ(-29deg) scaleX(0.99); }
  80% { transform: translate(-7px, -2px) rotateZ(-29deg) scaleX(0.98); }
  100% { transform: translate(-7px, -2px) rotateZ(-29deg) scaleX(0.99); }
}

@keyframes hi-hammer-worker-hand {
  0%, 25%, 50% { transform: rotateZ(0deg); }
  80% { transform: rotateZ(-30deg); }
  100% { transform: rotateZ(0deg); }
}

@keyframes hi-level-move {
  0% { transform: rotateZ(-2deg); }
  50% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(2deg); }
}

@keyframes hi-hammer-worker-torso {
  0% { transform: rotateZ(2deg); }
  25% { transform: rotateZ(0deg); }
  50% { transform: rotateZ(1deg); }
  80% { transform: rotateZ(-7deg); }
  100% { transform: rotateZ(1deg); }
}

@keyframes hi-hammer-hit {
  0% { transform: translate(3px, 1px) rotateZ(0deg); }
  25% { transform: translate(1px, 1px) rotateZ(20deg); }
  50% { transform: translate(-1px, 1px) rotateZ(6deg); }
  80% { transform: translate(-1px, 1px) rotateZ(-20deg); }
  100% { transform: translate(-1px, 1px) rotateZ(10deg); }
}

/* Visitors who asked the OS to reduce motion get the still drawing */
@media (prefers-reduced-motion: reduce) {
  .home-illustration svg * {
    animation: none !important;
  }
}