/* ============================================================
   makes. — Liquid Glass layer
   Подключается поверх styles.css. Токены стекла, амбиентный фон,
   стеклянная поверхность и блик за курсором. Общее для всех
   liquid-glass страниц; специфика секций — в самих файлах.
   ============================================================ */

/* ---- Glass tokens ---- */
:root, [data-theme="light"] {
  --glass:        rgba(255,255,255,.46);
  --glass-2:      rgba(255,255,255,.62);
  --glass-brd:    rgba(255,255,255,.85);
  --glass-hair:   rgba(0,0,0,.07);
  --glass-spec:   rgba(255,255,255,.9);
  --glass-shadow: 0 22px 60px -22px rgba(0,0,0,.28), 0 4px 18px -8px rgba(0,0,0,.16);
  --glass-shadow-lg: 0 44px 100px -30px rgba(0,0,0,.34), 0 10px 30px -12px rgba(0,0,0,.18);
  --aur-1: rgba(0,0,0,.05);
  --aur-2: rgba(0,0,0,.045);
  --aur-3: rgba(0,0,0,.035);
  --grain-op: .035;
}
[data-theme="dark"] {
  --glass:        rgba(255,255,255,.045);
  --glass-2:      rgba(255,255,255,.075);
  --glass-brd:    rgba(255,255,255,.14);
  --glass-hair:   rgba(255,255,255,.05);
  --glass-spec:   rgba(255,255,255,.5);
  --glass-shadow: 0 24px 70px -24px rgba(0,0,0,.7), 0 4px 18px -8px rgba(0,0,0,.6);
  --glass-shadow-lg: 0 50px 120px -34px rgba(0,0,0,.85), 0 12px 34px -14px rgba(0,0,0,.7);
  --aur-1: rgba(255,255,255,.10);
  --aur-2: rgba(255,255,255,.07);
  --aur-3: rgba(255,255,255,.05);
  --grain-op: .05;
}

body { position: relative; }

/* ---- Ambient drifting field (behind everything) ---- */
.aurora {
  position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  filter: blur(40px);
}
.aurora span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--blob) 0%, transparent 68%);
  animation: drift var(--d) var(--ease) infinite alternate;
  will-change: transform;
}
.aurora .b1 { --blob: var(--aur-1); --d: 26s; width: 60vmax; height: 60vmax; top: -10vmax; left: -6vmax; }
.aurora .b2 { --blob: var(--aur-2); --d: 32s; width: 52vmax; height: 52vmax; top: 18vmax; right: -10vmax; animation-delay: -8s; }
.aurora .b3 { --blob: var(--aur-3); --d: 38s; width: 46vmax; height: 46vmax; bottom: -14vmax; left: 24vmax; animation-delay: -16s; }
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(6vmax,-5vmax,0) scale(1.12); }
  100% { transform: translate3d(-5vmax,7vmax,0) scale(.94); }
}

/* faint grain for tactile glass */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-op);
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---- Glass surface primitive ---- */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-brd);
  border-radius: 30px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec), inset 0 -1px 0 var(--glass-hair);
  overflow: hidden;
  isolation: isolate;
}
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              var(--glass-spec), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
  mix-blend-mode: soft-light;
}
.glass:hover::before { opacity: .55; }
.glass::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent);
  opacity: .5;
}
[data-theme="light"] .glass::after { background: linear-gradient(180deg, rgba(255,255,255,.6), transparent); }

/* glassy tags */
.glass .tag, .tag.tag--glass { background: var(--glass-2); border-color: var(--glass-brd); }

/* reveal: a touch more travel for the glassy feel */
[data-reveal] { --reveal-y: 28px; }

@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none !important; }
}