/* ============================================
   FluxMind — index v2 (add-on ao style.css)
   Só o que é NOVO: loader, reveal-on-scroll, seção Ferramentas.
   Preserva 100% do MIV v2.0 (editorial). Movimento sutil, sem tropo de IA.
   ============================================ */

/* ---------- Progressive enhancement: sem JS tudo visível ---------- */
html:not(.js) .reveal,
html:not(.js) .hero-title--mask .line-in,
html:not(.js) .mask-reveal .line-in { opacity: 1 !important; transform: none !important; }
html:not(.js) .loader { display: none !important; }

/* ---------- Loader ---------- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--paper);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-mark {
    width: clamp(120px, 22vw, 180px);
    height: auto;
    opacity: 0;
    animation: loader-in 0.6s ease forwards;
}
.loader-bar {
    width: 120px;
    height: 2px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.loader-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--ink);
    border-radius: 999px;
    animation: loader-slide 1.1s ease-in-out infinite;
}
@keyframes loader-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes loader-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-delay, 0) * 90ms);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* ============================================
   INSPIRAÇÃO (vance + Lando) — on-brand
   ============================================ */

/* ---------- Linha de fluxo (assinatura do hero) ---------- */
.flux-line {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(9rem, 22vh, 15rem);
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}
.flux-line svg { width: 100%; height: 100%; display: block; }
.flux-line path {
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.5;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: flux-draw 3.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.flux-line path.flux-2 { stroke: var(--cyan); opacity: 0.5; animation-delay: 0.7s; }
@keyframes flux-draw { to { stroke-dashoffset: 0; } }
.hero-container { position: relative; z-index: 1; }

/* ---------- Reveal por máscara (hero + títulos de seção) ---------- */
.hero-title--mask .line,
.mask-reveal .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.hero-title--mask .line-in,
.mask-reveal .line-in {
    display: block;
    transform: translateY(108%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-title--mask.reveal { opacity: 1; transform: none; }
.hero-title--mask.is-visible .line-in,
.mask-reveal.is-visible .line-in { transform: none; }
.hero-title--mask .line:nth-child(1) .line-in,
.mask-reveal .line:nth-child(1) .line-in { transition-delay: 0.05s; }
.hero-title--mask .line:nth-child(2) .line-in,
.mask-reveal .line:nth-child(2) .line-in { transition-delay: 0.14s; }
.hero-title--mask .line:nth-child(3) .line-in,
.mask-reveal .line:nth-child(3) .line-in { transition-delay: 0.23s; }

/* ---------- Marquee / ticker infinito ---------- */
.marquee {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: var(--paper);
    padding: 0.85rem 0;
    user-select: none;
}
.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: marquee 50s linear infinite;
}
.marquee-set {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    padding-right: 2.25rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.marquee-item.accent { color: var(--blue); }
.marquee-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--line);
    flex: 0 0 auto;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Hover confiante nos cards de frente ---------- */
.niche-card { position: relative; overflow: hidden; }
.niche-card::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(var(--blue), var(--cyan));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.niche-card:hover::after { transform: scaleY(1); }
.niche-card:hover .niche-num { color: var(--blue); }
.niche-num { transition: color 0.3s ease; }

/* ---------- Manifesto como dark anchor (ritmo claro→escuro→claro) ---------- */
.manifesto--dark {
    background: var(--dark);
    border-top-color: var(--dark-soft);
    border-bottom-color: var(--dark-soft);
    position: relative;
    overflow: hidden;
}
.manifesto--dark .manifesto-container { position: relative; z-index: 1; }
.manifesto--dark .section-num { color: rgba(250, 250, 247, 0.45); }
.manifesto--dark .manifesto-text { color: var(--paper); }
.manifesto--dark .manifesto-text em { color: var(--cyan); }
.manifesto--dark .manifesto-sign { color: rgba(250, 250, 247, 0.7); }
.manifesto--dark .sign-line { background: rgba(250, 250, 247, 0.5); }
.manifesto--dark::before {
    content: "MANIFESTO";
    position: absolute;
    top: 50%; right: -1.5rem;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-weight: 900;
    font-size: clamp(6rem, 17vw, 17rem);
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--paper);
    opacity: 0.03;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ---------- Nav que se adapta sobre seção escura (inspiração Lando) ---------- */
.logo-navbar { transition: filter 0.35s ease; }
.header--over-dark {
    background: rgba(10, 10, 11, 0.55);
    border-bottom-color: rgba(250, 250, 247, 0.1);
}
.header--over-dark .logo-navbar { filter: brightness(0) invert(1); }
.header--over-dark .main-nav a { color: var(--paper); }
.header--over-dark .main-nav a:hover { color: var(--cyan); }
.header--over-dark .main-nav .nav-cta { background: var(--paper); color: var(--ink); }
.header--over-dark .main-nav .nav-cta:hover { background: var(--cyan); color: var(--ink); }
.header--over-dark .hamburger span { background: var(--paper); }

/* ---------- Reduced motion: desliga tudo ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .loader-mark { animation: none; opacity: 1; }
    .loader-bar::after { animation: none; }
    .flux-line path { animation: none; stroke-dashoffset: 0; }
    .hero-title--mask .line-in,
    .mask-reveal .line-in { transform: none; transition: none; }
    /* marquee para sob reduced-motion (a regra global * { animation:none } prevalece) */
}