/* =========================================================================
   FUNNY DICKS — общие стили
   Файл: css/style.css
   Содержит: переменные цветов, шрифты, сброс, базовую типографику.
   Используется на всех страницах.
   ========================================================================= */

/* ---- CSS-переменные: фирменные цвета из references/STYLE.md ---- */
:root {
  /* Фирменная четвёрка */
  --sky-blue:    #7EC8F0;  /* небесно-голубой (фоны, небо) */
  --blue:        #1E5FB4;  /* насыщенный синий (контраст) */
  --yellow:      #FFC400;  /* насыщенный жёлтый (акценты, солнце) */
  --red:         #D92626;  /* красный (важные элементы) */

  /* Дополнительные */
  --pink:        #FF6FAE;  /* тёплый розовый (баннеры) */
  --cream:       #F4E8D0;  /* кремовый (нейтральный) */
  --maroon:      #7A1E2B;  /* бордовый (театральные фоны) */
  --skin:        #F1C27D;  /* телесный (стволы и яйца шаров-пенисов) */

  /* Тёмные для текста */
  --ink:         #1a1a2e;  /* почти чёрный, но с синевой */

  /* Шрифты */
  --font-display: 'Lilita One', 'Arial Black', sans-serif;
  --font-body:    'Nunito', 'Segoe UI', sans-serif;
}

/* ---- Сброс (обнуляем стандартные отступы браузера) ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ---- Базовый body ---- */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sky-blue);
  overflow-x: hidden;       /* чтобы анимации не давали горизонтальный скролл */
  min-height: 100vh;
  line-height: 1.5;
}

/* ---- Типографика: заголовки всегда display-шрифтом ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;         /* Lilita One — уже жирная, вес не нужен */
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
}

h1 { font-size: clamp(3rem, 10vw, 8rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }

p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ---- Полоса прокрутки (мультяшная) ---- */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: var(--sky-blue);
}
::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 10px;
  border: 3px solid var(--sky-blue);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--yellow);
}

/* ---- Утилита: центрирование ---- */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Анимация конфетти (общая, используется на обеих страницах) ---- */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-20px) rotate(8deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ---- Звёзды-конфетти (общие для обеих страниц) ----
   Контейнер: <div class="confetti"> со звёздами <div class="star s1"> внутри.
   Размеры/позиции задаются через модификаторы .size-* и .s* ниже. */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;          /* поверх облаков (z-index:1) и шаров (z-index:2) */
}

/* ---- Край шатра цирка-шапито (общий для обеих страниц) ----
   Полосатая красно-жёлтая полоса с волнистыми «зубцами» (scallops) снизу.
   SVG растягивается на всю ширину, высота фиксированная. */
.tent-edge {
  position: fixed;        /* FIXED — висит вверху окна, не двигается при скролле */
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;          /* viewBox 1200×160: ~56px полосы + ~94px висюльки */
  z-index: 100;           /* выше контента, чтобы всегда был виден сверху */
  pointer-events: none;
}

.tent-edge svg {
  width: 100%;
  height: 100%;
  display: block;
  /* БЕЗ drop-shadow! Раньше тут была тень — при качании висюлек она
     просвечивала в зазорах между ними и выглядела чёрной полосой/стыком.
     Шатёр теперь «отделяется» от фона просто за счёт контраста цветов. */
  overflow: hidden;
}

/* 🚩 ВИСЮЛЬКИ-ВЫМПЕЛЫ (тряпочки шатра). Болтаются на ветру как бахрома.
   Полосы (rect) стоят неподвижно — это «карниз» шатра. Качаются только
   висюльки (path), каждая вокруг своей верхней точки (точки крепления).
   transform-box: fill-box → transform-origin считается по bounding box
   самой висюльки. 50% 0% = верхний центр висюльки. */
.tent-edge svg path {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: tent-sway 3.5s ease-in-out infinite;
}

/* 🔀 АСИНХРОН: каждая висюлька качается со СВОЕЙ скоростью и задержкой,
   поэтому они НИКОГДА не выстраиваются в видимую синхронную волну и выглядят
   как случайный ветер, а не как строй. Длительности — взаимно несоразмерные
   числа секунд (2.3 / 2.7 / 3.1 / 3.5 / 3.9 / 4.1 / 4.5 / 4.9 / 5.3 / 5.7),
   цикл повторяется редко → эффект хаоса, как от настоящего ветра. */
.tent-edge svg path:nth-of-type(1)  { animation-duration: 3.5s; animation-delay: 0.0s;  }
.tent-edge svg path:nth-of-type(2)  { animation-duration: 4.1s; animation-delay: 0.4s;  }
.tent-edge svg path:nth-of-type(3)  { animation-duration: 2.7s; animation-delay: 0.9s;  }
.tent-edge svg path:nth-of-type(4)  { animation-duration: 4.9s; animation-delay: 0.2s;  }
.tent-edge svg path:nth-of-type(5)  { animation-duration: 3.1s; animation-delay: 1.1s;  }
.tent-edge svg path:nth-of-type(6)  { animation-duration: 5.3s; animation-delay: 0.6s;  }
.tent-edge svg path:nth-of-type(7)  { animation-duration: 3.9s; animation-delay: 0.3s;  }
.tent-edge svg path:nth-of-type(8)  { animation-duration: 2.3s; animation-delay: 1.4s;  }
.tent-edge svg path:nth-of-type(9)  { animation-duration: 4.5s; animation-delay: 0.8s;  }
.tent-edge svg path:nth-of-type(10) { animation-duration: 5.7s; animation-delay: 0.1s;  }

/* Колыхание висюльки — ПЛАВНЫЙ маятник туда-обратно (как тряпка на ветру).
   Две опорные точки + ease-in-out → мягкое, без рывков. Асинхронность даёт
   не «рваность» кадра, а то, что у каждой висюльки своя длительность
   (см. :nth-of-type выше) → соседки качаются вразнобой, как от хаотичного ветра.
   Амплитуда зависит от ВЕТРА (CSS-переменная --wind): вверху страницы = 1
   (лёгкое покачивание, ±8°), при прокрутке JS поднимает до ~3.5 (размашисто).
   @property нужен, чтобы браузер ПЕРЕСЧИТЫВАЛ keyframes при изменении --wind. */
@property --wind {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@keyframes tent-sway {
  0%, 100% { transform: rotate(calc(-5deg * var(--wind))); }
  50%      { transform: rotate(calc( 5deg * var(--wind))); }
}

@media (max-width: 600px) {
  .tent-edge { height: 110px; }
}

/* ---- Воздушные шары (общие для обеих страниц) ----
   Контейнер: <div class="balloons"> со шарами <div class="balloon b1"> внутри.
   Цвет/позицию/скорость задаём модификаторами в hero.css и gallery.css.
   Форма: мультяшный силуэт пениса (головка + тело + мошонка + верёвочка). */
.balloons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;          /* поверх облаков (z-index:1), под звёздами (z-index:2) */
}

