/* ─────────────────────────────────────────
   Railteco — Animations
   ───────────────────────────────────────── */

/* ── Keyframes ── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes growLine {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 32px;
    opacity: 1;
  }
}

@keyframes grainShift {
  0%   { transform: translate(0,    0);    }
  20%  { transform: translate(-4%,  3%);   }
  40%  { transform: translate(4%,  -3%);   }
  60%  { transform: translate(-3%,  -4%);  }
  80%  { transform: translate(3%,   4%);   }
  100% { transform: translate(0,    0);    }
}

@keyframes overlayBreath {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.88; }
}


/* ── Entrance — staggered fade-up ── */

.logo {
  animation: fadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.eyebrow {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

.heading {
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

.tagline {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

.divider {
  animation: growLine 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.35s both;
}

/* Social icons — each child staggers */
.social a:nth-child(1) { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.5s  both; }
.social a:nth-child(2) { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.62s both; }
.social a:nth-child(3) { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.74s both; }
.social a:nth-child(4) { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.86s both; }


/* ── Film grain ── */

.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  animation: grainShift 0.55s steps(1) infinite;
  will-change: transform;
}


/* ── Overlay slow breath ── */

.overlay {
  animation: overlayBreath 8s ease-in-out infinite;
}