/* Victor Mono Font — local fallback + Google CDN */
@import url('fonts/victor-mono.css');
@import url('https://fonts.googleapis.com/css2?family=Victor+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ══════════════════════════════════════════════════════════════
     КУРСОРЫ CATPPUCCIN (Catppuccin Latte Dark Cursors — 24px)
     ══════════════════════════════════════════════════════════════ */
  --cursor-default:   url('Catppuccin-Latte-Dark-Cursors/normal-select-24.png') 1 1, auto;
  --cursor-pointer:   url('Catppuccin-Latte-Dark-Cursors/link-select-24.png') 10 4, pointer;
  --cursor-text:      url('Catppuccin-Latte-Dark-Cursors/text-select-24.png') 11 11, text;
  --cursor-disabled:  url('Catppuccin-Latte-Dark-Cursors/unavailable-24.png') 2 2, not-allowed;
  --cursor-help:      url('Catppuccin-Latte-Dark-Cursors/help-select-24.png') 1 1, help;
  --cursor-move:      url('Catppuccin-Latte-Dark-Cursors/move-24.png') 11 11, move;

  /* ══════════════════════════════════════════════════════════════
     ПАРАМЕТРЫ ЭФФЕКТОВ (0 = выключить эффект)
     ══════════════════════════════════════════════════════════════ */
  /* 1. Кинескопные сканлайны (CRT Scanlines) */
  /* 1.1 Для мобильной версии: */
  --scanlines-opacity-mobile: 0.02;  /* Прозрачность полос (0 = выкл, 0.10 = тонко, 0.25 = ретро) */
  --scanlines-size-mobile: 3px;      /* Шаг полос (2px - 4px) */
  /* 1.2 Для ПК версии: */
  --scanlines-opacity-pc: 0.03;      /* Прозрачность полос на ПК */
  --scanlines-size-pc: 4px;          /* Шаг полос на ПК */

  /* Активные значения по умолчанию (мобильные) */
  --scanlines-opacity: var(--scanlines-opacity-mobile);
  --scanlines-size: var(--scanlines-size-mobile);

  /* 3. Хроматическая аберрация (RGB Split / Glitch) на заголовке PROGER.EXE */
  /* 3.1 Для мобильной версии: */
  --chromatic-offset-mobile: 1.1px;  /* Смещение спектра (0px = выкл, 1.5px = деликатно, 3px = глитч) */
  --chromatic-opacity-mobile: 0.45;  /* Насыщенность красного и голубого (0 = выкл, 0.45 = мягко, 1.0 = резко) */
  /* 3.2 Для ПК версии: */
  --chromatic-offset-pc: 1.8px;      /* Смещение спектра на ПК */
  --chromatic-opacity-pc: 0.45;      /* Насыщенность красного и голубого на ПК */

  /* Активные значения по умолчанию (мобильные) */
  --chromatic-offset: var(--chromatic-offset-mobile);
  --chromatic-opacity: var(--chromatic-opacity-mobile);

  /* ══════════════════════════════════════════════════════════════
     6. СВЕЧЕНИЕ ЛЮМИНОФОРА (PHOSPHOR GLOW / BLOOM)
     ══════════════════════════════════════════════════════════════ */
  /* 6.1 Главный заголовок PROGER.EXE */
  --bloom-title-intensity: 0.45;     /* Яркость зелёного неона заголовка */
  --bloom-title-radius: 10px;        /* Радиус рассеивания света заголовка */

  /* 6.2 Подзаголовок "РАЗРАБОТКА ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ" */
  --bloom-sub-intensity: 0.25;       /* Свечение подзаголовка */

  /* 6.3 Заголовок секции "интерактивные примеры наших продуктов:" */
  --bloom-section-intensity: 0.20;   /* Свечение названия секции */

  /* 6.4 Текст названий на кнопках (DELIVERY BOT, ONLINE BOOKING...) */
  --bloom-btn-text-intensity: 0.30;  /* Свечение названий на кнопках в покое */
  --bloom-btn-text-hover: 0.75;      /* Белое свечение названий при наведении/нажатии */

  /* 6.5 Рамки кнопок-карточек */
  --bloom-btn-border-idle: 0.10;     /* Свечение рамок в покое */
  --bloom-btn-border-hover: 0.50;    /* Белое свечение рамок при наведении/нажатии */

  /* 6.6 Картинки/фото внутри кнопок (3D силуэты) */
  --bloom-photo-intensity: 0.20;     /* Ореол силуэтов картинок в покое */
  --bloom-photo-hover: 0.85;         /* Свечение силуэта и бликов 3D-моделей при наведении */
  --bloom-photo-bg-hover: 0.10;      /* Рассеянный ореол свечения за картинкой при наведении */

  /* 6.7 Летающие облака */
  --bloom-clouds-intensity: 0.25;    /* Рассеянное свечение летающих облаков */

  /* ══════════════════════════════════════════════════════════════
     7. СПИРАЛЬ НА КНОПКАХ ПРИ НАВЕДЕНИИ (ПК) — images/eyesspiral.png
     ══════════════════════════════════════════════════════════════ */
  --eyesspiral-delay: 0.8s;            /* Задержка перед появлением спирали (курсор нужно удерживать это время) */
  --eyesspiral-fadein-duration: 5.0s;  /* Время нарастания непрозрачности до 100% после начала появления */
  --eyesspiral-fadeout-duration: 0.4s; /* Время плавного исчезновения при уходе курсора с кнопки */
  --eyesspiral-max-opacity: 1.0;       /* Максимальная непрозрачность (1.0 = 100%) */

  /* Скорость и плавное ускорение спирали против часовой стрелки: */
  --eyesspiral-speed-initial: 10s;     /* Начальная скорость вращения (время 1 оборота на старте) */
  --eyesspiral-speed-max: 1.5s;        /* Максимальная скорость после разгона (время 1 оборота на максимуме) */
  --eyesspiral-accel-duration: 7.0s;   /* Время разгона от начальной скорости до максимальной */

  --eyesspiral-size: 140%;             /* Размер картинки относительно кнопки (140% закрывает всю кнопку при вращении) */

  /* ══════════════════════════════════════════════════════════════
     8. ДОЖДЬ ИЗ СИМВОЛОВ МАТРИЦЫ ИЗ ОБЛАКОВ (ПК) — СКРОЛЛ КОЛЁСИКА ВНИЗ
     ══════════════════════════════════════════════════════════════ */
  --matrix-font-size: 16px;            /* Размер символов дождя */
  --matrix-scroll-delay: 0.7s;         /* Время непрерывного скролла для активации дождя (0s = сразу) */
  --matrix-color-head: #ffffffe2;        /* Цвет ведущего (верхнего) символа в потоке */
  --matrix-color-lead: #27f607bb;        /* Основной неоновый зелёный цвет верхних символов */
  --matrix-glow-head: 8px;             /* Свечение ведущего символа (0px = выкл, 8px = мягкий неон) */
  --matrix-fall-speed: 1.0;            /* Множитель скорости печати/падения (0.5 = медленнее, 1.0 = норма, 2.0 = быстрее) */
  --matrix-stream-length: 18;          /* Средняя длина хвоста символов (от 10 до 35) */
  --matrix-spawn-density: 0.1;         /* Плотность появления потоков при скролле (0.5 = реже, 2.0 = гуще) */
  --matrix-only-clouds: 1;             /* 1 = сыпаться строго из зон облаков, 0 = по всей ширине экрана */
  --matrix-mutation-rate: 0.12;        /* Частота случайной смены символов в потоке (мерцание шифра) */

  /* 8.1 Относительные зоны появления символов (в % от текущих размеров облаков) */
  /* Верхнее облако (справа): */
  --matrix-cloud-top-x-min: 18%;       /* 20% вправо от левого края облака */
  --matrix-cloud-top-x-max: 80%;       /* 80% вправо от левого края облака */
  --matrix-cloud-top-y-min: 65%;       /* 65% вниз от верхнего края облака */
  --matrix-cloud-top-y-max: 80%;       /* 80% вниз от верхнего края облака */

  /* Нижнее облако (слева): */
  --matrix-cloud-mid-x-min: 15%;       /* 15% вправо от левого края облака */
  --matrix-cloud-mid-x-max: 89%;       /* 85% вправо от левого края облака */
  --matrix-cloud-mid-y-min: 65%;       /* 65% вниз от верхнего края облака */
  --matrix-cloud-mid-y-max: 70%;       /* 70% вниз от верхнего края облака */

  /* ══════════════════════════════════════════════════════════════
     9. ДЛИТЕЛЬНОСТЬ АНИМАЦИИ ВЫЕЗДА ОБЛАКОВ
     ══════════════════════════════════════════════════════════════ */
  /* 9.1 Мобильная версия (замедленный плавный выезд): */
  --cloud-slide-duration-top-mobile: 4.0s;     /* Верхнее правое облако */
  --cloud-slide-duration-mid-mobile: 4.0s;     /* Среднее левое облако */
  --cloud-slide-duration-bottom-mobile: 3.7s;  /* Нижнее правое облако */

  /* 9.2 ПК версия: */
  --cloud-slide-duration-top-pc: 2.0s;         /* Верхнее облако на ПК */
  --cloud-slide-duration-mid-pc: 2.2s;         /* Среднее облако на ПК */

  /* Базовые цвета */
  --color-green: #26f607;
  --color-sub: #7c7c7c;
  --color-section-text: #a6a6a6;
  --color-btn-text: #ababab;
  --color-btn-border: rgba(215, 217, 216, 0.40);
  --color-btn-bg: rgba(0, 0, 0, 0.85);

  /* Мобильные параметры по умолчанию */
  --font-header: clamp(28px, 7.05vw, 85px);
  --font-sub: clamp(16px, 4.11vw, 55px); 
  --font-section: clamp(13px, 3.23vw, 39px);
  --font-button: clamp(18px, 4.56vw, 55px);

  --header-height: clamp(56px, 14vw, 170px);
  --subtitle-height: clamp(10px, 3.5vw, 88px);
  --fixed-bar-height: calc(var(--header-height) + var(--subtitle-height));

  --page-padding: clamp(16px, 9.04vw, 109px);
  --grid-gap: clamp(14px, 7.21vw, 87px);
  --btn-radius: clamp(8px, 1.24vw, 15px);
  --btn-padding: clamp(14px, 2.98vw, 36px);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background: #000;
  color: #fff;
  font-family: 'Victor Mono', monospace;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: var(--cursor-default);
}

