/* ARTLYNX — заглушка. Розовый фон, логотип рыси по центру, праздничная анимация. */

:root {
  --pink-100: #fff2f8;
  --pink-300: #ffb3d6;
  --pink-500: #ff5fa8;
  --pink-600: #f0308a;
  --plum: #4a0b2b;
  --plum-soft: rgba(74, 11, 43, .78);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 56px);
  background: #ff8dc0;
  color: var(--plum);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* контент заглушки — только для чтения глазами: ни выделить, ни утащить */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ── фон: розовый градиент + мягкие пятна ─────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(34% 38% at 84% 16%, rgba(255, 222, 240, .75), transparent 72%),
    radial-gradient(48% 46% at 76% 88%, rgba(214, 26, 116, .38), transparent 74%),
    radial-gradient(40% 44% at 12% 84%, rgba(255, 255, 255, .34), transparent 72%),
    linear-gradient(160deg, #ffd0e6 0%, #ff8dc0 42%, #ff5fa8 72%, #ec2b83 100%);
  animation: drift 26s ease-in-out infinite alternate;
}

/* лёгкая «вуаль», чтобы текст читался */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255, 255, 255, .35), transparent 70%);
  opacity: 1;
  transition: opacity 1.6s ease;
  pointer-events: none;
}

/* ── ночной слой: плавно проявляется после 1000 лопнутых шариков ──── */
.night {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
  background:
    radial-gradient(62% 46% at 50% 0%, rgba(126, 70, 214, .38), transparent 72%),
    radial-gradient(46% 40% at 84% 16%, rgba(255, 95, 168, .16), transparent 74%),
    radial-gradient(52% 42% at 12% 26%, rgba(90, 60, 200, .22), transparent 76%),
    linear-gradient(180deg, #120726 0%, #1c0a32 34%, #2a0f3d 64%, #3d1140 100%);
}

/* холст звёзд: лежит над ночным слоем и под шариками, проявляется плавно */
#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;          /* выше «вуали», ниже шариков (они позже в разметке) */
  opacity: 0;
  transition: opacity 2.6s ease;
  pointer-events: none;
}

body.theme-dark #stars { opacity: 1; }
body.theme-dark .night { opacity: 1; }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.02); }
  50%  { transform: translate3d(-1.5%, 1.2%, 0) scale(1.05); }
  100% { transform: translate3d(1.4%, -1.4%, 0) scale(1.03); }
}

/* ── холсты анимации ──────────────────────────────────────────────── */
#balloons,
#confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#balloons { z-index: 1; }
#confetti { z-index: 4; }

/* ── контент ──────────────────────────────────────────────────────── */
/* Видно, но «неживое»: клики проходят сквозь него к шарикам, текст нельзя
   выделить, логотип — утащить. */
.stage,
.stage *,
.logo,
.halo,
.pop-counter,
.cheer {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  animation: rise .9s cubic-bezier(.22, .75, .28, 1) both;
  transition: transform .65s cubic-bezier(.2, .9, .3, 1);
}

/* после вступительной анимации отдаём transform переходу (нужно для поздравления) */
.stage.is-settled { animation: none; }

/* пока показывается поздравление — весь блок чуть поднимается, чтобы не пересекаться */
body.is-celebrating .stage { transform: translateY(clamp(-96px, -9vh, -28px)); }
body.is-celebrating .pop-counter { opacity: 0; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo-wrap {
  position: relative;
  width: clamp(190px, 34vmin, 320px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  animation: bob 6.5s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-14px) rotate(.6deg); }
}

.halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 42%, rgba(255, 255, 255, 0) 70%);
  filter: blur(6px);
  animation: pulse 4.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(.94); opacity: .75; }
  50%      { transform: scale(1.06); opacity: 1; }
}

.logo {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(150, 8, 74, .35));
}

/* ── текст ────────────────────────────────────────────────────────── */
.wordmark {
  margin: clamp(10px, 2.4vmin, 22px) 0 0;
  font-size: clamp(34px, 8.4vmin, 74px);
  font-weight: 800;
  letter-spacing: .16em;
  text-indent: .16em;
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(214, 26, 116, .45),
    0 14px 34px rgba(120, 6, 60, .35);
}

.tagline {
  margin: clamp(8px, 1.8vmin, 16px) 0 0;
  font-size: clamp(15px, 2.6vmin, 22px);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #fff;
  opacity: .95;
}

.note {
  margin: clamp(10px, 2vmin, 20px) 0 0;
  max-width: 46ch;
  font-size: clamp(13px, 1.9vmin, 17px);
  line-height: 1.6;
  color: var(--plum-soft);
}

.domain {
  margin: clamp(14px, 3vmin, 30px) 0 0;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: clamp(12px, 1.7vmin, 15px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
}

@media (max-width: 420px) {
  .wordmark { letter-spacing: .1em; }
  .tagline { letter-spacing: .16em; }
}

/* ── счётчик лопнутых шариков ─────────────────────────────────────── */
.pop-counter {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 4vmin, 34px);
  z-index: 5;
  transform: translateX(-50%) translateY(12px);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: clamp(12px, 1.7vmin, 14px);
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 10px 24px rgba(120, 6, 60, .22);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

.pop-counter.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── поздравление «100 шариков» в стиле бабл-гам ──────────────────── */
.cheer {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 4vh, 52px);   /* выезжает снизу, под блоком с логотипом */
  z-index: 6;
  width: max-content;
  max-width: min(92vw, 780px);
  transform: translate(-50%, 0);
  opacity: 0;
  visibility: hidden;
}

