/* ==========================================================================
   OBRIFY, motor de movimento (motion.css)  v1.0  2026-10-13
   Par obrigatorio de assets/js/motion.js. Zero dependencias.
   Especificacao: BuildV gerar-frontend/sistema-de-movimento.md (geracao atual).

   Regras de arquitetura:
   - Todo estado inicial "invisivel" vive atras de html[data-motion] E dentro de
     @media (prefers-reduced-motion: no-preference). Sem o gate, ou com reduce,
     a pagina e 100% legivel.
   - Deslocamentos usam as propriedades individuais `translate` e `scale`, nao
     `transform`. Assim o reveal compoe com transforms do builder (hover etc.).
   - Regras base sem gate usam :where() (especificidade zero) para o CSS da
     pagina poder sobrescrever sem !important.
   - position:sticky do pin vive SO aqui. Nunca escreva position inline no
     wrapper [data-scene-sticky].
   ========================================================================== */

:root{
  --m-e:  cubic-bezier(.16,.84,.28,1);   /* entradas, reveals, pins */
  --m-e2: cubic-bezier(.4,0,.2,1);       /* UI: header, hover, chrome */
  --m-dist: 24px;                        /* deslocamento vertical do reveal */
  --m-dist-x: 26px;                      /* deslocamento lateral (data-rv) */
  --m-blur: 5px;
  --m-radius: 18px;                      /* raio da cortina data-reveal="mask" */
  --m-header-h: 76px;                    /* atualizado pelo motor */
}

/* Com o motor, ancoras sao do JS (que desconta o header). Ver spec 4. */
html{scroll-behavior:auto}

/* ---------- Reveals: estado inicial (so com gate e sem reduce) ---------- */
@media (prefers-reduced-motion: no-preference){

  html[data-motion] [data-reveal]:not([data-in]){
    opacity:0;
    translate:0 var(--m-dist);
    filter:blur(var(--m-blur));
  }
  html[data-motion] [data-reveal][data-rv="left"]:not([data-in]){translate:calc(var(--m-dist-x) * -1) 0}
  html[data-motion] [data-reveal][data-rv="right"]:not([data-in]){translate:var(--m-dist-x) 0}

  html[data-motion] [data-reveal="soft"]:not([data-in]){translate:none;filter:none}

  html[data-motion] [data-reveal="fig"]:not([data-in]){
    translate:none;
    scale:.965;
    filter:blur(4px);
  }

  html[data-motion] [data-reveal="mask"]:not([data-in]){
    opacity:1;
    translate:none;
    filter:none;
    clip-path:inset(0 0 101% 0 round var(--m-radius));
  }
  html[data-motion] [data-reveal="mask"]:not([data-in]) > :is(img,video,picture),
  html[data-motion] [data-reveal="mask"]:not([data-in]) [data-mask-media]{scale:1.08}

  /* Titulo palavra por palavra: cada palavra sobe de dentro da propria mascara */
  html[data-motion] [data-reveal]:not([data-in]) .m-w > span{translate:0 108%}

  /* ---------- Transicoes: so durante a entrada (data-in="run") ---------- */
  html[data-motion] [data-reveal][data-in="run"]{
    transition:
      opacity .85s var(--m-e) var(--rv-d,0ms),
      translate .9s var(--m-e) var(--rv-d,0ms),
      filter .8s var(--m-e) var(--rv-d,0ms);
  }
  html[data-motion] [data-reveal="soft"][data-in="run"]{
    transition:opacity 1s var(--m-e) var(--rv-d,0ms);
  }
  html[data-motion] [data-reveal="fig"][data-in="run"]{
    transition:
      opacity .9s var(--m-e) var(--rv-d,0ms),
      scale 1.05s var(--m-e) var(--rv-d,0ms),
      filter .8s var(--m-e) var(--rv-d,0ms);
  }
  html[data-motion] [data-reveal="mask"][data-in="run"]{
    clip-path:inset(0 0 0 0 round var(--m-radius));
    transition:clip-path 1.15s var(--m-e) var(--rv-d,0ms);
  }
  html[data-motion] [data-reveal="mask"][data-in="run"] > :is(img,video,picture),
  html[data-motion] [data-reveal="mask"][data-in="run"] [data-mask-media]{
    transition:scale 1.5s var(--m-e) var(--rv-d,0ms);
  }
  html[data-motion] [data-reveal] .m-w > span{
    transition:translate .9s var(--m-e) calc(var(--rv-d,0ms) + var(--wi,0) * 42ms);
  }
  html[data-motion] [data-reveal][data-in="done"] .m-w > span{transition:none}

  /* data-rv lateral vira vertical em tela estreita (colunas empilhadas) */
  @media (max-width:767px){
    html[data-motion] [data-reveal][data-rv]:not([data-in]):not([data-reveal="soft"]):not([data-reveal="fig"]):not([data-reveal="mask"]){
      translate:0 var(--m-dist);
    }
  }
}

/* ---------- Split de titulo (estrutura, vale com ou sem gate) ---------- */
.m-w{
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
  /* folga para acentos e descendentes nao serem cortados pela mascara */
  padding:.1em 0 .12em;
  margin:-.1em 0 -.12em;
}
.m-w > span{display:inline-block}
[data-in="done"] .m-w{overflow:visible}
.m-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Cena travada (pin + scrub) ---------- */
:where([data-scene-sticky]){position:relative}
[data-scene][data-pin="on"]{position:relative}
[data-scene][data-pin="on"] [data-scene-sticky]{
  position:sticky;
  top:0;
  height:100vh;
}

/* ---------- Header ---------- */
:where([data-header]){
  transition:
    translate .5s var(--m-e2),
    background-color .45s var(--m-e2),
    box-shadow .45s var(--m-e2),
    padding .45s var(--m-e2),
    backdrop-filter .45s var(--m-e2),
    -webkit-backdrop-filter .45s var(--m-e2);
}
[data-header][data-hidden="true"]{translate:0 -100%}

/* ---------- Parallax ---------- */
:where([data-parallax]){will-change:translate}

/* ---------- Barra de leitura ---------- */
:where([data-progress]){
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:var(--m-progress, currentColor);
  transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- Loader (opcional, nunca bloqueia) ---------- */
:where(#loader){
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--m-loader-bg,#fff);
  pointer-events:none;
  transition:opacity .6s var(--m-e2), visibility 0s linear .6s;
  /* rede de seguranca sem JS: some sozinho */
  animation:m-loader-out .5s var(--m-e2) 1.6s forwards;
}
html[data-loaded] #loader{opacity:0;visibility:hidden}
html:not([data-motion]) #loader{display:none}
@keyframes m-loader-out{to{opacity:0;visibility:hidden}}

/* Alvo de ancora recebe foco programatico (acessibilidade) sem anel de foco */
[data-m-focus]:focus{outline:none}

/* ---------- Reduced motion: nada se move ---------- */
@media (prefers-reduced-motion: reduce){
  :where([data-header]){transition:none}
  #loader{display:none}
  .m-w{overflow:visible}
}