/* ============================================================
   С Днём Рождения, Антон — открытка от AI-команды
   dark holographic cyberpunk · одна тема, залочена
   ============================================================ */

:root{
  /* база */
  --bg:            #05060d;
  --bg-2:          #090b16;
  --ink:           #f2f3fb;   /* основной текст */
  --ink-soft:      #b7bad0;   /* приглушённый, но >4.5:1 на тёмном */
  --ink-mute:      #8b8fa8;
  --line:          rgba(255,255,255,.08);

  /* неоны команды */
  --magenta:       #ff2fb9;
  --green:         #22ff88;
  --blue:          #2f8bff;
  --amber:         #ff9d2f;
  --violet:        #a855ff;

  --maxw:          1180px;
  --radius:        22px;

  /* z-scale */
  --z-scene:  0;
  --z-confetti: 5;
  --z-content: 10;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope", system-ui, sans-serif;
  font-size:clamp(16px, 1vw + 14px, 18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

/* ============================================================
   ФОНОВАЯ СЦЕНА
   ============================================================ */
.scene{
  position:fixed; inset:0; z-index:var(--z-scene);
  pointer-events:none; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #0b1024 0%, var(--bg) 55%),
    var(--bg);
}

/* перспективная сетка «пола серверной» */
.scene__grid{
  position:absolute; inset:-2px 0 0 0;
  background-image:
    linear-gradient(to right, rgba(120,140,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,140,255,.10) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 30%, #000 20%, transparent 78%);
  opacity:.55;
}

/* неоновые пятна-«фигуры» */
.blob{
  position:absolute; border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  will-change:transform;
  animation:float 16s var(--ease) infinite alternate;
}
.blob--magenta{ width:42vw; height:42vw; left:-8vw; top:6vh;  background:radial-gradient(circle,rgba(255,47,185,.75),transparent 68%); animation-delay:-2s; }
.blob--green  { width:34vw; height:34vw; right:-6vw; top:2vh;  background:radial-gradient(circle,rgba(34,255,136,.55),transparent 68%); animation-delay:-6s; }
.blob--blue   { width:46vw; height:46vw; left:12vw; top:38vh;  background:radial-gradient(circle,rgba(47,139,255,.60),transparent 68%); animation-delay:-9s; }
.blob--violet { width:40vw; height:40vw; right:2vw; top:44vh;  background:radial-gradient(circle,rgba(168,85,255,.60),transparent 68%); animation-delay:-4s; }
.blob--amber  { width:26vw; height:26vw; left:40vw; top:20vh;  background:radial-gradient(circle,rgba(255,157,47,.42),transparent 68%); animation-delay:-12s; }

@keyframes float{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(3vw,-4vh,0) scale(1.12); }
}

/* мокрый пол — отражение */
.scene__floor{
  position:absolute; left:0; right:0; bottom:0; height:38vh;
  background:linear-gradient(to bottom, transparent, rgba(5,6,13,.6) 40%, var(--bg));
  backdrop-filter:blur(2px);
}

.scene__vignette{
  position:absolute; inset:0;
  background:radial-gradient(130% 120% at 50% 40%, transparent 55%, rgba(0,0,0,.72));
}

/* ============================================================
   CONFETTI
   ============================================================ */
#confetti{
  position:fixed; inset:0; z-index:var(--z-confetti);
  pointer-events:none;
}

/* ============================================================
   LAYOUT
   ============================================================ */
main{ position:relative; z-index:var(--z-content); }

section, .hero{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 40px);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding-block:clamp(80px, 12vh, 120px);
}

/* фон hero из assets/hero.jpg (если файла нет — слой пустой, работает CSS-сцена) */
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(180deg, rgba(5,6,13,.55) 0%, rgba(5,6,13,.72) 55%, var(--bg) 100%),
    radial-gradient(120% 90% at 50% 25%, transparent 40%, rgba(5,6,13,.6)),
    image-set(url("../assets/hero.jpg") 1x);
  background-size:cover; background-position:center;
  /* градиенты рисуются всегда; сама картинка появится, когда файл положат */
}

.hero__frame{ position:absolute; inset:clamp(20px,4vw,48px); pointer-events:none; }
.bracket{ position:absolute; width:34px; height:34px; opacity:.5;
  border:1.5px solid rgba(180,200,255,.4); }
.bracket--tl{ top:0; left:0; border-right:0; border-bottom:0; }
.bracket--tr{ top:0; right:0; border-left:0; border-bottom:0; }
.bracket--bl{ bottom:0; left:0; border-right:0; border-top:0; }
.bracket--br{ bottom:0; right:0; border-left:0; border-top:0; }

