/* ============================================================
   OPTIONX DESIGN ENGINE v1 — camada de elite (drop-in)
   DNA: Awwwards SOTY 2024 + CSSDA WOTY 2025 (ver AWARD_SITES_DNA.md)
   Uso: definir tokens no site (--ox-bg, --ox-ink, --ox-accent, --ox-deep)
        e marcar elementos com data-ox="...". O JS faz o resto.
   ============================================================ */
:root{
  --ox-ease:cubic-bezier(.19,1,.22,1);      /* expo-out: o easing "de luxo" */
  --ox-dur:1s; --ox-accent:#dcb676; --ox-deep:#1a0d13; --ox-ink:#f4ede4;
}

/* —— P1: PRELOADER cinematográfico (contador + cortina) —— */
#ox-loader{position:fixed;inset:0;z-index:99999;background:var(--ox-deep);color:var(--ox-ink);
  display:flex;align-items:flex-end;justify-content:space-between;padding:5vh 5vw;
  transition:transform 1.1s var(--ox-ease);transform-origin:top}
#ox-loader.done{transform:scaleY(0)}
#ox-loader .oxl-brand{font-size:clamp(16px,2vw,22px);letter-spacing:.2em;text-transform:uppercase}
#ox-loader .oxl-n{font-size:clamp(70px,16vw,220px);line-height:.8;font-weight:600;color:var(--ox-accent)}

/* —— P7: GRÃO de filme (leve, sem blend — performa em mobile) —— */
.ox-grain::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>")}

/* —— P4: SPLIT reveal (linha a linha com máscara) —— */
[data-ox="split"] .ox-line{display:block;overflow:hidden}
[data-ox="split"] .ox-line>span{display:block;transform:translateY(110%);transition:transform var(--ox-dur) var(--ox-ease)}
[data-ox="split"].ox-in .ox-line>span{transform:none}

/* —— reveals básicos —— */
[data-ox="up"]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ox-ease),transform .9s var(--ox-ease)}
[data-ox="up"].ox-in{opacity:1;transform:none}
[data-ox="fade"]{opacity:0;transition:opacity 1.1s var(--ox-ease)}
[data-ox="fade"].ox-in{opacity:1}

/* —— P8: CORTINA sobre imagens —— */
[data-ox="curtain"]{position:relative;overflow:hidden}
[data-ox="curtain"]::after{content:"";position:absolute;inset:0;background:var(--ox-deep);
  transform-origin:right;transition:transform 1.05s cubic-bezier(.77,0,.18,1)}
[data-ox="curtain"].ox-in::after{transform:scaleX(0)}
[data-ox="curtain"] img{transform:scale(1.15);transition:transform 1.4s var(--ox-ease)}
[data-ox="curtain"].ox-in img{transform:scale(1)}

/* —— P3: KEN-BURNS de fundo (hero respira) —— */
[data-ox="kenburns"]{transform:scale(1.12);transition:transform 1.8s var(--ox-ease)}
.ox-lit [data-ox="kenburns"]{transform:scale(1)}

/* —— P10: MARQUEE —— */
.ox-marquee{overflow:hidden;white-space:nowrap}
.ox-marquee .ox-mq{display:inline-block;animation:ox-mq 30s linear infinite;will-change:transform}
@keyframes ox-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* —— P5: CURSOR custom (só desktop/hover fino) —— */
@media(hover:hover) and (pointer:fine){
  body.ox-cursor{cursor:none}
  body.ox-cursor a,body.ox-cursor button{cursor:none}
  #ox-cur{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--ox-accent);
    z-index:99997;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .3s}
  #ox-ring{position:fixed;left:0;top:0;width:42px;height:42px;border:1px solid var(--ox-accent);opacity:.6;
    border-radius:50%;z-index:99996;pointer-events:none;transform:translate(-50%,-50%);
    transition:width .3s var(--ox-ease),height .3s var(--ox-ease),background .3s}
  body.ox-hover #ox-ring{width:76px;height:76px;background:color-mix(in srgb,var(--ox-accent) 14%,transparent)}
  body.ox-hover #ox-cur{opacity:0}
}

/* —— P9: contador (JS anima o texto) · P6: transição de seção por cor —— */
[data-ox-bg]{transition:background-color 1s var(--ox-ease),color 1s var(--ox-ease)}

/* —— parallax sutil —— */
[data-ox-parallax]{will-change:transform}

/* —— acessibilidade/perf: reduced motion desativa tudo —— */
@media (prefers-reduced-motion:reduce){
  [data-ox],[data-ox] *{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  #ox-loader{display:none!important}
}
/* screenshot/QA: body.ox-paused congela */
body.ox-paused *{animation-play-state:paused!important;transition:none!important}