[hidden]{ display:none !important; }

/* ===== Tokens ===== */
:root{
  --bg: #0a0613;
  --bg-soft: #120a20;
  --panel: rgba(255,255,255,0.045);
  --panel-strong: rgba(255,255,255,0.07);
  --border: rgba(196,181,253,0.14);
  --border-strong: rgba(196,181,253,0.28);

  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #a855f7;
  --violet-600: #9333ea;
  --violet-700: #7c3aed;
  --magenta: #e879f9;
  --pink: #f472b6;

  --text: #f7f4fb;
  --text-dim: #c3b8d1;
  --text-mute: #8f82a3;

  --gradient-main: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #f472b6 100%);
  --gradient-soft: linear-gradient(180deg, rgba(124,58,237,0.15), rgba(0,0,0,0));

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Manrope', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

em{font-style:italic; color:var(--violet-300); font-family:var(--font-display);}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; line-height:1.1; letter-spacing:-0.01em;}
h2{font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:400;}
h3{font-size:1.4rem; font-weight:600; color:var(--text);}
h4{font-size:1.1rem; font-weight:600;}
p{color:var(--text-dim);}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.72rem;
  color:var(--violet-300);
  font-weight:600;
  margin-bottom:14px;
}

/* ===== Background glow ===== */
.bg-glow{
  position:fixed;
  border-radius:50%;
  filter:blur(90px);
  z-index:0;
  pointer-events:none;
  opacity:0.55;
}
.bg-glow--1{ width:520px; height:520px; background:#7c3aed; top:-120px; left:-100px; }
.bg-glow--2{ width:480px; height:480px; background:#c026d3; top:40vh; right:-160px; opacity:0.35; }
.bg-glow--3{ width:600px; height:600px; background:#4c1d95; bottom:-200px; left:20vw; opacity:0.4; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn span{transition:transform .25s ease;}
.btn:hover span{transform:translateX(3px);}
.btn--primary{
  background:var(--gradient-main);
  color:#fff;
  box-shadow:0 8px 30px -6px rgba(192,38,211,0.55);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -6px rgba(192,38,211,0.7);}
.btn--ghost{
  background:var(--panel);
  color:var(--text);
  border-color:var(--border);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{ background:var(--panel-strong); transform:translateY(-2px); }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 24px;
}
.nav__inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(15,9,26,0.55);
  border:1px solid var(--border);
  backdrop-filter:blur(16px);
  border-radius:999px;
  padding:10px 12px 10px 22px;
}
.nav__logo{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--text);
  text-decoration:none;
  letter-spacing:0.01em;
}
.nav__links{
  display:flex; align-items:center; gap:26px;
}
.nav__links a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:0.86rem;
  font-weight:500;
  transition:color .2s ease;
  white-space:nowrap;
}
.nav__links a:hover{color:var(--text);}
.nav__cta{
  background:var(--gradient-main);
  color:#fff !important;
  padding:10px 18px;
  border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
}
.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  padding:8px;
}
.nav__burger span{ width:22px; height:2px; background:var(--text); border-radius:2px; }

/* ===== Hero ===== */
.hero{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:160px 24px 80px;
}
.hero__inner{ max-width:760px; }
.hero__title{ font-size:clamp(2.6rem, 7vw, 4.6rem); margin-bottom:22px; }
.hero__subtitle{ max-width:520px; margin:0 auto 36px; font-size:1.05rem; }
.hero__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }

