/* ═══════════════════════════════════════════════════════════
   TMF RUS — hard dance TV landing
   Palette: near-black + electric cyan / magenta / acid lime
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:        #0a0a0f;
  --bg-2:      #12121c;
  --ink:       #f4f4fb;
  --muted:     #9aa0b4;
  --cyan:      #00e5ff;
  --magenta:   #ff2d95;
  --lime:      #c6ff00;
  --glow-cyan: 0 0 24px rgba(0, 229, 255, .55);
  --glow-mag:  0 0 24px rgba(255, 45, 149, .55);
  --edge:      rgba(255, 255, 255, .09);
  --card-bg:   rgba(255, 255, 255, .035);
  --maxw:      1160px;
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --font:      'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* the `hidden` attribute must beat any display we set on components */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  overflow-x: clip; /* doesn't create a scroll container → keeps sticky working */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* ── club backdrop: light rays + drifting color + grain ── */
.fx-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 78% -12%, rgba(255, 45, 149, .16), transparent 62%),
    radial-gradient(1100px 900px at 8% 118%, rgba(0, 229, 255, .14), transparent 60%),
    var(--bg);
}
/* rotating spotlights, like club lighting */
.fx-rays {
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg at 50% 0%,
    transparent 0deg, rgba(0, 229, 255, .10) 12deg, transparent 24deg,
    transparent 60deg, rgba(255, 45, 149, .12) 74deg, transparent 88deg,
    transparent 130deg, rgba(198, 255, 0, .07) 144deg, transparent 158deg,
    transparent 220deg, rgba(0, 229, 255, .08) 236deg, transparent 250deg);
  transform-origin: 50% 0%;
  animation: sweep 34s linear infinite;
  will-change: transform;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.fx-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, .16) 4px);
  mix-blend-mode: overlay;
  opacity: .3;
  animation: scan 8s linear infinite;
}
@keyframes scan { to { transform: translateY(4px); } }

/* film grain */
.fx-noise {
  position: absolute; inset: 0;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(2) infinite;
}
@keyframes grain { 50% { transform: translate(-2%, 1%); } }

.fx-blob {
  position: absolute;
  width: 48vmax; height: 48vmax;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .3;
  animation: drift 26s var(--ease) infinite alternate;
  will-change: transform;
}
.fx-blob--1 { background: var(--cyan);    top: -20vmax; left: -14vmax; }
.fx-blob--2 { background: var(--magenta); bottom: -24vmax; right: -16vmax; animation-delay: -8s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vmax, 5vmax) scale(1.18); }
}

/* ── buttons ───────────────────────────────────────────── */
.btn {
  --b: var(--cyan);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .78em 1.5em;
  font-weight: 700; font-size: .98rem; letter-spacing: .02em;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: var(--b); box-shadow: 0 0 22px -4px var(--b); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --b: var(--cyan);
  background: linear-gradient(120deg, var(--cyan), var(--lime));
  border-color: transparent;
  color: #06121a;
  font-weight: 800;
  box-shadow: 0 0 26px -4px var(--cyan);
}
.btn--primary:hover { box-shadow: 0 0 34px -2px var(--lime); }
.btn--ghost { background: transparent; }

/* animated inner life for IPTV buttons: neon sweep + icon motion */
.btn--anim { position: relative; overflow: hidden; }
.btn--anim::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%;
  width: 60%; pointer-events: none;
  background: linear-gradient(105deg, transparent,
    color-mix(in srgb, var(--b) 22%, transparent) 50%, transparent);
  transform: skewX(-18deg);
  animation: btnsweep 3.2s var(--ease) infinite;
}
@keyframes btnsweep {
  0%, 55% { left: -80%; }
  100%    { left: 130%; }
}
.btn__ico { display: inline-block; }
.btn--dl:hover .btn__ico { animation: ico-drop .7s var(--ease) infinite; }
@keyframes ico-drop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(4px); opacity: .5; }
}

