/* Hero & Page Animation System */

@keyframes magneticSlideUp {
    0% { opacity:0; transform:translateY(40px) }
    70% { opacity:1; transform:translateY(-4px) }
    to { opacity:1; transform:translateY(0) }
}
@keyframes fadeInBlur {
    from { opacity:0; transform:translateY(20px); filter:blur(6px) }
    to { opacity:1; transform:translateY(0); filter:blur(0) }
}
@keyframes floatGentle {
    0%,100% { transform:translateY(0) }
    50% { transform:translateY(-8px) }
}
@keyframes pulseSubtle {
    0%,100% { opacity:.06 }
    50% { opacity:.1 }
}
@keyframes gridDrift {
    0% { transform:translate(0,0) }
    25% { transform:translate(10px,-8px) }
    50% { transform:translate(-5px,-15px) }
    75% { transform:translate(-12px,-5px) }
    to { transform:translate(0,0) }
}
@keyframes floatOrbit {
    0% { transform:translate(0,0) rotate(0deg) }
    33% { transform:translate(15px,-10px) rotate(120deg) }
    66% { transform:translate(-10px,8px) rotate(240deg) }
    to { transform:translate(0,0) rotate(360deg) }
}
@keyframes scaleIn {
    from { opacity:0; transform:translateY(12px) scale(.95) }
    to { opacity:1; transform:translateY(0) scale(1) }
}

/* BG GRID */
.hero { --scroll:0 }
.hero-bg-grid { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.hero-bg-grid::before,.hero-bg-grid::after {
    content:''; position:absolute; width:2px; height:2px; border-radius:50%;
    background:var(--primary); opacity:.08;
    box-shadow:40px 60px 0 var(--primary),120px 30px 0 var(--accent),200px 90px 0 var(--primary),
        280px 50px 0 var(--accent),350px 110px 0 var(--primary),80px 160px 0 var(--accent),
        180px 200px 0 var(--primary),300px 180px 0 var(--accent),420px 140px 0 var(--primary),
        500px 80px 0 var(--accent),560px 190px 0 var(--primary),640px 120px 0 var(--accent);
    animation:gridDrift 20s ease-in-out infinite;
}
.hero-bg-grid::after {
    top:40%; left:30%; opacity:.05;
    box-shadow:30px 40px 0 var(--accent),110px 80px 0 var(--primary),190px 20px 0 var(--accent),
        260px 100px 0 var(--primary),340px 60px 0 var(--accent),70px 130px 0 var(--primary),
        160px 170px 0 var(--accent),280px 150px 0 var(--primary);
    animation:gridDrift 25s ease-in-out infinite reverse;
}

/* FLOATS */
.float-element { position:absolute; pointer-events:none; z-index:1; opacity:.07; will-change:transform }
.float-element--circle { width:12px; height:12px; border-radius:50%; background:var(--accent) }
.float-element--hex { width:14px; height:14px; background:var(--primary); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%) }
.float-element--ring { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--accent); background:transparent }
.float-element--dot { width:6px; height:6px; border-radius:50%; background:var(--warm) }
.float-element:nth-child(1){top:15%;left:8%;animation:floatOrbit 18s infinite,pulseSubtle 4s infinite}
.float-element:nth-child(2){top:25%;right:12%;animation:floatOrbit 22s infinite reverse,pulseSubtle 5s infinite 1s}
.float-element:nth-child(3){top:60%;left:5%;animation:floatOrbit 20s infinite 2s,pulseSubtle 6s infinite 2s}
.float-element:nth-child(4){top:70%;right:8%;animation:floatOrbit 24s infinite 3s,pulseSubtle 4.5s infinite}
.float-element:nth-child(5){top:40%;left:50%;animation:floatOrbit 19s infinite reverse 1s,pulseSubtle 5.5s infinite 1.5s}