.counter{
  display:inline-flex; flex-direction:column; align-items:center;
  padding:28px 40px;
  border-radius:var(--radius-lg);
  background:var(--panel);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.counter__row{
  display:flex; align-items:baseline; gap:10px;
}
.counter__seg{ display:flex; flex-direction:column; align-items:center; min-width:64px; }
.counter__num{
  font-family:var(--font-display);
  font-size:clamp(2.1rem, 6vw, 3.2rem);
  background:var(--gradient-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.counter__unit{ margin-top:6px; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); }
.counter__sep{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  color:var(--violet-400);
  transform:translateY(-8px);
}
.counter__label{ margin-top:16px; color:var(--text-mute); font-size:0.85rem; letter-spacing:0.03em; text-align:center; }
.counter__anniv{
  display:table; margin:14px auto 0; padding:8px 18px; border-radius:999px;
  background:rgba(168,85,247,0.16); border:1px solid var(--border-strong);
  color:var(--violet-300); font-size:0.85rem; font-weight:600; text-align:center;
}
.counter__anniv[hidden]{ display:none; }
.counter__anniv.is-today{ background:var(--gradient-main); color:#fff; border-color:transparent; }

.stats{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  max-width:940px; width:100%; margin-top:80px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--border);
}
.stats__item{
  background:rgba(15,9,26,0.6);
  padding:26px 16px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.stats__num{ font-family:var(--font-display); font-size:2.1rem; color:var(--violet-200); font-weight:600; }
.stats__num--static{ font-size:2.4rem; }
.stats__label{ font-size:0.78rem; color:var(--text-mute); text-align:center; }

/* ===== Hero: живой фон (только первая страница) ===== */
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.hero__bg::before, .hero__bg::after{
  content:""; position:absolute; border-radius:50%;
  width:70vmax; height:70vmax; left:50%; top:40%;
  transform:translate(-50%,-50%);
}
.hero__bg::before{
  background:radial-gradient(circle, rgba(168,85,247,0.30), transparent 62%);
  animation:heroBreath 7s ease-in-out infinite alternate;
}
.hero__bg::after{
  left:70%; top:60%;
  background:radial-gradient(circle, rgba(244,114,182,0.20), transparent 60%);
  animation:heroBreath 9s ease-in-out -3s infinite alternate-reverse;
}
@keyframes heroBreath{
  0%{ opacity:0.35; transform:translate(-50%,-50%) scale(0.85); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); }
}
.spark{
  position:absolute; width:var(--s); height:var(--s); border-radius:50%;
  background:var(--c); box-shadow:0 0 calc(var(--s) * 4) var(--c);
  opacity:0; animation:twinkle var(--d) ease-in-out var(--delay) infinite;
}
@keyframes twinkle{
  0%, 100%{ opacity:0; transform:scale(0.3); }
  50%{ opacity:0.95; transform:scale(1); }
}
.shoot{
  position:absolute; width:130px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #fff);
  opacity:0; transform:rotate(30deg);
  animation:shoot 10s linear infinite;
}
.shoot--1{ top:12%; left:8%; }
.shoot--2{ top:26%; left:52%; animation-delay:-4s; animation-duration:13s; }
.shoot--3{ top:6%; left:74%; animation-delay:-8s; animation-duration:11s; }
@keyframes shoot{
  0%{ opacity:0; transform:rotate(30deg) translateX(0); }
  3%{ opacity:0.9; }
  9%{ opacity:0; transform:rotate(30deg) translateX(420px); }
  100%{ opacity:0; transform:rotate(30deg) translateX(420px); }
}

/* ===== Шлейф из сердечек за курсором ===== */
.trail-heart{
  position:fixed; z-index:9999; pointer-events:none; user-select:none;
  line-height:1; text-shadow:0 0 10px currentColor;
  transform:translate(-50%,-50%);
  animation:trailFloat 1000ms ease-out forwards;
}
@keyframes trailFloat{
  0%{ opacity:0.85; transform:translate(-50%,-50%) scale(0.6) rotate(0deg); }
  20%{ opacity:0.9; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% - 36px)) scale(0.4) rotate(var(--dr)); }
}
@media (prefers-reduced-motion: reduce){
  .spark, .shoot, .hero__bg::before, .hero__bg::after{ animation:none; }
  .trail-heart{ display:none; }
}

/* ===== Sections ===== */
.section{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  padding:120px 24px;
}
.section--indigo{ background:radial-gradient(ellipse at 50% 0%, rgba(76,29,149,0.25), transparent 60%); max-width:100%; }
.section--indigo > *{max-width:1180px; margin-left:auto; margin-right:auto;}
.section--rose{ background:radial-gradient(ellipse at 50% 0%, rgba(219,39,119,0.18), transparent 60%); max-width:100%; }
.section--rose > *{max-width:1180px; margin-left:auto; margin-right:auto;}

.section__head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.section__lead{ margin-top:14px; font-size:1.02rem; }

/* ===== Timeline ===== */
.timeline{ position:relative; max-width:820px; margin:0 auto; padding:20px 0; }
.timeline__line{
  position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
  transform:translateX(-50%);
}
.timeline__item{
  position:relative;
  width:50%;
  padding:0 44px 56px 0;
  text-align:right;
}
.timeline__item--right{
  margin-left:50%;
  padding:0 0 56px 44px;
  text-align:left;
}
.timeline__dot{
  position:absolute; top:4px; right:-7px;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--violet-400);
}
.timeline__item--right .timeline__dot{ right:auto; left:-7px; }
.timeline__dot--active{ background:var(--gradient-main); border-color:transparent; box-shadow:0 0 0 5px rgba(168,85,247,0.2); }
.timeline__card{
  display:inline-block;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 24px;
  backdrop-filter:blur(8px);
  text-align:left;
}
.timeline__card--active{ border-color:var(--border-strong); background:var(--panel-strong); }
.timeline__date{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet-300); font-weight:600; }
.timeline__card h3{ margin:8px 0 6px; }
.timeline__card p{ font-size:0.92rem; }

/* Фото-превью при наведении — подставь свою фотографию через --photo:url(...) */
.timeline__card{ position:relative; }
.timeline__preview{
  --photo:none;
  position:absolute; top:calc(100% + 12px); left:0;
  width:200px; height:140px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  background:var(--photo), linear-gradient(150deg, rgba(124,58,237,calc(0.35 + var(--tint,1)*0.03)), rgba(219,39,119,0.28));
  background-size:cover; background-position:center 30%;
  opacity:0; transform:translateY(-6px) scale(0.97);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 20px 44px -14px rgba(0,0,0,0.55);
  z-index:6;
}
.timeline__card:hover .timeline__preview{ opacity:1; transform:translateY(0) scale(1); }
.timeline__preview.has-photos{ width:210px; height:280px; overflow:hidden; background:var(--bg-soft); }
.tp-track{ display:flex; height:100%; will-change:transform; }
.tp-slide{ flex:0 0 100%; height:100%; position:relative; overflow:hidden; }
.tp-slide::before{ content:""; position:absolute; inset:-20px; background:var(--img) center/cover; filter:blur(22px) brightness(0.55); }
.tp-slide::after{ content:""; position:absolute; inset:0; background:var(--img) center/contain no-repeat; }
.tp-slide video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#000; }

