/* =========================================================
   SPOT REACTION — PREMIUM MOTION SYSTEM
   ========================================================= */

/* 01. GLOBAL REVEAL */
.reveal {
    opacity: 0;
    transform: translate3d(0, 45px, 0);
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--animation-delay, 0ms);
    will-change: opacity, transform;
}
.reveal[data-reveal="left"] { transform: translate3d(-60px, 0, 0); }
.reveal[data-reveal="right"] { transform: translate3d(60px, 0, 0); }
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

/* 02. HERO ENTRANCE */
.hero-meta { opacity: 0; transform: translateY(25px); animation: heroElementReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards; }
.hero h1 { opacity: 0; transform: translateY(45px); animation: heroElementReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 450ms forwards; }
.hero-description { opacity: 0; transform: translateY(30px); animation: heroElementReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 650ms forwards; }
.hero-actions { opacity: 0; transform: translateY(25px); animation: heroElementReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 800ms forwards; }
@keyframes heroElementReveal {
    from { opacity: 0; transform: translateY(35px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 03. HERO LINE */
.hero-line { display: inline-block; width: 0; height: 1px; margin-right: 1rem; background: var(--color-red); vertical-align: middle; animation: heroLineReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards; }
@keyframes heroLineReveal { to { width: 45px; } }

/* 04. HERO SCROLL INDICATOR */
.hero-scroll {
    position: absolute; right: 2rem; bottom: 2rem;
    display: flex; align-items: center; gap: 1rem;
    color: rgba(255, 255, 255, 0.6); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    writing-mode: vertical-rl; opacity: 0; animation: fadeIn 1s ease 1.5s forwards;
}
.scroll-line { display: block; width: 1px; height: 60px; background: rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; }
.scroll-line::after {
    content: ""; position: absolute; top: -100%; left: 0;
    width: 100%; height: 50%; background: var(--color-red);
    animation: scrollIndicator 2s ease-in-out infinite;
}
@keyframes scrollIndicator {
    0% { transform: translateY(0); }
    50% { transform: translateY(200%); }
    100% { transform: translateY(400%); }
}

/* 05. HERO INDEX */
.hero-index { position: absolute; right: 2rem; top: 50%; color: rgba(255, 255, 255, 0.25); font-size: 0.7rem; letter-spacing: 0.2em; opacity: 0; animation: fadeIn 1s ease 1.5s forwards; }

/* 06. IMAGE REVEAL */
.image-reveal { position: relative; overflow: hidden; }
.image-reveal::after {
    content: ""; position: absolute; inset: 0; background: var(--color-black);
    transform: scaleX(1); transform-origin: right;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}
.image-reveal img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.image-reveal.is-visible::after { transform: scaleX(0); }
.image-reveal.is-visible img { transform: scale(1); }

/* 07. SERVICE CARD HOVER (Only on desktop) */
@media (hover: hover) {
    .service-card { transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
    .service-card:hover { transform: translateY(-6px); }
    .service-card:hover .service-image img { transform: scale(1.05); }
}

/* 08. HEADING LINE */
.heading-line { width: 0; height: 1px; margin-bottom: var(--space-md); background: var(--color-red); transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.intro-content.is-visible .heading-line { width: 70px; }

/* 09. TRAINING ITEMS */
.training-item { position: relative; overflow: hidden; }
.training-item::before { content: ""; position: absolute; inset: 0; background: var(--color-red); transform: translateX(-101%); transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; }
.training-item > * { position: relative; z-index: 1; }
.training-item:hover::before { transform: translateX(0); }
.training-item:hover { color: var(--color-white); }
.training-item:hover > span:first-child { color: var(--color-white); }

/* 10. BUTTON MOTION (Works on desktop hover AND mobile press-and-hold) */
.magnetic { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.magnetic span { position: relative; z-index: 2; }
.magnetic::before {
    content: ""; position: absolute; width: 0; height: 0; border-radius: 50%;
    background: var(--color-red); transform: translate(-50%, -50%);
    transition: width 600ms ease, height 600ms ease;
    pointer-events: none; /* Prevents blocking clicks */
}
.magnetic:hover::before, 
.magnetic:active::before { 
    width: 400px; 
    height: 400px; 
}

/* 11. FINAL CTA */
.final-cta-content h2 { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.final-cta-content:not(.is-visible) h2 { transform: translateY(25px); }

/* 12. FADE */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 13. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}