/* RAILYARD BILLIARDS — ANIMATIONS
   Logo lockup, keyframes, loading spinner, 404 scratch.
   Load order: 2 of 3 */

/* LOGO LOCKUP */
.logo-lockup {
    display: flex;
    align-items: center;
    height: clamp(90px, 16vw, 200px);
    gap: 0;
}

.logo-badge {
    height: 100%;
    width: auto;
    flex-shrink: 0;
    transform-origin: center center;
    will-change: transform;
    animation: badge-roll-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.logo-wordmark {
    height: 100%;
    width: auto;
    animation: wordmark-knocked 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

.sign-swing {
    display: inline-block;
    transform-origin: top center;
    animation: sign-drop 2.2s ease-out 1.8s both;
}

/* LOADING SPINNER — add .loading-spin to any ball/badge image */
.loading-spin {
    will-change: transform;
    animation: loading-roll 3s linear infinite;
    transform-origin: center center;
}

/* 404 SCRATCH — .scratch-ball on badge image, .scratch-text on error text */
.scratch-ball {
    will-change: transform;
    transform-origin: center center;
    animation: scratch-roll 3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.scratch-text {
    animation: scratch-impact 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.4s both;
}

/* KEYFRAMES */
@keyframes badge-roll-in {
    from { transform: translateX(-65vw) rotate(0deg); }
    to   { transform: translateX(0px) rotate(720deg); }
}

@keyframes wordmark-knocked {
    0%   { transform: translateX(-5vw); }
    15%  { transform: translateX(1%); }
    50%  { transform: translateX(5%); }
    70%  { transform: translateX(-2%); }
    85%  { transform: translateX(1%); }
    100% { transform: translateX(0); }
}

@keyframes sign-drop {
    0%   { transform: perspective(600px) rotateX(90deg);  opacity: 0; }
    12%  { opacity: 1; }
    35%  { transform: perspective(600px) rotateX(-22deg); }
    52%  { transform: perspective(600px) rotateX(11deg);  }
    66%  { transform: perspective(600px) rotateX(-6deg);  }
    78%  { transform: perspective(600px) rotateX(3deg);   }
    88%  { transform: perspective(600px) rotateX(-1.5deg);}
    95%  { transform: perspective(600px) rotateX(0.5deg); }
    100% { transform: perspective(600px) rotateX(0deg);   }
}

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

@keyframes scratch-roll {
    0%   { transform: translateX(-65vw) rotate(0deg);              opacity: 1;   }
    40%  { transform: translateX(-10vw) rotate(720deg);             opacity: 1;   }
    55%  { transform: translateX(-10vw) rotate(720deg);             opacity: 1;   }
    78%  { transform: translate(0vw, 20vh) rotate(860deg);          opacity: 0.6; }
    100% { transform: translate(7vw, 50vh) rotate(1000deg);         opacity: 0;   }
}

@keyframes scratch-impact {
    0%   { opacity: 1; transform: translateX(-14px) scale(0.96); }
    20%  { opacity: 1; transform: translateX(9px)   scale(1.02); }
    38%  { transform: translateX(-5px) scale(0.99); }
    55%  { transform: translateX(3px)  scale(1.01); }
    72%  { transform: translateX(-2px) scale(1.00); }
    86%  { transform: translateX(1px); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* SCROLL-UP STICKY EXIT — .scroll-up on the sticky element, .scroll-up-next on the section directly after */
/* Custom HTML block scroll script (see note) toggles .is-scrolled-away / .is-returning */
.scroll-up-next { position: relative; z-index: 1; }
.scroll-up.is-scrolled-away { animation: scroll-up-exit 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; pointer-events: none; }
.scroll-up.is-returning { animation: scroll-up-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes scroll-up-exit {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-110%); opacity: 0; }
}
@keyframes scroll-up-enter {
    from { transform: translateY(-110%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-badge, .logo-wordmark, .sign-swing, .loading-spin, .scratch-ball, .scratch-text { animation: none; }
    .scroll-up, .scroll-up.is-scrolled-away, .scroll-up.is-returning { animation: none; }
    .scroll-up.is-scrolled-away { transform: translateY(-110%); opacity: 0; pointer-events: none; }
}

/* LOGO MOBILE */
@media (max-width: 768px) {
    .logo-lockup {
        height: clamp(70px, 11vw, 120px);
    }
    .logo-badge {
        scale: 0.65;
        margin-bottom: 55px;
        transform-origin: center bottom;
    }
    .logo-wordmark {
        animation: none;
        transform: translateY(20px) scale(.9);
    }
    .sign-swing {
        animation-duration: 1.8s;
    }
}

@media (max-width: 480px) {
    .logo-lockup {
        flex-direction: column;
        height: auto;
        gap: var(--s-xl);
        align-items: center;
    }
    .logo-badge {
        height: clamp(80px, 38vw, 130px);
        width: auto;
        animation-name: badge-roll-in;
    }
    .logo-wordmark {
        height: auto;
        width: clamp(180px, 80vw, 300px);
        animation: none;
    }
}