@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-2deg); }
    40% { transform: translateX(6px) rotate(2deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes bounceSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(3deg); }
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(255, 94, 26, 0.4); }
    50% { opacity: 0.85; box-shadow: 0 0 20px rgba(255, 94, 26, 0.7); }
}

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

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

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
    0% { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

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

@keyframes truckBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

@keyframes drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}

.slider-thumb::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FF5E1A;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.slider-thumb::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FF5E1A;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#wheelCanvas {
    display: block;
}

#clipsViewport {
    width: 100%;
}

#clipsTrack {
    display: flex;
    will-change: transform;
}

.clip-slide {
    flex: 0 0 auto;
    min-width: 0;
}

.clip-video-stage {
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.clip-video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

.contact-terms-details summary::-webkit-details-marker {
    display: none;
}

.contact-terms-details summary::before {
    content: '▸ ';
}

.contact-terms-details[open] summary::before {
    content: '▾ ';
}