/* ══════════════════════════════════════════════
   SR17 Animation States
   Scroll reveals, hover effects, magnetic buttons
   ══════════════════════════════════════════════ */

/* ── Base hidden state ── */
[data-sr17-reveal] {
    opacity: 0;
    will-change: opacity, transform;
    transition-property: opacity, transform, filter;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-duration: 600ms;
}

/* ── Directional transforms ── */
[data-sr17-reveal="fade-up"] { transform: translateY(40px); }
[data-sr17-reveal="fade-down"] { transform: translateY(-40px); }
[data-sr17-reveal="fade-left"] { transform: translateX(-40px); }
[data-sr17-reveal="fade-right"] { transform: translateX(40px); }
[data-sr17-reveal="scale-in"] { transform: scale(0.92); }
[data-sr17-reveal="blur-in"] { transform: translateY(20px); filter: blur(8px); }

/* ── SVG draw ── */
[data-sr17-reveal="draw"] {
    opacity: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition-property: stroke-dashoffset;
    transition-duration: 1000ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Revealed state ── */
[data-sr17-reveal].sr17-revealed {
    opacity: 1;
    transform: translate(0) scale(1);
    filter: blur(0);
}

[data-sr17-reveal="draw"].sr17-revealed {
    stroke-dashoffset: 0;
}

/* ── Hover glow utility ── */
[data-sr17-hover-glow] {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

[data-sr17-hover-glow]:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15), 0 0 40px rgba(0, 212, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
}

/* ── Icon hover scale ── */
[data-sr17-hover-icon] svg,
[data-sr17-hover-icon] .sr17-icon {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

[data-sr17-hover-icon]:hover svg,
[data-sr17-hover-icon]:hover .sr17-icon {
    transform: scale(1.15);
    color: #00d4ff;
}

/* ── Magnetic button base ── */
.magnetic-btn {
    display: inline-flex;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.magnetic-btn:hover {
    transition: transform 0.1s linear;
}

/* ── Image hover scale ── */
.sr17-card img,
.sr17-product-card img {
    transition: transform 0.5s ease;
}

.sr17-card:hover img,
.sr17-product-card:hover img {
    transform: scale(1.03);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    [data-sr17-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    [data-sr17-reveal="draw"] {
        stroke-dashoffset: 0 !important;
    }
}