/* ============================================================
   ABOUT — Animazione SVG cantiere (edificio in costruzione)
   Loop 24s: fase 1 scavo (0-6s) → fase 2 fondamenta+p1 (6-12s)
             → fase 3 piani+tetto (12-18s) → fase 4 pausa+fade (18-24s)
   ============================================================ */

/* Container SVG — eredita aspect-ratio dal frame .about-figure */
.about-anim-frame { background: #0A0B0D; border-radius: 2px; }
.about-build-svg { width: 100%; aspect-ratio: 4/5; display: block; }

/* Tutti gli elementi animati usano fill-box per transform-origin SVG corretto */
.ab-found, .ab-f1, .ab-f2, .ab-f3, .ab-f4, .ab-roof, .ab-col {
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* --- Colonne strutturali (compaiono con la fondazione) --- */
.ab-col { animation: abCol 24s ease-in-out infinite; }
@keyframes abCol {
  0%,22%  { opacity:0; transform:scaleY(0); }
  28%,80% { opacity:1; transform:scaleY(1); }
  88%,100%{ opacity:0; transform:scaleY(0); }
}

/* --- Fondazione (25% = 6s) --- */
.ab-found { animation: abFound 24s ease-in-out infinite; }
@keyframes abFound {
  0%,23%  { opacity:0; transform:scaleY(0); }
  30%,80% { opacity:1; transform:scaleY(1); }
  88%,100%{ opacity:0; transform:scaleY(0); }
}

/* --- Piano 1 (33% = 8s) --- */
.ab-f1 { animation: abF1 24s ease-in-out infinite; }
@keyframes abF1 {
  0%,32%  { opacity:0; transform:scaleY(0); }
  39%,80% { opacity:1; transform:scaleY(1); }
  88%,100%{ opacity:0; transform:scaleY(0); }
}

/* --- Piano 2 (42% = 10s) --- */
.ab-f2 { animation: abF2 24s ease-in-out infinite; }
@keyframes abF2 {
  0%,41%  { opacity:0; transform:scaleY(0); }
  48%,80% { opacity:1; transform:scaleY(1); }
  88%,100%{ opacity:0; transform:scaleY(0); }
}

/* --- Piano 3 (50% = 12s) --- */
.ab-f3 { animation: abF3 24s ease-in-out infinite; }
@keyframes abF3 {
  0%,50%  { opacity:0; transform:scaleY(0); }
  57%,80% { opacity:1; transform:scaleY(1); }
  88%,100%{ opacity:0; transform:scaleY(0); }
}

/* --- Piano 4 (58% = 14s) --- */
.ab-f4 { animation: abF4 24s ease-in-out infinite; }
@keyframes abF4 {
  0%,59%  { opacity:0; transform:scaleY(0); }
  66%,80% { opacity:1; transform:scaleY(1); }
  88%,100%{ opacity:0; transform:scaleY(0); }
}

/* --- Tetto (68% = 16s) --- */
.ab-roof {
  transform-origin: center bottom;
  animation: abRoof 24s ease-in-out infinite;
}
@keyframes abRoof {
  0%,67%  { opacity:0; }
  73%,80% { opacity:1; }
  88%,100%{ opacity:0; }
}

/* --- Escavatore — visibile in fase 1, esce in fase 2 ---
   CSS transform sovrascrive SVG transform attribute → la posizione base
   (translate(10,320) scale(0.65)) viene inclusa direttamente nei keyframes */
.ab-exc { animation: abExc 24s ease-in-out infinite; }
@keyframes abExc {
  0%,2%   { opacity:0; transform: translate(-20px, 320px) scale(0.65); }
  8%,30%  { opacity:1; transform: translate(10px, 320px) scale(0.65); }
  38%,100%{ opacity:0; transform: translate(-20px, 320px) scale(0.65); }
}

/* --- Arm escavatore (oscillazione continua) ---
   Include la posizione base translate(56,26) perché CSS override SVG attr */
.ab-arm {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: abArm 3.2s ease-in-out infinite;
}
@keyframes abArm {
  0%,100%{ transform: translate(56px, 26px) rotate(0deg); }
  40%    { transform: translate(56px, 26px) rotate(16deg); }
  80%    { transform: translate(56px, 26px) rotate(-6deg); }
}

/* --- Bucket escavatore --- */
.ab-bucket {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: abBucket 3.2s ease-in-out infinite;
  animation-delay: -0.8s;
}
@keyframes abBucket {
  0%,100%{ transform: rotate(0deg); }
  50%    { transform: rotate(20deg); }
}

/* --- Dust escavatore --- */
.ab-dust { animation: abDust 1.6s ease-in-out infinite; }
@keyframes abDust {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:0.3; transform:scale(1.5); }
}

/* --- Hook gru (oscillazione continua) --- */
.ab-hook { animation: abHook 4s ease-in-out infinite; }
@keyframes abHook {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(28px); }
}

/* --- Workers (compaiono in fase 2) --- */
.ab-workers { animation: abWorkers 24s ease-in-out infinite; }
@keyframes abWorkers {
  0%,28%  { opacity:0; }
  36%,80% { opacity:1; }
  88%,100%{ opacity:0; }
}

/* --- Worker 1 bob --- */
.ab-w1 { animation: abBob 2.1s ease-in-out infinite; }
/* --- Worker 2 bob (desfasato) --- */
.ab-w2 { animation: abBob 2.1s ease-in-out infinite; animation-delay:-1.1s; }
/* --- Worker 3 bob --- */
.ab-w3 { animation: abBob 2.8s ease-in-out infinite; animation-delay:-0.4s; }
@keyframes abBob {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-4px); }
}

/* --- Pit hatch (visibile in fase 1) --- */
.ab-pit { animation: abPit 24s ease-in-out infinite; }
@keyframes abPit {
  0%,4%   { opacity:0; }
  10%,32% { opacity:1; }
  40%,100%{ opacity:0; }
}

/* --- Reduced motion: mostra edificio completo statico --- */
@media (prefers-reduced-motion: reduce) {
  .ab-col, .ab-found, .ab-f1, .ab-f2,
  .ab-f3, .ab-f4, .ab-roof { animation: none; opacity: 1; transform: none; }
  .ab-hook, .ab-workers, .ab-w1, .ab-w2, .ab-w3,
  .ab-dust { animation: none; opacity: 1; }
  .ab-exc { animation: none; opacity: 0; transform: translate(10px, 320px) scale(0.65); }
  .ab-arm { animation: none; transform: translate(56px, 26px) rotate(0deg); }
  .ab-bucket { animation: none; transform: rotate(0deg); }
  .ab-pit { animation: none; opacity: 0; }
}