/* ===== Gallery ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:220px;
  gap:14px;
  max-width:760px;
  margin:0 auto;
}
.gallery__tile{
  --photo:none;
  position:relative;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  cursor:pointer;
  overflow:hidden;
  background:linear-gradient(150deg, rgba(124,58,237,calc(0.35 + var(--tint,1)*0.02)), rgba(219,39,119,0.25));
  opacity:0;
  transform:translateY(70px) scale(0.92);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.gallery__tile::before{
  content:""; position:absolute; inset:-14px;
  background:var(--photo) center/cover no-repeat;
  filter:blur(20px) brightness(0.55);
}
.gallery__tile::after{
  content:""; position:absolute; inset:0;
  background:var(--photo) center/contain no-repeat;
}
.gallery__tile.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.gallery__tile.is-visible:hover{ transform:translateY(-4px) scale(1); border-color:var(--border-strong); }
.gallery__tile--tall{ grid-row:span 2; }
.gallery__tile--wide{ grid-column:span 2; }
@media (prefers-reduced-motion: reduce){
  .gallery__tile{ opacity:1; transform:none; transition:border-color .3s ease; }
}

.gallery__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; gap:8px;
  padding:8px 10px 7px;
  background:linear-gradient(0deg, rgba(10,6,19,0.85), transparent);
}
.gallery__date{
  flex-shrink:0; white-space:nowrap;
  font-size:0.6rem; letter-spacing:0.03em;
  color:rgba(255,255,255,0.7);
}
.gallery__desc{
  flex:1; min-width:0; text-align:center;
  font-size:0.74rem; font-weight:600; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== Letter / Envelope ===== */
.envelope-wrap{ display:flex; flex-direction:column; align-items:center; gap:40px; }
.envelope{
  width:min(360px, 80vw); cursor:pointer; user-select:none;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.envelope__flap{
  width:100%; height:0; border-left:180px solid transparent; border-right:180px solid transparent;
  border-top:110px solid var(--violet-700);
  max-width:100%;
  transition:transform .35s ease;
  transform-origin:top center;
  filter:brightness(1.1);
}
.envelope__body{
  width:100%; height:150px;
  background:linear-gradient(160deg, var(--violet-600), var(--violet-700));
  border-radius:0 0 14px 14px;
  margin-top:-2px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 50px -20px rgba(124,58,237,0.6);
}
.envelope__heart{ font-size:2.4rem; color:rgba(255,255,255,0.9); }
.envelope--open .envelope__flap{ transform:rotateX(180deg); }
.envelope__hint{ font-size:0.78rem; color:var(--text-mute); letter-spacing:0.05em; }

.letter-paper{
  position:relative;
  max-width:560px;
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px 44px;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--text);
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:opacity .5s ease, max-height .6s ease, padding .6s ease;
}
.letter-paper.is-open{ opacity:1; max-height:1100px; padding:40px 44px 76px; }
.letter-paper p{ color:var(--text); margin-bottom:16px; }
.letter-paper__greeting{ font-style:italic; color:var(--violet-300); }
.letter-paper__sign{ text-align:right; font-style:italic; margin-top:24px; opacity:0; transition:opacity 1s ease; }
.letter-paper__sign.is-visible{ opacity:1; }

