/* Undertree Games brand layer: tokens, resets and keyframes only.
   Layout and component styling stay inline in each Design Component. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #0b0812; color: #f4ecdc; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: #f6dc9a; text-decoration: none; }
a:hover { color: #fff3d6; }

:root {
  --color-bg: #0b0812;
  --color-surface: #150e28;
  --color-text: #f4ecdc;
  --color-accent: #d9a84a;
  --color-divider: rgba(217,168,74,.34);
  --color-neutral-100: #150e28;
  --color-neutral-200: #120c21;
  --color-neutral-300: rgba(217,168,74,.26);
  --color-neutral-400: #5d4a2a;
  --color-neutral-500: #7c6a4d;
  --color-neutral-600: #8a7c62;
  --color-neutral-700: #b6a68c;
  --color-neutral-800: #d9cdb6;
  --color-neutral-900: #f4ecdc;
  --color-accent-100: rgba(217,168,74,.13);
  --color-accent-200: rgba(217,168,74,.22);
  --color-accent-300: #8a6021;
  --color-accent-600: #f6dc9a;
  --color-accent-700: #f6dc9a;
  --font-heading: "Cinzel", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 900;
}

.grayscale { filter: none; }
::selection { background: rgba(217,168,74,.35); color: #fff3d6; }
:focus-visible { outline: 2px solid #f6dc9a; outline-offset: 2px; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes utFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes utRise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-62vh); opacity: 0; } }
@keyframes utDrift { from { transform: translate3d(0,0,0) scale(1.04); } to { transform: translate3d(-2%, -1.5%, 0) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}