/* Letter animations */
@keyframes popIn {
    0% { transform: translateY(100px); opacity: 0; }
    60% { transform: translateY(-20px); }
    80% { transform: translateY(10px); }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

/* Crane animations */
@keyframes craneSwing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes cableMove {
    0%, 100% { height: 100px; }
    50% { height: 140px; }
}

@keyframes hookSwing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Bulldozer animations */
@keyframes bulldozerMove {
    0% { transform: translateX(-50px) scale(0.7); }
    100% { transform: translateX(50px) scale(0.7); }
}

@keyframes bladeUp {
    0%, 100% { transform: perspective(100px) rotateX(30deg); }
    50% { transform: perspective(100px) rotateX(20deg); }
}

/* Cement mixer animations */
@keyframes drumRotate {
    0% { transform: rotate(-15deg); }
    100% { transform: rotate(345deg); }
}

@keyframes mixerMove {
    0% { transform: translateX(30px) scale(0.6); }
    100% { transform: translateX(-30px) scale(0.6); }
}

/* Scaffolding animations */
@keyframes scaffoldFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Apply animations */
.letter {
    opacity: 0;
    animation: popIn 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-delay: calc(var(--i) * 0.1s);
}

.l1 { --i: 1; }
.l2 { --i: 2; }
.l3 { --i: 3; }
.l4 { --i: 4; }
.l5 { --i: 5; }
.l6 { --i: 6; }
.l7 { --i: 7; }
.l8 { --i: 8; }
.l9 { --i: 9; }
.l10 { --i: 10; }
.l11 { --i: 11; }
.l12 { --i: 12; }
.l13 { --i: 13; }
.l14 { --i: 14; }
.l15 { --i: 15; }
.l16 { --i: 16; }
.l17 { --i: 17; }

.crane-arm {
    animation: craneSwing 8s ease-in-out infinite;
}

.crane-cable {
    animation: cableMove 8s ease-in-out infinite;
}

.crane-hook {
    animation: hookSwing 8s ease-in-out infinite;
}

.bulldozer {
    animation: bulldozerMove 10s alternate infinite ease-in-out;
}

.bulldozer-blade {
    animation: bladeUp 2s ease-in-out infinite;
}

.mixer-drum {
    animation: drumRotate 10s linear infinite;
}

.cement-mixer {
    animation: mixerMove 15s alternate infinite ease-in-out;
}

.scaffold-piece {
    opacity: 0;
    animation: scaffoldFadeIn 1s forwards;
}

.scaffold-piece.h1 {
    animation-delay: 1.2s;
}

.scaffold-piece.h2 {
    animation-delay: 1.5s;
}

.scaffold-piece.v1 {
    animation-delay: 0.8s;
}

.scaffold-piece.v2 {
    animation-delay: 1.0s;
}

.scaffold-piece.v3 {
    animation-delay: 1.3s;
}

.status-fill {
    position: relative;
    background-size: 200% 200%;
    animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.status-bar {
    animation: fadeIn 1s ease 2s forwards;
    opacity: 0;
}

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