/* ==========================================================================
   PLUGADO — MOTION & MICROINTERAÇÕES (FASES 2 E 3)
   Tokens de interpolação, infraestrutura de render loop, microinterações táteis
   em botões (T007), profundidade em cards (T008), links refinados e foco acessível (T009).
   ========================================================================== */

:root {
  /* Tokens de interpolação e timing cinemático */
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  
  /* T055: resposta breve na interação, assentamento suave nos cards. */
  --motion-dur-fast: 0.18s;
  --motion-dur-base: 0.24s;
  --motion-dur-smooth: 0.36s;
  --motion-dur-cinematic: 1.2s;
}

/* T021–T023: navegação global; nenhum espaço é acrescentado ao header. */
.nav__progress {
  position: absolute; inset: auto 0 0; height: 1.5px;
  pointer-events: none; overflow: hidden; transition: opacity .2s;
}
.nav__progress-bar {
  width: 100%; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #0066FF, #00D1FF);
}
html.menu-open .nav__progress { opacity: 0; }
.menu { overflow-y: auto; overscroll-behavior: contain; padding-top: calc(var(--nav-offset, 96px) + 16px); }
html:not(.menu-open) .menu { transition: clip-path .3s var(--motion-ease-in-out), visibility 0s .3s; }
html.menu-open .menu { transition: clip-path .5s var(--motion-ease-in-out), visibility 0s; }
html.menu-open .menu a { visibility: visible; }
.menu__list a {
  transform: translateY(14px);
  transition: transform .4s var(--motion-ease-out), opacity .35s, color .2s;
  transition-delay: calc(.06s + var(--i) * .035s);
}
.menu__list a:focus-visible { opacity: 1; transform: none; }
@media (max-width: 860px) and (max-height: 700px) { .menu { align-content: start; } }
html.reduced-motion { scroll-behavior: auto !important; }
html.reduced-motion :is(.nav, .nav__chapter-text, .menu, .menu__list a, .nav__progress) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.nav, .nav__chapter-text, .menu, .menu__list a, .nav__progress) { transition: none !important; }
}

/* ---------------------------------------------------------- Lenis Smooth Scroll Base */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ---------------------------------------------------------- GPU Layer Isolation Helpers */
[data-gpu] {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------------------------------------------------------- View Transitions API Base */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.2s;
    animation-timing-function: var(--motion-ease-out);
  }
}

/* ==========================================================================
   T007 — MICROINTERAÇÕES TÁTEIS & HOVER REFINADO EM BOTÕES
   ========================================================================== */

.btn {
  transition: color var(--motion-dur-base) var(--motion-ease-out),
              background-color var(--motion-dur-base) var(--motion-ease-out),
              transform var(--motion-dur-base) var(--motion-ease-spring),
              box-shadow var(--motion-dur-base) var(--motion-ease-out);
  will-change: transform;
}

/* Resposta tátil no clique / toque (compressão imediata e elástica) */
.btn:active {
  transform: scale(0.97) translateZ(0) !important;
  transition-duration: 0.08s !important;
}

/* Seta animada com transição orgânica */
.btn .arrow {
  transition: transform var(--motion-dur-base) var(--motion-ease-spring);
  will-change: transform;
}

@media (hover: hover) {
  /* Seta avança no hover */
  .btn:hover .arrow {
    transform: translateX(5px);
  }

  /* Iluminação sutil e elevação diferenciada por variante de botão */
  .btn--blue:hover {
    box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--blue) 50%, transparent),
                0 0 1px color-mix(in srgb, var(--cyan) 60%, transparent);
  }

  .btn--cyan:hover {
    box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--cyan) 55%, transparent),
                0 0 20px -6px color-mix(in srgb, var(--cyan) 30%, transparent);
  }

  .btn--light:hover {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28);
  }

  .btn--ghost:hover {
    box-shadow: inset 0 0 0 1.5px var(--cyan),
                0 0 20px -6px color-mix(in srgb, var(--cyan) 35%, transparent);
  }

  /* Botão do menu no cabeçalho */
  .nav__menu {
    transition: color var(--motion-dur-base),
                box-shadow var(--motion-dur-base) var(--motion-ease-out),
                transform var(--motion-dur-base) var(--motion-ease-spring);
  }
  .nav__menu:hover {
    box-shadow: inset 0 0 0 1.5px var(--cyan);
    color: var(--cyan);
  }
  .nav__menu:active {
    transform: scale(0.96);
  }
}

