/* ═══════════════════════════════════════════
   Motion layer — scroll reveals, kinetic text,
   spotlight cards, magnetic buttons, hero decor
   ═══════════════════════════════════════════ */

:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

::selection { background: var(--acid-green); color: #000; }

/* ── Grain overlay (injected by JS) ─────────── */

.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Scroll reveal ───────────────────────────── */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Auto-stagger for grid/slider children by position */
[data-reveal]:nth-child(1) { --d: 0; }
[data-reveal]:nth-child(2) { --d: 1; }
[data-reveal]:nth-child(3) { --d: 2; }
[data-reveal]:nth-child(4) { --d: 3; }
[data-reveal]:nth-child(5) { --d: 4; }
[data-reveal]:nth-child(6) { --d: 5; }
[data-reveal]:nth-child(n+7) { --d: 6; }

/* ── Kinetic hero heading (word-by-word) ─────── */

.kinetic-word-wrap { display: inline-block; overflow: hidden; vertical-align: top; }
.kinetic-word {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    animation: kineticUp .75s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes kineticUp { to { transform: translateY(0); opacity: 1; } }

/* ── Hero decoration ─────────────────────────── */

.hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    animation: blobFloat 16s ease-in-out infinite;
}
.hero-blob--1 {
    width: 420px; height: 420px; left: -120px; top: -140px;
    background: radial-gradient(circle, rgba(204,255,0,.4), transparent 70%);
}
.hero-blob--2 {
    width: 380px; height: 380px; right: -100px; bottom: -160px;
    background: radial-gradient(circle, rgba(204,255,0,.22), transparent 70%);
    animation-delay: -8s;
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--border-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 70%);
    opacity: .5;
}
.hero-glow {
    position: absolute; inset: 0;
    background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 15%), rgba(204,255,0,.14), transparent 60%);
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(24px, -18px) scale(1.06); }
}

/* ── Spotlight border-glow on cards ──────────── */

.card, .pricing-card, .testimonial-card, .service-cat-card { position: relative; }
.card::before, .pricing-card::before, .testimonial-card::before, .service-cat-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--acid-green), transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 1;
}
.card:hover::before, .pricing-card:hover::before, .testimonial-card:hover::before, .service-cat-card:hover::before { opacity: 1; }

/* ── Icon micro-interactions ─────────────────── */

.card-icon, .service-hero__icon, .service-cat-card__icon { transition: transform .5s var(--ease-spring); }
.card:hover .card-icon, .bento-tile:hover .card-icon { transform: scale(1.12) rotate(-6deg); }

.cta-icon { animation: iconFloat 5s ease-in-out infinite; }
.cta-icon:nth-child(2) { animation-delay: -1.6s; }
.cta-icon:nth-child(3) { animation-delay: -3.2s; }
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ── Pulsing badge dot ────────────────────────── */

.section-badge { display: inline-flex; align-items: center; gap: 8px; }
.section-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--acid-green);
    flex-shrink: 0;
    animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(1.6); }
}

/* ── Magnetic buttons + shine sweep ──────────── */

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    transition: left .7s var(--ease-out);
}
.btn-primary:hover::after { left: 130%; }
.btn[data-magnetic] { will-change: transform; }

/* ── Card tilt ────────────────────────────────── */

[data-tilt] { transform-style: preserve-3d; transition: transform .35s var(--ease-out); }

/* ── Reduced motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .kinetic-word { opacity: 1 !important; transform: none !important; animation: none !important; }
    .hero-blob, .cta-icon, .section-badge::before, .pricing-card--popular { animation: none !important; }
    .btn-primary::after { display: none; }
    [data-tilt] { transform: none !important; }
}