.btn--live {
  --b: var(--lime);
  padding: .5em 1em; font-size: .82rem; letter-spacing: .12em;
}
.live-dot {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 10px var(--lime);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }

/* ── nav ───────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(10, 10, 15, .8), rgba(10, 10, 15, .25));
  border-bottom: 1px solid var(--edge);
}
.nav.is-scrolled {
  background: rgba(8, 8, 12, .92);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .8);
}
.nav__brand { display: inline-flex; align-items: baseline; gap: .45rem; }
.nav__brand img { filter: drop-shadow(var(--glow-cyan)); }
.nav__brand .nav__rus {
  font-size: .78rem; font-weight: 300; letter-spacing: .3em;
  color: #fff; text-transform: uppercase;
}
.nav__links { display: flex; gap: 1.4rem; margin-inline-start: auto; font-weight: 600; }
.nav__links a { color: var(--muted); position: relative; transition: color .2s; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--cyan); box-shadow: var(--glow-cyan); transition: width .28s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

/* ── layout helpers ────────────────────────────────────── */
section { position: relative; padding: clamp(4rem, 9vw, 7.5rem) clamp(1rem, 5vw, 2.5rem); }

/* stacked-deck scroll: sections pin and the next slides over like a card.
   JS sets a negative sticky `top` for sections taller than the viewport. */
.hero, .efir, .about, .watch { position: sticky; top: 0; }
.efir, .about, .watch {
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(255, 45, 149, .07), transparent 60%),
    radial-gradient(800px 500px at 10% 100%, rgba(0, 229, 255, .06), transparent 60%),
    linear-gradient(rgba(13, 13, 22, .96), rgba(10, 10, 15, .99));
  border-radius: 26px 26px 0 0;
  border-top: 1px solid var(--edge);
  box-shadow: 0 -30px 70px -28px rgba(0, 0, 0, .9);
}
.hero  { z-index: 1; }
.efir  { z-index: 2; }
.about { z-index: 3; }
.watch { z-index: 4; }
.foot  { position: relative; z-index: 5; background: var(--bg); }

.section-head { max-width: 640px; margin: 0 auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

.h-glow {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.05;
  background: linear-gradient(100deg, var(--cyan), var(--magenta) 60%, var(--lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 45, 149, .25));
  margin-bottom: .5rem;
}

/* ── hero ──────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: 7rem 1rem 5rem;
  overflow: hidden;
}
.hero__inner {
  max-width: 840px; padding-inline: 1rem;
  display: grid; justify-items: center; gap: 0;
}
/* full channel lockup: TMF logo with RUS beneath */
.hero__lockup {
  display: grid; justify-items: center; gap: .3rem;
  filter: drop-shadow(0 0 34px rgba(0, 229, 255, .5));
}
.hero__rus {
  font-size: clamp(.9rem, 2.6vw, 1.25rem);
  font-weight: 300; letter-spacing: .95em; text-indent: .95em; /* optically centered */
  color: #fff; text-transform: uppercase;
}
.hero__onair {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .4em 1em; margin-bottom: 1.6rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .18em;
  color: var(--lime);
  border: 1px solid rgba(198, 255, 0, .4); border-radius: 999px;
  background: rgba(198, 255, 0, .06);
  text-transform: uppercase;
}
.hero__logo {
  width: min(70vw, 540px); height: auto;
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 50% { transform: translateY(-10px); } }
.hero__slogan {
  margin-top: 1.4rem; font-size: clamp(1.05rem, 3vw, 1.6rem);
  font-weight: 600; font-style: italic; color: #dfe3f2;
}
.hero__tags {
  margin-top: 1.4rem; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center;
}
.hero__tags span {
  padding: .4em 1em; border-radius: 999px; font-size: .85rem; font-weight: 700;
  border: 1px solid var(--edge); background: var(--card-bg); color: var(--cyan);
  letter-spacing: .03em;
}
.hero__tags span:nth-child(2) { color: var(--magenta); }
.hero__tags span:nth-child(3) { color: var(--lime); }
.hero__tags span:nth-child(4) { color: var(--magenta); }
.hero__tags span:nth-child(5) { color: var(--cyan); }
.hero__cta { margin-top: 2rem; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* animated chevron scroll cue (compact — doesn't collide with CTA) */
.hero__scroll {
  position: absolute; bottom: 3.6rem; left: 50%; translate: -50% 0;
  display: grid; justify-items: center; padding: .35rem;
  z-index: 2; opacity: .85;
}
.hero__scroll i {
  width: 15px; height: 15px; margin-top: -8px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  border-radius: 1px;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, .6));
  animation: chevron 1.6s ease-in-out infinite;
}
.hero__scroll i:nth-child(2) { animation-delay: .18s; }
@keyframes chevron {
  0%   { opacity: 0; transform: rotate(45deg) translate(-5px, -5px); }
  45%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(45deg) translate(5px, 5px); }
}