.poem__season{
  margin:-4px 0 14px;
  font-family:var(--font-body);
  font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--violet-300);
}
.poem__next{
  position:absolute; right:24px; bottom:24px;
  width:44px; height:44px; border-radius:50%;
  background:var(--gradient-main); border:none; color:#fff; font-size:1.1rem; cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(192,38,211,0.6);
  opacity:0; transform:scale(0.8); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.poem__next.is-visible{ opacity:1; transform:scale(1); pointer-events:auto; }
.poem__next:hover{ transform:scale(1.08); }

/* ===== Стих-печатная машинка с угадыванием слова ===== */
.poem{ text-align:left; }
.poem__line{ margin-bottom:14px; }
.poem__cursor{
  display:inline-block; width:2px; height:1.05em;
  background:var(--violet-300); margin-left:2px; vertical-align:text-bottom;
  animation:poemBlink .9s step-end infinite;
}
@keyframes poemBlink{ 50%{ opacity:0; } }
.poem__answer{ color:var(--violet-300); font-weight:600; font-style:normal; }
.poem__options{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:4px 0 18px;
}
.poem__option{
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--border-strong);
  background:var(--panel-strong);
  color:var(--text); font-family:var(--font-body); font-size:0.88rem; font-weight:600;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.poem__option:hover{ background:var(--panel); border-color:var(--violet-400); transform:translateY(-1px); }
.poem__option--wrong{ animation:poemShake .4s ease; border-color:rgba(244,63,94,0.7); background:rgba(244,63,94,0.14); }
.poem__option--correct{ border-color:var(--violet-400); background:rgba(168,85,247,0.28); }
@keyframes poemShake{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

/* ===== Reasons ===== */
.reasons{ display:flex; flex-direction:column; align-items:center; gap:26px; max-width:560px; margin:0 auto; }
.reasons__card{
  position:relative;
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  text-align:center;
  min-height:160px;
  display:flex; align-items:center; justify-content:center;
}
.reasons__quote{
  position:absolute; top:10px; left:22px;
  font-family:var(--font-display); font-size:3rem; color:var(--violet-500); opacity:0.5;
}
.reasons__card p{ font-family:var(--font-display); font-size:1.3rem; color:var(--text); font-style:italic; }
.reasons__count{ font-size:0.8rem; color:var(--text-mute); letter-spacing:0.05em; }

/* ===== Playlist ===== */
.playlist{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:2px; }
.playlist__row{
  display:flex; align-items:center; gap:20px;
  padding:18px 22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:10px;
  transition:background .2s ease;
}
.playlist__row{ cursor:pointer; }
.playlist__row:hover{ background:var(--panel-strong); }
.playlist__row.is-active{ border-color:var(--border-strong); background:var(--panel-strong); }
.playlist__num{ font-family:var(--font-display); font-size:1.1rem; color:var(--violet-400); width:24px; flex-shrink:0; }
.playlist__info{ flex:1; }
.playlist__info p{ font-size:0.88rem; margin-top:4px; }
.playlist__play{
  width:36px; height:36px; border-radius:50%;
  background:var(--gradient-main);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.7rem; cursor:pointer; flex-shrink:0;
}

/* ===== Global player ===== */
.player{
  position:fixed; left:50%; bottom:16px; z-index:320;
  transform:translate(-50%, 140%);
  width:min(560px, calc(100% - 32px));
  background:rgba(15,9,26,0.92);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  backdrop-filter:blur(16px);
  padding:12px 16px;
  transition:transform .4s ease;
}
.player.is-visible{ transform:translate(-50%, 0); }
.player__top{ display:flex; align-items:center; gap:14px; }
.player__btn{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--gradient-main); border:none; color:#fff;
  font-size:0.8rem; cursor:pointer;
}
.player__meta{ flex:1; min-width:0; }
.player__title{ font-size:0.9rem; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player__time{ font-size:0.72rem; color:var(--text-mute); font-variant-numeric:tabular-nums; }
.player__bar{
  margin-top:10px; height:5px; border-radius:5px;
  background:var(--panel-strong); cursor:pointer; overflow:hidden;
}
.player__bar-fill{ height:100%; width:0%; background:var(--gradient-main); }
.player__embed{ margin-top:10px; border-radius:var(--radius-sm); overflow:hidden; }
.player__embed iframe{ display:block; width:100%; height:120px; border:0; }
.player__link{ display:block; margin-top:8px; font-size:0.78rem; color:var(--violet-300); text-decoration:none; }
.player__link:hover{ color:var(--text); }
.player__fallback{ font-size:0.82rem; color:var(--text-dim); }
body.has-player .footer{ padding-bottom:150px; }
body.has-player .slides__dots{ bottom:calc(var(--player-h, 90px) + 30px); }
body.has-player .slide{ padding-bottom:calc(var(--player-h, 90px) + 90px); }

/* ===== Places ===== */
.places{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
.places__map{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,0.35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(219,39,119,0.25), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 40px),
    var(--bg-soft);
}
.places__pin{
  position:absolute;
  width:30px; height:30px;
  background:var(--gradient-main);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg) translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -4px rgba(192,38,211,0.7);
  border:0; padding:0; cursor:pointer; font-family:inherit;
  transition:transform .2s ease;
}
.places__pin:hover, .places__pin:focus-visible{ transform:rotate(-45deg) translate(-50%,-50%) scale(1.2); }
.places__pin span{ transform:rotate(45deg); color:#fff; font-size:0.75rem; font-weight:700; }
.places__list{ display:flex; flex-direction:column; gap:14px; }
.places__item{
  display:flex; gap:16px; align-items:flex-start;
  padding:14px 16px; margin:0 -16px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.places__item:hover, .places__item:focus-visible{ background:var(--panel); border-color:var(--border); }
.places__tag{ display:block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet-300); font-weight:600; margin-bottom:2px; }
.places__num{
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; color:var(--violet-300); font-weight:700;
}
.places__item p{ font-size:0.9rem; margin-top:2px; }
.places__addr, .placeview__addr{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.82rem; color:var(--violet-200); font-weight:600; margin:2px 0 4px;
}
.places__addr::before, .placeview__addr::before{
  content:""; width:8px; height:8px; flex-shrink:0;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--gradient-main);
}
.placeview__addr{ margin-bottom:8px; }

/* ===== Place photo view ===== */
.placeview{
  position:fixed; inset:0; z-index:250;
  background:rgba(6,3,12,0.88); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px 16px;
  overflow-y:auto;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.placeview.is-open{ opacity:1; pointer-events:auto; }
body.has-player .placeview{ padding-bottom:calc(var(--player-h, 90px) + 40px); }
.placeview__box{ position:relative; width:min(640px, 100%); margin:auto; }
.placeview__close{
  position:absolute; top:-12px; right:-4px; z-index:5;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--border-strong);
  color:var(--text); font-size:1rem; cursor:pointer;
}
.placeview__frame{
  overflow:hidden; border-radius:var(--radius-lg);
  border:1px solid var(--border-strong);
  height:min(62vh, 620px);
  aspect-ratio:3/4;
  max-width:100%;
  margin:0 auto;
  background:var(--bg-soft);
}
.placeview__track{ display:flex; height:100%; will-change:transform; }
.placeview__slide{
  flex:0 0 100%; height:100%;
  background:linear-gradient(150deg, rgba(124,58,237,calc(0.35 + var(--tint,1)*0.06)), rgba(219,39,119,0.3)), var(--bg-soft);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; padding:16px;
  color:rgba(255,255,255,0.8); font-size:0.85rem; font-weight:600;
}
.placeview__slide.has-img{ position:relative; overflow:hidden; padding:0; }
.placeview__slide.has-img::before{
  content:""; position:absolute; inset:-30px;
  background:var(--img) center/cover; filter:blur(26px) brightness(0.55);
}
.placeview__slide.has-video{ padding:0; background:#000; }
.placeview__slide video{ width:100%; height:100%; object-fit:contain; display:block; }
.placeview__slide img{ position:relative; width:100%; height:100%; object-fit:contain; display:block; }
.placeview__dots{ display:flex; justify-content:center; gap:8px; margin:14px 0 4px; }
.placeview__dot{ width:7px; height:7px; border-radius:50%; background:var(--border-strong); transition:background .3s ease, transform .3s ease; }
.placeview__dot.is-active{ background:var(--violet-400); transform:scale(1.3); }
.placeview__text{ text-align:center; padding:8px 8px 0; }
.placeview__tag{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet-300); font-weight:600; }
.placeview__text h3{ margin:6px 0 8px; font-size:1.6rem; }
.placeview__text p{ font-size:0.95rem; }

/* ===== Quiz ===== */
.quiz{ max-width:640px; margin:0 auto; }
.quiz__progress{ height:4px; background:var(--panel); border-radius:4px; overflow:hidden; margin-bottom:36px; }
.quiz__progress-bar{ height:100%; width:0%; background:var(--gradient-main); transition:width .4s ease; }
.quiz__question{ font-family:var(--font-display); font-size:1.5rem; text-align:center; margin-bottom:28px; }
.quiz__options{ display:flex; flex-direction:column; gap:12px; }
.quiz__option{
  padding:16px 20px;
  border-radius:var(--radius-sm);
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
  text-align:left;
  font-family:var(--font-body);
  font-size:0.95rem;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.quiz__option:hover{ background:var(--panel-strong); border-color:var(--border-strong); transform:translateX(4px); }
.quiz__meta{
  display:flex; justify-content:space-between; margin:-20px 0 18px;
  font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute);
}
.quiz__meta[hidden]{ display:none; }
.quiz__missed{
  margin:0 0 24px; text-align:left; display:flex; flex-direction:column; gap:10px;
  max-height:46vh; overflow-y:auto; padding-right:4px;
}
.quiz__missed[hidden]{ display:none; }
.quiz__missed-title{ text-align:center; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); }
.quiz__missed-item{
  padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--panel); border:1px solid var(--border); font-size:0.9rem;
}
.quiz__missed-item b{ display:block; margin-bottom:6px; font-weight:600; }
.quiz__missed-item span{ display:block; color:var(--text-mute); }
.quiz__missed-item span.is-right{ color:#86efac; }
.quiz__option{ position:relative; }
.quiz__option kbd{
  display:inline-block; min-width:1.5em; margin-right:12px; padding:1px 6px; text-align:center;
  border:1px solid var(--border-strong); border-radius:5px;
  font-family:var(--font-body); font-size:0.75rem; color:var(--text-mute);
}
@media (hover:none){ .quiz__option kbd{ display:none; } }
.quiz__option:disabled{ cursor:default; }
.quiz__option:disabled:hover{ transform:none; }
.quiz__option--correct, .quiz__option--correct:disabled{
  border-color:#4ade80; background:rgba(34,197,94,0.32); color:#fff;
  box-shadow:0 0 0 2px rgba(74,222,128,0.35);
}
.quiz__option--wrong, .quiz__option--wrong:disabled{
  border-color:#fb7185; background:rgba(244,63,94,0.32); color:#fff;
  box-shadow:0 0 0 2px rgba(251,113,133,0.35);
}
.quiz__option--correct::after, .quiz__option--wrong::after{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-weight:700; font-size:1.1rem;
}
.quiz__option--correct::after{ content:"✓"; color:#86efac; }
.quiz__option--wrong::after{ content:"✕"; color:#fda4af; }
.quiz__result{ text-align:center; }
.quiz__result h3{ font-size:1.8rem; margin-bottom:12px; }
.quiz__result p{ margin-bottom:24px; }
.quiz__result .btn + .btn{ margin-left:10px; }

.quiz-tabs{
  display:flex; gap:6px; max-width:640px; margin:0 auto 28px; padding:5px;
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
}
.quiz-tab{
  flex:1; padding:11px 14px; border-radius:999px; border:none; cursor:pointer;
  background:transparent; color:var(--text-mute);
  font-family:var(--font-body); font-weight:600; font-size:0.9rem;
  transition:background .25s ease, color .25s ease;
}
.quiz-tab:hover{ color:var(--text); }
.quiz-tab.is-active{ background:var(--gradient-main); color:#fff; }

.qm{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.qm[hidden]{ display:none; }
.qm__title{ font-family:var(--font-display); font-size:1.5rem; text-align:center; }
.qm__hint{ font-size:0.88rem; text-align:center; color:var(--text-mute); }
.qm__input, .qm__code{
  width:100%; box-sizing:border-box;
  padding:13px 16px; border-radius:var(--radius-sm);
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  font-family:var(--font-body); font-size:0.95rem; outline:none;
}
.qm__input:focus, .qm__code:focus{ border-color:var(--violet-400); }
.qm__input::placeholder, .qm__code::placeholder{ color:var(--text-mute); }
.qm__code{ resize:vertical; word-break:break-all; }
.qm__opt{ display:flex; align-items:center; gap:12px; }
.qm__radio{ flex-shrink:0; width:20px; height:20px; accent-color:var(--violet-400); cursor:pointer; }
.qm__add{ align-self:center; margin-top:4px; }
.qm__msg{ min-height:1.2em; font-size:0.88rem; text-align:center; color:var(--violet-300); }
.qm__list{ display:flex; flex-direction:column; gap:8px; }
.qm__item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--panel); border:1px solid var(--border); font-size:0.92rem;
}
.qm__del{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:transparent; border:1px solid var(--border); color:var(--text-mute); cursor:pointer;
}
.qm__del:hover{ color:var(--text); border-color:var(--border-strong); }
.qm__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.qm__actions .btn:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }
#qmLoad{ align-self:center; }

/* ===== Bucket list ===== */
.bucket{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.bucket__item{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
}
.bucket__item input{ position:absolute; opacity:0; width:0; height:0; }
.bucket__box{
  width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--border-strong);
  flex-shrink:0;
  position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.bucket__item input:checked + .bucket__box{ background:var(--gradient-main); border-color:transparent; }
.bucket__item input:checked + .bucket__box::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.8rem;
}
.bucket__text{ font-size:0.95rem; color:var(--text); }
.bucket__item input:checked ~ .bucket__text{ color:var(--text-mute); text-decoration:line-through; }

.bucket__add-btn{
  width:100%; border:1px dashed var(--border-strong); background:var(--panel);
  font-family:var(--font-body); text-align:left;
  transition:background .2s ease, border-color .2s ease;
}
.bucket__add-btn:hover{ background:var(--panel-strong); border-color:var(--violet-400); }
.bucket__box--plus{
  display:flex; align-items:center; justify-content:center;
  color:var(--violet-300); font-size:1.1rem; font-weight:700; border-style:dashed;
}
.bucket__add-form{
  display:flex; gap:10px;
  padding:6px;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
}
.bucket__add-input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  padding:10px 14px;
  font-family:var(--font-body); font-size:0.95rem; color:var(--text);
}
.bucket__add-input::placeholder{ color:var(--text-mute); }
.bucket__add-save{
  flex-shrink:0; width:40px; height:40px; border-radius:8px;
  background:var(--gradient-main); border:none; color:#fff; font-size:1rem; cursor:pointer;
}

/* ===== CTA -> Slides ===== */
.cta-more{ text-align:center; }
.cta-more__inner{ max-width:560px; margin:0 auto; }
.cta-more__arrow{
  margin-top:28px;
  width:84px; height:84px; border-radius:50%;
  background:var(--gradient-main);
  border:none; color:#fff; font-size:1.8rem; cursor:pointer;
  box-shadow:0 14px 40px -10px rgba(192,38,211,0.7);
  animation:pulse 2.4s ease-in-out infinite;
  transition:transform .25s ease;
}
.cta-more__arrow:hover{ transform:scale(1.08); }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }

