/* ============================================================
   base.css — tokens, page shell, backdrop stack, loading gate.
   ============================================================ */

@font-face {
  font-family: 'Cinzel';
  src: url('../assets/fonts/cinzel.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('../assets/fonts/cinzel-decorative-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative';
  src: url('../assets/fonts/cinzel-decorative-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  /* Sampled from the backdrop so the UI sits in the same world. */
  --fel:          #8fe07a;
  --fel-glow:     #b6f79a;
  --fel-deep:     #2d5a2b;
  --ink:          #050906;
  --ink-soft:     #0d150f;
  --stone:        #2b2c25;
  --stone-lit:    #4a4a3d;
  --gold:         #edc257;
  --gold-bright:  #fff0bd;
  --gold-dim:     #97742a;
  --blood:        #a3211d;
  --parchment:    #e6d3a3;

  --ui-font: 'Cinzel', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --display-font: 'Cinzel Decorative', 'Cinzel', Georgia, serif;

  --shell-max: 1180px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--ui-font);
  overflow: hidden;
  /* A gauntleted hand, drawn inline so there is no extra request. */
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'>\
<path d='M4 3 L4 22 L9 30 L23 30 L27 21 L27 12 L23 12 L23 16 L21 16 L21 8 L17 8 L17 15 L15 15 L15 6 L11 6 L11 15 L9 15 L9 3 Z' \
fill='%231b1d16' stroke='%23edc257' stroke-width='2' stroke-linejoin='round'/>\
<path d='M6 6 L7.6 6 L7.6 15 L6 15 Z M12.6 8 L14 8 L14 15 L12.6 15 Z' fill='%23edc257' opacity='0.55'/>\
</svg>") 4 3, pointer;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; cursor: inherit; }

/* ---------- backdrop stack ---------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.stage__backdrop {
  position: absolute;
  inset: -1.5%;
  background: #0a1109 url('../assets/art/backdrop.jpg') center center / cover no-repeat;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}

/* Slow drift keeps the still image from reading as a static wallpaper. */
@keyframes backdrop-drift {
  0%, 100% { transform: scale(1.03) translate3d(-0.5%, -0.3%, 0); }
  50%      { transform: scale(1.03) translate3d(0.5%, 0.3%, 0); }
}
.stage__backdrop { animation: backdrop-drift 46s ease-in-out infinite; }

.stage__rain {
  position: absolute;
  inset: -20% -20% -20% -20%;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    repeating-linear-gradient(102deg,
      rgba(198, 224, 200, 0) 0 3px,
      rgba(198, 224, 200, 0.5) 3px 4px,
      rgba(198, 224, 200, 0) 4px 9px);
  background-size: 100% 220px;
  animation: rain-fall 0.62s linear infinite;
}
.stage__rain--far {
  opacity: 0.16;
  background-size: 100% 340px;
  animation-duration: 1.15s;
  filter: blur(1px);
}
@keyframes rain-fall {
  from { background-position: 0 0; }
  to   { background-position: -46px 220px; }
}

.stage__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stage__flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 80% at 60% 15%,
    rgba(214, 255, 210, 0.95), rgba(140, 220, 150, 0.35) 45%, rgba(0,0,0,0) 78%);
  transition: opacity 60ms linear;
  mix-blend-mode: screen;
}

.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 42%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.72) 100%),
    linear-gradient(to bottom, rgba(4,10,6,0.55), rgba(4,10,6,0) 26%, rgba(4,10,6,0.62));
}

/* ---------- loading gate ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(24, 46, 26, 0.5), rgba(0,0,0,0) 70%),
    #04070a;
  transition: opacity 900ms var(--ease-out), visibility 900ms;
}
.gate[hidden] { display: grid; }
.gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

.gate__inner {
  width: min(560px, 86vw);
  text-align: center;
}

.gate__mark {
  font-family: var(--display-font);
  font-weight: 900;
  font-size: clamp(28px, 5.4vw, 54px);
  letter-spacing: 0.1em;
  margin: 0 0 6px;
  background: linear-gradient(180deg, var(--gold-bright) 8%, var(--gold) 44%, #8a5f18 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(237, 194, 87, 0.28);
}

.gate__sub {
  margin: 0 0 30px;
  font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #7e8a72;
}

.gate__bar {
  height: 16px;
  border: 1px solid #3c3a28;
  background: #0b0f0b;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
  padding: 2px;
}

.gate__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3f6b2c, var(--fel) 60%, var(--gold-bright));
  box-shadow: 0 0 14px rgba(143, 224, 122, 0.65);
  transition: width 260ms var(--ease-out);
}

.gate__status {
  margin: 14px 0 0;
  min-height: 1.4em;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #93a186;
}

.gate__enter {
  margin-top: 26px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  pointer-events: none;
}
.gate.is-ready .gate__enter { opacity: 1; transform: none; pointer-events: auto; }

.gate__enter-hint {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6d7a63;
}

@media (prefers-reduced-motion: reduce) {
  .stage__backdrop { animation: none; }
  .stage__rain { animation: none; opacity: 0.14; }
}