/* ---- Облака (общие для обеих страниц) ----
   Контейнер: <div class="clouds"> с облаками <div class="cloud c1"> внутри.
   Мультяшное белое облако: тело-эллипс + два кружка (::before/::after) сверху.
   Размеры заданы в em, поэтому меняя font-size на модификаторе (.c1, .c2...)
   масштабируем всё облако целиком — без конфликта с transform анимации.
   Облака плывут по небу ОЧЕНЬ медленно (контраст быстрым шарам). */
.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;          /* позади шаров и звёзд, над фоном неба */
  overflow: hidden;
}

.cloud {
  position: absolute;
  width: 6em;
  height: 2em;
  font-size: 26px;          /* базовый масштаб (переопределяется модификатором) */
  background: #fff;
  border-radius: 2em;
  opacity: 0.9;
  /* мягкая голубоватая тень снизу — облако «парит» над небом */
  filter: drop-shadow(0 6px 6px rgba(30, 95, 180, 0.10));
  animation: cloud-drift 70s linear infinite;
}

/* Левый бугорок облака */
.cloud::before {
  content: "";
  position: absolute;
  width: 2.4em;
  height: 2.4em;
  top: -1.2em;
  left: 0.8em;
  background: #fff;
  border-radius: 50%;
}

/* Правый бугорок облака (побольше) */
.cloud::after {
  content: "";
  position: absolute;
  width: 3.2em;
  height: 3.2em;
  top: -1.8em;
  right: 0.6em;
  background: #fff;
  border-radius: 50%;
}

/* Дрейф облака: медленно плывёт слева направо через весь экран.
   По пути слегка поднимается и опускается (±8px) — лёгкое покачивание.
   Один transform — поэтому конфликтов с другими анимациями нет. */
@keyframes cloud-drift {
  0%   { transform: translateX(-20vw) translateY(0); }
  25%  { transform: translateX(15vw)  translateY(-8px); }
  50%  { transform: translateX(50vw)  translateY(0); }
  75%  { transform: translateX(85vw)  translateY(6px); }
  100% { transform: translateX(120vw) translateY(0); }
}

/* Сам «шар»: мультяшный силуэт пениса.
   Форма задаётся через SVG-маску (встроена в CSS как data: URI) — настоящие
   эллипсы и круги, поэтому края идеально ОКРУГЛЫЕ (не угловатые, как у polygon):
   красная головка-«лопата» (вытянута вверх, ry > rx) → широкий ствол →
   два больших круглых яйца → хвостик-верёвочка.
   top:0 — вертикаль целиком управляется анимацией balloon-rise. */
.balloon {
  position: absolute;
  top: 0;
  width: 64px;
  height: 140px;
  /* Поток: шар поднимается снизу экрана и уходит за верхнюю границу.
     Покачивание влево/вправо задано прямо в keyframes balloon-rise. */
  animation: balloon-rise 12s linear infinite;
  /* SVG-маска силуэта пениса, встроенная прямо в CSS как data: URI.
     ВАЖНО: внешняя маска url(file.svg) НЕ работает при открытии страницы
     через file:// (двойной клик) — Chrome блокирует её по CORS, и шар
     становится невидимым. Inline data: URI решает проблему.
     Маска рисуется настоящими эллипсами/кругами → края округлые.
     preserveAspectRatio="none" + mask-size:100% 100% → форма тянется
     под любой width/height шара.
     Координаты (viewBox 0 0 100 240):
       - головка: эллипс rx=40 ry=50 → ВЫТЯНУТА ВВЕРХ как лопата (ry>rx),
         центрирована вверху;
       - ствол: rect x30..70 (ширина 40 — широкий), длинная колонна;
       - яйца: два круга r=30 (большие, размером с головку).
       (Верёвочка-хвостик убрана по просьбе Миши.) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 240' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='50' cy='50' rx='40' ry='50'/%3E%3Crect x='30' y='84' width='40' height='78'/%3E%3Ccircle cx='34' cy='184' r='30'/%3E%3Ccircle cx='66' cy='184' r='30'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 240' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='50' cy='50' rx='40' ry='50'/%3E%3Crect x='30' y='84' width='40' height='78'/%3E%3Ccircle cx='34' cy='184' r='30'/%3E%3Ccircle cx='66' cy='184' r='30'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* Слои фона (снизу вверх по z-порядку слоёв):
     1) СТВОЛ + ЯЙЦА — ТЕЛЕСНЫЙ цвет, одинаковый у всех шаров.
     2) КРАСНАЯ ГОЛОВКА — радиальный эллипс, повторяющий форму головки
        из маски (чтобы красный не «наезжал» на ствол).
     3) ВОЛОСЫ на яйцах — россыпь тёмных точек.
     4) БЛИКИ на головке — как у настоящего воздушного шара.
     ВАЖНО: первый слой в списке — самый ВЕРХНИЙ (рисуется поверх остальных).
     Поэтому блики и волосы стоят ПЕРВЫМИ, иначе красный их перекроет.
     (Корональная полоса на стыке головка↔ствол убрана по просьбе Миши.) */
  background-color: var(--skin);     /* телесный: ствол и яйца (одинаково у всех) */
  background-image:
    /* 4а) основной мягкий блик на головке (большой, как у шара) */
    radial-gradient(ellipse 26% 30% at 33% 15%, rgba(255,255,255,0.9), transparent 60%),
    /* 4б) маленький яркий блик-точка рядом (добавляет «глянца») */
    radial-gradient(circle 5px at 42% 11%, rgba(255,255,255,1), transparent 70%),
    /* 3) ВОЛОСЫ на яйцах: россыпь тёмных точек-завитков.
       Каждая точка — отдельный radial-gradient, расставленный вручную
       только по области яиц (нижняя часть шара, y ~68–86%).
       Левое яйцо (центр ~32% x), правое яйцо (центр ~68% x).
       Радиус 2px → тоненькие, как волоски. */
    radial-gradient(circle 2px at 22% 70%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 32% 68%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 42% 72%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 26% 80%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 38% 84%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 58% 72%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 68% 68%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 78% 70%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 62% 80%, rgba(50,25,8,0.8), transparent 60%),
    radial-gradient(circle 2px at 74% 84%, rgba(50,25,8,0.8), transparent 60%),
    /* 2) красная головка: РАДИАЛЬНЫЙ градиент-эллипс, повторяющий форму
       головки из маски (эллипс rx40%/ry20.8% по центру 50%/20.8%).
       Координаты взяты прямо из viewBox маски (100×240): cx=50, cy=50,
       rx=40, ry=50 → 50%, 20.8%, 40%, 20.8% от размера элемента.
       Так красный лежит СТРОГО по форме головки и НЕ наезжает на ствол
       (в отличие от простой горизонтальной заливки). */
    radial-gradient(ellipse 40% 20.8% at 50% 20.8%, var(--red) 96%, transparent 100%);
  /* no-repeat для всех слоёв: точки-волосы стоят точно там, где заданы. */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Анимация полёта шара: снизу вверх через весь экран.
   Старт за нижним краем (110vh), уход за верхний (-30vh).
   По пути шар покачивается влево/вправо и наклоняется — как на ветру. */
@keyframes balloon-rise {
  0%   { transform: translateY(110vh) translateX(0)    rotate(-3deg); }
  25%  { transform: translateY(80vh)  translateX(20px) rotate(2deg);  }
  50%  { transform: translateY(50vh)  translateX(-15px) rotate(-2deg); }
  75%  { transform: translateY(20vh)  translateX(15px)  rotate(3deg);  }
  100% { transform: translateY(-30vh) translateX(0)     rotate(-3deg); }
}

/* (Мошонка и верёвочка встроены прямо в SVG-маску выше —
   отдельные ::before / ::after больше не нужны.) */

.star {
  position: absolute;
  width: 0;
  height: 0;
  color: var(--yellow);
  animation: wiggle 3s ease-in-out infinite;
}

.star::before {
  content: "★";
  display: block;
  text-shadow: 2px 2px 0 var(--red);
}

/* Размеры звёзд — разные, чтобы было «пёстро» */
.star.size-xs { font-size: 16px; }
.star.size-s  { font-size: 22px; }
.star.size-m  { font-size: 30px; }
.star.size-l  { font-size: 40px; }
.star.size-xl { font-size: 54px; }

/* ---- Уважение к настройкам анимаций (для доступности) ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   ⬇⬇⬇  Раньше это были отдельные файлы: hero.css, gallery.css, bg-photos.css.
   Сейчас всё в одном style.css, чтобы SPA-роутер (который при переходе между
   страницами НЕ меняет <head>) гарантированно имел под рукой стили ОБЕИХ
   страниц. Раньше gallery.css подключался только в <head> gallery.html →
   при переходе через SPA он не грузился → галерея «ломалась» (без рамок,
   без эффектов, без полёта кнопки). Один общий CSS полностью это лечит.
   ========================================================================== */

/* ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ████  БЫЛО: css/bg-photos.css — фоновое слайдшоу (только на главной)  █████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████ */

/* Идея: ОДНО фото за раз полностью заливает экран. Оно медленно
   проявляется (fade-in), держится, потом затухает (fade-out) — и въезжает
   следующее. И так по кругу: фото 1 → 4 → 6 → 10 → 1 → ...

   Слои (снизу вверх): небо → .bg-photos (z-index:0) → облака(1) →
   шары(2) → звёзды(3) → контент(10). Фото — под всем остальным.

   НАСТРОЙКИ (по просьбе Миши):
     • По 5 секунд на каждое фото → цикл = 20 секунд.
     • Сильное киноподъезжание камеры (Ken Burns): scale 1.10 → 1.55.
     • ПЛАВНЫЙ перекрёстный переход (crossfade).

   КАК РАБОТАЕТ БЕЗ JS:
     • 4 фото лежат друг на друге (position:absolute, на весь экран).
     • У каждого своя анимация opacity (bg-crossfade) со сдвигом по фазе.
     • Дополнительно фото медленно "наезжает" камерой (bg-kenburns).

   Порядок: p1 (0-5с) → p4 (5-10с) → p6 (10-15с) → p10 (15-20с) → снова p1. */

/* ---- Контейнер: на весь экран, под облаками ---- */
.bg-photos {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* фото не мешают кликам */
  z-index: 0;             /* самый нижний слой (даже под облаками) */
  overflow: hidden;
}

/* ---- Слой одного фото: на весь экран ----
   opacity управляется анимацией bg-crossfade (появление/затухание). */
.bg-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: bg-crossfade 20s ease-in-out infinite;
}

