.hero-enter {
    --hero-ease: cubic-bezier(.16, 1, .3, 1);
    --hero-blur: 18px;
    position: relative;
}

.hero-enter::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 20% 18%, rgba(16, 185, 129, .08), transparent 60%),
        radial-gradient(760px 360px at 75% 22%, rgba(34, 211, 238, .06), transparent 60%),
        radial-gradient(900px 520px at 55% 78%, rgba(16, 185, 129, .05), transparent 62%);
    filter: blur(2px);
    opacity: 0;
    transform: translateY(8px) scale(.98);
}

.hero-enter.is-visible::before {
    animation: heroSectionBloom 1200ms var(--hero-ease) forwards;
}

.hero-enter::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 420px;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(16, 185, 129, .12) 50%, transparent 65%);
    transform: translateY(-80px) rotate(8deg);
    opacity: 0;
    mix-blend-mode: overlay;
}

.hero-enter.is-visible::after {
    animation: heroSheen 1200ms var(--hero-ease) forwards;
    animation-delay: 320ms;
}

.hero-enter [data-reveal] {
    opacity: 0;
    transform: translateY(26px) scale(.985);
    filter: blur(var(--hero-blur));
    will-change: transform, opacity, filter;
}

.hero-enter [data-reveal="top"] {
    transform: translateY(-26px) scale(.985);
}

.hero-enter [data-reveal="bottom"] {
    transform: translateY(30px) scale(.985);
}

.hero-enter [data-reveal="left"] {
    transform: translateX(-26px) scale(.985);
}

.hero-enter [data-reveal="right"] {
    transform: translateX(26px) scale(.985);
}

.hero-enter.is-visible [data-reveal] {
    animation: heroFadeUp 1050ms var(--hero-ease) forwards;
    animation-delay: calc(var(--d, 0) * 110ms + 80ms);
}

.hero-enter.is-visible [data-reveal="top"] {
    animation-name: heroFadeDown;
}

.hero-enter.is-visible [data-reveal="bottom"] {
    animation-name: heroFadeUp;
}

.hero-enter.is-visible [data-reveal="left"] {
    animation-name: heroFadeRight;
}

.hero-enter.is-visible [data-reveal="right"] {
    animation-name: heroFadeLeft;
}

.scroll-enter {
    --hero-ease: cubic-bezier(.16, 1, .3, 1);
    --hero-blur: 18px;
    position: relative;
}

.hero-enter,
.scroll-enter {
    overflow-x: clip;
}

.scroll-enter::before {
    content: "";
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background:
        radial-gradient(900px 420px at 20% 18%, rgba(16, 185, 129, .07), transparent 62%),
        radial-gradient(760px 360px at 75% 22%, rgba(34, 211, 238, .10), transparent 66%),
        radial-gradient(900px 520px at 55% 78%, rgba(16, 185, 129, .05), transparent 68%);
    filter: blur(2px);
    opacity: 0;
    transform: translateY(10px) scale(.99);
}

.scroll-enter.is-visible::before {
    animation: heroSectionBloom 1200ms var(--hero-ease) forwards;
}

.scroll-enter::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 360px;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(16, 185, 129, .10) 50%, transparent 65%);
    transform: translateY(-90px) rotate(7deg);
    opacity: 0;
    mix-blend-mode: overlay;
}

.scroll-enter.is-visible::after {
    animation: heroSheen 1200ms var(--hero-ease) forwards;
    animation-delay: 240ms;
}

.scroll-enter [data-reveal] {
    opacity: 0;
    transform: translateY(22px) scale(.99);
    filter: blur(var(--hero-blur));
    will-change: transform, opacity, filter;
}

.scroll-enter [data-reveal="top"] {
    transform: translateY(-22px) scale(.99);
}

.scroll-enter [data-reveal="bottom"] {
    transform: translateY(26px) scale(.99);
}

.scroll-enter [data-reveal="left"] {
    transform: translateX(-22px) scale(.99);
}

.scroll-enter [data-reveal="right"] {
    transform: translateX(22px) scale(.99);
}

.scroll-enter [data-reveal].is-visible {
    animation: heroFadeUp 1000ms var(--hero-ease) forwards;
    animation-delay: calc(var(--d, 0) * 120ms);
}

.scroll-enter [data-clip] {
    opacity: 0;
    transform: translateY(14px) scale(.99);
    filter: blur(calc(var(--hero-blur) - 4px));
    clip-path: inset(0 0 100% 0 round 18px);
    will-change: clip-path, transform, opacity, filter;
}

.scroll-enter [data-clip].is-visible {
    animation: scrollClipIn 1300ms var(--hero-ease) forwards;
    animation-delay: calc(var(--d, 0) * 120ms + 120ms);
}

.scroll-enter [data-reveal="top"].is-visible {
    animation-name: heroFadeDown;
}

.scroll-enter [data-reveal="left"].is-visible {
    animation-name: heroFadeRight;
}

.scroll-enter [data-reveal="right"].is-visible {
    animation-name: heroFadeLeft;
}

.section-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    overflow: hidden;
    background-clip: padding-box;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}

.demo-snap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(86vw, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.demo-snap>.demo-card {
    scroll-snap-align: start;
}

.demo-snap::-webkit-scrollbar {
    display: none;
}

.demo-snap {
    scrollbar-width: none;
}

.link-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    padding: 6px 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, .72);
}

.link-arrow {
    height: 2px;
    width: 38px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(16, 185, 129, .38), rgba(255, 255, 255, .18));
    opacity: .7;
}

.section-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 38%);
    opacity: .6;
    border-radius: inherit;
}

