/* ============================================================
   SMCS — Camada de movimento: "a fábrica em funcionamento"
   (preview 2026-09-13)

   Regras: só transform/opacity/clip-path (sem layout shift), nenhum
   elemento novo na página, nada no widget da Sofia. Sem JS ou com
   prefers-reduced-motion, a página fica exatamente como antes.
   ============================================================ */

:root {
    --m-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --m-dur: 0.55s;
    --m-stagger: 70ms;
    --m-shadow-hover: 0 14px 32px rgba(11, 31, 38, 0.10);
    --m-borda-hover: rgba(14, 116, 144, 0.45);
}

/* ---------- 1. Hover: uma linguagem só para todos os cartões ---------- */

.product-card, .service-card, .step, .dogfood-item, .founder-band, .channel {
    transition: transform 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease),
                border-color 0.35s var(--m-ease);
}
.product-card:hover, .service-card:hover, .step:hover, .dogfood-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow-hover);
    border-color: var(--m-borda-hover);
}
.founder-band:hover {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-hover);
    border-color: var(--m-borda-hover);
}

/* a câmera aproxima: ilustrações e foto */
.product-card figure img, .service-icon img, .founder-photo {
    transition: transform 0.7s var(--m-ease);
    transform-origin: center;
}
.product-card:hover figure img, .service-card:hover .service-icon img { transform: scale(1.045); }
.founder-band:hover .founder-photo { transform: scale(1.03); }

/* o número do passo acende */
.step-num { transition: background 0.3s var(--m-ease), transform 0.3s var(--m-ease); }
.step:hover .step-num { background: var(--ciano-acao); transform: scale(1.08); }

/* canais de contato: o ícone aponta */
.channel svg { transition: transform 0.35s var(--m-ease); }
.channel:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.channel:hover svg { transform: translateX(3px); }

/* ---------- 2. Botões e links ---------- */

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 31, 38, 0.18); }
.btn-primary:active { transform: translateY(0); box-shadow: none; transition-duration: 0.1s; }
.btn-secondary:hover { transform: translateY(-2px); background: var(--papel-card); box-shadow: var(--shadow-lift); }
.btn-secondary:active { transform: translateY(0); box-shadow: none; transition-duration: 0.1s; }

/* links-fantasma ("Conhecer a Sofia →"): sublinhado que corre da esquerda */
.btn-ghost {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 6px calc(100% - 7px);
    transition: background-size 0.35s var(--m-ease), color 0.25s;
}
.btn-ghost:hover { background-size: calc(100% - 12px) 1px; }

.footer-col a { display: inline-block; transition: color 0.2s, transform 0.25s var(--m-ease); }
.footer-col a:hover { transform: translateX(3px); }

/* ---------- 3. Navegação ---------- */

.nav-link { transition: background 0.25s var(--m-ease), color 0.25s var(--m-ease); }
.nav-link:not(.nav-cta):hover { background: var(--papel-3); }
.nav-link.active:not(.nav-cta) { background: var(--papel-2); }
.nav-cta { transition: background 0.25s, transform 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease); }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 31, 38, 0.16); }

/* a barra encolhe um pouco ao rolar */
.nav-container { transition: height 0.3s var(--m-ease); }
.navbar.scrolled .nav-container { height: 60px; }

/* a marca se redesenha ao passar o mouse (serra em scanlines) */
.logo-svg path { stroke-dasharray: 200; stroke-dashoffset: 0; }
.nav-logo:hover .logo-svg path, .footer-logo:hover .logo-svg path {
    animation: m-draw 0.7s var(--m-ease);
}
@keyframes m-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }

/* ---------- 4. FAQ ---------- */

