/* ============================================================
   ANIMATIONS CSS
   ============================================================ */

/* --- Scroll Reveal Utilities --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.2, 1, 0.3, 1), transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    will-change: opacity, transform, visibility;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
    
    .home-hero__bg, .page-hero {
        animation: none !important;
    }
}

/* --- Specific Element Animations --- */

/* Hero Image subtle zoom on load */
@keyframes heroZoom {
    from { transform: scale(1.05); }
    to { transform: scale(1); }
}
.home-hero__bg {
    animation: heroZoom 10s ease-out forwards;
}

/* Floating animation for hero spec card */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.spec-card {
    animation: float 6s ease-in-out infinite;
}

/* Scroll line animation */
@keyframes scrollLine {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    50.1% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}
.scroll-line {
    position: relative;
    width: 2px;
    height: 40px;
    background: rgba(250,247,240,0.2);
    margin: 0 auto var(--sp-2);
    overflow: hidden;
}
.scroll-line::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--color-gold);
    animation: scrollLine 2s infinite ease-in-out;
}

/* Spin animation for loading states (if needed) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.is-loading::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}