/* ===== Slides (separate horizontal-swipe pages) ===== */
.slides{
  position:fixed; inset:0; z-index:300;
  background:var(--bg);
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
.slides.is-open{ opacity:1; pointer-events:auto; }

.slides__track{
  position:relative; z-index:1;
  display:flex;
  width:400%;
  height:100%;
  transition:transform .6s cubic-bezier(.65,0,.35,1);
}
.slide{
  width:25%; height:100%;
  overflow-y:auto;
  padding:110px 24px 80px;
}
.slide--rose{ background:radial-gradient(ellipse at 50% 0%, rgba(219,39,119,0.18), transparent 60%); }
.slide--indigo{ background:radial-gradient(ellipse at 50% 0%, rgba(76,29,149,0.28), transparent 60%); }
.slide__inner{ max-width:1180px; width:100%; margin:0 auto; }

.slides__close{
  position:fixed; top:20px; left:20px; z-index:310;
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); padding:10px 18px; border-radius:999px;
  font-family:var(--font-body); font-size:0.85rem; font-weight:600;
  cursor:pointer; backdrop-filter:blur(10px);
}
.slides__nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:310;
  width:48px; height:48px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); font-size:1.4rem; cursor:pointer;
  backdrop-filter:blur(10px);
  transition:opacity .2s ease, background .2s ease;
}
.slides__nav:hover{ background:var(--panel-strong); }
.slides__nav:disabled{ opacity:0.25; cursor:default; }
.slides__nav--prev{ left:20px; }
.slides__nav--next{ right:20px; }
.slides__dots{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:310;
  display:flex; gap:10px;
}
.slides__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--border-strong);
  transition:background .2s ease, transform .2s ease;
}
.slides__dot.is-active{ background:var(--gradient-main); transform:scale(1.3); }