/* ══════════════════════════════════════════════════════════════
   КУРСОРЫ НА ЭЛЕМЕНТАХ СТРАНИЦЫ
   ══════════════════════════════════════════════════════════════ */
a,
button,
[role="button"],
.button-card,
.button-card *,
input[type="button"],
input[type="submit"],
input[type="reset"],
select {
  cursor: var(--cursor-pointer) !important;
}

p, span, h1, h2, h3, h4, h5, h6, label {
  cursor: var(--cursor-text);
}

header,
main,
footer,
.site-container,
.site-header,
.site-subtitle-bar,
.clouds-layer,
.cloud,
.cloud-evade,
.scanlines-overlay,
.noise-overlay,
.blur-overlay {
  cursor: var(--cursor-default);
}

[disabled],
.disabled,
[aria-disabled="true"] {
  cursor: var(--cursor-disabled) !important;
}

/* ══════════════════════════════════════════════════════════════
   LOADING SCREEN — spiral rotates & fades out in screen blend mode
   ══════════════════════════════════════════════════════════════ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
  isolation: isolate;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.loading-screen.hide {
  opacity: 0;
  pointer-events: none;
}

.loading-spiral-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.loading-spiral {
  width: clamp(200px, 56vw, 520px);
  height: auto;
  display: block;
  mix-blend-mode: screen;
  /* Центр вращения по координатам пользователя: (391, 376) на изображении 765x765 */
  transform-origin: 51.1111% 49.1503%;
  animation: spinSpiral 2s linear infinite;
}

