/* ===== VORATH — motion de IDENTIDADE (mecânica do produto: d20, narração do Mestre, runa) =====
   NÃO é wallpaper animado premium (isso era o esqueleto do paulocodex). Aqui o motion É o produto:
   um d20 que rola, a tagline que o Mestre NARRA, o kicker que se inscreve como runa.
   Só transform/opacity/filter. prefers-reduced-motion mata tudo. Anti-blank sob .js. */
:root{
  --v-gold:#C9A24B; --v-lava:#C62433; --v-ink:#ece6df;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-emerge:cubic-bezier(.22,1,.36,1);
}

/* ---- reveal discreto (o protagonista é a mecânica, não o reveal) ---- */
.js [data-reveal]{opacity:0;transform:translateY(10px);
  transition:opacity .7s ease,transform .8s var(--ease-emerge);
  transition-delay:calc(var(--i,0)*90ms)}
[data-reveal].in{opacity:1;transform:none}
.no-motion-js [data-reveal]{opacity:1!important;transform:none!important}

/* kicker se INSCREVE como runa (letter-spacing fecha até a posição) */
.js .kicker[data-reveal]{letter-spacing:.72em;opacity:0;
  transition:opacity .8s ease,letter-spacing .9s var(--ease-out)}
.kicker[data-reveal].in{letter-spacing:.3em;opacity:1}
.no-motion-js .kicker[data-reveal]{letter-spacing:.3em!important}

/* ---- entrada do herói (emerge escalonado, CSS puro) ---- */
@keyframes v-emerge{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-in>*{opacity:0;animation:v-emerge .9s var(--ease-emerge) forwards}
.hero-in>*:nth-child(1){animation-delay:.05s}
.hero-in>*:nth-child(2){animation-delay:.15s}
.hero-in>*:nth-child(3){animation-delay:.25s}
.hero-in>*:nth-child(4){animation-delay:.35s}
.hero-in>*:nth-child(5){animation-delay:.45s}
.hero-in>*:nth-child(6){animation-delay:.55s}
.hero-in>*:nth-child(7){animation-delay:.65s}

/* ---- TÍTULO: forja — o glow acende UMA vez e assenta (não fica pulsando/ambiente) ---- */
@keyframes v-forge{0%{text-shadow:0 0 6px rgba(198,36,51,.15),0 2px 0 rgba(0,0,0,.5)}
  40%{text-shadow:0 0 54px rgba(198,36,51,.7),0 0 18px rgba(201,162,75,.4),0 2px 0 rgba(0,0,0,.5)}
  100%{text-shadow:0 0 34px rgba(198,36,51,.4),0 2px 0 rgba(0,0,0,.5)}}
.hero-in > .forge-title{animation:v-emerge .9s var(--ease-emerge) .15s forwards, v-forge 2.4s ease-out 1s both}

/* ---- d20: dado do herói. Rola ao abrir e ao clicar ---- */
.d20-wrap{display:flex;align-items:center;justify-content:center;gap:16px;margin:24px 0 12px}
.d20-rule{height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--v-gold))}
.d20-rule.r{background:linear-gradient(90deg,var(--v-gold),transparent)}
.d20{width:56px;height:56px;padding:0;background:none;border:0;cursor:pointer;color:var(--v-gold);line-height:0;
  filter:drop-shadow(0 0 6px rgba(201,162,75,.35));transition:filter .3s ease}
.d20:hover{filter:drop-shadow(0 0 13px rgba(201,162,75,.75))}
.d20:focus-visible{outline:2px solid var(--v-gold);outline-offset:4px;border-radius:8px}
.d20 svg{width:100%;height:100%;display:block;transform-origin:50% 50%}
.d20 .edge{fill:rgba(201,162,75,.06);stroke:var(--v-gold);stroke-width:2.4;stroke-linejoin:round}
.d20 .facet{fill:none;stroke:var(--v-gold);stroke-width:1;opacity:.5}
.d20 .d20-num{fill:var(--v-ink);font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:24px;text-anchor:middle;dominant-baseline:middle}
.d20.rolling svg{animation:v-d20roll .9s var(--ease-out)}
@keyframes v-d20roll{0%{transform:rotate(0) scale(1)}55%{transform:rotate(430deg) scale(1.14)}100%{transform:rotate(720deg) scale(1)}}
/* brilho vivo no repouso — o dado "respira" luz, convidando o clique */
@keyframes v-d20idle{0%,100%{filter:drop-shadow(0 0 6px rgba(201,162,75,.35))}50%{filter:drop-shadow(0 0 14px rgba(201,162,75,.65))}}
.d20:not(.rolling):not(:hover){animation:v-d20idle 3.2s ease-in-out infinite}

