/* Gema TCG — camada de efeitos v2, "a luz da gema" (proposta de 29/09/2026).
 * A ideia: o holo é a luz que passa pela gema. A sala continua escura e reta,
 * e a luz entra por cima dela: manchas de luz derivando no fundo, grão de
 * filme, cartas que inclinam com brilho holo, bordas holo que giram, números
 * que contam, entradas ao rolar. (A luz que seguia o cursor e o holofote dos
 * painéis saíram em 30/09, feedback do Aurelio.)
 * Só transform/opacity nas animações contínuas; tudo desliga com
 * prefers-reduced-motion. Comportamento em fx.js. */

@property --holo-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* o holo em volta (borda que gira) e em fita contínua (texto que desliza) */
  --holo-conic: conic-gradient(from var(--holo-angle), #7FE0C3, #9FC5F0, #C9A6F5, #F5A6C8, #F7C9A0, #7FE0C3);
  --holo-loop: linear-gradient(90deg, #7FE0C3, #9FC5F0, #C9A6F5, #F5A6C8, #F7C9A0, #F5A6C8, #C9A6F5, #9FC5F0, #7FE0C3);
  --glass: rgba(10, 12, 16, .66);
  --glass-line: rgba(255, 255, 255, .07);
  /* superfícies v2 (as mesmas em todas as páginas): cantos, vidro, fios */
  --v2-r-lg: 16px;
  --v2-r-md: 12px;
  --v2-r-sm: 8px;
  --v2-r-pill: 999px;
  --v2-glass: linear-gradient(180deg, rgba(28, 32, 40, .8), rgba(17, 20, 26, .8));
  --v2-glass-2: linear-gradient(180deg, rgba(36, 41, 50, .86), rgba(22, 25, 32, .86));
  --v2-line: rgba(255, 255, 255, .06);
  --v2-line-2: rgba(255, 255, 255, .1);
  --v2-line-hot: rgba(201, 166, 245, .5);
  --v2-blur: 10px;
  --v2-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}

/* o fundo mora no <html> pra camada de luz (z-index -1) aparecer atrás do
   conteúdo; a sala clara (.room-light) não usa esta camada */
html { background: var(--bg); }
body:not(.room-light) { background: transparent !important; }

/* ------------------------------------------------------------------ céu
   três manchas de luz holo derivando devagar atrás da página (gradiente
   radial, sem filtro: barato de compor) */

.fx-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-sky i {
  position: absolute;
  width: 72vmax;
  height: 72vmax;
  border-radius: 50%;
  will-change: transform;
}
.fx-sky .b1 {
  top: -38vmax; left: -22vmax;
  background: radial-gradient(circle, rgba(127, 224, 195, .13), rgba(127, 224, 195, 0) 62%);
  animation: fx-sky1 38s var(--ease-in-out) infinite alternate;
}
.fx-sky .b2 {
  top: -34vmax; right: -26vmax;
  background: radial-gradient(circle, rgba(201, 166, 245, .15), rgba(201, 166, 245, 0) 62%);
  animation: fx-sky2 46s var(--ease-in-out) infinite alternate;
}
.fx-sky .b3 {
  top: 55vh; left: 18vw;
  background: radial-gradient(circle, rgba(245, 166, 200, .06), rgba(245, 166, 200, 0) 60%);
  animation: fx-sky3 54s var(--ease-in-out) infinite alternate;
}
@keyframes fx-sky1 { to { transform: translate3d(16vmax, 9vmax, 0) scale(1.12); } }
@keyframes fx-sky2 { to { transform: translate3d(-14vmax, 12vmax, 0) scale(.92); } }
@keyframes fx-sky3 { to { transform: translate3d(20vmax, -14vmax, 0) scale(1.2); } }

/* grão de filme: ruído SVG fixo por cima de tudo, bem baixo */
.fx-grain {
  position: fixed;
  inset: -40px;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-grain 1.6s steps(5) infinite;
}
@keyframes fx-grain {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-18px, 12px, 0); }
  50% { transform: translate3d(14px, -20px, 0); }
  75% { transform: translate3d(-8px, -10px, 0); }
  100% { transform: translate3d(20px, 16px, 0); }
}

/* ---------------------------------------------------------------- entrada
   [data-reveal] sobe e ganha foco quando entra na tela; --i escalona.
   Só esconde depois que o fx.js marcou a página (sem JS, tudo aparece). */

.fx-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.fx-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- holo vivo */

.holo-text {
  background: var(--holo-loop);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-holo-slide 8s linear infinite;
}
@keyframes fx-holo-slide { to { background-position: -200% 0; } }