.hero__inner{ max-width:840px; }

.hero__eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute);
  margin:0 0 clamp(20px,4vh,34px);
}

.hero__title{
  font-family:"Unbounded", sans-serif;
  font-weight:800;
  font-size:clamp(2.6rem, 8.5vw, 5.6rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
.hero__title span{ display:block; }
.hero__title-accent{
  color:#fff;
  background:linear-gradient(92deg, var(--magenta), var(--violet) 45%, var(--blue));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  /* здесь градиент оправдан: это неоновая голограмма имени, а не декор-текст */
  text-shadow:0 0 42px rgba(168,85,255,.45);
  padding-bottom:.08em;
}

.hero__lead{
  margin:clamp(26px,5vh,40px) auto 0;
  max-width:52ch;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.4vw,1.18rem);
}
.hero__lead b{ color:var(--green); font-weight:700; }

.hero__cta{
  --c:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  margin-top:clamp(32px,6vh,46px);
  padding:.95em 1.7em;
  border-radius:100px;
  font-weight:600; font-size:1rem;
  color:#06070e; text-decoration:none;
  background:linear-gradient(180deg,#fff,#d9dcff);
  box-shadow:0 10px 40px rgba(120,140,255,.28), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hero__cta svg{ transition:transform .35s var(--ease); }
.hero__cta:hover{ transform:translateY(-3px); box-shadow:0 16px 52px rgba(120,140,255,.42); }
.hero__cta:hover svg{ transform:translateY(3px); }
.hero__cta:active{ transform:translateY(-1px); }

/* мягкий глитч на всём заголовке — RGB-раздвоение на миг */
.glitch{ position:relative; }
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  white-space:pre-line; text-align:center;
  opacity:0; pointer-events:none; z-index:-1;
  font-family:inherit; font-weight:inherit; font-size:inherit;
  line-height:inherit; letter-spacing:inherit;
}
.glitch.is-glitch::before{ opacity:.7; color:var(--magenta); transform:translate(-3px,1px); }
.glitch.is-glitch::after { opacity:.7; color:var(--blue);    transform:translate(3px,-1px); }

/* ============================================================
   ЗАГОЛОВКИ СЕКЦИЙ
   ============================================================ */
.section-title{
  font-family:"Unbounded", sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem, 4.6vw, 3.1rem);
  line-height:1.08; letter-spacing:-.03em;
  margin:0; text-wrap:balance;
}
.section-sub{
  margin:18px 0 0; max-width:46ch;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.3vw,1.12rem);
}

/* ============================================================
   КОМАНДА
   ============================================================ */
.team{ padding-block:clamp(60px,10vh,110px); }
.team__head{ margin-bottom:clamp(38px,6vh,60px); }

.team__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
/* Джесс-ведущая занимает всю ширину сверху */
.card--host{ grid-column:1 / -1; }

/* ---------- карточка-голограмма ---------- */
.card{
  position:relative;
  border-radius:var(--radius);
  padding:1px;                       /* рамка через фон */
  background:linear-gradient(150deg, color-mix(in srgb, var(--neon) 55%, transparent), rgba(255,255,255,.05) 40%, transparent 75%);
  isolation:isolate;
  transition:transform .5s var(--ease);
}
.card__body{
  position:relative; z-index:1;
  height:100%;
  border-radius:calc(var(--radius) - 1px);
  padding:clamp(22px,3vw,32px);
  background:linear-gradient(180deg, rgba(18,20,34,.82), rgba(9,11,20,.9));
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
/* неоновое подсвечивание — пульс */
.card__glow{
  position:absolute; z-index:0;
  width:60%; aspect-ratio:1; top:-30%; right:-14%;
  border-radius:50%;
  background:radial-gradient(circle, var(--neon), transparent 66%);
  filter:blur(48px); opacity:.34;
  animation:pulse 5.5s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.24; transform:scale(1); } 50%{ opacity:.46; transform:scale(1.14); } }

.card:hover{ transform:translateY(-8px); }
.card:hover .card__glow{ opacity:.6; }

