/* ============ TOKENS ============ */
:root {
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-2: 0.5rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-10: 2.5rem;

  --font-display: 'Caveat', 'Segoe Script', cursive;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light: cream sketchbook paper */
:root, [data-theme="light"] {
  --color-bg: #f6f2e7;
  --color-text: #2b2926;
  --color-text-muted: #6f6a61;
  --color-border: #c9c1ae;
  --accent-red: #b3492f;
  --accent-blue: #4a7fa5;
  --btn-bg: #fffdf6;
  --grid-opacity: 0.5;
}

/* Dark: charcoal sketchbook paper */
[data-theme="dark"] {
  --color-bg: #201d1a;
  --color-text: #ddd7ca;
  --color-text-muted: #a39b8b;
  --color-border: #453e33;
  --accent-red: #e07a5f;
  --accent-blue: #7fb1d4;
  --btn-bg: #302b26;
  --grid-opacity: 0.35;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #201d1a;
    --color-text: #ddd7ca;
    --color-text-muted: #a39b8b;
    --color-border: #453e33;
    --accent-red: #e07a5f;
    --accent-blue: #7fb1d4;
    --btn-bg: #302b26;
    --grid-opacity: 0.35;
  }
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

::selection { background: color-mix(in oklab, var(--accent-red) 22%, transparent); }

:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }

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

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-6);
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
}

.hero-grid svg { width: 100%; height: 100%; }

.grid-blue line, .grid-red ellipse {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  animation: draw-in 3.2s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

@keyframes draw-in { to { stroke-dashoffset: 0; } }

.hero-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  perspective: 1000px;
}

.hero-art {
  margin: 0;
  border-radius: 6px;
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.18);
  transform: rotate(-0.4deg);
  will-change: transform;
}

.hero-art img { width: 100%; height: auto; border-radius: 6px; }

/* ============ БИРДЕКЕЛИ ============ */
.coasters {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  z-index: 2;
}

.coasters[hidden] { display: none; }

.coaster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: clamp(72px, 11vw, 118px);
  aspect-ratio: 1;
  text-decoration: none;
  color: var(--color-text);
  background:
    radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--btn-bg) 92%, var(--accent-red) 8%), var(--btn-bg));
  border: 2px solid var(--color-text);
  border-radius: 50%;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--btn-bg) 80%, transparent),
    3px 4px 0 color-mix(in oklab, var(--color-text) 65%, transparent);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--transition), box-shadow var(--transition);
  animation: coaster-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.coaster:nth-child(2) { animation-delay: 120ms; }
.coaster:nth-child(3) { animation-delay: 240ms; }

@keyframes coaster-pop {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(0.4) translateY(40px); }
  to { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1) translateY(0); }
}

.coaster:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.05);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--btn-bg) 80%, transparent),
    5px 8px 0 color-mix(in oklab, var(--color-text) 65%, transparent);
}

.coaster-ico { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1; }

.coaster-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  line-height: 1;
}

/* Кнопка входа — в стиле скетча */
.enter-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-10);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-text);
  background: var(--btn-bg);
  border: 2px solid var(--color-text);
  border-radius: 14px 20px 16px 22px / 20px 14px 22px 16px;
  box-shadow: 4px 4px 0 color-mix(in oklab, var(--color-text) 70%, transparent);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.enter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 6px 7px 0 color-mix(in oklab, var(--color-text) 70%, transparent);
}

.enter-btn:active { transform: translateY(0); box-shadow: 2px 2px 0 color-mix(in oklab, var(--color-text) 70%, transparent); }

.enter-btn[hidden] { display: none; }

/* Ссылка выхода */
.logout-link {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-6);
  z-index: 2;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.logout-link[hidden] { display: none; }

.logout-link:hover { color: var(--color-text); }

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
  .coasters {
    position: static;
    margin-top: var(--space-6);
  }
}