/* ============================================================================
   tau-arch.css — Tau Arch Design System tokens & pulse animations.
   Enforced by .claude/skills/tau-arch-design/SKILL.md — read it before changing.
   Imported once from index.html.
   ============================================================================ */

:root {
  /* Elemental cores (H S% L%) — used inside hsl()/hsla() */
  --tau-fire:  35 100% 55%;   /* orange-yellow — top-left / Journey */
  --tau-air:   188 95% 50%;   /* cyan-aqua    — top-right / MAIN.Links */
  --tau-earth: 138 71% 45%;   /* forest-lime  — bottom-left / Character */
  --tau-water: 213 94% 55%;   /* blue-sky     — bottom-right / FLUX */

  /* AETHER center — blueprint, voice toggle uses --aether-vortex only this session */
  --aether-vortice: 0   80% 60%;
  --aether-vortex:  320 80% 55%;
  --aether-vertice: 270 70% 55%;

  /* Item system v2 — category colours beyond the 4 elements, + uniqueness rose.
     (magico→--tau-air, natural→--tau-earth, sistemico→--tau-water,
      equipado→--tau-fire; the two below cover combate + sagrado + incomum.) */
  --item-combat:   215 14% 68%;   /* combate — aço neutro */
  --item-sacred:   45  60% 85%;   /* sagrado — branco-dourado */
  --item-uncommon: 345 85% 62%;   /* uniqueness: incomum (rosa-vermelho) */

  /* Name-text legibility twin: --aether-vertice (270 70% 55%) reads at only
     ~3.2:1 on the dark panels — fails WCAG AA for body text. The item NAME
     (enchanted strongest) uses this lighter purple (~6.3:1) while the frame
     and dots keep the vivid 55%-L hue. Frame/dots are NOT changed. */
  --aether-vertice-text: 270 75% 72%;
}

/* ---- Pulse keyframes (one per element, identical shape) --------------------
   Uses filter: drop-shadow() (follows the glyph silhouette of the dots)
   instead of box-shadow (which renders a rectangular halo around the button
   bounding box and reads as a "highlighted box" to the player). */
@keyframes tau-pulse-fire {
  0%, 100% { filter: drop-shadow(0 0 3px hsla(var(--tau-fire) / 0.45)); }
  50%      { filter: drop-shadow(0 0 8px hsla(var(--tau-fire) / 0.85)); }
}
@keyframes tau-pulse-air {
  0%, 100% { filter: drop-shadow(0 0 3px hsla(var(--tau-air) / 0.45)); }
  50%      { filter: drop-shadow(0 0 8px hsla(var(--tau-air) / 0.85)); }
}
@keyframes tau-pulse-earth {
  0%, 100% { filter: drop-shadow(0 0 3px hsla(var(--tau-earth) / 0.45)); }
  50%      { filter: drop-shadow(0 0 8px hsla(var(--tau-earth) / 0.85)); }
}
@keyframes tau-pulse-water {
  0%, 100% { filter: drop-shadow(0 0 3px hsla(var(--tau-water) / 0.45)); }
  50%      { filter: drop-shadow(0 0 8px hsla(var(--tau-water) / 0.85)); }
}

/* ---- Public glow classes — apply to the Tau dot button --------------------- */
.tau-glow-fire  { animation: tau-pulse-fire  2.4s ease-in-out infinite; }
.tau-glow-air   { animation: tau-pulse-air   2.4s ease-in-out infinite; }
.tau-glow-earth { animation: tau-pulse-earth 2.4s ease-in-out infinite; }
.tau-glow-water { animation: tau-pulse-water 2.4s ease-in-out infinite; }

/* Faint elemental tint on the corner panel borders.
   The components already use Tailwind border-*-500/30 — these classes layer a
   subtle radial highlight so the corner reads as "live" even when idle. */
.tau-corner-fire  { background-image: radial-gradient(circle at top left,     hsla(var(--tau-fire)  / 0.05), transparent 60%); }
.tau-corner-air   { background-image: radial-gradient(circle at top right,    hsla(var(--tau-air)   / 0.05), transparent 60%); }
.tau-corner-earth { background-image: radial-gradient(circle at bottom left,  hsla(var(--tau-earth) / 0.05), transparent 60%); }
.tau-corner-water { background-image: radial-gradient(circle at bottom right, hsla(var(--tau-water) / 0.05), transparent 60%); }

/* AETHER voice toggle — the CORAL VORTICE hue. Subtle pulse, never as loud
   as a corner Tau dot. The toggle is its own small sibling button next to the
   (decorative) world icon — see SKILL §5 and the user's PT-BR spec:
   the world icon NEVER becomes a button; the toggle is a SEPARATE element. */
@keyframes aether-vortice-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px hsla(var(--aether-vortice) / 0.45)); }
  50%      { filter: drop-shadow(0 0 10px hsla(var(--aether-vortice) / 0.85)); }
}
.aether-voice-toggle { animation: aether-vortice-pulse 3.2s ease-in-out infinite; }

/* Item Aura / Carga de Alma (spec §18) — intensifies the uniqueness frame as the
   bearer's hidden soul-charge grows. Colour (--aura-color = an HSL triplet) and
   spread (--aura-spread) come from inline vars, so this one keyframe serves every
   uniqueness hue and every tier. */
@keyframes item-aura-pulse {
  0%, 100% { box-shadow: 0 0 var(--aura-spread, 3px) hsla(var(--aura-color) / 0.45); }
  50%      { box-shadow: 0 0 calc(var(--aura-spread, 3px) * 2) hsla(var(--aura-color) / 0.85); }
}
.item-aura { animation: item-aura-pulse 2.6s ease-in-out infinite; }

/* Honour user motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .tau-glow-fire,
  .tau-glow-air,
  .tau-glow-earth,
  .tau-glow-water,
  .aether-voice-toggle,
  .item-aura {
    animation: none;
  }
}