/* ============ Phantom — HARUN-style minimalism (по мотивам raik) ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

:root {
  --ink:   #f2f2f4;
  --ink-2: #b7b7bd;
  --ink-3: #6a6a70;
  --line:  #1b1b1e;
  --line-2:#2a2a2f;
  --black: #050506;
  --panel: #0c0c0e;
  --accent:#ffffff;
  --pad-x: 60px;
  --pad-y: 40px;
}

body {
  background: var(--black);
  color: var(--ink);
  font-family: "Helvetica Neue", "Arial", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::selection { background: #fff; color: #000; }

/* Background — анимированный, вместо mp4 */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #050506; }
.bg .anim {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 30% at 25% 30%, #2a2a30, transparent 60%),
    radial-gradient(45% 35% at 80% 70%, #1c1c22, transparent 60%),
    radial-gradient(35% 40% at 60% 20%, #24242a, transparent 55%),
    linear-gradient(160deg, #0a0a0c, #050506);
  filter: grayscale(1) contrast(1.05) brightness(.8);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: scale(1.05) translate(0, 0); }
  50%  { transform: scale(1.15) translate(-2%, -2%); }
  100% { transform: scale(1.08) translate(2%, 1%); }
}
.bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.4) 100%);
}
.bg-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .12; mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 1px, transparent 1px 3px);
}

/* Screen scaffold */
.screen {
  min-height: 100vh;
  padding: var(--pad-y) var(--pad-x) 30px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
}
.screen + .screen { border-top: 1px solid var(--line); }
.s-hero    { background: transparent; }
.s-track,
.s-reels,
.s-about,
.s-contact { background: rgba(6,6,8,.6); backdrop-filter: blur(3px); }

/* Top bar */
.top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.mark {
  display: inline-flex; gap: 2px;
  font-weight: 900; font-size: 22px; color: var(--ink);
  padding: 2px 4px; border: 1px solid var(--ink); line-height: 1;
}
.mark span { display: inline-block; padding: 4px 2px; }
.topnav { display: flex; gap: 26px; flex-wrap: wrap; }
.topnav a { font-size: 11px; letter-spacing: .28em; color: var(--ink-2); padding: 6px 0; position: relative; transition: color .15s; }
.topnav a:hover, .topnav a.active { color: var(--ink); }
.topnav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--ink); }

/* Bottom bar */
.bot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; color: var(--ink-3); }
.bot .socials { display: flex; gap: 8px; }
.socials a {
  width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-2); transition: border-color .15s, color .15s;
}
.socials a:hover { border-color: var(--ink); color: var(--ink); }
.scroll-cue { justify-self: center; }
.scroll-cue a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .3em; color: var(--ink-2);
  padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 20px;
  transition: color .15s, border-color .15s;
}
.scroll-cue a:hover { color: var(--ink); border-color: var(--ink); }
.pageno { justify-self: end; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 11px; letter-spacing: .1em; color: var(--ink-2); }
.pageno span { color: var(--ink-3); }

/* HERO */
.hero-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0 4px; }
.i-am { font-size: 10px; letter-spacing: .5em; color: var(--ink-2); text-transform: uppercase; }
.wordmark {
  font-weight: 900; font-size: clamp(48px, 14vw, 200px); line-height: .95; margin: 0;
  letter-spacing: -.03em; color: var(--ink); text-transform: lowercase; word-break: break-word; max-width: 100%;
}
.subline { font-size: 11px; letter-spacing: .3em; color: var(--ink-2); text-transform: uppercase; }

