/* Tarô da Harmony. O fundo segue a hora do computador de quem visita (manhã cinza-clara, tarde dourada, noite violeta);
   a carta tirada empresta o acento (o site.js troca as variáveis; o @property faz a troca virar transição). */
@font-face { font-family: "Alro"; src: url("/assets/fontes/alro-700.woff2?v=b5b61d43c7") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/fontes/sora-variavel.woff2?v=4129f4614b") format("woff2"); font-weight: 100 800; font-display: swap; }
@property --fundo { syntax: "<color>"; inherits: true; initial-value: #11043c; }
@property --foco { syntax: "<color>"; inherits: true; initial-value: #400bce; }
@property --acento { syntax: "<color>"; inherits: true; initial-value: #825bf4; }
@property --texto { syntax: "<color>"; inherits: true; initial-value: #efeaf7; }

:root {
  color-scheme: dark;
  --fundo: #11043c;
  --foco: #400bce;
  --acento: #825bf4;
  --texto: #efeaf7;
  --acento-texto: var(--acento);
  --suave: color-mix(in oklab, var(--texto) 66%, var(--fundo));
  --linha: color-mix(in oklab, var(--texto) 16%, var(--fundo));
  --vidro: color-mix(in oklab, var(--texto) 7%, transparent);
  --f-titulo: "Alro", "Sora", system-ui, sans-serif;
  --f-texto: "Sora", system-ui, sans-serif;
  --w: min(340px, 74vw, calc(66svh * 7 / 12));
  --raio: 5.5% / 3.2%;
  transition: --fundo 1.6s ease, --foco 1.6s ease, --acento 1.6s ease, --texto 1.6s ease;
}
:root[data-periodo="manha"] { --fundo: #e8e8ed; --foco: #ffffff; --texto: #1d1d1f; }
:root[data-periodo="tarde"] { --fundo: #ffe6b8; --foco: #ffc56e; --texto: #2b1400; }
:root[data-periodo="noite"] { --fundo: #0d0820; --foco: #2a1466; --texto: #efeaf7; }
:root[data-periodo="manha"], :root[data-periodo="tarde"] { color-scheme: light; --acento-texto: color-mix(in oklab, var(--acento) 55%, #000); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; background: var(--fundo); color: var(--texto); font: 16px/1.65 var(--f-texto); overflow-x: hidden; }
a { color: inherit; text-decoration-color: var(--acento-texto); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* degradê em malha, a assinatura da Harmony, nas cores da hora com um toque da carta */
.malha { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fundo); }
.malha i { position: absolute; width: 90vmax; height: 90vmax; background: radial-gradient(closest-side, var(--cor), transparent); opacity: .6; will-change: transform; animation: deriva 28s ease-in-out infinite alternate; }
.malha i:nth-child(1) { --cor: var(--foco); left: -30vmax; top: -35vmax; }
.malha i:nth-child(2) { --cor: var(--acento); right: -42vmax; bottom: -45vmax; opacity: .22; animation-duration: 34s; animation-delay: -9s; }
.malha i:nth-child(3) { --cor: var(--foco); right: -25vmax; top: -15vmax; opacity: .35; animation-duration: 41s; animation-delay: -17s; }
@keyframes deriva { to { transform: translate(14vmax, 10vmax) scale(1.15); } }

.sala {
  max-width: 1180px; margin: 0 auto;
  padding: 32px max(16px, env(safe-area-inset-right, 0px)) 80px max(16px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); gap: clamp(32px, 6vw, 96px); align-items: start;
}

/* ---------- palco e carta ---------- */
.palco { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); z-index: 1; display: grid; justify-items: center; gap: 18px; padding-block: 28px 8px; }
.cena { width: var(--w); aspect-ratio: 7 / 12; max-width: 100%; position: relative; perspective: 1600px; }
.flutua { position: absolute; inset: 0; transform-style: preserve-3d; animation: flutua 7s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-10px); } }
.carta { position: absolute; inset: 0; transform-style: preserve-3d; cursor: pointer; touch-action: none; outline: none; border-radius: var(--raio); -webkit-tap-highlight-color: transparent; }
.revelada .carta { cursor: grab; }
.carta.pegando { cursor: grabbing; }
.corpo { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); will-change: transform; }
.face, .borda { position: absolute; inset: 0; border-radius: var(--raio); }
.borda { background: linear-gradient(160deg, #f5f5f5, #8e86aa); }
.face { overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face svg { display: block; width: 100%; height: 100%; }
.frente { transform: translateZ(2px); background: var(--fundo); }
.verso {
  transform: rotateY(180deg) translateZ(2px);
  background:
    radial-gradient(90% 60% at 18% 12%, #5013F1 0%, transparent 60%),
    radial-gradient(80% 55% at 86% 88%, #825BF4 0%, transparent 58%),
    radial-gradient(70% 50% at 80% 20%, #250782 0%, transparent 70%),
    #11043C;
}
.carta:focus-visible .face { outline: 2px solid var(--acento); outline-offset: 5px; }
.holo, .brilho { position: absolute; inset: 0; pointer-events: none; }
.holo {
  background: linear-gradient(115deg, transparent 22%, color-mix(in srgb, var(--acento) 30%, transparent) 36%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.2) 50%, color-mix(in srgb, var(--foco) 34%, transparent) 58%, transparent 76%);
  background-size: 260% 260%; background-position: var(--hx, 50%) var(--hy, 50%);
  mix-blend-mode: color-dodge; opacity: .5;
}
.verso .holo { background-image: linear-gradient(115deg, transparent 22%, rgba(169,139,255,.3) 38%, rgba(255,255,255,.22) 50%, rgba(80,19,241,.3) 60%, transparent 76%); }
.brilho { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 28%), rgba(255,255,255,.26), rgba(255,255,255,0) 46%); mix-blend-mode: screen; }
.sombra { position: absolute; inset: 3% 4%; border-radius: var(--raio); background: rgba(10, 4, 30, .34); filter: blur(22px); transform: translate3d(0, 16px, -40px); pointer-events: none; }
:root[data-periodo="manha"] .sombra, :root[data-periodo="tarde"] .sombra { background: rgba(60, 30, 0, .2); }
/* ícone de girar: aparece sozinho só pra quem ainda não mexeu na carta (regras no site.js) */
.dica-girar { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(17, 4, 60, .55); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -10px #000; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .6s ease, transform .6s ease; z-index: 2; }
.dica-girar.ver { opacity: 1; transform: none; }
.dica-girar svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dica-girar.ver .mao { animation: arrasta 1.8s ease-in-out infinite; }
@keyframes arrasta { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* topo com a marca da Harmony e a troca de idioma */
.topo { max-width: 1180px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: block; line-height: 0; }
.marca img { width: 128px; height: auto; }
.marca .escura { display: none; }
:root[data-periodo="manha"] .marca .clara, :root[data-periodo="tarde"] .marca .clara { display: none; }
:root[data-periodo="manha"] .marca .escura, :root[data-periodo="tarde"] .marca .escura { display: block; }
.idioma { display: flex; gap: 4px; font-size: 13px; }
.idioma a { padding: 6px 10px; border-radius: 999px; text-decoration: none; color: var(--suave); }
.idioma a[aria-current] { color: var(--texto); background: var(--vidro); border: 1px solid var(--linha); }

/* botão em pílula com a sombra lavanda embaixo */
.pilula {
  font: 500 15px/1 var(--f-texto); color: var(--texto); background: var(--vidro);
  border: 1px solid color-mix(in oklab, var(--texto) 28%, transparent); border-radius: 999px; padding: 14px 26px; cursor: pointer;
  box-shadow: 0 12px 24px -12px var(--acento); backdrop-filter: blur(8px); transition: border-color .2s, transform .2s;
}
.pilula:hover { border-color: var(--acento); transform: translateY(-1px); }

/* antes e depois da tiragem */
.depois { display: none; }
.revelada .antes { display: none; }
.revelada .depois { display: revert; }
.revelada .mensagem { animation: surge 1.4s 1.6s ease both; }
@keyframes surge { from { opacity: 0; transform: translateY(14px); } }

/* ---------- leitura ---------- */
.leitura { min-width: 0; padding-block: 28px 0; outline: none; }
.rotulo { margin: 0; font-size: 14px; color: var(--acento-texto); }
h1 { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -.01em; margin: 8px 0 12px; text-wrap: balance; }
h2 { font-family: var(--f-titulo); font-weight: 700; font-size: 22px; line-height: 1.2; margin: 0 0 16px; text-wrap: balance; }
.arcano { margin: 0; font-size: 14px; color: var(--suave); }
.leitura p, .leitura dd { max-width: 62ch; }
.abre { font-size: 18px; line-height: 1.6; margin: 24px 0 0; }
.passos { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: p; }
.passos li { counter-increment: p; display: grid; grid-template-columns: 2.2em 1fr; padding-block: 14px; border-top: 1px solid var(--linha); color: var(--suave); }
.passos li:last-child { border-bottom: 1px solid var(--linha); }
.passos li::before { content: counter(p); font-family: var(--f-titulo); font-weight: 700; color: var(--acento-texto); }
.nota { margin-top: 24px; font-size: 13px; color: var(--suave); }
.frase { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; margin: 32px 0 0; text-wrap: balance; }
.corrido { margin: 20px 0 0; font-size: 17px; }

/* cartão de vidro com borda clara */
.lentes { margin: 36px 0 0; display: grid; gap: 12px; }
.lentes div { padding: 18px 20px; border-radius: 18px; background: var(--vidro); border: 1px solid color-mix(in oklab, var(--texto) 18%, transparent); backdrop-filter: blur(10px); }
.lentes dt { font-size: 13px; font-weight: 600; color: var(--acento-texto); letter-spacing: .02em; }
.lentes dd { margin: 4px 0 0; }
.pergunta { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 48px 0 0; text-wrap: balance; }
.pergunta::before { content: ""; display: block; width: 14px; height: 14px; margin-bottom: 18px; background: var(--acento); transform: rotate(45deg); }
.gesto { margin-top: 32px; padding-left: 18px; border-left: 2px solid var(--acento); }
.gesto p:last-child { margin: 6px 0 0; }

/* avaliação */
.avaliar { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--linha); }
.votos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.voto {
  display: grid; justify-items: center; gap: 8px; padding: 16px 6px 14px; cursor: pointer;
  font: 500 13px/1.25 var(--f-texto); color: var(--suave); background: var(--vidro);
  border: 1px solid color-mix(in oklab, var(--texto) 16%, transparent); border-radius: 18px;
  transition: color .2s, border-color .2s, transform .2s, box-shadow .3s;
}
.voto svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.voto:hover { color: var(--texto); border-color: color-mix(in oklab, var(--acento) 60%, transparent); transform: translateY(-2px); }
.voto[aria-pressed="true"] { color: var(--texto); border-color: var(--acento); box-shadow: 0 12px 24px -12px var(--acento); }
.voto[aria-pressed="true"] svg { transform: scale(1.12); }
.voto.cheio[aria-pressed="true"] svg { fill: var(--acento); stroke: var(--acento); filter: drop-shadow(0 0 10px var(--acento)); animation: cintila 2.4s ease-in-out infinite; }
@keyframes cintila { 50% { transform: scale(1.2) rotate(45deg); } }
.obrigado { min-height: 1.6em; margin: 14px 0 0; font-size: 14px; color: var(--suave); }

.ficha { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--linha); font-size: 13px; line-height: 1.6; color: var(--suave); }
.ficha p { margin: 0 0 8px; }
.ficha strong { color: var(--texto); font-variant-numeric: tabular-nums; font-weight: 600; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 404 e páginas simples */
.largura { width: min(1120px, 100%); margin-inline: auto; padding: 48px clamp(16px, 4vw, 40px); }

@media (max-width: 860px) {
  .sala { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .palco { position: static; }
}
@media (max-width: 420px) { .votos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .flutua, .malha i, .dica-girar.ver .mao, .voto.cheio[aria-pressed="true"] svg { animation: none; }
  .revelada .mensagem { animation: none; }
  :root { transition: none; }
}
.carta.clara .frente .holo { mix-blend-mode: overlay; }

/* ---------- raridade: comum (só o brilho de sempre), rara (holográfico) e lendária (holográfico forte, purpurina piscando e aura) ---------- */
.arco, .purpurina { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.carta.rara .arco, .carta.lendaria .arco {
  opacity: .22; mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(115deg, #ff5f9e 0%, #ffd23f 7%, #3ddc84 14%, #19d3f5 21%, #8f6bff 28%, #ff5f9e 35%);
  background-size: 300% 300%; background-position: var(--hx, 50%) var(--hy, 50%);
}
.carta.rara .purpurina, .carta.lendaria .purpurina { opacity: 1; mix-blend-mode: screen; }
.carta.lendaria .arco { opacity: .3; }
.carta.lendaria .borda { background: linear-gradient(160deg, #ffe9a8, #ff8fd1, #8fd3ff, #c9b8ff, #ffe9a8); }
.purpurina .pisca { transform-box: fill-box; transform-origin: center; animation: pisca 2.6s ease-in-out infinite; }
.purpurina .p1 { animation-delay: -.9s; }
.purpurina .p2 { animation-delay: -1.8s; }
@keyframes pisca { 50% { opacity: .1; transform: scale(.4) rotate(45deg); } }
.aura { position: absolute; inset: -6%; border-radius: 12%; pointer-events: none; opacity: 0; transform: translateZ(-60px); }
.cena.lendaria .aura {
  opacity: .55; filter: blur(34px);
  background: conic-gradient(from 0deg, #ff5f9e, #ffd23f, #3ddc84, #19d3f5, #8f6bff, #ff5f9e);
  animation: aura 9s linear infinite;
}
@keyframes aura { to { filter: blur(34px) hue-rotate(360deg); } }
.raridade { display: inline-block; margin: 14px 0 0; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texto); border: 1px solid var(--acento-texto); background: var(--vidro); }
.raridade[data-tipo="lendaria"] { border-color: transparent; background: linear-gradient(var(--fundo), var(--fundo)) padding-box, linear-gradient(90deg, #ff5f9e, #ffd23f, #3ddc84, #19d3f5, #8f6bff) border-box; }
@media (prefers-reduced-motion: reduce) { .purpurina .pisca, .cena.lendaria .aura { animation: none; } }