/**
 * ARANOX WEBSITE 2
 * AW2_039 — Motion Design Premium da Homepage
 *
 * Camada exclusivamente visual.
 * Não altera estrutura, conteúdo ou posicionamento fundamental.
 */

:root {
    --aw2-motion-duration-fast: 220ms;
    --aw2-motion-duration-medium: 560ms;
    --aw2-motion-duration-slow: 900ms;
    --aw2-motion-ease:
        cubic-bezier(0.22, 1, 0.36, 1);
    --aw2-motion-ease-soft:
        cubic-bezier(0.16, 1, 0.3, 1);
    --aw2-motion-shadow:
        0 28px 80px rgba(5, 23, 45, 0.14);
    --aw2-motion-blue-glow:
        0 20px 70px rgba(8, 102, 255, 0.14);
}

/* --------------------------------------------------------------------------
   ESTADO DE CARREGAMENTO
   -------------------------------------------------------------------------- */

html.aw2-motion-enabled .aw2-reveal {
    opacity: 0;
    transform:
        translate3d(0, 34px, 0)
        scale(0.985);
    transition:
        opacity var(--aw2-motion-duration-slow)
            var(--aw2-motion-ease-soft),
        transform var(--aw2-motion-duration-slow)
            var(--aw2-motion-ease-soft);
    transition-delay:
        calc(var(--aw2-stagger, 0) * 70ms);
    will-change: opacity, transform;
}

html.aw2-motion-enabled .aw2-reveal.aw2-is-visible {
    opacity: 1;
    transform:
        translate3d(0, 0, 0)
        scale(1);
}

html.aw2-motion-enabled .aw2-reveal-left {
    transform:
        translate3d(-38px, 0, 0)
        scale(0.99);
}

html.aw2-motion-enabled .aw2-reveal-right {
    transform:
        translate3d(38px, 0, 0)
        scale(0.99);
}

html.aw2-motion-enabled .aw2-reveal-left.aw2-is-visible,
html.aw2-motion-enabled .aw2-reveal-right.aw2-is-visible {
    transform:
        translate3d(0, 0, 0)
        scale(1);
}

/* --------------------------------------------------------------------------
   HERO VIVO
   -------------------------------------------------------------------------- */

.aranox-home-hero {
    --aw2-pointer-x: 50%;
    --aw2-pointer-y: 45%;
}

.aranox-home-hero::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--aw2-pointer-x) var(--aw2-pointer-y),
            rgba(39, 185, 255, 0.115),
            transparent 27%
        );
    content: "";
    opacity: 0.9;
    transition:
        background-position 450ms ease;
}

.aranox-home-hero__ambient {
    animation:
        aw2HeroAmbient 14s ease-in-out infinite alternate;
    transform-origin: center;
}

.aranox-home-hero__content {
    position: relative;
    z-index: 3;
}

.aranox-home-hero h1 {
    text-wrap: balance;
}

.aranox-home-hero h1 span {
    transition:
        color 700ms ease,
        text-shadow 700ms ease;
}

.aranox-home-hero:hover h1 span {
    color: rgba(255, 255, 255, 0.62);
    text-shadow:
        0 16px 55px rgba(39, 185, 255, 0.12);
}

.aranox-home-orbit {
    transition:
        transform 900ms var(--aw2-motion-ease-soft);
}

.aranox-home-hero:hover .aranox-home-orbit {
    transform: scale(1.018);
}

.aranox-home-orbit__ring {
    will-change: transform;
}

.aranox-home-orbit__ring--one {
    animation:
        aw2OrbitClockwise 36s linear infinite;
}

.aranox-home-orbit__ring--two {
    animation:
        aw2OrbitCounterClockwise 27s linear infinite;
}

.aranox-home-orbit__ring--three {
    animation:
        aw2OrbitClockwise 19s linear infinite;
}

.aranox-home-orbit__center {
    animation:
        aw2CenterBreathing 5.6s ease-in-out infinite;
    transition:
        transform 600ms var(--aw2-motion-ease),
        box-shadow 600ms var(--aw2-motion-ease);
}

.aranox-home-hero:hover .aranox-home-orbit__center {
    transform: scale(1.045);
    box-shadow:
        0 0 120px rgba(39, 185, 255, 0.28),
        inset 0 0 40px rgba(255, 255, 255, 0.08);
}

.aranox-home-orbit__node {
    transition:
        transform 420ms var(--aw2-motion-ease),
        border-color 420ms ease,
        background-color 420ms ease,
        box-shadow 420ms ease;
}

.aranox-home-orbit__node:hover {
    transform: translateY(-4px) scale(1.035);
    border-color: rgba(141, 218, 255, 0.52);
    background: rgba(8, 35, 68, 0.92);
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------------------
   MÉTRICAS
   -------------------------------------------------------------------------- */

.aranox-home-metric {
    position: relative;
    overflow: hidden;
    transition:
        background-color 420ms ease,
        transform 420ms var(--aw2-motion-ease);
}

.aranox-home-metric::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(39, 185, 255, 0.72),
            transparent
        );
    content: "";
    opacity: 0;
    transform: scaleX(0.3);
    transition:
        opacity 420ms ease,
        transform 420ms var(--aw2-motion-ease);
}