/* аватар */
.card__avatar{
  position:relative;
  width:clamp(64px,7vw,84px); aspect-ratio:1;
  border-radius:50%;
  display:grid; place-items:center;
  margin-bottom:20px;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--neon) 42%, #10131f), #0a0c16 78%);
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--neon) 70%, transparent),
             0 0 28px color-mix(in srgb, var(--neon) 55%, transparent);
}
.card__avatar img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.card__avatar img.is-missing{ display:none; }              /* нет файла → показываем эмодзи */
.card__avatar img.is-missing + .card__emoji{ display:block; }
.card__emoji{
  position:absolute; font-size:clamp(1.8rem,3vw,2.3rem);
  line-height:1; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
/* когда картинка есть — эмодзи прячем */
.card__avatar:has(img:not(.is-missing)) .card__emoji{ display:none; }
/* фолбэк для браузеров без :has — эмодзи по умолчанию видна поверх пустой картинки; но
   если картинка грузится, она перекроет эмодзи визуально */

.card__id{ margin-bottom:16px; }
.card__name{
  font-family:"Unbounded", sans-serif; font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  margin:0; letter-spacing:-.02em;
  color:var(--neon-soft);
  text-shadow:0 0 24px color-mix(in srgb, var(--neon) 55%, transparent);
}
.card__role{
  margin:6px 0 0;
  font-family:"JetBrains Mono", monospace;
  font-size:.8rem; letter-spacing:.06em;
  color:var(--ink-mute);
}
.card__quote{
  margin:0;
  color:var(--ink);
  font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.62;
}

/* host-карточка: горизонтальная раскладка на широком */
.card--host .card__body{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "avatar id"
    "quote  quote";
  gap:8px 26px;
  align-items:center;
}
.card--host .card__avatar{ grid-area:avatar; margin-bottom:0;
  width:clamp(76px,8vw,104px); }
.card--host .card__id{ grid-area:id; margin-bottom:0; }
.card--host .card__quote{ grid-area:quote; margin-top:14px;
  font-size:clamp(1.05rem,1.6vw,1.32rem); max-width:60ch; }
.card--host .card__name{ font-size:clamp(1.5rem,3vw,2.1rem); }

/* ============================================================
   ФИНАЛ / ТОСТ
   ============================================================ */
.toast{ padding-block:clamp(70px,12vh,140px); }
.toast__inner{
  max-width:720px; margin-inline:auto; text-align:center;
}
.toast__title{
  font-family:"Unbounded", sans-serif; font-weight:700;
  font-size:clamp(1.7rem,4vw,2.6rem);
  letter-spacing:-.03em; margin:0; text-wrap:balance;
}
.toast__text{
  margin:24px auto 0; max-width:56ch;
  color:var(--ink-soft);
  font-size:clamp(1.05rem,1.4vw,1.2rem);
}
.toast__sign{
  display:inline-flex; align-items:center; gap:14px;
  margin:30px 0 0;
  font-family:"Unbounded",sans-serif; font-weight:500;
  color:var(--ink);
  font-size:1.05rem;
}
.toast__sign::before{
  content:""; width:34px; height:1.5px;
  background:linear-gradient(90deg, transparent, var(--violet));
}

.toast__terminal{
  margin:clamp(38px,6vh,56px) auto 0;
  max-width:560px;
  text-align:left;
  border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(14,16,28,.8), rgba(8,10,18,.9));
  backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.toast__terminal::before{
  content:""; display:block; height:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle 5px at 18px 17px, #ff5f57 100%, transparent 0),
                   radial-gradient(circle 5px at 38px 17px, #febc2e 100%, transparent 0),
                   radial-gradient(circle 5px at 58px 17px, #28c840 100%, transparent 0);
  background-repeat:no-repeat;
}
.toast__terminal pre{ margin:0; padding:18px 20px 22px; overflow-x:auto; }
.toast__terminal code{
  font-family:"JetBrains Mono", monospace;
  font-size:.82rem; line-height:1.85;
  color:var(--ink-soft); white-space:pre;
}
.c-dim{ color:var(--ink-mute); }
.c-hl { color:var(--green); }

/* ============================================================
   REVEAL — контент виден по умолчанию, анимация только поверх.
   Прячем начальное состояние ТОЛЬКО когда JS активен (класс .js).
   Без JS / при сбое / в headless — всё видно сразу.
   ============================================================ */
.reveal{ opacity:1; transform:none; }
.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:720px){
  .team__grid{ grid-template-columns:1fr; }
  .card--host .card__body{
    grid-template-columns:1fr;
    grid-template-areas:"avatar" "id" "quote";
    text-align:left; gap:14px 0;
  }
  .card--host .card__avatar{ margin-bottom:4px; }
  .hero__lead br{ display:none; }
}

@media (max-width:420px){
  .bracket{ width:24px; height:24px; }
}

/* ============================================================
   REDUCED MOTION — гасим всё тяжёлое
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .blob{ animation:none; }
  .card__glow{ animation:none; }
  *{ scroll-behavior:auto; }
  .reveal, .js .reveal{ opacity:1; transform:none; transition:none; }
  .hero__cta, .card{ transition:none; }
}

/* доступный фокус */
a:focus-visible{ outline:2px solid var(--violet); outline-offset:4px; border-radius:6px; }