/* ── marquee ticker ────────────────────────────────────── */
.ticker {
  position: absolute; bottom: 0; inset-inline: 0;
  overflow: hidden; padding: .7rem 0;
  border-block: 1px solid var(--edge);
  background: rgba(6, 6, 12, .55); backdrop-filter: blur(6px);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; flex-wrap: nowrap; width: max-content;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
.ticker__half {
  flex: 0 0 auto; white-space: nowrap;
  font-weight: 800; font-size: .95rem; letter-spacing: .12em;
  color: var(--cyan); text-transform: uppercase;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
/* two identical halves, shift by exactly one half → seamless loop */
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── on-air card ───────────────────────────────────────── */
.onair-card {
  max-width: 980px; margin: 1.2rem auto 0;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.4rem; border-radius: 14px;
  background: linear-gradient(100deg, rgba(0, 229, 255, .1), rgba(255, 45, 149, .08));
  border: 1px solid var(--edge);
}
.onair-card__badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.onair-card__title {
  font-size: clamp(1.2rem, 4vw, 1.9rem); font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(100deg, var(--cyan), var(--lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-inline-end: auto;
}

/* ── player ────────────────────────────────────────────── */
.player-shell { max-width: 980px; margin: 0 auto; }
.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--edge);
  background: #000;
  box-shadow: 0 30px 80px -30px rgba(0, 229, 255, .35), 0 0 0 1px rgba(255, 45, 149, .12);
}
.player-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(0, 229, 255, .12), transparent 40%, rgba(255, 45, 149, .12));
  mix-blend-mode: screen;
}
.plyr { height: 100%; }
.plyr__video-wrapper, .plyr video { height: 100%; }
:root {
  --plyr-color-main: #ff2d95;
  --plyr-video-control-color: #f4f4fb;
}

/* splash loader over player */
.player-splash {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.player-splash[data-state="ready"] { opacity: 0; visibility: hidden; pointer-events: none; }
.player-splash__vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .55; filter: blur(1px) saturate(1.3);
}
.player-splash__glass {
  position: relative; z-index: 1; text-align: center;
  padding: 1.6rem 2rem; border-radius: 16px;
  background: rgba(10, 10, 15, .5); backdrop-filter: blur(8px);
  border: 1px solid var(--edge);
}
.player-splash__msg { margin-top: .9rem; color: var(--muted); font-weight: 600; }
.player-splash[data-state="error"] .player-splash__msg { color: var(--magenta); }
#tuneBtn { margin-top: 1rem; }

/* equalizer bars */
.eq { display: inline-flex; gap: 5px; align-items: flex-end; height: 42px; }
.eq i {
  width: 6px; height: 100%; border-radius: 3px;
  background: linear-gradient(var(--cyan), var(--magenta));
  transform-origin: bottom; animation: eq 1s ease-in-out infinite;
}
.eq i:nth-child(2) { animation-delay: -.8s; }
.eq i:nth-child(3) { animation-delay: -.5s; }
.eq i:nth-child(4) { animation-delay: -.3s; }
.eq i:nth-child(5) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.eq--sm { height: 24px; gap: 3px; }
.eq--sm i { width: 4px; }

