/* ==========================================================================
   Hero Scene — animated inline SVG (ported from apsimum-animated-v11.html)
   Targets element IDs inside the hero scene SVG. Loaded after the other
   stylesheets so it can layer on top of the base .hero-animation-bg rules.
   ========================================================================== */

/* Inline SVG sizing (mirrors the old object/img rule) */
.hero-animation-bg svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Cam Temizlikçi --- */
#cleaner-left-arm-bottom,
#cleaner-left-arm-handful,
#cleaner-stick,
#cleaner-left-arm-top-finger,
#cleaner-left-arm-fingers,
#cleaner-left-arm-top {
  animation: armWipe 2.8s ease-in-out infinite;
  transform-origin: 2295px 950px;
}
@keyframes armWipe {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(-4.5deg); }
  65%      { transform: rotate(3.5deg); }
}
#cleaner-right-arm {
  animation: rightArmFollow 2.8s ease-in-out infinite;
  transform-origin: 2345px 985px;
}
@keyframes rightArmFollow {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(-1.8deg); }
  65%      { transform: rotate(1.2deg); }
}
#cleaner-head, #cleaner-neck {
  animation: headFollow 2.8s ease-in-out infinite;
  transform-origin: 2200px 930px;
}
@keyframes headFollow {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(-2deg); }
  65%      { transform: rotate(1.4deg); }
}

/* --- Çim Biçen Adam --- */
#grass-men-left-arm-hand,
#grass-men-left-arm-hand-thumb,
#grass-men-left-arm-top,
#grass-men-right-arm {
  animation: armsY 2.4s ease-in-out infinite;
  transform-origin: 660px 1120px;
}
@keyframes armsY {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(-1.8deg); }
  80%      { transform: rotate(0.8deg); }
}
#grass-men-car {
  animation: carPush 2.4s ease-in-out infinite;
}
@keyframes carPush {
  0%, 100% { transform: translateX(0px); }
  40%      { transform: translateX(18px); }
  80%      { transform: translateX(-10px); }
}

/* --- Matkap Adam --- */
/* Arm + drill rotate together around the shoulder (885,760) so the shoulder
   never detaches and the drill stays glued to the hand. Reads as a drilling pump. */
#driller-men-right-arm,
#driller-men-left-arm,
#driller-men-driller {
  animation: drillerPump 1.6s ease-in-out infinite;
  transform-origin: 885px 760px;
}
@keyframes drillerPump {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(-1.5deg); }
  75%      { transform: rotate(1.4deg); }
}

/* --- Balon --- */
#baloon {
  animation: balloonDrift 180s linear infinite;
}
@keyframes balloonDrift {
  0%      { transform: translateX(1200px); opacity: 0; }
  1%      { transform: translateX(1100px); opacity: 1; }
  16%     { transform: translateX(0px); }
  32%     { transform: translateX(-2400px); opacity: 1; }
  33%     { transform: translateX(-2500px); opacity: 0; }
  33.5%   { transform: translateX(1200px); opacity: 0; }
  100%    { transform: translateX(1200px); opacity: 0; }
}
#baloon > * {
  animation: balloonBob 5s ease-in-out infinite;
}
@keyframes balloonBob {
  0%   { transform: translateY(0px) rotate(0deg); }
  20%  { transform: translateY(-10px) rotate(1.2deg); }
  40%  { transform: translateY(2px) rotate(-0.5deg); }
  60%  { transform: translateY(-14px) rotate(1.8deg); }
  80%  { transform: translateY(4px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* --- Kova --- */
#bucket {
  animation: bucketRock 5s ease-in-out infinite;
  transform-origin: 1480px 1560px;
}
@keyframes bucketRock {
  0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
  30%      { transform: translate(6px, -1px) rotate(0.8deg); }
  50%      { transform: translate(0px, 0px) rotate(0deg); }
  80%      { transform: translate(-5px, 1px) rotate(-0.6deg); }
}

/* --- Kedi yürüme --- */
#cat {
  animation: catWalk 20s ease-in-out infinite;
  transform-origin: 1850px 1560px;
}
@keyframes catWalk {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(0) rotate(0deg); }
  38%  { transform: translateX(40px) rotate(0deg); }
  42%  { transform: translateX(40px) rotate(-8deg); }
  60%  { transform: translateX(40px) rotate(-8deg); }
  64%  { transform: translateX(40px) rotate(0deg); }
  82%  { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* --- Kedi Kuyruk --- */
#cat-tail {
  animation: tailWag 4s ease-in-out infinite;
  transform-origin: 1843px 1480px;
}
@keyframes tailWag {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(5deg); }
  50%      { transform: rotate(0deg); }
  75%      { transform: rotate(-3deg); }
}

/* --- Kedi Kulak --- */
#cat-ear2 {
  animation: earTwitch 5s ease-in-out infinite;
  transform-origin: 1950px 1440px;
}
@keyframes earTwitch {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(3deg); }
  60%      { transform: rotate(-2deg); }
}

/* --- Accessibility: respect reduced-motion preference --- */
@media (prefers-reduced-motion: reduce) {
  .hero-animation-bg svg * { animation: none !important; }
}

/* --- Declutter on phones (below tablet): hide grass-men (figure + machine + shoes).
   On phones only Scene A (window-cleaner + cat + bucket) stays visible, static. --- */
@media (max-width: 767.98px) {
  #grass-men { display: none; }
}

/* --- Tablet & up: alternate between two foreground scenes on a calm timer ---
   Scene A = window-cleaner + cat + bucket
   Scene B = grass-men + lawn mower (grass-men-car lives inside #grass-men)
   The two crossfade so the foreground is never cluttered with both at once.
   Opacity-only keyframes layer ALONGSIDE each element's existing transform
   animation (catWalk / bucketRock) via the multi-animation syntax, so the
   walking / rocking keeps playing while that group is on screen. The cleaner
   and grass-men carry no parent animation, so they take the toggle directly. */
@media (min-width: 768px) {
  #window-cleaner {
    animation: sceneAToggle 21s ease-in-out infinite;
  }
  #cat {
    animation: catWalk 20s ease-in-out infinite,
               sceneAToggle 21s ease-in-out infinite;
  }
  #bucket {
    animation: bucketRock 5s ease-in-out infinite,
               sceneAToggle 21s ease-in-out infinite;
  }
  #grass-men {
    animation: sceneBToggle 21s ease-in-out infinite;
  }
}
/* 21s cycle. Scene A (cleaner + cat + bucket) dominates; Scene B is a short cameo:
   A visible 0–62% (~13s), B visible 68–94% (~5.5s), ~1.3s crossfades between. */
@keyframes sceneAToggle {
  0%, 62%  { opacity: 1; }
  68%, 94% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes sceneBToggle {
  0%, 62%  { opacity: 0; }
  68%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}