/* Сама картинка: заливает ВЕСЬ экран (object-fit: cover), полупрозрачная.
   transform (масштаб + сдвиг) управляется отдельной анимацией bg-kenburns —
   поэтому с opacity родителя конфликтов нет. */
.bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* заливает весь экран, обрезая лишнее */
  opacity: 0.30;              /* полупрозрачность ~30% (согласовано с Мишей) */
  /* Мягкая атмосферная обработка: лёгкое размытие + насыщеннее */
  filter: blur(0.6px) saturate(1.15);
  animation: bg-kenburns 20s ease-in-out infinite;
  transform-origin: center center;
}

/* ---- ПЕРЕКРЁСТНЫЙ переход (crossfade), цикл 20с = 5с на фото ----
   Каждое фото "живёт" первые 30% цикла (0-6с), из них:
     0-10%  (0-2с) — плавно проявляется (fade-in)
     10-20% (2-4с) — держится на полной видимости
     20-30% (4-6с) — плавно затухает (fade-out)
     30-100%       — невидимо, ждёт своей очереди

   ФИШКА ПЛАВНОСТИ: следующее фото (delay 25%) начинает проявляться на 25%,
   а текущее ещё затухает до 30% → на отрезке 25-30% ОБО translucent →
   настоящий мягкий crossfade без чёрной паузы между фото. */
@keyframes bg-crossfade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- СИЛЬНОЕ киноподъезжание (Ken Burns) ----
   Пока фото видно (0-30% цикла), камера подъезжает: заметное увеличение
   scale 1.10 → 1.55 (+ почти полтора раза!) + сдвиг по диагонали.
   Дальше 30-100% держим финал (фото всё равно уже невидимо).
   Стартуем с scale 1.10, чтобы при сдвиге края не вылезли за экран. */
@keyframes bg-kenburns {
  0%   { transform: scale(1.10) translate(0, 0); }
  30%  { transform: scale(1.55) translate(-5%, -3.5%); }
  100% { transform: scale(1.55) translate(-5%, -3.5%); }
}

/* ---- Сдвиг по фазе: каждое фото въезжает в свой 5-секундный отрезок ---- */
.bg-photo.p1  { animation-delay: 0s;   }
.bg-photo.p4  { animation-delay: 5s;   }
.bg-photo.p6  { animation-delay: 10s;  }
.bg-photo.p10 { animation-delay: 15s;  }

/* Картинка подъезжает синхронно со своим слоем */
.bg-photo.p1  img { animation-delay: 0s;   }
.bg-photo.p4  img { animation-delay: 5s;   }
.bg-photo.p6  img { animation-delay: 10s;  }
.bg-photo.p10 img { animation-delay: 15s;  }

/* ---- Уважение к настройкам анимаций (доступность) ----
   Если пользователь попросил меньше движения — просто статично
   показываем первое фото. */
@media (prefers-reduced-motion: reduce) {
  .bg-photo { animation: none; }
  .bg-photo.p1  { opacity: 1; }
  .bg-photo img { animation: none; }
}

/* ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ████  БЫЛО: css/hero.css — стили афиши (страница 1, index.html)  █████████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████ */

/* ---- Сцена: на весь экран ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 196, 0, 0.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 111, 174, 0.30), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(217, 38, 38, 0.20), transparent 50%),
    var(--sky-blue);
}

/* (Старый плоский ::before удалён — теперь край шатра рисует SVG .tent-edge) */