/* ===== Game ===== */
.game{ width:100%; max-width:900px; margin:0 auto; }
.game__frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #1b0f30, #0a0613);
}
#gameCanvas{ display:block; width:100%; height:auto; image-rendering:pixelated; image-rendering:crisp-edges; background:#0b0615; }
.game__hud{
  position:absolute; top:16px; right:16px;
  background:var(--panel); border:1px solid var(--border);
  padding:6px 16px; border-radius:999px;
  font-family:var(--font-display); font-size:1.15rem; color:var(--violet-200);
}
.game__overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center; padding:24px;
  background:rgba(10,6,19,0.78); backdrop-filter:blur(4px);
}
.game__overlay h3{ font-size:1.8rem; }
.game__overlay p{ max-width:420px; }

/* ===== Footer ===== */
.footer{
  position:relative; z-index:1;
  text-align:center; padding:40px 24px 60px;
  color:var(--text-mute); font-size:0.82rem;
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; z-index:340;
  background:rgba(6,3,12,0.92);
  backdrop-filter:blur(6px);
  overflow-y:auto;
  padding:48px 16px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__frame{ max-width:min(420px, 84vw); margin:0 auto; text-align:center; }
.lightbox__img{
  --photo:none;
  position:relative; overflow:hidden;
  width:100%; aspect-ratio:4/5; border-radius:var(--radius-lg);
  background:var(--gradient-main);
  border:1px solid var(--border-strong);
}
.lightbox__img::before{
  content:""; position:absolute; inset:-16px;
  background:var(--photo) center/cover no-repeat;
  filter:blur(26px) brightness(0.5);
}
.lightbox__img::after{
  content:""; position:absolute; inset:0;
  background:var(--photo) center/contain no-repeat;
}
.lightbox__cap{ margin-top:16px; }
.lightbox__date{ display:block; font-size:0.78rem; color:var(--text-mute); letter-spacing:0.03em; }
.lightbox__desc{
  display:block; margin-top:6px;
  color:var(--text); font-family:var(--font-body); font-weight:600;
  font-size:1rem; line-height:1.5;
}
.lightbox__close{
  position:absolute; top:28px; right:32px;
  width:42px; height:42px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); font-size:1rem; cursor:pointer;
}

