/**
 * DUOS landing — estilos de marca e layout (complementam Tailwind CDN).
 *
 * Paleta (tokens canônicos em duos-tokens.css, carregado a seguir):
 * - Marca: #6BF3FF (--duos-accent-default)
 * - Tecnologia: #219EBC, #373F51 (--duos-tech-blue / --duos-tech-slate)
 * - Comunicação: #FF8922, #5929C2 (--duos-comm-orange / --duos-comm-lilac)
 *
 * Cores Tailwind: theme.extend.colors em assets/js/tailwind.config.js (duos.brand, duos.tech, …).
 */
:root {
    /**
     * Cabeçalho fixo: o scroll da página é #main-scroll, não o documento —
     * o padding de âncora tem de estar no contentor com overflow.
     */
    /* Fallback sem JS (~padding + linha logo/nav, sem padding inferior do header) */
    --duos-header-scroll-offset: calc(env(safe-area-inset-top, 0px) + 5.25rem);

    --earth-stone: #0c0c0e;
    --earth-sand: #fafafa;
    --earth-clay: #71717a;
    /* Acentos locais → mesmos tokens DUOS (resolução após duos-tokens.css) */
    --neon-turquoise: var(--duos-accent-default, #6bf3ff);
    --neon-magenta: var(--duos-comm-lilac, #5929c2);
    --hero-mesh-1: color-mix(in srgb, var(--duos-accent-default, #6bf3ff) 16%, transparent);
    --hero-mesh-2: color-mix(in srgb, var(--duos-comm-lilac, #5929c2) 12%, transparent);
    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

html {
    /* Âncoras usam o scroll de #main-scroll; padding efetivo está em .scroll-container */
    scroll-padding-top: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background-color: var(--earth-sand);
    color: var(--earth-stone);
    overflow-x: hidden;
    max-width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 200;
    padding: 0.75rem 1rem;
    background: var(--earth-stone);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 9999px;
    transform: translateY(-200%);
    transition: transform 0.2s ease-out;
}

.skip-link:focus {
    outline: 2px solid var(--neon-turquoise);
    outline-offset: 3px;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.editorial-section {
    min-height: min(100vh, 920px);
    width: 100%;
    position: relative;
    display: flex;
    /* Centrado na vertical só onde a composição pede (#sobre); em blocos em duas colunas
       o centering empurrava títulos para o meio da viewport e criava “ar” enorme ao saltar por âncora. */
    align-items: center;
    /* scroll-snap removido: proximity + smooth scroll gerava rolagem “presa” em alguns browsers */
    /* Offset do header via scroll-padding em .scroll-container; margin aqui criava faixa do hero acima da secção */
    scroll-margin-top: 0;
    background-color: #fafafa;
    padding-top: clamp(2rem, 6vw, 3.75rem);
    padding-bottom: clamp(4rem, 12vw, 7rem);
}

.editorial-section.editorial-section--top {
    align-items: flex-start;
}

#main-content:focus-visible {
    outline: 2px solid var(--neon-turquoise);
    outline-offset: 4px;
}

.scroll-container {
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scroll-padding-top: var(--duos-header-scroll-offset);
    touch-action: pan-y;
    /* Sem scroll-snap: evita conflito com wheel/trackpad e scroll-behavior: smooth */
}

.text-neon-t {
    color: var(--duos-tech-blue);
}

.text-neon-m {
    color: var(--duos-comm-lilac);
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f4f4f5;
}

::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 10px;
}

/* Uma viewport de altura: sem faixa extra de scroll (evita sobrepor o cálculo de secção ativa). */
#hero-scroll-container {
    height: 100vh;
    height: 100dvh;
    position: relative;
}

#inicial {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: #fafafa;
}

.hero-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 85% 55%, var(--hero-mesh-1), transparent 55%),
        radial-gradient(ellipse 60% 50% at 10% 20%, var(--hero-mesh-2), transparent 50%),
        linear-gradient(165deg, #fafafa 0%, #f4f4f5 45%, #fafafa 100%);
}

.hero-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.5;
    mix-blend-mode: multiply;
}

.hero-grid-line {
    position: absolute;
    top: 15%;
    bottom: 10%;
    left: 33%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(24, 24, 27, 0.12), transparent);
}

.reveal-x {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-x.reveal-left-prep {
    transform: translate3d(-48px, 28px, 0);
}

.reveal-x.reveal-right-prep {
    transform: translate3d(48px, 28px, 0);
}

.reveal-x.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.section-fade {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-fade.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.brain-montage {
    --brain-nw: 400;
    --brain-nh: 393;
    aspect-ratio: var(--brain-nw) / var(--brain-nh);
    width: min(450px, 42vw);
    max-height: min(450px, 52vh);
    height: auto;
    position: absolute;
}

/* Evita FOUC: primeiro frame só depois do JS aplicar translate (separação) e estado merged */
#brain-container:not([data-brain-ready]) {
    visibility: hidden;
}

.brain-float {
    position: absolute;
    inset: 0;
    isolation: isolate;
    animation: brain-float 5.5s ease-in-out infinite;
    will-change: transform;
}

.brain-hemisphere-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.brain-hemisphere-art-img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

@keyframes brain-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.brain-hemisphere-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.brain-half {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    object-fit: contain;
    will-change: transform;
}

.brain-half--left {
    right: 50%;
    left: auto;
    object-position: 100% 50%;
    transform-origin: 100% 50%;
}

.brain-half--right {
    left: 50%;
    object-position: 0% 50%;
    transform-origin: 0% 50%;
}

.brain-complete {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Hero: manter hemisférios visíveis ao "montar" para preservar o interior com brain-art.png */
#brain-container #brain-complete {
    opacity: 0;
    visibility: hidden;
}

#brain-container #brain-left,
#brain-container #brain-right {
    opacity: 0.9;
    visibility: visible;
}

#brain-container.brain-merged #brain-left,
#brain-container.brain-merged #brain-right {
    opacity: 0.9;
    visibility: visible;
}