/* ---- Воздушные шары (форма/анимация — в общем css/style.css) ----
   Здесь — только цвета, горизонтальные позиции и скорость каждого шара.
   У каждого свои animation-duration (скорость) и animation-delay:
   ОТРИЦАТЕЛЬНЫЕ задержки «перематывают» анимацию вперёд, чтобы при
   загрузке страницы шары уже висели на разных высотах, а не вылетали
   кучей снизу одновременно. */
/* Цвета (жёлтый/розовый/синий...) убраны: теперь ствол и яйца у ВСЕХ шаров
   одинаковые телесные (--skin), а головка красная. Здесь — только позиция
   по горизонтали, размер и скорость полёта. */
.balloon.b1  { left: 8%;   animation-duration: 12s; animation-delay: 0s;   }
.balloon.b2  { left: 6%;   animation-duration: 14s; animation-delay: -3s;  width: 85px; height: 180px; }
.balloon.b3  { right: 10%; animation-duration: 10s; animation-delay: -6s;  width: 60px; height: 125px; }
.balloon.b4  { right: 8%;  animation-duration: 16s; animation-delay: -9s;  width: 95px; height: 200px; }
.balloon.b5  { left: 45%;  animation-duration: 9s;  animation-delay: -2s;  width: 55px; height: 115px; }
.balloon.b6  { left: 40%;  animation-duration: 13s; animation-delay: -7s;  width: 50px; height: 105px; }
/* Новые шары b7–b12 — для большей плотности потока */
.balloon.b7  { left: 22%;  animation-duration: 11s; animation-delay: -1s;  width: 58px; height: 120px; }
.balloon.b8  { left: 68%;  animation-duration: 15s; animation-delay: -4s;  width: 78px; height: 165px; }
.balloon.b9  { left: 55%;  animation-duration: 10s; animation-delay: -8s;  width: 48px; height: 100px; }
.balloon.b10 { left: 33%;  animation-duration: 13s; animation-delay: -5s;  width: 66px; height: 140px; }
.balloon.b11 { left: 78%;  animation-duration: 9s;  animation-delay: -10s; width: 52px; height: 110px; }
.balloon.b12 { left: 15%;  animation-duration: 14s; animation-delay: -11s; width: 62px; height: 130px; }

/* ---- Облака на главной ----
   Каждое облако: своя высота (top), размер (font-size) и скорость
   дрейфа (animation-duration). ОТРИЦАТЕЛЬНЫЕ задержки, чтобы при
   загрузке облака уже были на разных позициях по горизонтали, а не
   выстраивались в кучу слева. */
.cloud.c1 { top: 12%;  font-size: 24px; animation-duration: 75s; animation-delay: 0s;   }
.cloud.c2 { top: 28%;  font-size: 34px; animation-duration: 90s; animation-delay: -25s; }
.cloud.c3 { top: 8%;   font-size: 20px; animation-duration: 60s; animation-delay: -45s; }
.cloud.c4 { top: 45%;  font-size: 30px; animation-duration: 85s; animation-delay: -10s; }
.cloud.c5 { top: 20%;  font-size: 26px; animation-duration: 70s; animation-delay: -55s; }

/* Позиции звёзд на главной (размеры заданы через .size-* в style.css) */
.star.s1  { top: 20%; left: 18%;  animation-delay: 0s;   }
.star.s2  { top: 30%; right: 22%; animation-delay: 0.5s; }
.star.s3  { bottom: 25%; left: 30%; animation-delay: 1s;   }
.star.s4  { bottom: 30%; right: 18%; animation-delay: 1.5s; }
.star.s5  { top: 50%; left: 5%;   animation-delay: 2s;   }
.star.s6  { top: 18%; right: 6%;  animation-delay: 2.5s; }
.star.s7  { top: 70%; left: 12%;  animation-delay: 0.8s; }
.star.s8  { top: 10%; left: 50%;  animation-delay: 1.3s; }
.star.s9  { bottom: 12%; right: 35%; animation-delay: 1.8s; }
.star.s10 { top: 42%; right: 8%;  animation-delay: 0.3s; }
.star.s11 { bottom: 8%; left: 48%; animation-delay: 2.2s; }
.star.s12 { top: 60%; right: 45%; animation-delay: 1.1s; }
.star.s13 { top: 5%; left: 30%;   animation-delay: 1.6s; }
.star.s14 { bottom: 18%; right: 8%; animation-delay: 0.6s; }
.star.s15 { top: 38%; left: 38%;  animation-delay: 0.4s; }
.star.s16 { top: 75%; left: 25%;  animation-delay: 1.9s; }
.star.s17 { top: 8%; left: 60%;   animation-delay: 2.1s; }
.star.s18 { top: 55%; right: 28%; animation-delay: 0.7s; }
.star.s19 { top: 85%; right: 22%; animation-delay: 1.4s; }
.star.s20 { top: 28%; left: 12%;  animation-delay: 2.4s; }

/* ---- Центральный блок: заголовок + кнопка ---- */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1200px;          /* увеличено, чтобы FUNNY DICKS не переносилось */
  width: 100%;
}

/* Маленькая плашка-приглашение сверху над заголовком.
   Внутри — текст WELCOME TO и медальон-поросёнок слева от текста. */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  padding: 8px 24px 8px 8px;   /* слева меньше отступа — там медальон */
  border-radius: 50px;
  margin-bottom: 20px;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--ink);
  letter-spacing: 2px;
}

/* Медальон с поросёнком — круглый стикер на плашке.
   Вращается на 360° бесконечно (мультяшный волчок). */
.pig-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--yellow);
  box-shadow: 0 3px 0 var(--ink);
  flex-shrink: 0;
  animation: pig-spin 3s linear infinite;
}

@keyframes pig-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pig-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* На мобильных делаем медальон чуть меньше */
@media (max-width: 600px) {
  .pig-badge { width: 42px; height: 42px; border-width: 3px; }
}

/* ---- Огромный заголовок FUNNY DICKS ----
   Уменьшен макс. размер + white-space: nowrap чтобы НЕ переносилось.
   Каждая буква разноцветная (цвета заданы ниже через nth-child). */
.hero-title {
  font-size: clamp(2.8rem, 11vw, 7.5rem);   /* было 14vw/11rem — слишком крупно */
  color: var(--cream);                       /* базовый (для пробела) */
  white-space: nowrap;                        /* ЗАПРЕЩАЕМ ПЕРЕНОС */
  letter-spacing: 2px;
  line-height: 0.95;
  margin-bottom: 150px;                       /* отступ до кнопки «В ГАЛЕРЕЮ» (было 10px) */
  /* Тёмная обводка букв для читаемости (мультяшный контур) */
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  /* Цветная тень для объёма */
  text-shadow: 5px 5px 0 var(--blue);
}

/* Каждая буква в отдельном span для GSAP stagger-анимации + цвета */
.hero-title .char {
  display: inline-block;
}

/* Отступ между словами FUNNY и DICKS (через пробел-разделитель) */
.hero-title .space {
  display: inline-block;
  width: 0.4em;
}

