/* WatchTV — лендинг. Без внешних ресурсов; совместим с CSP style-src 'self'. */
:root {
  --bg: #07060f;
  --ink: #f4f2ff;
  --accent-1: #7c5cff;
  --accent-2: #ff4fa3;
  --accent-3: #27d3ff;
  --focus: #ffe066;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg) radial-gradient(120% 80% at 50% 110%, #1b0f3a 0%, var(--bg) 60%) no-repeat;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Вертикальная прокрутка разрешена (крупный шрифт, ландшафт); слои фона fixed — гор. скролла нет. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Canvas показывается только когда JS реально рисует (класс .js-waves на <html>). */
.waves {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.js-waves .waves { display: block; }

/* Фон без JS: мягкие цветные «огни». С canvas — приглушаются. */
.glow { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
/* Мягкость — самим градиентом (без filter: blur), движение — только transform. */
.orb {
  position: absolute;
  width: 56vmax;
  height: 56vmax;
  border-radius: 50%;
  opacity: .45;
  animation: drift 18s ease-in-out infinite alternate;
}
.orb-a { left: -18vmax; top: -14vmax; background: radial-gradient(circle closest-side, rgba(124, 92, 255, .9), rgba(124, 92, 255, .35) 45%, rgba(124, 92, 255, 0)); }
.orb-b { right: -23vmax; top: 10vmax; background: radial-gradient(circle closest-side, rgba(255, 79, 163, .9), rgba(255, 79, 163, .35) 45%, rgba(255, 79, 163, 0)); animation-duration: 23s; animation-delay: -7s; }
.orb-c { left: 10vmax; bottom: -32vmax; background: radial-gradient(circle closest-side, rgba(39, 211, 255, .9), rgba(39, 211, 255, .35) 45%, rgba(39, 211, 255, 0)); animation-duration: 27s; animation-delay: -12s; }
/* С canvas огни — статичная подложка: анимирует только canvas. */
.js-waves .orb { opacity: .22; animation: none; }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(6vmax, 4vmax, 0); }
  100% { transform: translate3d(-4vmax, 7vmax, 0); }
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px; /* фолбэк для браузеров без max()/env() */
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  text-align: center;
}

.logo {
  /* Отступ до кнопки — margin, а не flex gap (Chrome < 84). */
  margin: 0 0 40px;
  margin-bottom: clamp(28px, 6vh, 56px);
  display: inline-flex;
  align-items: center;
  font-size: 2.6rem;
  font-size: clamp(2.2rem, 9vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(124, 92, 255, .55), 0 0 2px rgba(255, 255, 255, .6);
}

/* Значок «экран» из CSS: рамка с треугольником Play. */
.logo-mark {
  position: relative;
  width: 1.15em;
  height: .82em;
  border-radius: .16em;
  border: .07em solid currentColor;
  box-shadow: 0 0 18px rgba(39, 211, 255, .5), inset 0 0 12px rgba(124, 92, 255, .5);
  flex: none;
  margin-right: .45em;
}
.logo-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-style: solid;
  border-width: .16em 0 .16em .27em;
  border-color: transparent transparent transparent var(--accent-2);
  transform: translate(-38%, -50%);
}

.join {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  min-width: 260px;
  min-width: min(280px, 100%);
  max-width: 100%;
  padding: 16px 40px;
  border-radius: 999px;
  font-size: 1.2rem;
  font-size: clamp(1.1rem, 4.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(110deg, #6a46ff 0%, #c2189a 55%, #6a46ff 100%);
  box-shadow: 0 10px 40px -8px rgba(194, 24, 154, .7), 0 0 0 1px rgba(255, 255, 255, .18) inset;
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* «Дыхание»: тень нарисована один раз на псевдоэлементе, анимируются только opacity/transform
   (композитинг, без перерисовки box-shadow каждый кадр). */
.join::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 10px 56px -4px rgba(124, 92, 255, .85);
  opacity: .3;
  pointer-events: none;
  animation: breathe 3.2s ease-in-out infinite;
}
.join:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 48px -6px rgba(194, 24, 154, .85), 0 0 0 1px rgba(255, 255, 255, .3) inset; }
.join:active { transform: translateY(0) scale(.98); }
/* Фокус виден везде; браузеры с :focus-visible прячут его только для мыши/тача. */
.join:focus { outline: 3px solid var(--focus); outline-offset: 4px; }
.join:focus:not(:focus-visible) { outline: none; }

@keyframes breathe {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

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

@media (forced-colors: active) {
  .join { border: 2px solid ButtonText; }
}