/* ============================================================
   tutorial-fx.css — camada de animação dos tutoriais DotCompany
   Progressive enhancement: TODO efeito depende da classe .tfx
   (adicionada pelo tutorial-fx.js). Sem JS => página idêntica.
   Neutralizado em @media print e prefers-reduced-motion.
   ============================================================ */

/* ---------- hero: host do canvas 3D + fallback CSS animado ---------- */
.tfx .tfx-hero-host{position:relative;isolation:isolate;overflow:hidden}
.tfx .tfx-hero-host>:not(.tfx-canvas){position:relative;z-index:2}
.tfx .tfx-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.tfx .tfx-canvas.tfx-live{opacity:1}
.tfx .tfx-hero-host::before{content:"";position:absolute;z-index:0;inset:-45%;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 32%, rgba(52,211,153,.28), transparent 70%),
    radial-gradient(30% 26% at 78% 18%, rgba(212,168,37,.15), transparent 70%),
    radial-gradient(32% 36% at 64% 80%, rgba(242,84,27,.13), transparent 70%);
  animation:tfxDrift 18s ease-in-out infinite alternate}
.tfx .tfx-hero-host::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.055) 47%,transparent 62%);
  background-size:230% 100%;animation:tfxSheen 8s linear infinite}
@keyframes tfxDrift{from{transform:translate3d(-3%,-2%,0) rotate(-2deg) scale(1)}to{transform:translate3d(3%,3%,0) rotate(2deg) scale(1.07)}}
@keyframes tfxSheen{from{background-position:135% 0}to{background-position:-135% 0}}

/* entrada do conteúdo do hero */
.tfx .tfx-hero-host .tag,.tfx .tfx-hero-host .kick,.tfx .tfx-hero-host .badge-treino{animation:tfxRise .8s cubic-bezier(.16,1,.3,1) both}
.tfx .tfx-hero-host h1{animation:tfxRise .9s cubic-bezier(.16,1,.3,1) .08s both}
.tfx .tfx-hero-host p{animation:tfxRise .9s cubic-bezier(.16,1,.3,1) .18s both}
@keyframes tfxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- scroll-reveal (classes só entram via JS) ---------- */
.tfx .tfx-r{opacity:.001;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1)}
.tfx .tfx-r.tfx-in{opacity:1;transform:none}

/* legendas numeradas: entram em cascata quando a figura revela */
.tfx .tfx-r ol.leg>li{opacity:0;transform:translateX(-10px)}
.tfx .tfx-r.tfx-in ol.leg>li{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(1){transition-delay:.12s}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(2){transition-delay:.20s}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(3){transition-delay:.28s}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(4){transition-delay:.36s}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(5){transition-delay:.44s}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(6){transition-delay:.52s}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(7){transition-delay:.60s}
.tfx .tfx-r.tfx-in ol.leg>li:nth-child(n+8){transition-delay:.68s}

/* ---------- micro-interações ---------- */
/* figuras: lift suave + zoom no print da tela */
.tfx figure.shot,.tfx div.shot{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.tfx figure.shot:hover{transform:translateY(-3px)}
.tfx .shot>a{overflow:hidden}
.tfx .shot>a img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.tfx .shot>a:hover img{transform:scale(1.015)}

/* botão "Abrir esta tela": brilho que atravessa no hover */
.tfx .open-screen{position:relative;overflow:hidden}
.tfx .open-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 50%,transparent 75%);
  transform:translateX(-130%);transition:transform .55s ease}
.tfx .open-screen:hover::after{transform:translateX(130%)}

/* número da seção (accordion): pulinho no hover/abrir */
.tfx summary .num{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tfx summary:hover .num,.tfx details[open]>summary .num{transform:scale(1.12)}

/* índice/sumário: seta deslizando */
.tfx nav.toc a,.tfx .idx a,.tfx .toc a{display:inline-block;transition:transform .2s ease}
.tfx nav.toc a:hover,.tfx .idx a:hover,.tfx .toc a:hover{transform:translateX(4px)}

/* player de áudio: aura viva enquanto toca */
.tfx .tut-audio{transition:box-shadow .3s ease,border-color .3s ease}
.tfx .tut-audio.tfx-playing{border-color:#10b981;animation:tfxGlow 2.1s ease-in-out infinite}
.tfx .tut-audio.tfx-playing .lbl{animation:tfxBeat 2.1s ease-in-out infinite}
@keyframes tfxGlow{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,.14)}50%{box-shadow:0 0 0 6px rgba(16,185,129,.26)}}
@keyframes tfxBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ---------- barra de progresso de leitura (só se a página não tem) ---------- */
.tfx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;pointer-events:none;
  background:linear-gradient(90deg,#f2541b,#d4a825,#10b981);border-radius:0 2px 2px 0}

/* ============================================================
   NEUTRALIZAÇÃO — impressão e acessibilidade (nunca esconder
   conteúdo no PDF nem animar para quem pediu menos movimento)
   ============================================================ */
@media print{
  .tfx-canvas,.tfx-progress{display:none!important}
  .tfx .tfx-hero-host::before,.tfx .tfx-hero-host::after{display:none!important}
  .tfx .tfx-r,.tfx .tfx-r ol.leg>li{opacity:1!important;transform:none!important;transition:none!important}
  .tfx .tfx-hero-host .tag,.tfx .tfx-hero-host .kick,.tfx .tfx-hero-host .badge-treino,
  .tfx .tfx-hero-host h1,.tfx .tfx-hero-host p{animation:none!important;opacity:1!important;transform:none!important}
  .tfx .tut-audio.tfx-playing{animation:none!important;box-shadow:none!important}
}
@media (prefers-reduced-motion:reduce){
  .tfx-canvas,.tfx-progress{display:none!important}
  .tfx .tfx-hero-host::before{animation:none!important}
  .tfx .tfx-hero-host::after{display:none!important}
  .tfx .tfx-r,.tfx .tfx-r ol.leg>li{opacity:1!important;transform:none!important;transition:none!important}
  .tfx .tfx-hero-host .tag,.tfx .tfx-hero-host .kick,.tfx .tfx-hero-host .badge-treino,
  .tfx .tfx-hero-host h1,.tfx .tfx-hero-host p{animation:none!important;opacity:1!important;transform:none!important}
  .tfx .shot>a:hover img,.tfx figure.shot:hover{transform:none!important}
  .tfx .tut-audio.tfx-playing,.tfx .tut-audio.tfx-playing .lbl{animation:none!important}
}

/* ============================================================
   FIX de contraste sistemico (pre-existente, 10 tutoriais):
   o card .acesso do hero e BRANCO nos 2 temas, mas usava vars
   de tema no texto -> claro-em-claro no modo escuro. Card claro
   = texto SEMPRE escuro (mesmo padrao ja aplicado a mao no
   servicos-e-agendamentos). Nao depende de .tfx de proposito.
   ============================================================ */
.acesso{color:#132018}
.acesso .k{color:#5f6b76}
.acesso .v{color:#132018}
.acesso .row{border-bottom-color:#dbe2e8}