/* «Буква» I — картинка пениса вместо буквы.
   Размер подгоняем под высоту букв, делаем узким, чтобы не разрывать слово.
   vertical-align держит картинку на базовой линии текста.
   Отрицательные margin пододвигают соседние буквы (D и C) ближе. */
.hero-title .letter-img {
  display: inline-block;
  height: 0.95em;           /* почти во всю высоту букв */
  width: auto;
  vertical-align: -0.12em;  /* лёгкий сдвиг вниз, чтобы «стояла» на линии */
  margin: 0 -0.1em;         /* отрицательный — буквы подтягиваются ближе */
  filter: drop-shadow(4px 4px 0 var(--blue)); /* тень как у букв */
  animation: wiggle 3.5s ease-in-out infinite;
  transform-origin: center bottom;
}

/* РАЗНОЦВЕТНЫЕ БУКВЫ. Цвета из палитры STYLE.md, яркие/читаемые на голубом.
   Порядок: F U N N Y | D I C K S */
.hero-title .char:nth-child(1)  { color: var(--yellow); }  /* F */
.hero-title .char:nth-child(2)  { color: var(--red);    }  /* U */
.hero-title .char:nth-child(3)  { color: var(--pink);   }  /* N */
.hero-title .char:nth-child(4)  { color: var(--cream);  }  /* N */
.hero-title .char:nth-child(5)  { color: var(--yellow); }  /* Y */
/* 6-й — .space (пробел), пропускаем */
.hero-title .char:nth-child(7)  { color: var(--red);    }  /* D */
.hero-title .char:nth-child(8)  { color: var(--pink);   }  /* I */
.hero-title .char:nth-child(9)  { color: var(--cream);  }  /* C */
.hero-title .char:nth-child(10) { color: var(--yellow); }  /* K */
.hero-title .char:nth-child(11) { color: var(--red);    }  /* S */

/* ---- Подзаголовок ---- */
.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  color: var(--blue);
  margin-top: 25px;
  margin-bottom: 40px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--cream);
  -webkit-text-stroke: 1px var(--ink);
  paint-order: stroke fill;
}

/* ---- Кнопка-вход ---- */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  padding: 20px 45px;
  border-radius: 60px;
  border: 5px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink), 0 12px 20px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
  letter-spacing: 2px;
  animation: cta-pulse 2s ease-in-out infinite;
}

.hero-cta:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 0 var(--ink), 0 16px 30px rgba(0,0,0,0.3);
}

.hero-cta:active {
  transform: translateY(4px) scale(1);
  box-shadow: 0 4px 0 var(--ink);
}

.hero-cta .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.hero-cta:hover .arrow {
  transform: translateX(8px);
}

/* Дыхание кнопки */
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ---- Анимация полёта кнопки при клике ----
   Сценарий по просьбе Миши: при клике кнопка
     1) отбегает ВЛЕВО («замахивается»),
     2) ДОЛГО и ПЛАВНО тормозит по инерции до полной остановки
        (как мяч, докатывающийся до края — никакой резкой стены),
     3) РЕЗКО разгоняется ВПРАВО и улетает за экран.

   ГЛАВНЫЙ СЕКРЕТ ПЛАВНОСТИ: animation-timing-function задаётся ОТДЕЛЬНО
   для каждого сегмента прямо в keyframes:
     • разгон (0→24%):   ease-in — набирает скорость
     • торможение (24→48%): ОЧЕНЬ мягкий ease-out (cubic-bezier с «длинным
       хвостом») — кнопка быстро въезжает в торможение и потом ДОЛГО
       докатывается до нуля. Это убирает «удар в стену».
     • почти-стоп (48→58%): плавное оседание
     • полёт (58→100%): резкий разгон

   Фаза торможения занимает ~24% длительности (~240мс при 1.0s) — это в 4
   раза дольше прежнего, так что плавность реально видна глазом. */
@keyframes cta-fly-away {
  0% {
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.4); /* ease-in: разгон */
  }
  /* 0–24%: разгон влево — набирает скорость */
  24% {
    transform: translateX(-55px) scale(0.96) rotate(-3deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0.85, 0.15, 1); /* ОЧЕНЬ мягкий ease-out */
  }
  /* 24–48%: ДОЛГОЕ ПЛАВНОЕ ТОРМОЖЕНИЕ — докатывается по инерции до края */
  48% {
    transform: translateX(-85px) scale(0.93) rotate(-5deg);
    opacity: 1;
    animation-timing-function: ease-in-out; /* мягкое оседание обратно */
  }
  /* 48–58%: почти-остановка, пружина сжалась, готовится к рывку */
  58% {
    transform: translateX(-74px) scale(1.07) rotate(-1deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.3); /* резкий старт полёта */
  }
  /* 58–100%: резкий разгон вправо и полёт за экран */
  100% {
    transform: translateX(130vw) scale(0.7) rotate(25deg);
    opacity: 0;
  }
}

/* Класс вешается JS-ом при клике. Пока летит — дыхание отключаем.
   Timing-function задаётся внутри keyframes (по сегментам), поэтому здесь
   не указываем. */
.hero-cta.flying {
  animation: cta-fly-away 1s forwards;
  pointer-events: none;   /* чтобы не нажать повторно во время полёта */
}

/* ---- Анимация ПРИЛЁТА кнопки «В ГАЛЕРЕЮ» на главную (справа → налево на место) ----
   Сценарий: мы вернулись из галереи (кнопка «НАЗАД» улетела ВЛЕВО за экран).
   Здесь «В ГАЛЕРЕЮ» продолжает движение влево — вылетает СПРАВА за экраном и
   мягко тормозит на своём месте. Ощущение: кнопка «пробила» границу страниц.

   Зеркало back-btn-fly-in ниже (из бывшего gallery.css). */