/* ==========================================================================
   T008 — CARDS COM PROFUNDIDADE E ILUMINAÇÃO SUTIL
   ========================================================================== */

/* Camadas de Segurança (02 Segurança) */
.layer {
  transition: transform var(--motion-dur-smooth) var(--motion-ease-out),
              box-shadow var(--motion-dur-smooth) var(--motion-ease-out),
              border-color var(--motion-dur-base) var(--motion-ease-out);
  will-change: transform;
}

@media (hover: hover) {
  .layer:hover {
    transform: translateY(-4px) translateZ(0);
    border-color: color-mix(in srgb, var(--cyan) 30%, var(--white-16));
    box-shadow: 0 24px 52px -16px rgba(0, 0, 0, 0.65),
                0 0 32px -10px color-mix(in srgb, var(--cyan) 16%, transparent);
  }
}

/* Cards de Operação (03 Software & Operação) */
.op-card {
  transition: transform var(--motion-dur-smooth) var(--motion-ease-out),
              box-shadow var(--motion-dur-smooth) var(--motion-ease-out),
              border-color var(--motion-dur-base) var(--motion-ease-out);
  will-change: transform;
}

.op-card__icon {
  transition: transform var(--motion-dur-base) var(--motion-ease-spring);
  will-change: transform;
}

@media (hover: hover) {
  .op-card:hover .op-card__icon {
    transform: scale(1.08) translateY(-2px);
  }

  .op-card--white:hover {
    box-shadow: 0 24px 56px -16px color-mix(in srgb, var(--ink) 14%, transparent),
                0 4px 12px -2px color-mix(in srgb, var(--ink) 6%, transparent);
  }

  .op-card--ink:hover {
    box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.7),
                0 0 32px -8px color-mix(in srgb, var(--cyan) 18%, transparent);
    border-color: color-mix(in srgb, var(--cyan) 25%, transparent);
  }

  .op-card--grad:hover {
    box-shadow: 0 24px 56px -16px color-mix(in srgb, var(--blue) 45%, transparent),
                0 0 28px -6px color-mix(in srgb, var(--cyan) 25%, transparent);
  }

  .op-card--mist:hover {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 35%, transparent),
                0 24px 56px -16px color-mix(in srgb, var(--ink) 12%, transparent);
  }

  .op-card--bridge a.link-arrow:hover {
    transform: translateX(4px);
  }
}

/* Cards de Princípios (05 Experiência) */
.principle {
  transition: transform var(--motion-dur-smooth) var(--motion-ease-out),
              border-color var(--motion-dur-base);
}
.principle .mono {
  transition: color 0.3s;
}

@media (hover: hover) {
  .principle:hover {
    transform: translateY(-3px);
    border-color: var(--blue);
  }
  .principle:hover .mono {
    color: var(--cyan);
  }
  /* O override da Fase 5 possui maior especificidade: mantém a mesma
     elevação aprovada, usando o timing compartilhado após o reveal. */
  .js .section-reveal.principle:hover {
    transition: transform var(--motion-dur-smooth) var(--motion-ease-out),
                border-color var(--motion-dur-base);
  }
}

/* Cards Onboardy (Admissão) */
.onb__check,
.onb__flow {
  transition: box-shadow var(--motion-dur-smooth) var(--motion-ease-out),
              transform var(--motion-dur-smooth) var(--motion-ease-out);
}
@media (hover: hover) {
  .onb__check:hover,
  .onb__flow:hover {
    box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--ink) 10%, transparent);
  }
}

/* ==========================================================================
   T009 — LINKS COM SETA & CONTORNO ACESSÍVEL DE FOCO
   ========================================================================== */