/* TRACK / featured player */
.track-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 60px; align-items: center; }
.lbl { font-size: 10px; letter-spacing: .4em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 20px; }
.track-caption h2 { font-weight: 900; font-size: clamp(24px, 4vw, 52px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 20px; text-transform: uppercase; }
.track-caption h2 em { display: block; margin-top: 10px; font-style: normal; font-weight: 400; font-size: .5em; letter-spacing: .02em; color: var(--ink-2); text-transform: none; }
.track-copy { color: var(--ink-2); font-size: 13px; margin: 0 0 26px; max-width: 45ch; }
.chapters { border-top: 1px solid var(--line-2); margin: 0 0 26px; }
.ch { display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; transition: color .12s; }
.ch b { font-family: ui-monospace, monospace; font-weight: 400; color: var(--ink-3); font-size: 11px; }
.ch span { color: var(--ink-2); }
.ch:hover span, .ch:hover b, .ch.playing b, .ch.playing span { color: var(--ink); }
.ch.playing { background: rgba(255,255,255,.03); }
.track-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  font-size: 11px; letter-spacing: .3em; color: var(--ink);
  border: 1px solid var(--ink); background: transparent;
  transition: background .15s, color .15s; text-transform: uppercase; white-space: nowrap; min-height: 44px;
}
.btn:hover { background: var(--ink); color: var(--black); }
.btn.play-cta { background: var(--ink); color: var(--black); }
.btn.play-cta:hover { background: transparent; color: var(--ink); }
.btn.ghost { border-color: var(--line-2); color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--black); }
.btn.ghost.on { background: var(--ink); color: var(--black); border-color: var(--ink); }