/* Sobre (“o cérebro da DUOS”): fundo claro + mesh para contraste com o SVG */
#sobre {
    color-scheme: light;
    background-color: #fafafa;
}

#sobre .duos-sobre-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem 0.75rem;
    margin: 0 auto 1.125rem;
    max-width: 28rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--duos-accent-default) 88%, var(--duos-ink) 12%);
}

#sobre .duos-sobre-eyebrow__rule {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2px;
    border-radius: 1px;
}

#sobre .duos-sobre-eyebrow__rule--left {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--duos-accent-default) 75%, transparent));
}

#sobre .duos-sobre-eyebrow__rule--right {
    background: linear-gradient(90deg, color-mix(in srgb, var(--duos-accent-default) 75%, transparent), transparent);
}

#sobre .duos-sobre-heading {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

#sobre .ecosistema-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 85% 55% at 50% -10%,
            color-mix(in srgb, var(--duos-accent-default) 18%, transparent),
            transparent 52%
        ),
        radial-gradient(
            ellipse 70% 45% at 100% 85%,
            color-mix(in srgb, var(--duos-comm-lilac) 8%, transparent),
            transparent 48%
        ),
        radial-gradient(ellipse 50% 35% at 0% 60%, rgba(24, 24, 27, 0.04), transparent 45%),
        linear-gradient(175deg, #fafafa 0%, #f4f4f5 50%, #fafafa 100%);
}

#sobre .ecosistema-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.45;
    background-image: var(--grain);
    mix-blend-mode: multiply;
}

#sobre .ecosistema-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: min(520px, 90vw);
    height: min(520px, 90vw);
    border: 1px solid color-mix(in srgb, var(--duos-accent-default) 22%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

#sobre .ecosistema-orbit--inner {
    width: min(380px, 72vw);
    height: min(380px, 72vw);
    border-color: color-mix(in srgb, var(--duos-comm-lilac) 14%, transparent);
}

/* Stack: SVG (ou img antes do inline) + arte PNG em blend por cima */
#sobre .ecosistema-brain-stack {
    line-height: 0;
}

#sobre .ecosistema-brain-stack > svg,
#sobre .ecosistema-brain-stack > .ecosistema-brain-outline-src {
    filter: drop-shadow(0 22px 40px rgba(24, 24, 27, 0.12));
}

.duos-mobile-nav > summary::-webkit-details-marker {
    display: none;
}

.duos-mobile-nav[open] > summary .material-symbols-outlined {
    transform: rotate(90deg);
}

.duos-mobile-nav > summary .material-symbols-outlined {
    transition: transform 0.2s ease;
}

.duos-mobile-nav-panel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.duos-mobile-nav-link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.duos-mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.duos-mobile-nav-link:focus-visible {
    outline: 2px solid var(--duos-accent-default, #6bf3ff);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    :root {
        --duos-header-scroll-offset: calc(env(safe-area-inset-top, 0px) + 4.75rem);
    }

    .editorial-section {
        min-height: auto;
        padding-top: clamp(2.75rem, 9vw, 4rem);
        padding-bottom: clamp(3.5rem, 10vw, 5rem);
    }

    #hero-scroll-container,
    #inicial {
        min-height: 100vh;
        min-height: 100dvh;
    }

    #brain-container.brain-montage {
        width: min(280px, 74vw);
        max-height: min(280px, 34vh);
        bottom: auto;
        right: auto;
        transform: none;
        margin-left: auto;
        margin-right: auto;
        z-index: 1;
        opacity: 0.92;
    }

    #inicial .hero-canvas::after {
        opacity: 0.35;
    }

    .hero-grid-line {
        display: none;
    }

    .vertical-text {
        writing-mode: horizontal-tb;
    }

    #lado-tecnologico .duos-tech-heading,
    #lado-humano .duos-comm-heading {
        line-height: 0.95;
    }

    #lado-tecnologico .duos-tech-eyebrow,
    #lado-humano .duos-comm-eyebrow {
        letter-spacing: 0.18em;
    }

    #sobre .duos-sobre-eyebrow {
        margin-bottom: 0.875rem;
        letter-spacing: 0.18em;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .scroll-container {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }

    .brain-float {
        animation: none;
    }

    .hero-scroll-hint {
        display: none;
    }

    #sobre .ecosistema-brain-stack svg image.duos-ecosistema-brain-art {
        animation: none;
        opacity: 0.35;
    }

    #hero-scroll-container #brain-left path.duos-brain-left-fill,
    #hero-scroll-container #brain-right path.duos-brain-right-fill {
        animation: none;
        fill-opacity: 1;
    }

    .reveal-x,
    .section-fade {
        transition-duration: 0.01ms;
        opacity: 1;
        transform: none;
    }

    .reveal-x.reveal-left-prep,
    .reveal-x.reveal-right-prep {
        transform: none;
    }

    #lado-tecnologico .duos-tech-card {
        opacity: 1;
        transform: none;
        transition-duration: 0.01ms;
    }

    #lado-tecnologico.is-visible .duos-tech-card:nth-child(n) {
        transition-delay: 0s;
    }

    #lado-humano .duos-comm-card {
        opacity: 1;
        transform: none;
        transition-duration: 0.01ms;
    }

    #lado-humano.is-visible .duos-comm-card:nth-child(n) {
        transition-delay: 0s;
    }
}