/* borda holo que gira (máscara: só o fio de 1px aparece) */
.holo-ring { position: relative; isolation: isolate; }
.holo-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--ring-w, 1px);
  border-radius: inherit;
  background: var(--holo-conic);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-holo-spin 6s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes fx-holo-spin { to { --holo-angle: 360deg; } }

/* --------------------------------------------------- carta que inclina
   [data-tilt="16"] recebe --rx/--ry (graus) e --gx/--gy (onde a luz bate)
   do fx.js; .fx-glare é o reflexo, .fx-foil é o arco-íris do holo */

[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease-out), box-shadow .5s ease;
}
/* will-change só enquanto inclina: com até 1000 cartas na Coleção, deixar em
   todas custava uma camada de GPU por carta */
[data-tilt].is-tilting { transition: transform .12s linear, box-shadow .5s ease; will-change: transform; }
.fx-glare, .fx-foil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 2;
}
.fx-glare {
  background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .16) 24%, rgba(0, 0, 0, .28) 92%);
  mix-blend-mode: overlay;
}
.fx-foil {
  background-image:
    repeating-linear-gradient(112deg, #7FE0C3 0%, #9FC5F0 6%, #C9A6F5 12%, #F5A6C8 18%, #F7C9A0 24%, #7FE0C3 30%),
    repeating-linear-gradient(28deg, rgba(0, 0, 0, .55) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  background-size: 320% 320%, 100% 100%;
  background-position: var(--fx, 50%) var(--fy, 50%), 0 0;
  mix-blend-mode: color-dodge;
  filter: brightness(.62) contrast(1.5) saturate(1.3);
}
/* reflexo e holo 30% mais baixos que a proposta de 29/09 (feedback 30/09) */
[data-tilt].is-tilting .fx-glare { opacity: .7; }
[data-tilt].is-tilting .fx-foil { opacity: .35; }

/* ---------------------------------------------------------------- faísca */

/* !important nas medidas: regras genéricas das páginas (".x span { width: 100% }")
   esticavam a faísca até o tamanho da carta */
.fx-spark {
  position: absolute !important;
  width: var(--s, 14px) !important;
  height: var(--s, 14px) !important;
  inset: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  margin: calc(var(--s, 14px) / -2) 0 0 calc(var(--s, 14px) / -2) !important;
  pointer-events: none;
  z-index: 50;
  color: #fff;
  animation: fx-spark var(--d, .9s) var(--ease-out) forwards;
}
.fx-spark svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 6px currentColor); }
@keyframes fx-spark {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  55% { transform: scale(1) rotate(60deg); opacity: 1; }
  100% { transform: scale(.2) rotate(110deg); opacity: 0; }
}

/* --------------------------------------------------------------- fita */

.fx-ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.fx-ticker-track {
  display: flex;
  width: max-content;
  animation: fx-ticker var(--dur, 80s) linear infinite;
}
.fx-ticker:hover .fx-ticker-track,
.fx-ticker:focus-within .fx-ticker-track { animation-play-state: paused; }
@keyframes fx-ticker { to { transform: translate3d(-50%, 0, 0); } }

/* ---------------------------------------------------- ponto que pulsa */

/* o ponto de "dado fresco": holo, não verde (verde e vermelho são só variação) */
.fx-pulse {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--holo);
  flex: none;
}
.fx-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #C9A6F5;
  animation: fx-pulse 2.2s var(--ease-out) infinite;
}
@keyframes fx-pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* a gema girando (carregando): faces acendendo em sequência */
.fx-gemload { display: inline-block; width: 22px; height: 22px; vertical-align: middle; }
.fx-gemload path { fill: rgba(201, 166, 245, .12); stroke: rgba(201, 166, 245, .55); stroke-width: .6; animation: fx-facet 1.2s ease-in-out infinite; }
.fx-gemload path:nth-child(2) { animation-delay: .15s; }
.fx-gemload path:nth-child(3) { animation-delay: .3s; }
.fx-gemload path:nth-child(4) { animation-delay: .45s; }
.fx-gemload path:nth-child(5) { animation-delay: .6s; }
.fx-gemload path:nth-child(6) { animation-delay: .75s; }
@keyframes fx-facet { 0%, 100% { fill: rgba(201, 166, 245, .08); } 40% { fill: rgba(127, 224, 195, .7); } }

/* sala clara (privacidade, termos): a luz de fundo e o grão são da sala
   escura; no papel eles só sujavam */
.room-light .fx-sky, .room-light .fx-grain { display: none; }

/* impressão e leitores sem rolagem: tudo visível */
@media print {
  .fx-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .fx-sky, .fx-grain { display: none !important; }
}

/* ------------------------------------------------------ movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  .fx-sky i, .fx-grain, .holo-text, .holo-ring::before, .fx-ticker-track, .fx-pulse::after { animation: none !important; }
  .fx-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fx-ticker { overflow-x: auto; }
}