@keyframes spinSpiral {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Page wrapper ─────────────────────────────────────────── */
.page-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-container {
  width: 100%;
  max-width: 1206px;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════
   FIXED TOP HEADER
   ══════════════════════════════════════════════════════════════ */
.fixed-top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #000;
}

.site-header {
  position: relative;
  width: 100%;
  max-width: 1206px;
  height: var(--header-height);
  background: url('images/header_background.png') no-repeat top center / cover;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark overlay for mobile header */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1;
  pointer-events: none;
}

/* ── Prevent FOUT text jerk: hide text until fonts loaded ── */
.site-title,
.site-subtitle,
.section-title {
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.fonts-ready .site-title,
body.fonts-ready .site-subtitle,
body.fonts-ready .section-title {
  opacity: 1;
}

/* Title: green, vertically centered in header */
.site-title {
  position: relative;
  z-index: 2;
  font-size: var(--font-header);
  font-weight: 500;
  line-height: 1;
  color: var(--color-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: clamp(4px, 0.8vw, 10px);
  text-shadow:
    calc(var(--chromatic-offset) * -1) 0 rgba(255, 0, 60, var(--chromatic-opacity)),
    var(--chromatic-offset) 0 rgba(0, 240, 255, var(--chromatic-opacity)),
    0 0 var(--bloom-title-radius) rgba(38, 246, 7, var(--bloom-title-intensity)),
    0 0 calc(var(--bloom-title-radius) * 2) rgba(38, 246, 7, calc(var(--bloom-title-intensity) * 0.4));
}

/* Subtitle on Desktop (hidden on mobile) */
.desktop-subtitle {
  display: none;
}

/* Subtitle bar on Mobile */
.mobile-subtitle-bar {
  width: 100%;
  max-width: 1206px;
  height: var(--subtitle-height);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-subtitle-bar .site-subtitle {
  font-size: var(--font-sub);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-sub);
  text-transform: uppercase;
  letter-spacing: clamp(1px, 0.4vw, 4.5px);
  white-space: nowrap;
  width: 100%;
  text-align: center;
  margin: 0;
  text-shadow:
    0 0 10px rgba(160, 160, 160, var(--bloom-sub-intensity)),
    0 0 20px rgba(120, 120, 120, calc(var(--bloom-sub-intensity) * 0.4));
}

/* ══════════════════════════════════════════════════════════════
   MAIN SECTION (MOBILE DEFAULT)
   ══════════════════════════════════════════════════════════════ */
.site-main {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: calc(100vh - var(--fixed-bar-height));
  margin-top: var(--fixed-bar-height);
  background: url('images/background.jpg') no-repeat center top / cover;
  padding: 0 var(--page-padding) clamp(80px, 59.5vw, 718px);
  overflow: hidden;
}

/* Dark overlay: 0.76 opacity keeps background subtly visible */
.site-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  z-index: 0;
  pointer-events: none;
}

/* ── Clouds Layer ── screen blend mode (no isolation to allow blending with background) ── */
.clouds-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: visible;
  z-index: 1;
}

.cloud {
  position: absolute;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
.cloud::after {
  content: '';
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, calc(var(--bloom-clouds-intensity) * 0.35)) 0%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.cloud img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

/* ─── Cloud 1: Top Right — cloud_1.jpg ─── */
.cloud-top-right {
  top:   clamp(-40px, -2vw, 10px);
  right: clamp(-60px, -4vw, -15px);
  width: clamp(100px, 37.3vw, 438px);
}
body.loaded .cloud-top-right {
  animation: slideTopRight var(--cloud-slide-duration-top-mobile, 3.5s) cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes slideTopRight {
  from { opacity: 0; transform: translate(120px, -30px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* ─── Cloud 2: Mid Left — cloud_2.jpg ─── */
.cloud-mid-left {
  top:  clamp(100px, 43vw, 430px);
  left: clamp(-130px, -30vw, 0px);
  width: clamp(100px, 70vw, 660px);
}
body.loaded .cloud-mid-left {
  animation: slideMidLeft var(--cloud-slide-duration-mid-mobile, 4.0s) cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes slideMidLeft {
  from { opacity: 0; transform: translate(-130px, 0); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* ─── Cloud 3: Bottom Right — cloud_1.jpg mirrored horizontally ─── */
.cloud-bottom-right {
  top:   clamp(150px, 95vw, 700px);
  right: clamp(-200px, -30vw, 0px);
  width: clamp(100px, 70vw, 800px);
}
.cloud-bottom-right img {
  transform: scaleX(-1);
}
body.loaded .cloud-bottom-right {
  animation: slideBottomRight var(--cloud-slide-duration-bottom-mobile, 4.5s) cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes slideBottomRight {
  from { opacity: 0; transform: translate(120px, 40px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* ── Main content ──────────────────────────────────────────── */
.main-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: clamp(24px, 8.5vw, 130px);
}

.section-title {
  font-size: var(--font-section);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-section-text);
  text-transform: lowercase;
  margin-bottom: clamp(10px, 3.0vw, 41px);
  text-shadow:
    0 0 10px rgba(166, 166, 166, var(--bloom-section-intensity)),
    0 0 22px rgba(166, 166, 166, calc(var(--bloom-section-intensity) * 0.4));
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS GRID (MOBILE: 2x2)
   ══════════════════════════════════════════════════════════════ */
.buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  width: 100%;
}

.button-card {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background-color: var(--color-btn-bg);
  border-radius: var(--btn-radius);
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  text-decoration: none;
  display: block;
  outline: none;
  opacity: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 255, 255, var(--bloom-btn-border-idle));
  transition: transform .25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow .25s ease;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* Border overlay frame */
.button-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-btn-border);
  border-radius: var(--btn-radius);
  pointer-events: none;
  z-index: 5;
  transition: border-color .25s ease;
}

/* Simultaneous button fade-in */
body.loaded .button-card {
  animation: fadeBtn 0.7s ease-out forwards;
  animation-delay: 0s !important;
}
@keyframes fadeBtn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Desktop Hover: Card floats as one rigid unit without staggered text jumping */
@media (hover: hover) and (pointer: fine) {
  .button-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 255, 255, var(--bloom-btn-border-hover));
  }

  .button-card:hover::after {
    border-color: #ffffff;
  }

  .button-card:hover .card-photo {
    transform: scale(1.03);
    filter: brightness(calc(1 + var(--bloom-photo-hover) * 0.45))
            contrast(1.15)
            saturate(1.2)
            drop-shadow(0 0 16px rgba(255, 255, 255, var(--bloom-photo-hover)))
            drop-shadow(0 0 32px rgba(255, 255, 255, calc(var(--bloom-photo-hover) * 0.65)));
  }

  .button-card:hover .card-photo-wrapper::after {
    opacity: 1;
    transform: scale(1.05);
  }

  .button-card:hover .card-label {
    color: #ffffff;
    text-shadow:
      0 0 10px rgba(255, 255, 255, var(--bloom-btn-text-hover)),
      0 0 22px rgba(255, 255, 255, calc(var(--bloom-btn-text-hover) * 0.5));
  }
}

/* Click tactile pulse */
@keyframes buttonClickPulse {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  38% {
    transform: translate3d(0, 0, 0) scale(0.965);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.85), 0 0 26px rgba(255, 255, 255, var(--bloom-btn-border-hover));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 255, 255, var(--bloom-btn-border-idle));
  }
}

@keyframes borderClickPulse {
  0% {
    border-color: var(--color-btn-border);
  }
  38% {
    border-color: #ffffff;
  }
  100% {
    border-color: var(--color-btn-border);
  }
}

.button-card.is-clicked {
  animation: buttonClickPulse 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.button-card.is-clicked::after {
  animation: borderClickPulse 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.button-card:active {
  transform: translate3d(0, 0, 0) scale(0.97);
}

.button-card:active::after {
  border-color: #ffffff;
}

.button-card.is-clicked .card-photo,
.button-card:active .card-photo {
  filter: brightness(calc(1 + var(--bloom-photo-hover) * 0.45))
          contrast(1.15)
          saturate(1.2)
          drop-shadow(0 0 16px rgba(255, 255, 255, var(--bloom-photo-hover)))
          drop-shadow(0 0 32px rgba(255, 255, 255, calc(var(--bloom-photo-hover) * 0.65)));
}

.button-card.is-clicked .card-photo-wrapper::after,
.button-card:active .card-photo-wrapper::after {
  opacity: 1;
  transform: scale(1.05);
}

.button-card:focus {
  outline: none;
}

/* Photos wrapper */
.card-photo-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--btn-radius);
}

.card-photo-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center 60%, rgba(255, 255, 255, var(--bloom-photo-bg-hover)) 0%, rgba(255, 255, 255, calc(var(--bloom-photo-bg-hover) * 0.4)) 35%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  z-index: 2;
}
.card-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition: transform .25s cubic-bezier(0.2, 0, 0.2, 1), filter .25s ease;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, var(--bloom-photo-intensity)));
}

.card-label {
  position: relative;
  z-index: 10;
  display: block;
  font-size: var(--font-button);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-btn-text);
  padding-top: var(--btn-padding);
  pointer-events: none;
  word-break: break-word;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  transition: text-shadow .25s ease, color .25s ease;
  text-shadow:
    0 0 8px rgba(220, 220, 220, var(--bloom-btn-text-intensity)),
    0 0 18px rgba(180, 180, 180, calc(var(--bloom-btn-text-intensity) * 0.4));
}