@keyframes cta-fly-in {
  0% {
    transform: translateX(130vw) scale(0.7) rotate(25deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); /* разгон снаружи */
  }
  /* 0–55%: быстрый въезд в кадр СПРАВА — кнопка летит влево */
  55% {
    transform: translateX(-20px) scale(1.06) rotate(-4deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0.85, 0.15, 1); /* мягкое торможение */
  }
  /* 55–80%: пружинит чуть дальше места и докатывается обратно */
  80% {
    transform: translateX(6px) scale(0.98) rotate(2deg);
    opacity: 1;
    animation-timing-function: ease-in-out; /* оседание */
  }
  100% {
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Класс вешается JS-ом при прилёте (после возврата из галереи). */
.hero-cta.arriving {
  animation: cta-fly-in 1.1s forwards;
  pointer-events: none;   /* пока летит — не кликабельна */
}

/* ---- Низ страницы: мелкая подпись ----
   Разноцветная (каждая буква в span.char, цвет чередуется по кругу:
   жёлтый / красный / розовый / кремовый — по 4 цвета из палитры STYLE.md).
   Чтобы буквы читались на голубом фоне — добавляем тёмную обводку. */
.hero-footer {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 0.6px var(--ink);
  paint-order: stroke fill;
}

.hero-footer .char {
  display: inline-block;
}
/* Чередуем 4 цвета по кругу */
.hero-footer .char:nth-child(4n+1) { color: var(--yellow); }
.hero-footer .char:nth-child(4n+2) { color: var(--red);    }
.hero-footer .char:nth-child(4n+3) { color: var(--pink);   }
.hero-footer .char:nth-child(4n+4) { color: var(--cream);  }

/* ---- Адаптив: на мобильных делаем шары меньше ----
   ВАЖНО: масштабируем контейнер .balloons целиком, а не отдельные .balloon.
   Если бы масштабировали каждый шар через transform: scale(), анимация
   balloon-rise (тоже использующая transform) перезаписала бы масштаб. */
@media (max-width: 600px) {
  .balloons { transform: scale(0.7); transform-origin: center top; }
  .hero-title {
    font-size: clamp(2rem, 13vw, 4rem);   /* на узких экранах ещё меньше */
    -webkit-text-stroke: 1.5px var(--ink);
  }
  .hero-footer { font-size: 0.7rem; letter-spacing: 1px; }
}

/* ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ████  БЫЛО: css/gallery.css — стили галереи (страница 2)  ████████████████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████ */

.gallery-page {
  position: relative;          /* чтобы звёзды позиционировались относительно страницы */
  min-height: 100vh;
  padding: 0 20px 60px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 196, 0, 0.20), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(255, 111, 174, 0.25), transparent 35%),
    var(--sky-blue);
}

/* Контейнер звёзд в галерее — по всей высоте страницы, за карточками */
.gallery-page .confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* ---- Воздушные шары в галерее ----
   Контейнер FIXED: галерея — длинная прокручиваемая страница, поэтому
   привязываем поток к ОКНУ браузера, а не к высоте документа. Тогда
   шары всегда летят в видимой области, как живой фон при любом скролле.
   z-index:0 — под карточками (у .gallery-grid выше), но над фоном. */
.gallery-page .balloons {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---- Облака в галерее ----
   Тоже FIXED по той же причине (длинная страница). z-index:1 — позади
   шаров (z-index:2), но над фоном неба. overflow:hidden обрежет облака
   по краям окна, чтобы не появлялся горизонтальный скролл. */
.gallery-page .clouds {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Позиции/скорость облаков галереи (префикс gc). */
.cloud.gc1 { top: 14%;  font-size: 24px; animation-duration: 80s; animation-delay: 0s;   }
.cloud.gc2 { top: 32%;  font-size: 32px; animation-duration: 95s; animation-delay: -30s; }
.cloud.gc3 { top: 8%;   font-size: 20px; animation-duration: 65s; animation-delay: -50s; }
.cloud.gc4 { top: 50%;  font-size: 28px; animation-duration: 85s; animation-delay: -15s; }

/* Позиции и скорость шаров галереи (префикс gb).
   Цвета убраны — ствол/яйца у всех телесные, головка красная (как на главной). */
.balloon.gb1  { left: 5%;   animation-duration: 12s; animation-delay: 0s;   }
.balloon.gb2  { left: 18%;  animation-duration: 14s; animation-delay: -4s;  width: 80px; height: 170px; }
.balloon.gb3  { right: 12%; animation-duration: 10s; animation-delay: -7s;  width: 60px; height: 125px; }
.balloon.gb4  { right: 5%;  animation-duration: 16s; animation-delay: -2s;  width: 90px; height: 190px; }
.balloon.gb5  { left: 48%;  animation-duration: 9s;  animation-delay: -5s;  width: 55px; height: 115px; }
.balloon.gb6  { left: 38%;  animation-duration: 13s; animation-delay: -9s;  width: 50px; height: 105px; }
.balloon.gb7  { left: 28%;  animation-duration: 11s; animation-delay: -1s;  width: 58px; height: 120px; }
.balloon.gb8  { left: 65%;  animation-duration: 15s; animation-delay: -6s;  width: 72px; height: 152px; }
.balloon.gb9  { left: 80%;  animation-duration: 10s; animation-delay: -10s; width: 48px; height: 100px; }
.balloon.gb10 { left: 12%;  animation-duration: 13s; animation-delay: -8s;  width: 64px; height: 135px; }

/* ---- Контейнер лого галереи (прокручивается вместе со страницей) ----
   Простой блок-заголовок: не sticky, не fixed — едет со скроллом.
   Текст: THE FUNNY DICKS GALLERY. */
.gallery-logo-wrap {
  position: relative;
  z-index: 10;            /* выше шаров/звёзд фона, но под модалкой */
  text-align: center;
  margin-top: 120px;      /* ниже шатра (шатёр fixed 110px + зазор) */
  margin-bottom: 40px;
  padding: 0 20px;
}

.gallery-logo {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--cream);
  white-space: nowrap;
  letter-spacing: 2px;
  line-height: 1;
  /* Тёмная обводка как у заголовка главной */
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--blue);
}

/* РАЗНОЦВЕТНЫЕ БУКВЫ в "THE FUNNY DICKS GALLERY".
   Нумерация детей (включая пробелы .space):
     1:T 2:H 3:E | 4:space | 5:F 6:U 7:N 8:N 9:Y | 10:space |
     11:D 12:img(I) 13:C 14:K 15:S | 16:space | 17:G 18:A 19:L 20:L 21:E 22:R 23:Y
   Палитру берём из STYLE.md: жёлтый/красный/розовый/кремовый. */
/* THE (1-3) — кремовые, помельче (как вступление) */
.gallery-logo .char:nth-child(1)  { color: var(--cream);  }  /* T */
.gallery-logo .char:nth-child(2)  { color: var(--pink);   }  /* H */
.gallery-logo .char:nth-child(3)  { color: var(--cream);  }  /* E */
/* FUNNY (5-9) — яркие */
.gallery-logo .char:nth-child(5)  { color: var(--yellow); }  /* F */
.gallery-logo .char:nth-child(6)  { color: var(--red);    }  /* U */
.gallery-logo .char:nth-child(7)  { color: var(--pink);   }  /* N */
.gallery-logo .char:nth-child(8)  { color: var(--cream);  }  /* N */
.gallery-logo .char:nth-child(9)  { color: var(--yellow); }  /* Y */
/* DICKS (11,13-15) — яркие (12 — картинка I) */
.gallery-logo .char:nth-child(11) { color: var(--red);    }  /* D */
.gallery-logo .char:nth-child(13) { color: var(--cream);  }  /* C */
.gallery-logo .char:nth-child(14) { color: var(--yellow); }  /* K */
.gallery-logo .char:nth-child(15) { color: var(--red);    }  /* S */
/* GALLERY (17-23) — кремовые/розовые, помельче (как уточнение) */
.gallery-logo .char:nth-child(17) { color: var(--pink);   }  /* G */
.gallery-logo .char:nth-child(18) { color: var(--cream);  }  /* A */
.gallery-logo .char:nth-child(19) { color: var(--yellow); }  /* L */
.gallery-logo .char:nth-child(20) { color: var(--pink);   }  /* L */
.gallery-logo .char:nth-child(21) { color: var(--cream);  }  /* E */
.gallery-logo .char:nth-child(22) { color: var(--yellow); }  /* R */
.gallery-logo .char:nth-child(23) { color: var(--pink);   }  /* Y */