.cheer.is-on {
  visibility: visible;
  animation:
    cheer-rise 1.05s cubic-bezier(.16, 1.42, .34, 1) both,
    cheer-float 3.6s ease-in-out 1.05s infinite;
}

.cheer.is-off {
  visibility: visible;
  animation: cheer-out .9s ease forwards;
}

.cheer__text {
  position: relative;
  margin: 0;
  padding: clamp(14px, 2.6vmin, 26px) clamp(20px, 4vmin, 46px) clamp(16px, 3vmin, 30px);
  border-radius: clamp(26px, 5vmin, 48px);
  text-align: center;
  text-wrap: balance;
  font-size: clamp(19px, 4.2vmin, 44px);
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  letter-spacing: .01em;

  /* «бабл-гам»: белые жирные буквы в контуре + объёмный нижний край */
  text-shadow:
    -.055em -.055em 0 #b91057, .055em -.055em 0 #b91057,
    -.055em .055em 0 #b91057, .055em .055em 0 #b91057,
    -.055em 0 0 #b91057, .055em 0 0 #b91057,
    0 -.055em 0 #b91057, 0 .055em 0 #b91057,
    0 .13em 0 #8e0b43,
    0 .28em .5em rgba(90, 4, 44, .5);

  /* плотная розовая жвачка с глянцевым бликом (за ней ничего не просвечивает) */
  background:
    radial-gradient(120% 85% at 20% 4%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .1) 44%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #ff8dc0 0%, #ff5fa8 42%, #ec2b83 78%, #d2186b 100%);
  border: 3px solid rgba(255, 255, 255, .92);
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, .5),
    inset 0 -14px 24px rgba(150, 8, 74, .38),
    0 24px 52px rgba(110, 5, 55, .42);
}

/* «космический» вариант жвачки — для достижения 1000 шариков */
.cheer--mega .cheer__text {
  background:
    radial-gradient(120% 85% at 20% 4%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .1) 44%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #b06bff 0%, #8b3df0 46%, #d2186b 100%);
  text-shadow:
    -.055em -.055em 0 #4a1280, .055em -.055em 0 #4a1280,
    -.055em .055em 0 #4a1280, .055em .055em 0 #4a1280,
    -.055em 0 0 #4a1280, .055em 0 0 #4a1280,
    0 -.055em 0 #4a1280, 0 .055em 0 #4a1280,
    0 .13em 0 #33085e,
    0 .28em .5em rgba(20, 4, 40, .55);
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, .45),
    inset 0 -14px 24px rgba(60, 10, 120, .45),
    0 24px 56px rgba(30, 4, 60, .5);
}

/* глянцевый блик сверху */
.cheer__text::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 6%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  opacity: .75;
}

.cheer__text b {
  font-size: 1.22em;
  letter-spacing: .02em;
  text-shadow:
    -.05em -.05em 0 #b91057, .05em -.05em 0 #b91057,
    -.05em .05em 0 #b91057, .05em .05em 0 #b91057,
    -.05em 0 0 #b91057, .05em 0 0 #b91057,
    0 -.05em 0 #b91057, 0 .05em 0 #b91057,
    0 .12em 0 #8e0b43,
    0 .26em .5em rgba(90, 4, 44, .5);
}

@keyframes cheer-rise {
  0%   { opacity: 0; transform: translate(-50%, 62vh) scale(.5) rotate(-4deg); }
  62%  { opacity: 1; transform: translate(-50%, -14px) scale(1.07) rotate(1.4deg); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0deg); }
}

@keyframes cheer-float {
  0%, 100% { transform: translate(-50%, 0) rotate(-.7deg); }
  50%      { transform: translate(-50%, -12px) rotate(.7deg); }
}

@keyframes cheer-out {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 18px) scale(.92); }
}

/* ── ночной режим: включается после достижения «1000 шариков» ─────── */
body { transition: color 1s ease; }

.note,
.domain,
.wordmark,
.tagline,
.halo,
.logo,
.pop-counter {
  transition:
    color 1s ease,
    background-color 1s ease,
    border-color 1s ease,
    box-shadow 1s ease,
    filter 1.2s ease,
    opacity 1s ease;
}

body.theme-dark { color: #ffd9ec; }
body.theme-dark::after { opacity: .16; }

body.theme-dark .note { color: rgba(255, 216, 238, .84); }
body.theme-dark .tagline { color: #ffeaf7; }

body.theme-dark .domain {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 12px 28px rgba(8, 2, 26, .5);
}

body.theme-dark .halo {
  background: radial-gradient(circle,
    rgba(255, 255, 255, .5) 0%,
    rgba(186, 140, 255, .26) 44%,
    rgba(255, 255, 255, 0) 72%);
}

body.theme-dark .logo { filter: drop-shadow(0 18px 36px rgba(140, 70, 230, .5)); }

body.theme-dark .wordmark {
  text-shadow:
    0 2px 0 rgba(120, 20, 90, .5),
    0 16px 44px rgba(6, 2, 20, .7);
}

body.theme-dark .pop-counter {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 12px 28px rgba(8, 2, 26, .5);
}

/* ── доступность: уважаем «уменьшить движение» ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .stage,
  .logo-wrap,
  .halo { animation: none !important; }
  .logo-wrap { transform: none; }
  .cheer.is-on {
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, 0);
  }
}