/* ---- tagline NARRADA pelo Mestre (cursor pisca, some ao terminar) ---- */
.narrate .caret{display:inline-block;width:.5ch;margin-left:1px;color:var(--v-gold);font-style:normal;
  animation:v-blink 1s step-end infinite}
.narrate .caret.done{animation:none;opacity:0}
@keyframes v-blink{0%,100%{opacity:1}50%{opacity:0}}

/* ---- cards: LUZ DE TOCHA (halo dourado segue o cursor DENTRO do card) — interação, não wallpaper ---- */
.torch{position:relative;transition:border-color .4s ease,transform .45s var(--ease-out)}
.torch::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  transition:opacity .45s ease;
  background:radial-gradient(260px circle at var(--tx,50%) var(--ty,50%),rgba(201,162,75,.16),transparent 60%)}
.torch:hover::before{opacity:1}
.torch:hover{transform:translateY(-4px)}

/* ---- botão primário: bloom de brasa (forja) + peso ao apertar ---- */
.ember-btn{transition:box-shadow .45s ease,transform .18s var(--ease-out),filter .3s ease}
.ember-btn:hover{box-shadow:0 0 0 1px rgba(230,200,120,.55),0 14px 46px rgba(198,36,51,.36),0 0 34px rgba(201,162,75,.42);filter:brightness(1.04)}
.ember-btn:active{transform:scale(.97)}

/* ---- nav: tick que acende do centro ---- */
.nav-ember{position:relative;transition:color .3s}
.nav-ember::after{content:"";position:absolute;left:50%;right:50%;bottom:-5px;height:1.5px;
  background:var(--v-gold);opacity:0;
  transition:left .38s var(--ease-out),right .38s var(--ease-out),opacity .3s ease}
.nav-ember:hover{color:var(--v-ink)}
.nav-ember:hover::after{left:0;right:0;opacity:.9}

/* ---- imagens emergem da sombra ---- */
.fade-img{opacity:0;filter:blur(8px) brightness(.7);transition:opacity .75s ease,filter .75s ease}
.fade-img.loaded{opacity:1;filter:none}

/* ---- entrada de página (legais/feedback) ---- */
@keyframes v-pageEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-enter{animation:v-pageEnter .55s var(--ease-out) both}

/* ===== MAIS MESA (cara de RPG de mesa de fato) ===== */

/* candelabro: luz quente tremeluzente na posição da vela do fundo (motivada, não wallpaper abstrato) */
.candle{position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(48% 40% at 19% 58%, rgba(216,132,50,.15), transparent 62%);
  animation:v-candle 4.6s ease-in-out infinite}
@keyframes v-candle{
  0%{opacity:.62;transform:scale(1)} 22%{opacity:.96;transform:scale(1.03)} 38%{opacity:.52}
  54%{opacity:.9;transform:scale(1.02)} 70%{opacity:.68} 86%{opacity:1;transform:scale(1.04)}
  100%{opacity:.62;transform:scale(1)}}

/* features sobem em sequência (stagger) — SEM rotação (cards NUNCA tortos) */
.js .deal{opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .7s ease, transform .8s var(--ease-emerge)}
.deal.in{opacity:1;transform:none}
.no-motion-js .deal{opacity:1!important;transform:none!important}

/* runa inscrita sob o kicker (linha dourada que se desenha) */
.kicker[data-reveal]{position:relative}
.kicker[data-reveal]::after{content:"";position:absolute;left:50%;bottom:-11px;width:36px;height:2px;
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--v-gold),transparent);
  transition:transform .7s var(--ease-out) .18s}
.kicker[data-reveal].in::after{transform:translateX(-50%) scaleX(1)}

/* névoa de guerra: um véu escuro cobre a seção e RECUA quando ela entra na visão
   (a mecânica do mapa — o que você ainda não explorou está no escuro) */
.js .fog{position:relative}
.js .fog::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:1;
  transition:opacity 1.15s ease .05s;
  background:linear-gradient(180deg, rgba(11,8,9,.9) 0%, rgba(11,8,9,.5) 34%, rgba(11,8,9,.16) 62%, transparent 82%)}
.fog.in::after{opacity:0}
.no-motion-js .fog::after{display:none!important}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important;letter-spacing:.3em!important}
  .hero-in>*{opacity:1!important;animation:none!important}
  .fade-img{opacity:1!important;filter:none!important}
  .d20.rolling svg{animation:none!important}
  .d20{animation:none!important}
  .narrate .caret{display:none!important}
  .candle{display:none!important}
  .deal{opacity:1!important;transform:none!important}
  .fog::after{display:none!important}
}