/* ===== Reveal on scroll ===== */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===== Responsive ===== */
@media (max-width:860px){
  .nav__links{
    position:fixed; top:78px; left:16px; right:16px;
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(15,9,26,0.96);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:14px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all .25s ease;
  }
  .nav__links.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__links a{ padding:12px 10px; border-radius:8px; }
  .nav__links a:hover{ background:var(--panel); }
  .nav__cta{ justify-content:center; margin-top:6px; }
  .nav__burger{ display:flex; }

  .stats{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .gallery__tile--wide{ grid-column:span 2; }

  .timeline__line{ left:18px; }
  .timeline__item, .timeline__item--right{
    width:100%; margin-left:0;
    padding:0 0 40px 46px; text-align:left;
  }
  .timeline__dot, .timeline__item--right .timeline__dot{ left:11px; right:auto; }

  .places{ grid-template-columns:1fr; }
}

@media (max-width:520px){
  .gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:130px; }
  .section{ padding:90px 20px; }
  .hero{ padding-top:140px; }
  .slide{ padding:90px 16px 60px; }
  .counter{ padding:22px 18px; }
  .counter__row{ gap:6px; }
  .counter__seg{ min-width:52px; }
  .slides__nav{ width:38px; height:38px; font-size:1.1rem; }
  .slides__nav--prev{ left:8px; }
  .slides__nav--next{ right:8px; }
  .slides__close{ top:14px; left:14px; padding:8px 14px; font-size:0.78rem; }
}


/* =====================================================
   ЖИВОЙ САЙТ: дрейфующее свечение, пузырьки, переливы
   ===================================================== */
.bg-glow{ will-change:transform; }
.bg-glow--1{
  animation:drift1 24s ease-in-out infinite alternate;
  translate:calc(var(--mx, 0) * -34px) calc(var(--my, 0) * -34px);
  transition:translate .9s ease-out;
}
.bg-glow--2{
  animation:drift2 28s ease-in-out infinite alternate;
  translate:calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 22px);
  transition:translate .9s ease-out;
}
.bg-glow--3{
  animation:drift3 32s ease-in-out infinite alternate;
  translate:calc(var(--mx, 0) * -18px) calc(var(--my, 0) * 26px);
  transition:translate .9s ease-out;
}
.bg-glow--4{
  width:420px; height:420px; background:#f472b6; top:55vh; left:-140px; opacity:0.2;
  animation:drift4 26s ease-in-out infinite alternate, glowFade 11s ease-in-out infinite alternate;
}
.bg-glow--5{
  width:460px; height:460px; background:#6366f1; top:-100px; right:8vw; opacity:0.25;
  animation:drift5 30s ease-in-out infinite alternate, glowFade 14s ease-in-out -5s infinite alternate;
}
@keyframes drift1{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(20vw,16vh) scale(1.3); } }
@keyframes drift2{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-18vw,-14vh) scale(1.25); } }
@keyframes drift3{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(16vw,-20vh) scale(0.85); } }
@keyframes drift4{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(30vw,-22vh) scale(1.2); } }
@keyframes drift5{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-26vw,24vh) scale(1.15); } }
@keyframes glowFade{ 0%{ opacity:0.08; } 100%{ opacity:0.34; } }

