/* =========================================================
   HERO SCENE — Nordic house being built by two stick figures
   Total loop: 10 seconds
   ========================================================= */

.hero-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Sky background gradient */
.scene-sky {
  fill: url(#skyGradient);
}
.scene-sun {
  fill: #E8B84F;
  opacity: 0.55;
}
.scene-ground {
  fill: #C9A882;
}
.scene-grass {
  stroke: #6b8656;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}

/* House parts — shared reset behavior */
.house-line {
  stroke: #111;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.house-fill {
  fill: #F5EEDD;
  stroke: #111;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.house-detail {
  stroke: #111;
  stroke-width: 2;
  fill: #1F3A31;
  stroke-linejoin: round;
}
.chimney {
  fill: #8B5A3C;
  stroke: #111;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* --- Reveal animations (staggered 10s loop) --- */
.build-wall-left    { stroke-dasharray: 100; stroke-dashoffset: 100; animation: buildLeftWall    10s infinite ease-out; }
.build-wall-right   { stroke-dasharray: 100; stroke-dashoffset: 100; animation: buildRightWall   10s infinite ease-out; }
.build-wall-top     { stroke-dasharray: 160; stroke-dashoffset: 160; animation: buildTopWall     10s infinite ease-out; }
.build-roof-left    { stroke-dasharray: 105; stroke-dashoffset: 105; animation: buildRoofLeft    10s infinite ease-out; }
.build-roof-right   { stroke-dasharray: 105; stroke-dashoffset: 105; animation: buildRoofRight   10s infinite ease-out; }
.build-chimney      { opacity: 0; animation: fadeInChimney 10s infinite ease-out; }
.build-window-left  { opacity: 0; animation: fadeInWinL    10s infinite ease-out; }
.build-window-right { opacity: 0; animation: fadeInWinR    10s infinite ease-out; }
.build-door         { opacity: 0; animation: fadeInDoor    10s infinite ease-out; }
.build-smoke        { opacity: 0; animation: smokeUp       10s infinite linear; }

@keyframes buildLeftWall {
  0%    { stroke-dashoffset: 100; opacity: 0; }
  5%    { opacity: 1; }
  13%   { stroke-dashoffset: 0; opacity: 1; }
  90%   { stroke-dashoffset: 0; opacity: 1; }
  97%   { stroke-dashoffset: 0; opacity: 0; }
  100%  { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes buildRightWall {
  0%,12% { stroke-dashoffset: 100; opacity: 0; }
  13%    { opacity: 1; }
  20%    { stroke-dashoffset: 0; }
  90%    { stroke-dashoffset: 0; opacity: 1; }
  97%    { opacity: 0; }
  100%   { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes buildTopWall {
  0%,19% { stroke-dashoffset: 160; opacity: 0; }
  20%    { opacity: 1; }
  27%    { stroke-dashoffset: 0; }
  90%    { stroke-dashoffset: 0; opacity: 1; }
  97%    { opacity: 0; }
  100%   { stroke-dashoffset: 160; opacity: 0; }
}
@keyframes buildRoofLeft {
  0%,26% { stroke-dashoffset: 105; opacity: 0; }
  27%    { opacity: 1; }
  36%    { stroke-dashoffset: 0; }
  90%    { stroke-dashoffset: 0; opacity: 1; }
  97%    { opacity: 0; }
  100%   { stroke-dashoffset: 105; opacity: 0; }
}
@keyframes buildRoofRight {
  0%,35% { stroke-dashoffset: 105; opacity: 0; }
  36%    { opacity: 1; }
  45%    { stroke-dashoffset: 0; }
  90%    { stroke-dashoffset: 0; opacity: 1; }
  97%    { opacity: 0; }
  100%   { stroke-dashoffset: 105; opacity: 0; }
}
@keyframes fadeInChimney {
  0%,44% { opacity: 0; transform: translateY(-6px); }
  52%    { opacity: 1; transform: translateY(0); }
  90%    { opacity: 1; transform: translateY(0); }
  97%,100% { opacity: 0; transform: translateY(0); }
}
@keyframes fadeInWinL {
  0%,50% { opacity: 0; }
  56%    { opacity: 1; }
  90%    { opacity: 1; }
  97%,100% { opacity: 0; }
}
@keyframes fadeInWinR {
  0%,55% { opacity: 0; }
  61%    { opacity: 1; }
  90%    { opacity: 1; }
  97%,100% { opacity: 0; }
}
@keyframes fadeInDoor {
  0%,60% { opacity: 0; }
  67%    { opacity: 1; }
  90%    { opacity: 1; }
  97%,100% { opacity: 0; }
}
@keyframes smokeUp {
  0%,55%  { opacity: 0; transform: translateY(0); }
  60%     { opacity: 0.7; transform: translateY(0); }
  85%     { opacity: 0; transform: translateY(-40px); }
  100%    { opacity: 0; transform: translateY(-40px); }
}

/* Chimney and smoke need transform-box for translateY */
.build-chimney,
.build-smoke {
  transform-box: fill-box;
  transform-origin: center;
}

/* --- Figure animations (continuous) --- */
.figure {
  stroke: #111;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.figure-fill { fill: #1F3A31; }
.figure-head { fill: #F5EEDD; stroke: #111; stroke-width: 2.5; }

/* Arm hammering (figure 1) — rotates around shoulder */
.arm-hammer {
  transform-origin: 0 0;
  animation: hammer 0.85s infinite ease-in-out;
}
@keyframes hammer {
  0%, 100% { transform: rotate(-40deg); }
  50%      { transform: rotate(30deg); }
}

/* Figure 2 arm carrying something — subtle bob */
.arm-carry {
  transform-origin: 0 0;
  animation: carry 2.2s infinite ease-in-out;
}
@keyframes carry {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-1px); }
}

/* Reduced motion — freeze at completed state */
@media (prefers-reduced-motion: reduce) {
  .build-wall-left, .build-wall-right, .build-wall-top,
  .build-roof-left, .build-roof-right {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .build-chimney, .build-window-left, .build-window-right, .build-door {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .build-smoke { opacity: 0.5 !important; animation: none !important; }
  .arm-hammer, .arm-carry { animation: none !important; }
}