/* Токены дизайна PERPET: цвета, шрифты, размеры и анимации из макета. */

:root {
  --cream: #fcf4f1;
  --wine: #6e0001;
  --blue: #c0d6ff;
  --ink: #000;
  --gray: #434343;
  --white: #fff;

  --font-body: "Arsenal SC", Georgia, serif;
  --font-display: Comfortaa, system-ui, sans-serif;
  --font-mono: "Anonymous Pro", ui-monospace, monospace;
  --font-hand: "Comic Relief", system-ui, sans-serif;
  --font-ui: Inter, system-ui, sans-serif;

  --radius-card: clamp(28px, 2.6vw, 50px);
  --radius-card-sm: clamp(24px, 2.2vw, 44px);
  --radius-pill: 50px;

  --gutter: clamp(12px, 1.9vw, 36px);
  --gap: clamp(14px, 1.6vw, 28px);
  --pad-card: clamp(24px, 2.6vw, 50px);
  --pad-banner: clamp(22px, 2.4vw, 40px) clamp(22px, 3.6vw, 50px);

  --text: clamp(16px, 1.35vw, 24px);
  --text-sm: clamp(16px, 1.2vw, 20px);
  --title-xl: clamp(56px, 8vw, 123px);
  --title-lg: clamp(32px, 4vw, 64px);
  --title-md: clamp(26px, 3vw, 48px);
  --title-sm: clamp(22px, 1.9vw, 30px);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: none; }
}

@keyframes drift-left {
  from { opacity: 0; transform: translateX(-56px) rotate(-5deg); }
  to { opacity: 1; transform: none; }
}

@keyframes drift-right {
  from { opacity: 0; transform: translateX(56px) rotate(5deg); }
  to { opacity: 1; transform: none; }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@property --pie {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@keyframes pie-sweep {
  from { --pie: 0%; }
  to { --pie: 62.8%; }
}

@keyframes pie-label {
  0%, 55% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .pie { --pie: 62.8%; }

  /* Тень шапки анимацией не рисуется — оставляем её постоянной. */
  .header { box-shadow: 0 8px 20px rgb(0 0 0 / 12%); }
}