/* Пузырьки и сердечки, медленно плывущие вверх */
.ambient{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ambient--slides{ position:absolute; }
.amb{
  position:absolute; bottom:-40px; left:var(--x);
  opacity:0; will-change:transform, opacity;
  animation:floatUp var(--dur) linear var(--delay) infinite;
}
.amb--dot{
  width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.75), var(--c) 55%, transparent 72%);
  filter:blur(0.5px);
}
.amb--heart{ color:var(--c); font-size:var(--s); line-height:1; text-shadow:0 0 8px var(--c); }
@keyframes floatUp{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  8%{ opacity:var(--o); }
  25%{ transform:translate(22px,-30vh) rotate(8deg); }
  50%{ transform:translate(-18px,-60vh) rotate(-8deg); }
  75%{ transform:translate(16px,-90vh) rotate(6deg); opacity:var(--o); }
  100%{ transform:translate(0,-118vh) rotate(0deg); opacity:0; }
}

/* Переливающиеся градиенты */
.counter__num, .btn--primary, .nav__cta, .player__btn, .playlist__play, .places__pin{
  background-size:220% 220%;
}
.counter__num{ animation:gradientShift 7s ease-in-out infinite; }
.btn--primary, .nav__cta, .player__btn, .playlist__play{ animation:gradientShift 8s ease-in-out infinite; }
.places__pin{ animation:gradientShift 9s ease-in-out infinite; }
.cta-more__arrow{
  background-size:220% 220%;
  animation:pulse 2.4s ease-in-out infinite, gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* Блик, пробегающий по крупным заголовкам */
.hero__title, .section__head h2{
  background:linear-gradient(100deg, #f7f4fb 0%, #f7f4fb 38%, #e9b8ff 46%, #ffffff 50%, #ffc2e6 54%, #f7f4fb 62%, #f7f4fb 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:sheen 9s linear infinite;
}
@keyframes sheen{
  0%{ background-position:130% 0; }
  100%{ background-position:-30% 0; }
}

/* Огонёк, бегущий по линии хронологии, и пульс активной точки */
.timeline__line{ overflow:hidden; }
.timeline__line::after{
  content:""; position:absolute; left:0; width:100%; height:110px; top:-110px;
  background:linear-gradient(180deg, transparent, rgba(232,121,249,0.95), transparent);
  animation:lineFlow 6s ease-in-out infinite;
}
@keyframes lineFlow{
  0%{ top:-110px; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}
.timeline__dot--active{ animation:dotRipple 2.4s ease-out infinite; }
@keyframes dotRipple{
  0%{ box-shadow:0 0 0 0 rgba(192,38,211,0.55); }
  100%{ box-shadow:0 0 0 16px rgba(192,38,211,0); }
}

/* Мигающие двоеточия счётчика */
.counter__sep{ animation:sepBlink 2s ease-in-out infinite; }
@keyframes sepBlink{ 0%, 100%{ opacity:1; } 50%{ opacity:0.25; } }

/* Мягкий свет, идущий за курсором */
.cursor-glow{
  position:fixed; left:0; top:0; z-index:5; pointer-events:none;
  width:440px; height:440px; margin:-220px 0 0 -220px; border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,0.17), rgba(244,114,182,0.06) 45%, transparent 70%);
  translate:var(--cx, -999px) var(--cy, -999px);
  transition:translate .2s ease-out;
  mix-blend-mode:screen;
}
@media (hover:none){ .cursor-glow{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .bg-glow, .amb, .counter__num, .btn--primary, .nav__cta, .player__btn, .playlist__play, .places__pin,
  .cta-more__arrow, .hero__title, .section__head h2, .timeline__line::after, .timeline__dot--active, .counter__sep{ animation:none; }
  .amb, .cursor-glow{ display:none; }
}


/* ===== Игра: сенсорное управление и подсказки ===== */
.game{ max-width:960px; }
.game__overlay-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.game__win-count{ color:var(--violet-200); font-weight:600; }
.game__pad{
  display:none; justify-content:space-between; align-items:flex-end; gap:16px;
  margin-top:14px; user-select:none; -webkit-user-select:none; touch-action:none;
}
.game__pad-group{ display:flex; gap:12px; align-items:flex-end; }
.game__btn{
  width:64px; height:64px; border-radius:50%;
  background:var(--panel-strong); border:1px solid var(--border-strong);
  color:var(--text); font-size:1.3rem; font-family:var(--font-body); font-weight:700;
  touch-action:none; -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.game__btn--big{ width:84px; height:84px; background:var(--gradient-main); border-color:transparent; }
.game__btn--small{ width:52px; height:52px; font-size:0.72rem; letter-spacing:0.04em; }
.game__btn.is-down{ transform:scale(0.92); background:var(--violet-600); }
.game__hint{ margin-top:14px; text-align:center; font-size:0.78rem; color:var(--text-mute); }
@media (hover:none), (max-width:700px){
  .game__pad{ display:flex; }
  .game__hint{ display:none; }
}

/* Игра целиком помещается на экране: размер холста подгоняется под высоту окна */
.slide--game{ padding-top:84px; }
.slide--game .section__head{ margin-bottom:18px; }
.slide--game .section__head h2{ font-size:clamp(1.8rem, 4vw, 2.6rem); }
.slide--game .game__frame{ width:min(100%, max(480px, calc((100vh - 280px) * 1.714))); margin:0 auto; }
.slide--game .game__hint{ margin-top:10px; }