/* ═════════════════════════════════════════════════════════
   EyeWearCRM motion layer  (loads AFTER style.css)
   - Hero: one orchestrated load sequence (pure CSS, no flash)
   - Below the fold: reveal on scroll (classes added by animations.js)
   - "From order to delivery": steps light up 1 → 2 → 3 → 4
   ═════════════════════════════════════════════════════════ */

/* ───────── scroll progress line ───────── */


/* ───────── HERO: load sequence ───────── */
@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes focusIn {
    from {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(14px);
    }
}

@keyframes ringIn {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(.55);
    }
}

@keyframes frameIn {
    from {
        opacity: 0;
        transform: translateY(48px) scale(.97);
    }
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.7);
    }
}

@keyframes chipFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

@keyframes aperture {

    0%,
    100% {
        transform: scale(1);
        opacity: .18;
    }

    50% {
        transform: scale(.86);
        opacity: .3;
    }
}

.hero-badge {
    animation: heroRise .7s cubic-bezier(.2, .7, .2, 1) .05s backwards;
}

.hero-title {
    animation: focusIn 1s cubic-bezier(.2, .7, .2, 1) .15s backwards;
}

/* text "comes into focus" */
.hero-lead {
    animation: heroRise .8s cubic-bezier(.2, .7, .2, 1) .4s backwards;
}

.hero-section .d-flex.flex-wrap {
    animation: heroRise .8s cubic-bezier(.2, .7, .2, 1) .55s backwards;
}

.hero-section p.small {
    animation: heroRise .8s cubic-bezier(.2, .7, .2, 1) .7s backwards;
}

.lens-ring {
    animation: ringIn 1.3s cubic-bezier(.2, .7, .2, 1) .1s backwards;
}

.lens-ring::after {
    animation: aperture 7s ease-in-out 1.5s infinite;
}

/* slow aperture "breathing" */
.browser-frame {
    animation: frameIn 1s cubic-bezier(.2, .7, .2, 1) .4s backwards;
}

.chip-wa {
    animation: chipIn .6s cubic-bezier(.3, 1.4, .5, 1) 1.2s backwards, chipFloat 6s ease-in-out 1.8s infinite;
}

.chip-stock {
    animation: chipIn .6s cubic-bezier(.3, 1.4, .5, 1) 1.5s backwards, chipFloat 6s ease-in-out 3.2s infinite;
}

/* ───────── generic scroll reveal ───────── */
@keyframes rvIn {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
}

@keyframes rvScale {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.96);
    }
}

.rv {
    opacity: 0;
}

.rv.in {
    opacity: 1;
    animation: rvIn .85s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) backwards;
}

.rv.rv-scale.in {
    animation-name: rvScale;
}

/* ───────── features: WhatsApp card "types" its message ───────── */
.bento-wa {
    position: relative;
}

.wa-typing {
    position: absolute;
    left: 28px;
    bottom: 28px;
    display: flex;
    gap: 5px;
    background: #fff;
    padding: 14px 16px;
    border-radius: 16px 16px 16px 4px;
    opacity: 0;
    pointer-events: none;
}

.wa-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: dotBounce 1s infinite;
}

.wa-typing i:nth-child(2) {
    animation-delay: .15s;
}

.wa-typing i:nth-child(3) {
    animation-delay: .3s;
}

@keyframes dotBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .5;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@keyframes typingShow {
    0% {
        opacity: 0;
        transform: scale(.8);
    }

    12%,
    82% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(.9);
    }
}

@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.7);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.bento-wa.has-typing .wa-bubble {
    opacity: 0;
    transform-origin: left bottom;
}

.bento-wa.has-typing.in .wa-typing {
    animation: typingShow 1.6s ease 1s both;
}

.bento-wa.has-typing.in .wa-bubble {
    animation: bubbleIn .5s cubic-bezier(.3, 1.4, .5, 1) 2.5s both;
}

@media (max-width: 575px) {
    .wa-typing {
        left: 20px;
        bottom: 24px;
    }
}