.aranox-home-metric:hover {
    background: rgba(255, 255, 255, 0.035);
}

.aranox-home-metric:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.aranox-home-metric strong {
    transition:
        transform 420ms var(--aw2-motion-ease),
        color 420ms ease;
}

.aranox-home-metric:hover strong {
    transform: translateY(-3px);
    color: #8ddaff;
}

/* --------------------------------------------------------------------------
   BOTÕES PREMIUM
   -------------------------------------------------------------------------- */

.aranox-home-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow:
        0 10px 32px rgba(4, 19, 40, 0.10);
    transform:
        translate3d(0, 0, 0);
    transition:
        transform var(--aw2-motion-duration-fast)
            var(--aw2-motion-ease),
        box-shadow var(--aw2-motion-duration-fast) ease,
        border-color var(--aw2-motion-duration-fast) ease,
        background-color var(--aw2-motion-duration-fast) ease,
        color var(--aw2-motion-duration-fast) ease;
}

.aranox-home-button::before {
    position: absolute;
    z-index: -1;
    top: -80%;
    left: -45%;
    width: 34%;
    height: 260%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent
        );
    content: "";
    opacity: 0;
    transform: rotate(18deg);
    transition:
        left 650ms var(--aw2-motion-ease),
        opacity 250ms ease;
}

.aranox-home-button:hover::before,
.aranox-home-button:focus-visible::before {
    left: 112%;
    opacity: 1;
}

.aranox-home-button:hover,
.aranox-home-button:focus-visible {
    transform:
        translate3d(0, -3px, 0)
        scale(1.012);
    box-shadow:
        0 18px 44px rgba(3, 18, 38, 0.18);
}

.aranox-home-button:active {
    transform:
        translate3d(0, -1px, 0)
        scale(0.995);
    transition-duration: 90ms;
}

/* --------------------------------------------------------------------------
   CARDS DE EMPRESAS E PLATAFORMAS
   -------------------------------------------------------------------------- */

.aranox-home-company-card,
.aranox-home-platform-card,
.aranox-home-market-card,
.aranox-home-trust-card {
    transform:
        translate3d(0, 0, 0);
    transition:
        transform 520ms var(--aw2-motion-ease-soft),
        box-shadow 520ms var(--aw2-motion-ease-soft),
        border-color 420ms ease,
        background-color 420ms ease;
    will-change: transform;
}

.aranox-home-company-card::before,
.aranox-home-platform-card::before,
.aranox-home-trust-card::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--aw2-card-x, 50%) var(--aw2-card-y, 30%),
            rgba(8, 102, 255, 0.10),
            transparent 42%
        );
    content: "";
    opacity: 0;
    transition:
        opacity 420ms ease;
}

.aranox-home-company-card:hover::before,
.aranox-home-platform-card:hover::before,
.aranox-home-trust-card:hover::before {
    opacity: 1;
}

.aranox-home-company-card:hover,
.aranox-home-company-card:focus-visible,
.aranox-home-platform-card:hover,
.aranox-home-platform-card:focus-visible {
    transform:
        translate3d(0, -8px, 0)
        scale(1.008);
    box-shadow:
        var(--aw2-motion-shadow),
        var(--aw2-motion-blue-glow);
}

.aranox-home-company-card__logo img,
.aranox-home-platform-card__header img {
    transition:
        transform 520ms var(--aw2-motion-ease-soft),
        filter 520ms ease;
}

.aranox-home-company-card:hover
.aranox-home-company-card__logo img {
    transform:
        scale(1.025);
}

.aranox-home-platform-card:hover
.aranox-home-platform-card__header img {
    filter:
        drop-shadow(
            0 14px 24px rgba(8, 102, 255, 0.13)
        );
}

.aranox-home-card-link {
    transition:
        color 320ms ease,
        transform 320ms var(--aw2-motion-ease);
}

.aranox-home-card-link::after {
    display: inline-block;
    transition:
        transform 320ms var(--aw2-motion-ease);
}

.aranox-home-company-card:hover .aranox-home-card-link,
.aranox-home-platform-card:hover .aranox-home-card-link {
    transform: translateX(3px);
}

.aranox-home-company-card:hover
.aranox-home-card-link::after,
.aranox-home-platform-card:hover
.aranox-home-card-link::after {
    transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   PILARES
   -------------------------------------------------------------------------- */

.aranox-home-pillar {
    position: relative;
    overflow: hidden;
    transition:
        transform 460ms var(--aw2-motion-ease),
        background-color 460ms ease,
        box-shadow 460ms ease;
}

.aranox-home-pillar::after {
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(8, 102, 255, 0.11),
            transparent 68%
        );
    content: "";
    opacity: 0;
    transform: scale(0.65);
    transition:
        opacity 460ms ease,
        transform 460ms var(--aw2-motion-ease);
}

.aranox-home-pillar:hover {
    z-index: 2;
    transform:
        translateY(-5px);
    box-shadow:
        0 18px 50px rgba(7, 24, 48, 0.09);
}

