/* ===============================
   BASIS & LAYOUT
================================= */
html, body {
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#8fd3f4, #e9ecef);
    overflow: hidden;
}

/* Container */
.container {
    text-align: center;
    padding: 1rem;
    color: #222;
}

/* ===============================
   TYPOGRAFIE
================================= */
h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    margin-bottom: .5rem;
}

p {
    font-size: clamp(1rem, 4vw, 1.2rem);
    margin-bottom: 1.5rem;
}

/* ===============================
   SVG
================================= */
svg {
    width: min(460px, 95vw);
    height: auto;
}

/* ===============================
   ANIMATIES
================================= */
.boom {
    transform-origin: 160px 105px;
    animation: boomSwing 7s ease-in-out infinite;
}

.pulley {
    transform-origin: center;
    animation: rotate 2s linear infinite;
}

.hook-group {
    transform-origin: 330px 140px;
    animation: hookSwing 5s ease-in-out infinite;
}

.load {
    animation: lift 5s ease-in-out infinite;
}

.light {
    opacity: 0;
    animation: lightOn 16s ease-in-out infinite;
}

@keyframes boomSwing {
    0%,100% { transform: rotate(0deg); }
    50% { transform: rotate(6deg); }
}

@keyframes rotate {
    to { transform: rotate(360deg); }
}

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

@keyframes lift {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(40px); }
}

/* ===============================
   TEKST OP PAGINA
================================= */
.contact-text {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto 1.5rem;
    color: #222;
}

/* ===============================
   FOOTER
================================= */
.site-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: .75rem 1rem;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.footer-inner {
    display: flex;
    gap: .75rem;
    align-items: center;
    font-size: .9rem;
    pointer-events: auto;
}

.separator {
    opacity: .6;
}

.email {
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    color: currentColor;
    transition:
        color 0.3s ease,
        text-shadow 0.3s ease;
}

.email:hover,
.email:focus {
    color: #ffcc33;
    text-shadow:
        0 0 6px rgba(255, 204, 51, 0.6),
        0 0 12px rgba(255, 204, 51, 0.4);
    outline: none;
}

/* Mobile footer */
@media (max-width: 480px) {
    .footer-inner {
        flex-direction: column;
        gap: .25rem;
    }
    .separator {
        display: none;
    }
}