/* Буквы THE и GALLERY — чуть мельче и полегче, чтобы FUNNY DICKS
   оставалось главным акцентом в строке. */
.gallery-logo .char.small {
  font-size: 0.62em;
  opacity: 0.9;
}

/* «Буква» I — картинка-пенис в логотипе (та же картинка, меньше) */
.gallery-logo .letter-img {
  display: inline-block;
  height: 0.95em;
  width: auto;
  vertical-align: -0.12em;
  margin: 0 -0.1em;
  filter: drop-shadow(3px 3px 0 var(--blue));
  animation: wiggle 3.5s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Пробел между словами в логотипе */
.gallery-logo .space {
  display: inline-block;
  width: 0.4em;
}

/* ---- Кнопка НАЗАД: ФИКСИРОВАННАЯ, всегда на виду при любом скролле ----
   position: fixed — висит в ПРАВОМ верхнем углу окна, под шатром,
   и НЕ двигается при прокрутке. Так её можно нажать из любого места галереи.
   z-index: 60 — выше карточек (10) и лого, но ниже модалки (1000) и шатра (100).
   top: 174px — шатёр 150px (со висюльками) + зазор 24px, чтобы не заезжать. */
.back-btn {
  position: fixed;
  top: 174px;            /* под шатром (шатёр 150px + зазор 24px) */
  right: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  padding: 12px 24px;
  border-radius: 50px;
  border: 4px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  letter-spacing: 1px;
}

.back-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--ink);
  background: var(--yellow);
  color: var(--ink);
}

.back-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}

.back-btn .arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

.back-btn:hover .arrow {
  transform: translateX(-5px);
}

/* ---- Анимация полёта кнопки «НАЗАД» при клике (зеркало «В ГАЛЕРЕЮ») ----
   Сценарий по просьбе Миши: при клике кнопка
     1) отбегает ВПРАВО («замахивается»),
     2) ДОЛГО и ПЛАВНО тормозит по инерции (мяч у края),
     3) РЕЗКО разгоняется ВЛЕВО и улетает за экран.

   ПЛАВНОСТЬ: timing-function задаётся по сегментам прямо в keyframes
   (разгон / долгое мягкое торможение / оседание / резкий полёт).
   Зеркало анимации .hero-cta.flying выше (из бывшего hero.css). */
@keyframes back-btn-fly-away {
  0% {
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.4); /* ease-in: разгон */
  }
  /* 0–24%: разгон вправо */
  24% {
    transform: translateX(55px) scale(0.96) rotate(3deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0.85, 0.15, 1); /* ОЧЕНЬ мягкий ease-out */
  }
  /* 24–48%: ДОЛГОЕ ПЛАВНОЕ ТОРМОЖЕНИЕ по инерции */
  48% {
    transform: translateX(85px) scale(0.93) rotate(5deg);
    opacity: 1;
    animation-timing-function: ease-in-out; /* мягкое оседание обратно */
  }
  /* 48–58%: почти-остановка, пружина сжата */
  58% {
    transform: translateX(74px) scale(1.07) rotate(1deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.3); /* резкий старт полёта */
  }
  /* 58–100%: резкий разгон влево и полёт за экран */
  100% {
    transform: translateX(-130vw) scale(0.7) rotate(-25deg);
    opacity: 0;
  }
}

/* Класс вешается JS-ом при клике. Timing-function — внутри keyframes. */
.back-btn.flying {
  animation: back-btn-fly-away 1s forwards;
  pointer-events: none;   /* чтобы не нажать повторно во время полёта */
}

/* ---- Анимация ПРИЛЁТА кнопки «НАЗАД» в галерею (слева → направо на место) ----
   Сценарий: мы пришли из главной (кнопка «В ГАЛЕРЕЮ» улетела ВПРАВО за экран).
   Здесь «НАЗАД» продолжает движение вправо — вылетает СЛЕВА за экраном и
   мягко тормозит на своём месте. Ощущение: кнопка «пробила» границу страниц.

   Timing-function по сегментам:
     • разгон снаружи (0→55%): быстрый въезд в кадр
     • мягкое торможение (55→80%): докатывается по инерции, чуть пружинит
     • оседание (80→100%): встаёт на место */
