/* =============================================
   Anyashop — «подарочная» тема
   Светлая: молочно-розовая + ирис
   Тёмная: полуночная слива + орхидея
   ============================================= */

:root {
  --bg: #FFF3FA;
  --card: #FFFFFF;
  --ink: #3D2A5E;
  --ink-soft: rgba(61, 42, 94, 0.62);
  --candy: #F0559F;          /* основной розовый */
  --candy-deep: #C13584;     /* «дно» кнопки */
  --iris: #8B5CF6;           /* фиолетовый акцент */
  --iris-deep: #6D28D9;
  --lilac: #F3DCF0;          /* мягкие рамки */
  --lilac-fill: #FBEAF6;     /* мягкие заливки */
  --shadow-card: 0 6px 26px rgba(240, 85, 159, 0.13);
  --shadow-card-hover: 0 14px 34px rgba(139, 92, 246, 0.20);
  --aurora-a: rgba(240, 85, 159, 0.20);
  --aurora-b: rgba(139, 92, 246, 0.18);
  --header-bg: rgba(255, 255, 255, 0.72);
}

.dark {
  --bg: #170B29;
  --card: #251142;
  --ink: #F3EAFF;
  --ink-soft: rgba(243, 234, 255, 0.60);
  --candy: #C77DFF;
  --candy-deep: #8B3DD9;
  --iris: #F274BC;
  --iris-deep: #C13584;
  --lilac: #3A1F63;
  --lilac-fill: #2E1650;
  --shadow-card: 0 6px 26px rgba(199, 125, 255, 0.14);
  --shadow-card-hover: 0 14px 34px rgba(199, 125, 255, 0.28);
  --aurora-a: rgba(199, 125, 255, 0.16);
  --aurora-b: rgba(242, 116, 188, 0.12);
  --header-bg: rgba(23, 11, 41, 0.78);
}

* { font-family: 'Nunito', sans-serif; }

body {
  background: var(--bg);
  color: var(--ink);
}

.font-display { font-family: 'Unbounded', sans-serif; letter-spacing: -0.02em; }
.font-script  { font-family: 'Caveat', cursive; }

/* ---------- Скроллбар ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--candy), var(--iris));
  border-radius: 999px;
}

::selection { background: rgba(240, 85, 159, 0.25); }

/* =============================================
   АВРОРА — дрейфующие пятна света на фоне
   ============================================= */
.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
}
.aurora::before,
.aurora::after {
  content: '';
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(70px);
}
.aurora::before {
  background: radial-gradient(circle, var(--aurora-a), transparent 65%);
  top: -18vmax;
  left: -12vmax;
  animation: drift-a 26s ease-in-out infinite alternate;
}
.aurora::after {
  background: radial-gradient(circle, var(--aurora-b), transparent 65%);
  bottom: -20vmax;
  right: -14vmax;
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vmax, 7vmax) scale(1.15); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-8vmax, -6vmax) scale(0.95); }
}

/* ---------- Звёзды: только в тёмной теме ---------- */
.starfield { display: none; }
.dark .starfield {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.starfield i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #E6D3FF;
  animation: twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50%      { opacity: 0.85; transform: scale(1.2); }
}

/* =============================================
   КНОПКИ-«МАРМЕЛАДКИ» — солидные, с нажатием
   ============================================= */
.btn-candy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  background: var(--candy);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--candy-deep);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s;
  transform: translateY(0);
  cursor: pointer;
  user-select: none;
}
.btn-candy:hover:not(:disabled) { filter: brightness(1.06); }
.btn-candy:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--candy-deep);
}
.btn-candy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: 0 2px 0 var(--candy-deep);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  border-radius: 999px;
  border: 2px dashed var(--lilac);
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--lilac-fill); border-color: var(--candy); }

/* =============================================
   КАРТОЧКИ-ПОДАРКИ
   ============================================= */
.gift-card {
  background: var(--card);
  border: 1.5px solid var(--lilac);
  border-radius: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s;
}
.gift-card:hover {
  transform: translateY(-5px) rotate(-0.4deg);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--candy);
}
.gift-card.is-done { opacity: 0.72; }
.gift-card.is-done:hover { transform: none; border-color: var(--lilac); }

/* Эмодзи на «живой» кляксе */
.emoji-blob {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: radial-gradient(circle at 35% 30%, var(--lilac-fill), var(--lilac));
  border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
  animation: blobmorph 9s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.gift-card:hover .emoji-blob { transform: scale(1.12) rotate(-6deg); }
@keyframes blobmorph {
  0%, 100% { border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%; }
  50%      { border-radius: 42% 58% 38% 62% / 58% 42% 58% 42%; }
}

/* =============================================
   ЦЕННИК — подарочная бирка
   ============================================= */
.tag-price {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--iris);
  background: var(--lilac-fill);
  border: 1.5px solid var(--lilac);
  border-radius: 0.6rem 0.9rem 0.9rem 0.6rem;
  padding: 0.3em 0.7em 0.3em 1.1em;
  transform: rotate(-3deg);
}
.tag-price::before {
  content: '';
  position: absolute;
  left: 0.4em;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--iris);
  transform: translateY(-50%);
}
.tag-price.tag-lg { font-size: 2rem; padding-left: 1.2em; }