.track-player { min-width: 0; }
.player-frame { aspect-ratio: 9 / 16; max-height: 70vh; margin: 0 auto; border: 1px solid var(--line-2); background: #000; overflow: hidden; position: relative; }
.player-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.track-strip { display: flex; justify-content: space-between; gap: 10px; padding: 10px 4px 0; color: var(--ink-3); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; flex-wrap: wrap; }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { padding: 6px 12px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 20px; cursor: pointer; user-select: none; transition: color .12s, border-color .12s; min-height: 32px; display: inline-flex; align-items: center; }
.tag:hover { color: var(--ink); border-color: var(--ink); }
.tag.on { color: var(--black); background: var(--ink); border-color: var(--ink); }

/* REELS — 3 примера */
.reels-mid { display: flex; flex-direction: column; justify-content: center; }
.reels-head { margin-bottom: 30px; }
.reels-head h2 { font-weight: 900; font-size: clamp(24px, 4vw, 48px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 10px; text-transform: uppercase; }
.reels-head p { color: var(--ink-2); font-size: 13px; max-width: 60ch; margin: 0; }
.reels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .reels-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reels-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }
.reel { border: 1px solid var(--line-2); background: rgba(0,0,0,.35); }
.reel .rthumb { position: relative; aspect-ratio: 9/16; overflow: hidden; background: #0a0a0c; }
.reel .rthumb .rfake {
  position: absolute; inset: 0; filter: grayscale(1) contrast(1.05) brightness(.85);
  background:
    radial-gradient(60% 40% at 40% 25%, #3a3a42, transparent 60%),
    radial-gradient(60% 50% at 75% 80%, #22222a, transparent 55%),
    linear-gradient(160deg, #16161a, #08080a);
}
.reel .rthumb .rsub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #cfcfd4, #7a7a80 60%, #3a3a40);
  box-shadow: 0 0 30px #00000088;
}
.reel .rthumb .rbadge { position: absolute; top: 10px; left: 10px; z-index: 2; background: #000a; color: var(--ink); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; padding: 3px 8px; }
.reel .rthumb .rplay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.reel .rthumb .rplay i { width: 50px; height: 50px; border-radius: 50%; background: #000000aa; border: 1px solid #ffffff44; display: grid; place-items: center; color: var(--ink); transition: transform .15s, background .15s, color .15s; }
.reel:hover .rthumb .rplay i { transform: scale(1.08); background: var(--ink); color: var(--black); }
.reel .rbody { padding: 16px; }
.reel .rbody h3 { font-size: 13px; font-weight: 700; margin: 0 0 3px; text-transform: none; letter-spacing: 0; }
.reel .rbody .rhandle { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); margin-bottom: 14px; }
.reel .rstats { display: flex; gap: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.reel .rstats .n { font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.reel .rstats .l { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.reel .rbody p { color: var(--ink-2); font-size: 12px; margin: 12px 0 0; }
.reel .rgrowth { display: inline-block; margin-top: 10px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink); border: 1px solid var(--line-2); padding: 3px 8px; }

/* ABOUT */
.about-mid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.about-copy h2 { font-weight: 900; font-size: clamp(26px, 4.5vw, 60px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 22px; text-transform: lowercase; }
.about-copy p { color: var(--ink-2); font-size: 13.5px; max-width: 55ch; margin: 0 0 14px; }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 24px; border: 1px solid var(--line-2); }
.stat b { display: block; font-weight: 900; font-size: clamp(28px, 3.5vw, 42px); line-height: 1; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
.stat span { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-3); }

/* CONTACT */
.contact-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.contact-l h2 { font-weight: 900; font-size: clamp(24px, 4vw, 52px); line-height: 1.02; letter-spacing: -.015em; margin: 0 0 22px; text-transform: lowercase; }
.contact-l p { color: var(--ink-2); font-size: 13px; margin: 0 0 24px; max-width: 40ch; }
.kv { border-top: 1px solid var(--line-2); display: flex; flex-direction: column; }
.kv-r { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); word-break: break-word; }
.kv-r b { font-weight: 400; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.kv-r span { color: var(--ink); font-size: 12px; }
.contact-r { padding: 30px; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; background: rgba(0,0,0,.4); }
.contact-r label > span { display: block; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.contact-r input, .contact-r textarea, .contact-r select { width: 100%; padding: 12px; background: transparent; border: 1px solid var(--line-2); color: var(--ink); outline: none; font-size: 16px; transition: border-color .15s; }
.contact-r select option { background: #0c0c0e; }
.contact-r input:focus, .contact-r textarea:focus, .contact-r select:focus { border-color: var(--ink); }
.contact-r input::placeholder, .contact-r textarea::placeholder { color: var(--ink-3); }
.contact-r textarea { resize: vertical; min-height: 100px; }
.contact-r button { align-self: flex-start; margin-top: 8px; }
.thanks { justify-self: center; font-size: 10px; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-2); }

/* Toast */
.toaster { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 6px; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { padding: 8px 14px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--black); background: var(--ink); animation: pop .2s ease; word-break: break-word; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: .25s; }

/* TABLET */
@media (max-width: 900px) {
  :root { --pad-x: 30px; --pad-y: 24px; }
  .track-mid, .about-mid, .contact-mid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .track-caption { order: 2; }
  .track-player  { order: 1; }
  .player-frame { max-height: 60vh; max-width: 320px; }
}

/* MOBILE */
@media (max-width: 640px) {
  :root { --pad-x: 18px; --pad-y: 18px; }
  .screen { min-height: 100svh; }
  .track-copy { font-size: 13px; margin-bottom: 18px; }
  .btn { padding: 12px 18px; font-size: 10px; letter-spacing: .22em; }
  .about-copy h2 { font-size: clamp(24px, 8vw, 40px); }
  .about-stats { grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
  .stat b { font-size: 28px; margin-bottom: 4px; }
  .kv-r { grid-template-columns: 90px 1fr; padding: 12px 0; }
  .contact-r { padding: 20px; }
  .bot { grid-template-columns: 1fr auto; align-items: center; gap: 12px; row-gap: 12px; }
  .scroll-cue { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .socials { grid-row: 2; }
  .pageno { grid-row: 2; }
  .thanks { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .toaster { right: 10px; bottom: 10px; left: 10px; }
  .toast { text-align: center; }
}
@media (max-width: 380px) {
  .topnav { gap: 10px; }
  .topnav a { font-size: 9px; letter-spacing: .14em; }
  .wordmark { font-size: clamp(38px, 22vw, 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .bg .anim { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ YouTube-эмбеды ============ */
.player-frame { position: relative; }
.player-frame img.ytposter,
.reel .rthumb img.ytposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.9); transition: filter .2s; }
.player-frame:hover img.ytposter,
.reel:hover .rthumb img.ytposter { filter: grayscale(0) contrast(1) brightness(1); }
.player-frame iframe,
.reel .rthumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.player-frame .ytplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: #000000aa; border: 1px solid #ffffff55; color: var(--ink);
  display: grid; place-items: center; z-index: 2; transition: transform .15s, background .15s, color .15s;
}
.player-frame:hover .ytplay { transform: translate(-50%,-50%) scale(1.08); background: var(--ink); color: var(--black); }
.reel .rthumb { cursor: pointer; }