@keyframes back-btn-fly-in {
  0% {
    transform: translateX(-130vw) scale(0.7) rotate(-25deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); /* разгон снаружи */
  }
  /* 0–55%: быстрый въезд в кадр СЛЕВА — кнопка летит вправо */
  55% {
    transform: translateX(20px) scale(1.06) rotate(4deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0, 0.85, 0.15, 1); /* мягкое торможение */
  }
  /* 55–80%: пружинит чуть дальше места и докатывается обратно */
  80% {
    transform: translateX(-6px) scale(0.98) rotate(-2deg);
    opacity: 1;
    animation-timing-function: ease-in-out; /* оседание */
  }
  100% {
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Класс вешается JS-ом при прилёте (после перехода из главной).
   Дыхание (если было) перебивается animation-shorthand. После окончания
   JS снимет класс — тогда вернутся обычные hover/active. */
.back-btn.arriving {
  animation: back-btn-fly-in 1.1s forwards;
  pointer-events: none;   /* пока летит — не кликабельна */
}

/* ---- Заголовок-описание секции ---- */
.gallery-intro {
  position: relative;        /* над потоком шаров (z-index ниже .balloons) */
  z-index: 10;
  text-align: center;
  margin-bottom: 40px;
}

.gallery-intro h2 {
  color: var(--blue);
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-shadow: 3px 3px 0 var(--cream);
  margin-bottom: 10px;
  -webkit-text-stroke: 1px var(--ink);
  paint-order: stroke fill;
}

.gallery-intro p {
  font-family: var(--font-display);
  color: var(--red);
  letter-spacing: 2px;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  -webkit-text-stroke: 0.5px var(--ink);
  paint-order: stroke fill;
}

/* ---- Звёзды на странице галереи ----
   Раскиданы по всей высоте страницы (в % от высоты документа),
   а не только сверху — галерея длинная, звёзды должны идти вдоль неё. */
.star.gs1  { top: 8%;   left: 8%;   animation-delay: 0s;   }
.star.gs2  { top: 14%;  right: 12%; animation-delay: 0.5s; }
.star.gs3  { top: 22%;  left: 45%;  animation-delay: 1s;   }
.star.gs4  { top: 28%;  left: 25%;  animation-delay: 1.5s; }
.star.gs5  { top: 35%;  right: 35%; animation-delay: 2s;   }
.star.gs6  { top: 12%;  right: 5%;  animation-delay: 2.5s; }
.star.gs7  { top: 42%;  left: 5%;   animation-delay: 0.8s; }
.star.gs8  { top: 18%;  left: 65%;  animation-delay: 1.3s; }
.star.gs9  { top: 50%;  right: 8%;  animation-delay: 1.7s; }
.star.gs10 { top: 58%;  left: 30%;  animation-delay: 0.3s; }
.star.gs11 { top: 65%;  right: 40%; animation-delay: 2.2s; }
.star.gs12 { top: 72%;  left: 12%;  animation-delay: 1.1s; }
.star.gs13 { top: 80%;  right: 20%; animation-delay: 0.6s; }
.star.gs14 { top: 88%;  left: 50%;  animation-delay: 1.9s; }
.star.gs15 { top: 92%;  right: 5%;  animation-delay: 1.4s; }
.star.gs16 { top: 96%;  left: 70%;  animation-delay: 2.8s; }

/* ---- Сетка галереи ---- */
.gallery-grid {
  position: relative;        /* над потоком шаров */
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Карточка ---- */
.card {
  position: relative;
  background: #fff;
  border: 5px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--ink), 0 10px 20px rgba(0,0,0,0.15);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  /* стартовое состояние для GSAP-анимации появления */
  opacity: 0;
}

.card:nth-child(4n+1) { background: var(--yellow); }
.card:nth-child(4n+2) { background: var(--pink); }
.card:nth-child(4n+3) { background: var(--red); }
.card:nth-child(4n+4) { background: var(--blue); }

.card:hover {
  transform: translateY(-12px) rotate(-2deg) scale(1.03);
  box-shadow: 0 14px 0 var(--ink), 0 20px 35px rgba(0,0,0,0.25);
  z-index: 10;
}

.card-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover img {
  transform: scale(1.08);
}

/* Подпись снизу карточки */
.card-label {
  font-family: var(--font-display);
  text-align: center;
  padding: 10px 8px;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: 1px;
  border-top: 4px solid var(--ink);
}

/* ---- Модальное окно (lightbox) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  background: #fff;
  border: 6px solid var(--yellow);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 0 0 6px var(--ink), 0 30px 60px rgba(0,0,0,0.5);
  transform: scale(0.5);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox.open .lightbox-content {
  transform: scale(1);
}

.lightbox-content img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  display: block;
}

.lightbox-caption {
  font-family: var(--font-display);
  text-align: center;
  padding-top: 12px;
  color: var(--ink);
  letter-spacing: 1px;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.lightbox-close {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: 4px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.15s ease, background 0.15s ease;
}

.lightbox-close:hover {
  background: var(--yellow);
  color: var(--ink);
  transform: rotate(90deg) scale(1.1);
}

/* ---- Адаптив галереи ---- */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  .card-label { font-size: 0.85rem; padding: 8px 4px; }
  .lightbox-close { top: -15px; right: -10px; width: 45px; height: 45px; }
}

/* ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ████  МОБИЛЬНЫЕ ФИКСЫ (8 июля 2026)  ██████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████
   ██████████████████████████████████████████████████████████████████████████

   Список багов, которые тут лечатся (симптомы с телефона):
   1) Галерея НЕ прокручивается / клики по карточкам НЕ работают /
      музыка НЕ запускается. Причина: фоновые слои (.balloons, .clouds)
      position: fixed; inset:0 на тач-экранах «съедают» касания, несмотря на
      pointer-events:none. На десктопе всё ок (мышь «пробивает» none), на мобе — нет.
      → ЛЕЧЕНИЕ: на узких экранах просто ВЫКЛЮЧАЕМ эти слои в галерее (display:none).
         Шары/облака — декорация, скролл и клики важнее. На главной оставляем.

   2) FUNNY DICKS на главной смещён вправо (не отцентрован).
      Причина: white-space:nowrap + широкая картинка-пенис (415×404, почти квадрат)
      дают асимметрию, плюс отрицательные margin тянут вправо.
      → ЛЕЧЕНИЕ: убираем nowrap на мобе (разрешаем перенос), уменьшаем картинку,
         центрируем надёжнее.

   3) Кнопка «НАЗАД» в галерее наезжает на лого THE FUNNY DICKS GALLERY.
      Причина: лого длинное + nowrap → на узком экране упирается в фиксированную
      кнопку справа.
      → ЛЕЧЕНИЕ: разрешаем лого переноситься (white-space: normal) на мобе.

   4) Облака «в одном положении» — анимация cloud-drift использует translateX(120vw),
      что на узком экране = быстро улетает и подолгу невидим. Не критично, но
      при display:none фоновых слоёв (п.1) проблема отпадает сама собой. */
@media (max-width: 600px) {

  /* === ФИКС 1: галерея — убираем фоновые слои, которые ломали тач === */
  .gallery-page .balloons,
  .gallery-page .clouds {
    display: none;            /* на мобе декоративные слои прочь — скролл/клик важнее */
  }
  /* Подстраховка: разрешаем тач-скролл везде явно (iOS Safari любит это) */
  body {
    touch-action: pan-y pan-x;
    -webkit-overflow-scrolling: touch;
  }

  /* === ФИКС 2: FUNNY DICKS — центрируем надёжно на узком экране === */
  .hero-title {
    /* разрешаем перенос: «FUNNY» / «DICKS» на разных строках, если не влезает */
    white-space: normal;
    /* уменьшаем, чтобы гарантированно влезло */
    font-size: clamp(2rem, 12vw, 3.2rem);
    /* word-break не нужен — пробел между словами позволяет перенестись */
    word-spacing: 0.1em;
    /* центрируем: text-align centre + контент уже в .hero-content (text-align:center) */
    text-align: center;
    margin-bottom: 100px;     /* чуть меньше отступ на мобе */
  }
  /* Картинка-пенис (буква I): на мобе делаем поменьше, чтобы не растягивала строку */
  .hero-title .letter-img {
    height: 0.8em;
  }

  /* === ФИКС 3: лого галереи — разрешаем перенос и опускаем ниже === */
  .gallery-logo {
    white-space: normal;      /* было nowrap → на мобе налезало на кнопку НАЗАД */
    line-height: 1.15;        /* чуть воздушнее при переносе */
    padding: 0 16px;          /* отступы по бокам, чтобы под кнопку НАЗАД не лезло */
  }
  /* Сам блок лого опускаем НИЖЕ кнопки НАЗАД (она fixed на ~170px высоты).
     Шатёр 110px + кнопка НАЗАД (top:130px + высота ~50px ≈ 180px) + зазор 30px. */
  .gallery-logo-wrap {
    margin-top: 210px;        /* ниже кнопки НАЗАД, чтобы не пересекаться */
  }

  /* === Кнопка НАЗАД: на мобе чуть меньше, висит под шатром справа === */
  .back-btn {
    font-size: 0.85rem;
    padding: 10px 18px;
    top: 130px;               /* шатёр на мобе 110px + зазор 20px */
    right: 12px;
  }

  /* === Подстраховка: скролл-контейнер галереи точно скроллится === */
  .gallery-page {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* height не задаём — пусть растёт с контентом, body скроллит */
  }
}