/* floating unmute pill (only when autostart went muted) — quiet white outline */
.unmute-pill {
  position: absolute; z-index: 5; right: 14px; bottom: 64px;
  padding: .55em 1.3em; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-weight: 300; font-size: .9rem;
  letter-spacing: .05em; color: #fff;
  background: rgba(10, 10, 15, .35); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .8);
  animation: pillpop .4s var(--ease) both;
  transition: background .25s var(--ease);
}
.unmute-pill:hover { background: rgba(255, 255, 255, .14); }
@keyframes pillpop { from { opacity: 0; transform: translateY(8px) scale(.9); } }

.player-note { margin-top: 1rem; text-align: center; color: var(--muted); font-size: .92rem; }
.player-note a { color: var(--cyan); border-bottom: 1px dashed currentColor; }

/* ── about lead ────────────────────────────────────────── */
.about__lead {
  max-width: 760px; margin: 0 auto clamp(2rem, 5vw, 3rem);
  text-align: center; font-size: clamp(1.02rem, 2.3vw, 1.2rem);
  line-height: 1.75; color: #cfd3e6;
}

/* ── cards (about) ─────────────────────────────────────── */
.cards {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
  padding: 2rem 1.7rem; border-radius: 16px;
  background: var(--card-bg); border: 1px solid var(--edge);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); border-color: var(--cyan); box-shadow: 0 20px 50px -25px var(--cyan); }
.card__ico { font-size: 2.2rem; margin-bottom: .6rem; }
.card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.card p { color: var(--muted); }
.about__credo {
  max-width: var(--maxw); margin: 2.8rem auto 0; text-align: center;
  font-size: clamp(1.2rem, 3.5vw, 1.9rem); font-weight: 800; font-style: italic;
  background: linear-gradient(100deg, var(--lime), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── watch grid ────────────────────────────────────────── */
.watch-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.wcard {
  padding: 2rem 1.7rem; border-radius: 16px;
  background: var(--card-bg); border: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: .7rem;
  transition: transform .3s var(--ease), border-color .3s;
}
.wcard:hover { transform: translateY(-4px); border-color: var(--magenta); }
.wcard h3 { font-size: 1.2rem; }
.wcard p { color: var(--muted); flex-grow: 1; }
.wcard .btn, .wcard .socials { margin-top: auto; }
.socials { display: flex; gap: .7rem; }
.social {
  --brand: var(--cyan);
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em .9em; border-radius: 12px;
  border: 1px solid var(--edge); background: var(--card-bg);
  font-weight: 700; font-size: .9rem;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s;
}
.social img { width: 26px; height: 26px; }
.social--vk { --brand: #0077FF; }
.social--ok { --brand: #FF7700; }
.social:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  box-shadow: 0 10px 28px -10px var(--brand), 0 0 18px -6px var(--brand);
}

/* ── footer ────────────────────────────────────────────── */
.foot {
  text-align: center; padding: 3rem 1rem;
  border-top: 1px solid var(--edge);
  display: grid; gap: .5rem; place-items: center;
}
.foot img { filter: drop-shadow(var(--glow-cyan)); opacity: .9; }
.foot p { color: var(--muted); font-style: italic; }
.foot__copy { font-style: normal; font-size: .85rem; opacity: .7; }

/* ── toast ─────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 2rem; translate: -50% 20px;
  padding: .8em 1.4em; border-radius: 999px;
  background: linear-gradient(120deg, var(--cyan), var(--magenta));
  color: #06060a; font-weight: 800;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .3s, translate .3s var(--ease);
}
.toast.show { opacity: 1; translate: -50% 0; }

/* ── scroll reveal ─────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { --d: 1; }
.reveal[data-delay="2"] { --d: 2; }
.reveal[data-delay="3"] { --d: 3; }

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 620px) {
  .nav__links { display: none; }
}

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .fx-blob, .fx-rays, .fx-scan, .fx-noise, .ticker__track, .hero__logo,
  .hero__scroll i, .btn--anim::before { animation: none; }
}