/* ───────── how it works: 1 → 2 → 3 → 4 ───────── */
.flow-track.anim::before {
    background: rgba(255, 255, 255, .12);
    z-index: 1;
}

/* dim track */
.flow-track.anim::after {
    /* progress line */
    content: '';
    position: absolute;
    top: 21px;
    left: 21px;
    height: 2px;
    width: var(--fill, 0px);
    background: var(--blue);
    box-shadow: 0 0 12px rgba(2, 186, 251, .6);
    transition: width .9s cubic-bezier(.4, 0, .2, 1);
    z-index: 1;
}

.flow-track.anim li {
    position: relative;
    z-index: 2;
}

.flow-track.anim .flow-node {
    position: relative;
    z-index: 3;
    background: #061233;
    color: #7f93c4;
    box-shadow: 0 0 0 6px #061233, inset 0 0 0 1px rgba(255, 255, 255, .2);
    transition: background .5s, color .5s, transform .5s cubic-bezier(.3, 1.5, .5, 1);
}

.flow-track.anim .flow-node::after {
    /* ring that pulses outward */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--cyan);
    opacity: 0;
    z-index: -1;
}

.flow-track.anim li.on .flow-node {
    position: relative;
    z-index: 3;
    background: var(--blue, #0251fb);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 0 6px #061233, 0 0 16px rgba(2, 81, 251, .45);
}

.flow-track.anim li.on .flow-node::after {
    animation: ringOut 1.2s ease-out;
}

@keyframes ringOut {
    from {
        opacity: .9;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(2.3);
    }
}

.flow-track.anim li h3,
.flow-track.anim li h5,
.flow-track.anim li p {
    opacity: .28;
    transform: translateY(8px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

.flow-track.anim li.on h3,
.flow-track.anim li.on h5,
.flow-track.anim li.on p {
    opacity: 1;
    transform: none;
}

.flow-track.anim li.on p {
    transition-delay: .12s;
}

@media (max-width: 767px) {
    .flow-track.anim::after {
        width: 2px;
        height: var(--fill, 0px);
        transition: height .9s cubic-bezier(.4, 0, .2, 1);
    }
}

/* ───────── plans: one sheen across the popular card ───────── */
.pricing-card.popular::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
    background-size: 250% 100%;
    background-position: 150% 0;
}

.in .pricing-card.popular::after {
    animation: sheen 1.5s ease-out .8s;
}

@keyframes sheen {
    0% {
        opacity: 1;
        background-position: 150% 0;
    }

    100% {
        opacity: 1;
        background-position: -50% 0;
    }
}

/* ───────── testimonials: stars light up one by one ───────── */
.sec-testi .testimonial-rating i {
    display: inline-block;
}

.in .testimonial-rating i {
    animation: starPop .5s cubic-bezier(.3, 1.6, .5, 1) backwards;
}

.in .testimonial-rating i:nth-child(1) {
    animation-delay: .35s;
}

.in .testimonial-rating i:nth-child(2) {
    animation-delay: .43s;
}

.in .testimonial-rating i:nth-child(3) {
    animation-delay: .51s;
}

.in .testimonial-rating i:nth-child(4) {
    animation-delay: .59s;
}

.in .testimonial-rating i:nth-child(5) {
    animation-delay: .67s;
}

@keyframes starPop {
    from {
        opacity: 0;
        transform: scale(0) rotate(-40deg);
    }
}

/* ───────── why: icons pop in ───────── */
.in .usp-icon {
    animation: iconPop .7s cubic-bezier(.3, 1.5, .5, 1) .3s backwards;
}

@keyframes iconPop {
    from {
        opacity: 0;
        transform: scale(.4);
    }
}

/* ───────── blog: image eases in on hover ───────── */
.blog-card img {
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.blog-card:hover img {
    transform: scale(1.06);
}

/* ───────── reduced motion: everything just appears ───────── */
@media (prefers-reduced-motion: reduce) {
    .rv {
        opacity: 1 !important;
    }

    .wa-typing {
        display: none;
    }

    .bento-wa.has-typing .wa-bubble {
        opacity: 1;
    }

    #scrollbar {
        display: none;
    }
}