.micro-grid {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .35;
    mask-image: radial-gradient(circle at 40% 20%, black 45%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 40% 20%, black 45%, transparent 70%);
}

.hero-enter .hero-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(-28px) scale(.99);
    filter: blur(calc(var(--hero-blur) + 6px));
    will-change: transform, opacity, filter;
}

.hero-enter.is-visible .hero-title span {
    animation: heroWordUp 1150ms var(--hero-ease) forwards;
    animation-delay: calc(var(--w, 0) * 95ms + 160ms);
}

.hero-visual {
    position: relative;
    isolation: isolate;
    border-radius: 24px;
    overflow: hidden;
    transform: translateY(16px) rotateX(10deg) rotateY(-14deg) scale(.965);
    opacity: 0;
    filter: blur(calc(var(--hero-blur) - 2px));
    will-change: transform, opacity, filter;
}

.hero-enter.is-visible .hero-visual {
    animation: heroVisualIn 1350ms var(--hero-ease) forwards;
    animation-delay: 260ms;
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(closest-side, rgba(16, 185, 129, .16), transparent 72%),
        radial-gradient(closest-side, rgba(34, 211, 238, .18), transparent 74%),
        radial-gradient(closest-side, rgba(16, 185, 129, .10), transparent 76%);
    filter: blur(18px);
    animation: heroOrbs 10s var(--hero-ease) infinite alternate;
    z-index: -2;
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 40%),
        linear-gradient(0deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 2;
}

.hero-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .65);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .18),
        0 0 22px rgba(16, 185, 129, .35);
    opacity: 0;
    transform: scale(.6);
}

.hero-enter.is-visible .hero-sparkle {
    animation: heroSparkle 1600ms var(--hero-ease) forwards;
    animation-delay: calc(var(--s, 0) * 140ms + 520ms);
}

.hero-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .25),
        0 0 0 1px rgba(255, 255, 255, .06) inset;
    overflow: hidden;
    background-clip: padding-box;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}

.hero-grid {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 50% 35%, black 45%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 35%, black 45%, transparent 70%);
    opacity: .45;
}

.hero-scanline {
    position: absolute;
    left: -40%;
    right: -40%;
    top: -20%;
    height: 60px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .14), transparent);
    transform: rotate(12deg);
    animation: heroScan 2.8s var(--hero-ease) infinite;
    mix-blend-mode: overlay;
    opacity: .85;
}

/* Pulse animation for CTAs */
.cta-pulse {
    position: relative;
    overflow: hidden;
}

.cta-pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transform: translateX(-100%);
    animation: ctaPulse 3s ease-in-out infinite;
}

@keyframes ctaPulse {

    0%,
    100% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(100%);
    }
}

/* Bio-metric glow */
.bio-glow {
    position: relative;
}

.bio-glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(16, 185, 129, .3), rgba(34, 211, 238, .3));
    border-radius: inherit;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.bio-glow:hover::before {
    opacity: 1;
}

/* Balance Index Bar Animation */
.balance-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.balance-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #22d3ee);
    transform-origin: left;
    animation: balanceFill 2s ease-out forwards;
}

@keyframes balanceFill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(.985);
        filter: blur(var(--hero-blur));
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroFadeDown {
    0% {
        opacity: 0;
        transform: translateY(-26px) scale(.985);
        filter: blur(var(--hero-blur));
    }

    70% {
        opacity: 1;
        transform: translateY(2px) scale(1);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroFadeLeft {
    0% {
        opacity: 0;
        transform: translateX(26px) scale(.985);
        filter: blur(var(--hero-blur));
    }

    70% {
        opacity: 1;
        transform: translateX(-2px) scale(1);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroFadeRight {
    0% {
        opacity: 0;
        transform: translateX(-26px) scale(.985);
        filter: blur(var(--hero-blur));
    }

    70% {
        opacity: 1;
        transform: translateX(2px) scale(1);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroWordUp {
    0% {
        opacity: 0;
        transform: translateY(-28px) scale(.99);
        filter: blur(calc(var(--hero-blur) + 6px));
    }

    62% {
        opacity: 1;
        transform: translateY(3px) scale(1);
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroVisualIn {
    0% {
        opacity: 0;
        transform: translateX(44px) translateY(12px) rotateX(12deg) rotateY(-16deg) scale(.96);
        filter: blur(calc(var(--hero-blur) + 2px));
    }

    70% {
        opacity: 1;
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
        filter: blur(0);
    }
}

@keyframes heroSectionBloom {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroOrbs {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    100% {
        transform: translate3d(2%, 2%, 0) scale(1.06);
    }
}

@keyframes heroScan {
    0% {
        transform: translateY(-40px) rotate(12deg);
        opacity: 0;
    }

    30% {
        opacity: .9;
    }

    100% {
        transform: translateY(420px) rotate(12deg);
        opacity: 0;
    }
}

@keyframes heroSheen {
    0% {
        opacity: 0;
        transform: translateY(-80px) rotate(8deg);
    }

    20% {
        opacity: .9;
    }

    100% {
        opacity: 0;
        transform: translateY(360px) rotate(8deg);
    }
}

@keyframes heroSparkle {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.6);
        filter: blur(6px);
    }

    45% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-6px) scale(.85);
        filter: blur(2px);
    }
}

@keyframes scrollClipIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(.99);
        filter: blur(calc(var(--hero-blur) - 4px));
        clip-path: inset(0 0 100% 0 round 18px);
    }

    65% {
        opacity: 1;
        filter: blur(1px);
        clip-path: inset(0 0 0 0 round 18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        clip-path: inset(0 0 0 0 round 18px);
    }
}