/* Links com Seta (.link-arrow) */
.link-arrow {
  transition: color var(--motion-dur-base),
              background-size var(--motion-dur-smooth) var(--motion-ease-out),
              transform var(--motion-dur-base) var(--motion-ease-spring);
}

.link-arrow svg {
  transition: transform var(--motion-dur-base) var(--motion-ease-spring), color var(--motion-dur-base);
  will-change: transform;
}

.link-arrow:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .link-arrow:hover svg {
    transform: translate(4px, -4px);
    color: var(--cyan);
  }
}

/* Foco por teclado nos links com seta ativa feedback equivalente ao hover */
.link-arrow:focus-visible {
  background-size: 100% 1px;
}
.link-arrow:focus-visible svg {
  transform: translate(4px, -4px);
  color: var(--cyan);
}

/* Itens do Índice de Serviços */
.index__list a {
  transition: color 0.35s,
              padding 0.45s var(--motion-ease-out),
              box-shadow 0.35s;
}

/* Itens de Produtos */
.products__list a {
  transition: padding 0.45s var(--motion-ease-out),
              color 0.35s;
}
.products__list a:focus-visible {
  padding-left: 16px;
}
.products__list a:focus-visible svg {
  transform: translateX(8px);
  color: var(--cyan);
}

/* ---------------------------------------------------------- Acessibilidade Universal: Foco por Teclado */
:focus-visible {
  outline: 2px solid var(--cyan) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Fase 11: foco visível imediatamente, inclusive em reveals CSS nativos. */
.js .rv:focus-within,
.js [data-split]:focus-within .wi {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.js .mask-reveal:focus-within { clip-path: none !important; }

/* Contagem e rótulo do Manifesto não alteram geometria durante o scroll. */
.assemble__label { inline-size: 10ch; }
.assemble__pct { inline-size: 4ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Foco contextual em seções claras */
[data-theme="light"] :focus-visible,
.ch--infra :focus-visible,
.ch--ops :focus-visible,
.onb :focus-visible,
.trust :focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--blue) 35%, transparent) !important;
}

/* Foco contextual em seções escuras */
[data-theme="dark"] :focus-visible,
.hero :focus-visible,
.ch--sec :focus-visible,
.products :focus-visible,
.liggo :focus-visible,
.contact :focus-visible,
.footer :focus-visible,
.menu :focus-visible {
  outline: 2px solid var(--cyan) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 45%, transparent) !important;
}

/* Botões com corte do símbolo mantêm geometria orgânica no anel de foco */
.btn:focus-visible {
  border-radius: 3px 999px 999px 999px !important;
}

/* ==========================================================================
   T010–T013 — HERO: propriedade com um único responsável
   O layout continua em home.css. A classe só existe dentro do GSAP Context.
   ========================================================================== */

.hero.hero--motion .hero__title,
.hero.hero--motion .hero__mark {
  animation: none;
}

.hero.hero--motion .hero__eyebrow,
.hero.hero--motion .hero__foot,
.hero.hero--motion .hero__mark-fill,
.hero.hero--motion .hero__title .line > span {
  transition: none;
}

.hero.hero--motion .hero__eyebrow,
.hero.hero--motion .hero__foot {
  opacity: 1;
  transform: none;
}

.hero.hero--motion .hero__mark-fill {
  opacity: .92;
  transform: none;
}


.hero.hero--motion .hero__title .line > span {
  transform: none;
}

/* SplitType é restrito aos spans existentes do Hero, sem data-split/core.js. */
.hero.hero--motion .hero__split-line {
  overflow: clip;
  padding-bottom: .04em;
  margin-bottom: -.04em;
}

.hero.hero--motion .hero__split-word {
  vertical-align: baseline;
}

@media (max-width: 860px) {
  .hero.hero--motion .hero__mark-fill { opacity: .45; }
}