/* HERO */
.hero-animate-tagline { opacity:0; animation:fadeInBlur .5s var(--ease-out) 0s forwards }
.hero-animate-title { opacity:0; animation:magneticSlideUp .6s var(--ease-spring) forwards }
.hero-animate-title .word { display:inline-block; opacity:0; animation:magneticSlideUp .5s var(--ease-spring) forwards }
.hero-animate-title .word:nth-child(1) { animation-delay:0s }
.hero-animate-title .word:nth-child(2) { animation-delay:.1s }
.hero-animate-title .word:nth-child(3) { animation-delay:.2s }
.hero-animate-title .word:nth-child(4) { animation-delay:.3s }
.hero-animate-title .word:nth-child(5) { animation-delay:.4s }
.hero-animate-sub { opacity:0; animation:fadeInBlur .5s var(--ease-out) .4s forwards }
.hero-animate-cta { opacity:0; animation:scaleIn .5s var(--ease-out) .6s forwards }
.hero-animate-stats { opacity:0; animation:scaleIn .5s var(--ease-out) .8s forwards }
.hero-animate-credentials { opacity:0; animation:fadeInBlur .4s var(--ease-out) 1s forwards }
.hero-animate-photo { opacity:0; animation:scaleIn .7s var(--ease-out) .3s forwards }
.hero-animate-photo .photo-frame { animation:morph 12s ease-in-out infinite,floatGentle 6s ease-in-out infinite }

/* PLX */
.parallax-bg { transform:translateY(calc(var(--scroll) * .3px)); will-change:transform }
.parallax-photo { transform:translateY(calc(var(--scroll) * -.08px)); will-change:transform }

/* REVEAL */
.section-reveal { opacity:0; transform:translateY(30px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out); will-change:opacity,transform }
.section-reveal.is-visible { opacity:1; transform:translateY(0) }
.section-reveal .card,.section-reveal .blog-card { opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease-out),transform .5s var(--ease-out) }
.section-reveal.is-visible .card,.section-reveal.is-visible .blog-card { opacity:1; transform:translateY(0) }
.section-reveal.is-visible .card:nth-child(1),.section-reveal.is-visible .blog-card:nth-child(1){transition-delay:.05s}
.section-reveal.is-visible .card:nth-child(2),.section-reveal.is-visible .blog-card:nth-child(2){transition-delay:.15s}
.section-reveal.is-visible .card:nth-child(3),.section-reveal.is-visible .blog-card:nth-child(3){transition-delay:.25s}
.section-reveal.is-visible .card:nth-child(4),.section-reveal.is-visible .blog-card:nth-child(4){transition-delay:.35s}
.section-reveal.is-visible .card:nth-child(5),.section-reveal.is-visible .blog-card:nth-child(5){transition-delay:.45s}
.section-reveal.is-visible .card:nth-child(6),.section-reveal.is-visible .blog-card:nth-child(6){transition-delay:.55s}

.stat-number[data-target] { font-variant-numeric:tabular-nums }
/* HOVER */
.card-premium { transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out); will-change:transform }
.card-premium:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 16px 40px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04); border-color:var(--accent) }
.blog-card { transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out); will-change:transform }
.blog-card:hover { transform:translateY(-4px) scale(1.015); box-shadow:0 16px 40px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04) }

/* A11Y */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
    .float-element { display:none!important }
    .hero-bg-grid::before,.hero-bg-grid::after { animation:none!important }
    .section-reveal,.section-reveal .card,.section-reveal .blog-card { opacity:1!important; transform:none!important }
    .hero-animate-title,.hero-animate-sub,.hero-animate-cta,.hero-animate-stats,
    .hero-animate-credentials,.hero-animate-photo,.hero-animate-tagline { opacity:1!important; transform:none!important; filter:none!important }
    .hero-animate-title .word { opacity:1!important; transform:none!important }
    .parallax-bg,.parallax-photo { transform:none!important }
}

/* MOB */
@media (max-width:768px) {
    .float-element { display:none }
    .hero-bg-grid::before,.hero-bg-grid::after { animation:none; opacity:.04 }
    .hero-animate-photo .photo-frame { animation:morph 12s ease-in-out infinite }
    .parallax-bg,.parallax-photo { transform:none!important }
    .section-reveal .card,.section-reveal .blog-card { transition-delay:0s!important }
    .hero-animate-title .word { animation-delay:0s!important }
}