.faq-item summary { transition: color 0.2s; }
.faq-item summary:hover { color: var(--ciano-acao); }
.faq-item summary::after { transition: transform 0.3s var(--m-ease); }
.faq-item[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); }
.faq-item[open] > p { animation: m-faq 0.35s var(--m-ease) backwards; }
@keyframes m-faq { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 5. Movimento orquestrado (só com JS e sem reduced-motion) ---------- */

@media (prefers-reduced-motion: no-preference) {

    @keyframes m-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    @keyframes m-fade   { from { opacity: 0; } to { opacity: 1; } }
    @keyframes m-settle { from { transform: translateY(12px) scale(0.985); } to { transform: none; } }
    @keyframes m-tooth  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes m-conveyor { to { background-position: 18px 0; } }

    /* 5a. Hero: a sequência de abertura (CSS puro; a ilustração nunca é escondida) */
    .js-motion .hero-eyebrow { animation: m-rise 0.6s var(--m-ease) 0.05s backwards; }
    .js-motion .hero-title   { animation: m-rise 0.6s var(--m-ease) 0.14s backwards; }
    .js-motion .hero-sub     { animation: m-rise 0.6s var(--m-ease) 0.23s backwards; }
    .js-motion .hero-live    { animation: m-rise 0.6s var(--m-ease) 0.32s backwards; }
    .js-motion .hero-actions { animation: m-rise 0.6s var(--m-ease) 0.41s backwards; }
    .js-motion .hero-media   { animation: m-settle 0.9s var(--m-ease) 0.15s backwards; }
    .js-motion .hero-eyebrow::before { animation: m-tooth 0.5s var(--m-ease) 0.3s backwards; }

    /* 5b. Cada estação entra na linha quando aparece na tela (uma vez) */
    .js-motion [data-reveal]:not(.is-in) { opacity: 0; }
    .js-motion [data-reveal].is-in {
        animation: m-rise var(--m-dur) var(--m-ease) calc(var(--i, 0) * var(--m-stagger)) backwards;
    }
    .js-motion [data-reveal="fade"].is-in { animation-name: m-fade; }
    /* o dente do telhado se desenha logo depois que a estação assenta */
    .js-motion [data-reveal].is-in .eyebrow::before {
        animation: m-tooth 0.5s var(--m-ease) calc(var(--i, 0) * var(--m-stagger) + 0.2s) backwards;
    }

    /* 5c. A linha de produção do método anda enquanto está na tela */
    .js-motion .method-steps.is-live::before { animation: m-conveyor 1.1s linear infinite; }
}

/* ---------- 6. Páginas internas: a mesma linguagem ---------- */

/* cartões de /sofia, /about e /demos (prefixo html: vence o CSS inline dessas páginas) */
html .demo-card, html .role-card, html .sec-item, html .exp-card, html .edu-card, html .featured-project-card {
    transition: transform 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease),
                border-color 0.35s var(--m-ease);
}
html .demo-card:hover, html .role-card:hover, html .sec-item:hover,
html .exp-card:hover, html .edu-card:hover, html .featured-project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow-hover);
}
.demo-card figure img { transition: transform 0.7s var(--m-ease); }
.demo-card:hover figure img { transform: scale(1.045); }

@media (prefers-reduced-motion: no-preference) {
    /* abertura das páginas internas: os primeiros itens do topo entram em sequência */
    .js-motion :is(.sofia-hero, .about-hero-copy, .contact-page-intro,
                   .demo-hero:not(:has(> .container)), .demo-hero > .container,
                   main.container, main[style]) > *:nth-child(1) { animation: m-rise 0.6s var(--m-ease) 0.05s backwards; }
    .js-motion :is(.sofia-hero, .about-hero-copy, .contact-page-intro,
                   .demo-hero:not(:has(> .container)), .demo-hero > .container,
                   main.container, main[style]) > *:nth-child(2) { animation: m-rise 0.6s var(--m-ease) 0.14s backwards; }
    .js-motion :is(.sofia-hero, .about-hero-copy, .contact-page-intro,
                   .demo-hero:not(:has(> .container)), .demo-hero > .container,
                   main.container, main[style]) > *:nth-child(3) { animation: m-rise 0.6s var(--m-ease) 0.23s backwards; }
    .js-motion :is(.sofia-hero, .about-hero-copy, .contact-page-intro,
                   .demo-hero:not(:has(> .container)), .demo-hero > .container,
                   main.container, main[style]) > *:nth-child(4) { animation: m-rise 0.6s var(--m-ease) 0.32s backwards; }
    .js-motion :is(.sofia-hero, .about-hero-copy, .contact-page-intro,
                   .demo-hero:not(:has(> .container)), .demo-hero > .container,
                   main.container, main[style]) > *:nth-child(5) { animation: m-rise 0.6s var(--m-ease) 0.41s backwards; }
    .js-motion :is(.sofia-hero, .about-hero-copy, .contact-page-intro,
                   .demo-hero:not(:has(> .container)), .demo-hero > .container,
                   main.container, main[style]) > *:nth-child(6) { animation: m-rise 0.6s var(--m-ease) 0.50s backwards; }
    .js-motion :is(.about-hero-photo-wrap, .contact-form-card) { animation: m-settle 0.9s var(--m-ease) 0.15s backwards; }

    /* o dente também se desenha nos rótulos de /sofia (que são revelados sozinhos, sem invólucro) */
    .js-motion [data-reveal].is-in.section-label::before,
    .js-motion [data-reveal].is-in .section-label::before {
        animation: m-tooth 0.5s var(--m-ease) calc(var(--i, 0) * var(--m-stagger) + 0.2s) backwards;
    }
}