/* =============================================
   ВАРИАНТЫ ЦЕНЫ — кнопки-чипы для гибких товаров
   ============================================= */
.price-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.4rem;
  border-radius: 1rem;
  border: 1.5px solid var(--lilac);
  background: var(--lilac-fill);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s, border-color 0.2s, box-shadow 0.15s;
  user-select: none;
}
.price-opt:hover { transform: translateY(-2px); border-color: var(--candy); }
.price-opt:active { transform: translateY(0); }

.price-opt .opt-coins {
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.2;
}
.price-opt .opt-label {
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--ink-soft);
  line-height: 1.2;
  text-align: center;
}

.price-opt.on {
  background: var(--candy);
  border-color: var(--candy);
  box-shadow: 0 3px 0 var(--candy-deep);
}
.price-opt.on .opt-coins,
.price-opt.on .opt-label { color: #fff; }

.price-opt.off {
  opacity: 0.55;
  pointer-events: none;
}

/* =============================================
   ЛЕТЯЩАЯ МОНЕТКА
   ============================================= */
.coin-fly {
  position: fixed;
  z-index: 200;
  font-size: 1.4rem;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.35, -0.2, 0.55, 1), opacity 0.7s ease;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg) scale(1.15); }
  75%      { transform: rotate(10deg) scale(1.1); }
}
.wiggle { animation: wiggle 0.45s ease; }

/* =============================================
   КОНФЕТТИ (страница успеха)
   ============================================= */
.confetti-piece {
  position: fixed;
  top: -3vh;
  z-index: 150;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to {
    transform: translateY(108vh) rotate(720deg);
    opacity: 0.9;
  }
}

/* =============================================
   ИНТРО — полноэкранные экраны перед магазином
   ============================================= */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem;
  background:
    radial-gradient(70vmax 70vmax at 12% -5%, var(--aurora-a), transparent 60%),
    radial-gradient(70vmax 70vmax at 88% 105%, var(--aurora-b), transparent 60%),
    var(--bg);
  transition: opacity 0.9s ease;
}
.intro-overlay.closing { opacity: 0; pointer-events: none; }

.intro-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 46rem;
}

.intro-emoji {
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  line-height: 1;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 12px 28px rgba(139, 92, 246, 0.35));
}

.intro-big {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 6.5vw, 4.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--candy), var(--iris));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.intro-desc {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.3;
  color: var(--ink-soft);
}

/* Поэтапное появление элементов слайда */
@keyframes intro-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.intro-slide .intro-emoji { opacity: 0; animation: intro-up 0.7s ease 0.1s both, float 4s ease-in-out 0.9s infinite; }
.intro-slide .intro-big   { opacity: 0; animation: intro-up 0.7s ease 0.35s both; }
.intro-slide .intro-desc  { opacity: 0; animation: intro-up 0.7s ease 0.75s both; }

.intro-dots { display: flex; gap: 0.55rem; }
.intro-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lilac);
  transition: background 0.3s, transform 0.3s;
}
.intro-dots i.on {
  background: var(--candy);
  transform: scale(1.35);
}

/* ---------- Появление контента ---------- */
main { animation: fadeIn 0.35s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.animate-bounce-slow { animation: bounce-slow 3s ease-in-out infinite; }

/* ---------- Поля ввода ---------- */
.input-soft {
  width: 100%;
  background: var(--lilac-fill);
  border: 2px solid var(--lilac);
  border-radius: 1.1rem;
  padding: 0.8rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-soft::placeholder { color: var(--ink-soft); opacity: 0.6; }
.input-soft:focus {
  border-color: var(--candy);
  box-shadow: 0 0 0 4px rgba(240, 85, 159, 0.15);
}

/* ---------- Плашки-статусы ---------- */
.pill-note {
  border-radius: 1.1rem;
  padding: 0.8rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  border: 1.5px solid var(--lilac);
  background: var(--lilac-fill);
  color: var(--ink);
}
.pill-note.ok   { border-color: rgba(74, 200, 130, 0.4);  background: rgba(74, 200, 130, 0.10); color: #2E9E63; }
.dark .pill-note.ok { color: #7BE3A9; }
.pill-note.bad  { border-color: rgba(240, 90, 100, 0.35); background: rgba(240, 90, 100, 0.10); color: #D84555; }
.dark .pill-note.bad { color: #FF9AA5; }

/* ---------- Хедер ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px dashed var(--lilac);
}

/* ---------- Утилиты ---------- */
.text-soft { color: var(--ink-soft); }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Уважение к reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}