/* Fallback: conteúdo legível mesmo se todos os scripts falharem. */
html:not(.js) .hero__eyebrow,
html:not(.js) .hero__foot {
  opacity: 1;
  transform: none;
}
html:not(.js) .hero__title .line > span { transform: none; }
html:not(.js) .hero__mark-fill { opacity: .92; transform: none; }
html:not(.js) .hero__title,
html:not(.js) .hero__mark { animation: none; }
@media (max-width: 860px) {
  html:not(.js) .hero__mark-fill { opacity: .45; }
}

/* Estado final desde o primeiro paint, inclusive antes de core.js/is-loaded. */
@media (prefers-reduced-motion: reduce) {
  .hero .hero__eyebrow,
  .hero .hero__foot,
  .hero .hero__title .line > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero .hero__title,
  .hero .hero__mark { animation: none !important; transform: none !important; }
  .hero .hero__mark-fill { opacity: .92 !important; transform: none !important; }
  .hero__stem::after { animation: none !important; }
  .hero .ticker__row { animation: none !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .hero .hero__mark-fill { opacity: .45 !important; }
}

html.reduced-motion .hero__eyebrow,
html.reduced-motion .hero__foot,
html.reduced-motion .hero__title .line > span {
  opacity: 1 !important;
  transform: none !important;
}
html.reduced-motion .hero__title,
html.reduced-motion .hero__mark { animation: none !important; transform: none !important; }
html.reduced-motion .hero__mark-fill { opacity: .92 !important; transform: none !important; }
html.reduced-motion .hero__stem::after { animation: none !important; }
html.reduced-motion .hero .ticker__row { animation: none !important; transform: none !important; }
@media (max-width: 860px) {
  html.reduced-motion .hero__mark-fill { opacity: .45 !important; }
}

/* ==========================================================================
   PREFERS REDUCED MOTION — REGRAS ESTRITAS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-depth] {
    transform: none !important;
  }

  .btn,
  .btn:active,
  .btn .arrow,
  .layer,
  .op-card,
  .op-card__icon,
  .principle,
  .link-arrow,
  .link-arrow:active,
  .link-arrow svg,
  .nav__menu {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.reduced-motion .btn,
html.reduced-motion .btn:active,
html.reduced-motion .btn .arrow,
html.reduced-motion .layer,
html.reduced-motion .op-card,
html.reduced-motion .op-card__icon,
html.reduced-motion .principle,
html.reduced-motion .link-arrow,
html.reduced-motion .link-arrow:active,
html.reduced-motion .link-arrow svg,
html.reduced-motion .nav__menu {
  transform: none !important;
  transition-duration: 0.01ms !important;
}

/* Também cobre a Onboardy, que usa o core e não precisa carregar GSAP. */
html.reduced-motion .rv,
html.reduced-motion [data-split] .wi,
html.reduced-motion .stem-rule,
html.reduced-motion [data-depth] {
  opacity: 1 !important;
  transform: none !important;
}
html.reduced-motion .mask-reveal { clip-path: none !important; }
html.reduced-motion .mask-reveal img { transform: none !important; }
/* Fase 9: somente estados do formulário, sem alterar motion das seções. */
[data-contact-form] { position: relative; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.contact-field-error { display: block; color: #a33126; font-size: .8rem; line-height: 1.5; margin-top: 8px; }
.contact-field-error[hidden] { display: none; }
.contact .contact-field-error, .l-form .contact-field-error { color: #ffc2a9; }
[data-contact-form] [aria-invalid="true"] { border-bottom-color: #d26a50; }
[data-contact-form] [type="submit"]:disabled { opacity: .6; cursor: wait; transform: none; pointer-events: none; }
[data-contact-form][data-state="success"] .form__status { color: var(--blue); }
:is(.contact, .liggo-page) [data-contact-form][data-state="success"] .form__status { color: var(--cyan); }
[data-contact-form][data-state="error"] .form__status { color: #a33126; }
:is(.contact, .liggo-page) [data-contact-form][data-state="error"] .form__status { color: #ffc2a9; }
[data-contact-form] .contact-privacy { flex-basis: 100%; grid-column: 1 / -1; font-size: .75rem;
  line-height: 1.6; opacity: .75; margin: 0; }