.button-card.align-left  .card-label {
  text-align: left;
  padding-left: var(--btn-padding);
  padding-right: clamp(10px, 2vw, 24px);
}
.button-card.align-right .card-label {
  text-align: right;
  padding-right: var(--btn-padding);
  padding-left: clamp(10px, 2vw, 24px);
}

/* ══════════════════════════════════════════════════════════════
   ВЕРСИЯ ДЛЯ ПК (DESKTOP VERSION — min-width: 901px)
   Полное соответствие Desktop.png:
   - Хедер 114px с фоном PC_header_bg.png
   - PROGER.EXE слева, РАЗРАБОТКА ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ справа
   - Основной фон PC_bg.jpg с темным оверлеем
   - Заголовок секции в одну строку
   - 4 карточки в один горизонтальный ряд
   - 2 летающих облака по координатам Desktop.png
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  :root {
    --header-height: 114px;
    --fixed-bar-height: 114px;

    /* Эффект 1 (Сканлайны) и Эффект 3 (Хроматическая аберрация) для ПК */
    --scanlines-opacity: var(--scanlines-opacity-pc);
    --scanlines-size: var(--scanlines-size-pc);
    --chromatic-offset: var(--chromatic-offset-pc);
    --chromatic-opacity: var(--chromatic-opacity-pc);
  }

  /* 1. Header */
  .fixed-top-header {
    height: 114px;
    background: #000;
    align-items: stretch;
  }

  .site-header {
    width: 100%;
    max-width: 1920px;
    height: 114px;
    margin: 0 auto;
    background: url('images/PC_header_bg.png') no-repeat center top / cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: clamp(24px, 3.23vw, 62px);
    padding-right: clamp(24px, 3.23vw, 62px);
    box-sizing: border-box;
  }

  .site-title {
    font-size: clamp(32px, 2.5vw, 48px);
    margin-top: 0;
    flex-shrink: 0;
    letter-spacing: 0.06em;
  }

  .desktop-subtitle {
    display: block !important;
    font-size: clamp(20px, 2.25vw, 44px);
    font-weight: 400;
    line-height: 1;
    color: var(--color-sub);
    letter-spacing: clamp(1px, 0.28vw, 5.5px);
    white-space: nowrap;
    margin: 0 0 0 auto;
    margin-right: clamp(20px, 11.5vw, 221px);
    text-shadow:
      0 0 10px rgba(160, 160, 160, var(--bloom-sub-intensity)),
      0 0 20px rgba(120, 120, 120, calc(var(--bloom-sub-intensity) * 0.4));
  }

  .mobile-subtitle-bar {
    display: none !important;
  }

  /* 2. Main Area */
  .site-container {
    max-width: 1920px;
    margin: 0 auto;
  }

  .site-main {
    margin-top: 114px;
    min-height: calc(100vh - 114px);
    background: url('images/PC_bg.jpg') no-repeat center top / cover;
    padding: 0 clamp(24px, 3.02vw, 58px) 80px;
  }

  .site-main::before {
    background: rgba(0, 0, 0, 0.76);
  }

  .main-content {
    padding-top: clamp(20px, 2.8vw, 60px);
    max-width: 1920px;
  }

  /* 3. Section Title — одна строка */
  .section-title {
    font-size: clamp(14px, 1.05vw, 20px);
    letter-spacing: 0.08em;
    margin-bottom: clamp(14px, 1vw, 44px);
    white-space: nowrap;
  }

  .section-title br.br-mobile {
    display: none;
  }

  /* 4. Buttons Grid — 4 карточки в один ряд */
  .buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, clamp(160px, 12.4vw, 238px));
    gap: clamp(18px, 2.71vw, 52px);
    width: fit-content;
    max-width: 100%;
    transform: none !important;
  }

  .button-card {
    width: clamp(160px, 12.4vw, 238px);
    height: clamp(160px, 12.4vw, 238px);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 255, 255, 0.16);
  }

  .button-card::after {
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 14px;
  }

  .card-photo-wrapper {
    border-radius: 14px;
  }

  .card-label {
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.15;
    padding-top: clamp(12px, 0.94vw, 18px);
  }

  .button-card.align-left .card-label {
    padding-left: clamp(14px, 1.04vw, 20px);
    padding-right: 10px;
  }

  .button-card.align-right .card-label {
    padding-right: clamp(14px, 1.04vw, 20px);
    padding-left: 10px;
  }

  /* Спираль при наведении на кнопку (eyesspiral.png, Экран, вращение против часовой стрелки с ускорением) */
  .button-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--eyesspiral-size, 140%);
    height: var(--eyesspiral-size, 140%);
    background: url('images/eyesspiral.png') no-repeat center center / contain;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--eyesspiral-rot, 0deg));
    /* Мгновенный старт плавного исчезновения без задержки при уходе курсора */
    transition: opacity var(--eyesspiral-fadeout-duration, 0.4s) ease 0s;
  }

  .button-card:hover::before {
    opacity: var(--eyesspiral-max-opacity, 1.0);
    /* Задержка перед стартом появления + время нарастания до 100% непрозрачности */
    transition: opacity var(--eyesspiral-fadein-duration, 5.0s) ease var(--eyesspiral-delay, 0.8s);
  }

  /* 5. Clouds Desktop Layout & Animations (overlays header) */
  .clouds-layer {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    overflow: visible;
    z-index: 1050;
  }

  .cloud-top-right {
    top: clamp(20px, -0.2vw, 100px);
    right: clamp(-300px, -12vw, -130px);
    width: clamp(250px, 40vw, 1000px);
    display: block;
    z-index: 1050;
  }

  body.loaded .cloud-top-right {
    animation: slideTopRightPC var(--cloud-slide-duration-top-pc, 1.6s) cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes slideTopRightPC {
    from { opacity: 0; transform: translate(70px, -20px); }
    to   { opacity: 1; transform: translate(0, 0); }
  }

  .cloud-mid-left {
    top: clamp(260px, 16vw, 330px);
    left: clamp(-300px, -14vw, 0px);
    width: clamp(200px, 35vw, 800px);
    display: block;
    z-index: 1050;
  }
  body.loaded .cloud-mid-left {
    animation: slideMidLeftPC var(--cloud-slide-duration-mid-pc, 1.8s) cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes slideMidLeftPC {
    from { opacity: 0; transform: translate(-80px, 0); }
    to   { opacity: 1; transform: translate(0, 0); }
  }

  .cloud-bottom-right {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   CRT SCANLINES (Эффект 1)
   ══════════════════════════════════════════════════════════════ */
.scanlines-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99985;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) calc(var(--scanlines-size) / 2),
    rgba(0, 0, 0, var(--scanlines-opacity)) calc(var(--scanlines-size) / 2),
    rgba(0, 0, 0, var(--scanlines-opacity)) var(--scanlines-size)
  );
}

/* ══════════════════════════════════════════════════════════════
   NOISE & BLUR PIPELINE
   1. Noise is applied to the page content (mix-blend-mode: overlay keeps blacks pure #000)
   2. Blur is applied ON TOP of the noise + page result (Gaussian blur 0.3)
   ══════════════════════════════════════════════════════════════ */
.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 99990;
}

.blur-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99995;
  -webkit-backdrop-filter: blur(0.3px);
  backdrop-filter: blur(0.3px);
}

/* ══════════════════════════════════════════════════════════════
   MATRIX DIGITAL RAIN CANVAS
   ══════════════════════════════════════════════════════════════ */
.matrix-canvas {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1040;
  mix-blend-mode: screen;
}
@media (min-width: 901px) {
  .matrix-canvas {
    display: block;
  }
}