/* Taleori · дизайн-токены.
   Палитра — Asset Book (plum/paper/gold). Заголовки — Fraunces, текст — Figtree
   (пакет донора). Spectral остаётся шрифтом ридера.
   Старые имена переменных оставлены как алиасы. */
:root {
  --plum-950: #1E1327;
  --plum-900: #2A1B34;
  --plum-800: #372342;
  --plum-700: #463052;
  --paper: #F7F0E4;
  --paper-2: #EFE3D0;
  --paper-3: #E6D7C0;
  --ink: #2E2230;
  --ink-2: #5B4B57;
  --ink-3: #8A7885;
  --on-dark: #F6EEE2;
  --on-dark-2: #C9B7C6;
  --gold: #D9A441;
  --gold-2: #F0CE86;
  --gold-deep: #B4832A;
  --rose: #C4634B;
  --sage: #7C9A76;
  --r-sm: 7px;
  --r-md: 13px;
  --r-lg: 20px;
  --shadow: 0 16px 40px -22px rgba(30, 19, 39, 0.5);
  --wrap: 1152px;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --reader: "Spectral", Georgia, serif;
  --dusk: var(--plum-900);
  --max: 72rem;

  /* horizon-kit: только бренд-ассеты и полоса футера, не палитра экранов */
  --taleori-purple: #664357;
  --taleori-gold: #D8B080;
  --taleori-sun: #C9962A;
  --taleori-cream: #F3E6D4;
  --taleori-ink: #664357;
  --taleori-line: #C4A05A;

  /* алиасы для старых компонентов */
  --ink-soft: var(--ink-2);
  --coral: var(--rose);
  --coral-dark: #9C4A36;
  --pine: var(--sage);
  --night: var(--plum-950);
  --line: rgba(46, 34, 48, 0.12);
}

[hidden] { display: none !important; }
.scene-svg { width: 100%; height: 100%; display: block; }
.tw { animation: tw 3.4s ease-in-out infinite; }
@keyframes tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ff { animation: ff 5.5s ease-in-out infinite; }
@keyframes ff { 0%, 100% { opacity: .15; transform: translateY(0); } 50% { opacity: .95; transform: translateY(-9px); } }

/* SceneStage: вектор снизу, растр сверху, кроссфейд 240 мс */
.stage {
  position: relative;
  overflow: hidden;
  background: var(--plum-800);
  border-radius: var(--r-md);
  aspect-ratio: 10 / 7;
}
.stage__vector, .stage__raster { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__vector > svg { width: 100%; height: 100%; display: block; }
.stage__raster { object-fit: cover; opacity: 0; transition: opacity 240ms ease; }
.stage.is-raster .stage__raster { opacity: 1; }
.stage--square { aspect-ratio: 1 / 1; }
.stage--frame { aspect-ratio: 3 / 2; }
.stage--cover { aspect-ratio: 2 / 3; }
.stage--wide { aspect-ratio: 16 / 9; }

.ico { display: inline-block; vertical-align: -0.2em; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .tw, .ff { animation: none !important; }
  .stage__raster { transition: none !important; }
  .scene-svg animate, .scene-svg animateTransform { display: none; }
}

a { color: var(--gold-deep); }
a:hover { color: var(--rose); }