/* ============================================================
   AZOTH — Dark Alchemy interface system
   Tokens · type · atmosphere · base
   ============================================================ */

:root {
  /* surfaces — warm near-black "void" */
  --void:        #0a0807;
  --void-2:      #100c0a;
  --panel:       #14100c;
  --panel-2:     #1b1611;
  --raised:      #221b14;
  --line:        rgba(201, 162, 39, 0.16);
  --line-soft:   rgba(201, 162, 39, 0.09);
  --line-strong: rgba(201, 162, 39, 0.34);

  /* gold accent */
  --gold:        #c9a227;
  --gold-bright: #e8c75a;
  --gold-deep:   #9a7c1e;
  --gold-dim:    #6f5a23;

  /* parchment text */
  --parchment:     #ece1c6;
  --parchment-dim: #b6a883;
  --ash:           #82775f;
  --ash-deep:      #5a5141;

  /* rare embers */
  --ember:      #a8451f;
  --blood:      #7a1d12;

  /* glow */
  --glow-gold: 0 0 22px rgba(201,162,39,0.34);
  --glow-soft: 0 0 60px rgba(201,162,39,0.10);

  /* type */
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-caps:    "Cinzel", Georgia, serif;
  --f-body:    "EB Garamond", Georgia, serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--void);
  color: var(--parchment);
  font-family: var(--f-body);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

#root { height: 100%; }

::selection { background: rgba(201,162,39,0.28); color: #fff8e6; }

/* ---- scrollbars ---- */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,0.16);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,0.3); background-clip: padding-box; }

/* ============================================================
   ATMOSPHERE — fixed background layers behind the app
   ============================================================ */
.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* deep radial warmth + vignette */
.atmos__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(201,162,39,0.10), transparent 60%),
    radial-gradient(80% 70% at 50% 120%, rgba(120,40,20,0.10), transparent 55%);
}
.atmos__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 45%, rgba(0,0,0,0.65) 100%);
}
/* film grain */
.atmos__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)}
  40%{transform:translate(3%,-3%)} 60%{transform:translate(-2%,4%)}
  80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
}
/* drifting embers */
.atmos__embers { position: absolute; inset: 0; }
.ember-mote {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px 1px rgba(232,199,90,0.7);
  opacity: 0;
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-104vh) translateX(var(--drift,20px)) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .atmos__grain, .ember-mote { animation: none; }
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
.app-screen {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.eyebrow {
  font-family: var(--f-caps);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--gold);
}

.wordmark {
  font-family: var(--f-caps);
  letter-spacing: 0.34em;
  font-weight: 600;
  color: var(--parchment);
}

h1,h2,h3 { font-family: var(--f-display); font-weight: 500; margin: 0; line-height: 1.04; }

.script {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--parchment-dim);
}

/* gold rule with a diamond center */
.rule {
  display: flex; align-items: center; gap: 0.8rem;
  color: var(--gold-deep);
}
.rule::before, .rule::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.rule__mark { font-size: 0.7rem; color: var(--gold); }

/* ---- buttons ---- */
.btn {
  font-family: var(--f-caps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.95em 1.9em;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(201,162,39,0.10), rgba(201,162,39,0.02));
  color: var(--gold-bright);
  cursor: pointer;
  position: relative;
  transition: all 0.4s var(--ease);
  border-radius: 1px;
}
.btn:hover {
  border-color: var(--gold);
  color: #fff6df;
  box-shadow: var(--glow-gold), inset 0 0 22px rgba(201,162,39,0.10);
  background: linear-gradient(180deg, rgba(201,162,39,0.18), rgba(201,162,39,0.04));
}
.btn--solid {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #1a1206;
  border-color: var(--gold-bright);
}
.btn--solid:hover {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #160f04;
}
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--parchment-dim);
}
.btn--ghost:hover { color: var(--gold-bright); box-shadow: none; background: transparent; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ---- inputs ---- */
.field { position: relative; }
.field label {
  display: block;
  font-family: var(--f-caps);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.6rem;
  color: var(--ash);
  margin-bottom: 0.55rem;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--parchment);
  font-family: var(--f-display);
  font-size: 1.25rem;
  padding: 0.4rem 0 0.55rem;
  outline: none;
  transition: border-color 0.4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ash-deep); font-style: italic; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field--focusline::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold-bright); box-shadow: 0 0 8px var(--gold);
  transition: width 0.5s var(--ease);
}
.field:focus-within.field--focusline::after { width: 100%; }

/* shared card */
.veil-card {
  background:
    linear-gradient(180deg, rgba(34,27,20,0.6), rgba(16,12,10,0.6));
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,240,200,0.04);
}

/* entrance animations */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes glowPulse {
  0%,100% { opacity: 0.5; } 50% { opacity: 1; }
}
.rise { animation: riseIn 0.9s var(--ease) both; }
.fade { animation: fadeIn 1.2s var(--ease) both; }

.view-enter { animation: fadeIn 0.7s var(--ease) both; }
.az-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 100vh;
}

/* safety net — once locked, force all entrance reveals to their final state */
html.anims-locked .rise,
html.anims-locked .fade,
html.anims-locked .view-enter {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ============================================================
   SIGIL
   ============================================================ */
.sigil__spin     { animation: spinSlow 120s linear infinite; }
.sigil__spin-rev { animation: spinSlow 90s linear infinite reverse; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.sigil__core { animation: coreBreath 4.5s ease-in-out infinite; transform-origin: center; }
@keyframes coreBreath { 0%,100%{ opacity: 0.6; r: 0.5; } 50%{ opacity: 1; } }

.sigil-mark {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex: none;
  background: radial-gradient(circle, rgba(201,162,39,0.12), transparent 70%);
}
.sigil-mark--live { animation: glowPulse 3s ease-in-out infinite; }
.sigil-mark--live svg { filter: drop-shadow(0 0 5px rgba(201,162,39,0.6)); }

@media (prefers-reduced-motion: reduce) {
  .sigil__spin, .sigil__spin-rev, .sigil__core, .sigil-mark--live { animation: none; }
}