.aranox-home-pillar:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* --------------------------------------------------------------------------
   MAPA DO ECOSSISTEMA
   -------------------------------------------------------------------------- */

.aranox-home-ecosystem-map__line {
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        transform 1.4s var(--aw2-motion-ease-soft);
}

.aranox-home-ecosystem-map.aw2-is-visible
.aranox-home-ecosystem-map__line {
    transform: scaleX(1);
}

.aranox-home-ecosystem-step > span {
    transition:
        transform 380ms var(--aw2-motion-ease),
        box-shadow 380ms ease,
        background-color 380ms ease;
}

.aranox-home-ecosystem-step:hover > span {
    transform: scale(1.12);
    background: #075ee8;
    box-shadow:
        0 12px 32px rgba(8, 102, 255, 0.28);
}

/* --------------------------------------------------------------------------
   MERCADOS
   -------------------------------------------------------------------------- */

.aranox-home-market-card {
    position: relative;
    overflow: hidden;
}

.aranox-home-market-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background:
        linear-gradient(
            to bottom,
            #0866ff,
            #27b9ff
        );
    content: "";
    transform: scaleY(0);
    transform-origin: top;
    transition:
        transform 420ms var(--aw2-motion-ease);
}

.aranox-home-market-card:hover::before,
.aranox-home-market-card:focus-visible::before {
    transform: scaleY(1);
}

.aranox-home-market-card:hover,
.aranox-home-market-card:focus-visible {
    transform:
        translate3d(0, -5px, 0);
    box-shadow:
        0 20px 50px rgba(7, 24, 48, 0.12);
}

/* --------------------------------------------------------------------------
   FLUXO INTEGRADO
   -------------------------------------------------------------------------- */

.aranox-home-integration__flow li {
    position: relative;
    transition:
        padding-left 360ms var(--aw2-motion-ease),
        background-color 360ms ease;
}

.aranox-home-integration__flow li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: #0866ff;
    content: "";
    transform: translateY(-50%);
    transition:
        height 360ms var(--aw2-motion-ease);
}

.aranox-home-integration__flow li:hover {
    padding-left: 14px;
    background:
        linear-gradient(
            90deg,
            rgba(8, 102, 255, 0.045),
            transparent
        );
}

.aranox-home-integration__flow li:hover::before {
    height: 54%;
}

/* --------------------------------------------------------------------------
   CONFIANÇA
   -------------------------------------------------------------------------- */

.aranox-home-trust-card:hover,
.aranox-home-trust-card:focus-visible {
    transform:
        translate3d(0, -7px, 0);
    box-shadow:
        0 24px 58px rgba(7, 24, 48, 0.11);
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */

.aranox-home-cta__ambient {
    animation:
        aw2CtaAmbient 16s ease-in-out infinite alternate;
}

.aranox-home-cta h2 {
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   FOCO E ACESSIBILIDADE
   -------------------------------------------------------------------------- */

.aranox-home a:focus-visible {
    outline: 3px solid rgba(39, 185, 255, 0.76);
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */

@keyframes aw2HeroAmbient {
    0% {
        opacity: 0.18;
        transform:
            scale(1)
            translate3d(0, 0, 0);
    }

    100% {
        opacity: 0.31;
        transform:
            scale(1.055)
            translate3d(-1.2%, 1%, 0);
    }
}

@keyframes aw2OrbitClockwise {
    to {
        transform: rotate(360deg);
    }
}

@keyframes aw2OrbitCounterClockwise {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes aw2CenterBreathing {
    0%,
    100% {
        box-shadow:
            0 0 78px rgba(39, 185, 255, 0.13),
            inset 0 0 30px rgba(255, 255, 255, 0.05);
    }

    50% {
        box-shadow:
            0 0 122px rgba(39, 185, 255, 0.25),
            inset 0 0 42px rgba(255, 255, 255, 0.09);
    }
}

@keyframes aw2CtaAmbient {
    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(-3%, 2%, 0)
            scale(1.08);
    }
}

/* --------------------------------------------------------------------------
   DISPOSITIVOS MÓVEIS
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .aranox-home-company-card:hover,
    .aranox-home-platform-card:hover,
    .aranox-home-market-card:hover,
    .aranox-home-trust-card:hover {
        transform:
            translate3d(0, -3px, 0);
    }

    .aranox-home-hero::after {
        display: none;
    }
}

@media (max-width: 680px) {
    html.aw2-motion-enabled .aw2-reveal,
    html.aw2-motion-enabled .aw2-reveal-left,
    html.aw2-motion-enabled .aw2-reveal-right {
        transform:
            translate3d(0, 20px, 0);
    }

    .aranox-home-company-card::before,
    .aranox-home-platform-card::before,
    .aranox-home-trust-card::before {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.aw2-motion-enabled .aw2-reveal,
    html.aw2-motion-enabled .aw2-reveal-left,
    html.aw2-motion-enabled .aw2-reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .aranox-home *,
    .aranox-home *::before,
    .aranox-home *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}