/* ============================================================
   Приглашение на день рождения — стили
   Порядок: шрифты → переменные → база → фон → карточка →
   секции → компоненты → адаптив
   ============================================================ */

/* ---------- шрифты (локальные, без внешних CDN) ---------- */
@font-face {
  font-family: 'Pangolin'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/pangolin-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Pangolin'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/pangolin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'Neucha'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/neucha-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Neucha'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/neucha-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

/* ---------- переменные ---------- */
:root {
  --cream:      #FBF1DE;
  --cream-deep: #F5E6C8;
  --pink:       #FBD3E1;
  --pink-soft:  #FDE8F0;
  --pink-deep:  #F7B0CB;
  --berry:      #E8336E;
  --berry-dark: #C81E56;
  --ink:        #7A5460;
  --white:      #FFFBF5;

  --yellow: #F2C14E;
  --blue:   #4A72C4;
  --orange: #EE7B32;
  --green:  #7BA05B;
  --violet: #9B7BD4;

  --f-head: 'Pangolin', 'Comic Sans MS', cursive;
  --f-hand: 'Caveat', 'Segoe Script', cursive;
  --f-body: 'Neucha', 'Comic Sans MS', cursive;

  --card-w: 640px;
  --radius: 42px;
}

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.noscript {
  position: fixed; inset: auto 0 0 0; margin: 0; padding: 10px;
  text-align: center; background: var(--berry); color: #fff; z-index: 100;
}

/* ---------- фоновые каракули ---------- */
.bg-doodles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-doodles svg {
  position: absolute;
  overflow: visible;
  opacity: .85;
}

.bg-doodles path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- рамка вокруг карточки, как в примере ---------- */
.frame {
  position: relative;
  z-index: 1;
  max-width: calc(var(--card-w) + 44px);
  margin: 40px auto;
  padding: 22px;
  border: 1.5px solid rgba(122, 84, 96, .35);
  border-radius: calc(var(--radius) + 20px);
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: 0 18px 50px -20px rgba(122, 84, 96, .38);
}

/* ---------- секции ---------- */
.sec {
  position: relative;
  padding: 46px 28px;
  text-align: center;
}

.sec--pink  { background: var(--pink); }
.sec--cream { background: var(--cream); }

/* убираем двойные отступы там, где секции одного цвета идут подряд */
.sec--cream + .sec--cream,
.sec--pink  + .sec--pink { padding-top: 6px; }

/* ---------- волнистые переходы ---------- */
.wave {
  position: relative;
  height: 44px;
  margin-top: -1px;
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 1200px 44px;
}

/* верх розовый → низ кремовый */
.wave--to-cream {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath fill='%23FBD3E1' d='M0 0 H1200 V16 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 V0 Z'/%3E%3C/svg%3E");
}

/* верх кремовый → низ розовый */
.wave--to-pink {
  background-color: var(--pink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath fill='%23FBF1DE' d='M0 0 H1200 V16 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 q-50 34 -100 0 V0 Z'/%3E%3C/svg%3E");
}

/* ---------- типографика ---------- */
.title {
  margin: 0 0 18px;
  font-family: var(--f-head);
  font-weight: 400;
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  color: var(--berry);
  letter-spacing: .01em;
}

.title--sm { font-size: clamp(1.35rem, 5vw, 1.7rem); margin-bottom: 22px; }

.text {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(1.05rem, 4.3vw, 1.22rem);
  color: var(--berry-dark);
  line-height: 1.75;
}

.text p { margin: 0; }
.text--sm { font-size: 1.02rem; max-width: 30ch; opacity: .92; }

.note {
  margin: 22px auto 0;
  max-width: 36ch;
  font-family: var(--f-hand);
  font-size: 1.05rem;
  color: var(--ink);
  opacity: .75;
}

/* ---------- «забор»: чередующаяся высота букв ---------- */
.fence {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 400;
  color: var(--berry);
  line-height: 1;
  white-space: nowrap;
}

.fence__l {
  display: inline-block;
  transform-origin: 50% 80%;
}

.fence__l--up   { font-size: 1em;    transform: translateY(-.05em) rotate(-3deg); }
.fence__l--down { font-size: .76em;  transform: translateY(.08em)  rotate(3deg);  }

/* ---------- герой ---------- */
.hero { padding-top: 54px; padding-bottom: 34px; }

.hero__doodles { position: absolute; inset: 0; pointer-events: none; }
.hero__doodles svg { position: absolute; overflow: visible; }
.hero__doodles path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.hero__name {
  position: relative;
  z-index: 2;
  font-size: clamp(2.9rem, 13vw, 4.6rem);
}

.hero__age {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 4px 0 -6px;
  cursor: pointer;
  user-select: none;
}

.hero__age-blob {
  position: absolute;
  inset: 10% -22% 6% -22%;
  z-index: -1;
  background: var(--white);
  border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  transform: rotate(-4deg);
  opacity: .82;
}

.hero__age-num {
  display: block;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(5.4rem, 25vw, 8.4rem);
  line-height: 1;
  color: var(--berry);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.hero__age:hover .hero__age-num { transform: rotate(-4deg) scale(1.06); }

.hero__word {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
}

.hero__date {
  position: relative;
  z-index: 2;
  margin: 24px 0 0;
  font-family: var(--f-hand);
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  color: var(--berry-dark);
}

/* ---------- фото-наклейки ----------
   У фото вырезан фон, поэтому оно лежит поверх цветного
   пятна и свободно выходит за его край — как настоящая наклейка.
   --blob-w / --blob-y настраивают пятно под конкретный кадр.
   ----------------------------------- */
.sticker {
  position: relative;
  display: flex;
  justify-content: center;
  width: min(76%, 330px);
  margin: 30px auto 0;
}

.sticker::before {
  content: '';
  position: absolute;
  /* --blob-x двигает пятно, если фигура на фото стоит не по центру кадра */
  left: calc(50% + var(--blob-x, 0%));
  bottom: var(--blob-y, -4%);
  width: var(--blob-w, 96%);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(var(--blob-rot, -4deg));
  background: var(--blob-color, var(--white));
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
}

.sticker__img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(122, 84, 96, .3));
  /* фон вырезан не идеально ровно — растворяем нижнюю кромку,
     чтобы рваный край уходил в пятно, а не торчал обрубком */
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade, 90%), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 var(--fade, 90%), transparent 100%);
}

/* пятна кремовые, а не белые: на фото много белого (торт, рубашки),
   на белой подложке оно бы пропало */
.sticker--hero {
  --blob-w: 88%; --blob-y: -6%; --blob-x: -4%; --blob-color: var(--cream); --fade: 78%;
  width: min(78%, 340px);
}

.sticker--mid {
  --blob-w: 92%; --blob-y: -5%; --blob-rot: 5deg; --blob-color: var(--cream);
  width: min(58%, 240px);
  margin-top: 34px;
}

.sticker--footer {
  --blob-w: 108%; --blob-y: -6%; --blob-rot: 4deg; --blob-color: var(--cream);
  width: min(52%, 210px);
}

/* ---------- наклейки Hello Kitty ---------- */
.kitty {
  position: absolute;
  z-index: 3;
  width: 92px;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(122, 84, 96, .25));
  animation: floaty 6s ease-in-out infinite;
}

.kitty--hero   { right: -19%; bottom: -2%; width: 92px; transform: rotate(10deg); }
.kitty--guests { left: 6%; top: 18px; width: 72px; transform: rotate(-12deg); }

/* ---------- бантики ---------- */
.bow {
  position: absolute;
  pointer-events: none;
  opacity: .9;
}

/* ---------- обратный отсчёт ---------- */
.countdown__row {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 2.4vw, 16px);
  flex-wrap: wrap;
}

.cd {
  min-width: 74px;
  padding: 16px 10px 14px;
  background: var(--white);
  border-radius: 58% 42% 50% 50% / 46% 52% 48% 54%;
  box-shadow: 0 8px 18px -12px rgba(122, 84, 96, .5);
}

.cd:nth-child(even) { transform: rotate(2.5deg); }
.cd:nth-child(odd)  { transform: rotate(-2.5deg); }

.cd__num {
  display: block;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--berry);
  font-variant-numeric: tabular-nums;
}

.cd__lbl {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: .82rem;
  color: var(--ink);
  opacity: .8;
}

/* ---------- календарь ---------- */
.cal__month {
  margin: 0 0 14px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--berry);
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 2px;
  max-width: 400px;
  margin: 0 auto;
}

.cal__dow {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
  padding-bottom: 4px;
}

.cal__day {
  position: relative;
  padding: 7px 0;
  font-family: var(--f-hand);
  font-size: 1.35rem;
  color: var(--berry-dark);
}

.cal__day--empty { color: transparent; }
.cal__day--past  { opacity: .38; }

.cal__day--party {
  color: var(--berry);
  font-weight: 700;
  z-index: 1;
}

.cal__day--party::before {
  content: '';
  position: absolute;
  inset: -6px 2px;
  z-index: -1;
  background: var(--pink-deep);
  border-radius: 58% 42% 48% 52% / 52% 46% 54% 48%;
  animation: blobPulse 4s ease-in-out infinite;
}

@keyframes blobPulse {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(3deg)  scale(1.08); }
}

/* ---------- место и время ---------- */
.place__card {
  max-width: 380px;
  margin: 0 auto;
  padding: 26px 22px 22px;
  background: var(--white);
  border-radius: 28px 34px 26px 32px;
  transform: rotate(-.8deg);
  box-shadow: 0 12px 26px -18px rgba(122, 84, 96, .55);
}

.place__time {
  margin: 0 0 6px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--berry);
}

.place__name {
  margin: 0 0 4px;
  font-family: var(--f-head);
  font-size: 1.22rem;
  color: var(--berry-dark);
}

.place__addr { margin: 0; font-size: 1rem; opacity: .85; }

.link-map {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--f-hand);
  font-size: 1.2rem;
  color: var(--berry);
  text-decoration: none;
  border-bottom: 2px solid var(--pink-deep);
  transition: border-color .2s, transform .2s;
}

.link-map:hover { border-color: var(--berry); transform: translateX(3px); }

/* ---------- карта ---------- */
.map {
  position: relative;
  max-width: 400px;
  margin: 26px auto 0;
  padding: 8px;
  background: var(--white);
  border-radius: 26px 30px 24px 28px;
  transform: rotate(.7deg);
  box-shadow: 0 12px 26px -18px rgba(122, 84, 96, .6);
}

.map__frame {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  border-radius: 20px 24px 18px 22px;
  background: var(--cream-deep);
}

/* карта не грузится или координаты не заданы — блок просто исчезает */
.map[hidden] { display: none; }

/* ссылка на меню — второй строкой под ссылкой на карту;
   display: table даёт ширину по тексту и центрирует через auto-поля */
.link-menu { display: table; margin: 12px auto 0; }

/* ---------- дресс-код ---------- */
.dress__colors {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

/* ширина по подписи: короткие «розовый» не растягиваются,
   длинные вроде «черный (для Егора)» не рвутся в столбик */
.swatch {
  min-width: 56px;
  max-width: 104px;
  text-align: center;
}

.swatch__dot {
  width: 44px;
  height: 44px;
  margin: 0 auto 6px;
  border-radius: 58% 42% 52% 48% / 48% 55% 45% 52%;
  border: 2px solid rgba(255, 255, 255, .85);
  /* тонкий контур, иначе светлые цвета сливаются с розовым фоном */
  box-shadow: 0 0 0 1.5px rgba(122, 84, 96, .22), 0 6px 12px -8px rgba(122, 84, 96, .8);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.swatch:hover .swatch__dot { transform: rotate(12deg) scale(1.12); }

.swatch__lbl {
  font-family: var(--f-hand);
  font-size: .92rem;
  color: var(--berry-dark);
  opacity: .85;
}

/* ---------- подарки ---------- */
.gifts { padding-bottom: 34px; }

.gifts__text {
  max-width: 22ch;
  margin: 0 auto;
  padding: 20px 26px 22px;
  font-family: var(--f-hand);
  font-size: clamp(1.35rem, 5.4vw, 1.7rem);
  line-height: 1.35;
  color: var(--berry-dark);
  background: var(--pink-soft);
  border-radius: 58% 42% 55% 45% / 42% 48% 52% 58%;
  transform: rotate(-1.5deg);
}

/* ---------- гости ---------- */
.guests__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 26px 8px;
  margin: 6px auto 0;
}

.guest { text-align: center; }

/* фото гостя тоже с вырезанным фоном: он «встаёт» на цветное
   пятно целиком, поэтому снимки в полный рост не обрезаются */
.guest__pic {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 150px;
  margin: 0 auto 10px;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.guest__pic::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 104px;
  height: 104px;
  transform: translateX(-50%);
  background: var(--blob, var(--pink-soft));
}

.guest:nth-child(4n+1) .guest__pic::before { border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
.guest:nth-child(4n+2) .guest__pic::before { border-radius: 45% 55% 42% 58% / 56% 44% 58% 42%; }
.guest:nth-child(4n+3) .guest__pic::before { border-radius: 52% 48% 60% 40% / 42% 60% 40% 58%; }
.guest:nth-child(4n)   .guest__pic::before { border-radius: 60% 40% 45% 55% / 55% 42% 58% 45%; }

.guest:hover .guest__pic { transform: scale(1.07) rotate(-3deg); }

.guest__pic img {
  position: relative;
  max-width: 100%;
  max-height: 144px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(122, 84, 96, .3));
  /* та же мягкая кромка, что и у больших фото */
  -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
}

.guest__letter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--white);
}

.guest__name {
  font-family: var(--f-hand);
  font-size: 1.08rem;
  color: var(--berry-dark);
  line-height: 1.25;
}

/* ---------- кнопка «Буду!» ---------- */
.rsvp { padding-bottom: 56px; }

.btn {
  display: inline-block;
  padding: 16px 44px 18px;
  font-family: var(--f-head);
  font-size: 1.5rem;
  color: var(--white);
  text-decoration: none;
  background: var(--berry);
  border-radius: 40px 46px 42px 44px;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 24px -12px var(--berry-dark);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}

.btn:hover {
  transform: rotate(1.5deg) scale(1.05) translateY(-3px);
  box-shadow: 0 18px 30px -12px var(--berry-dark);
}

.btn:active { transform: rotate(0) scale(.97); }

/* ---------- кнопка такси ----------
   идёт после .btn, иначе основная кнопка перебьёт цвет */
.btn--taxi {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 30px 14px;
  font-size: 1.2rem;
  color: #4A3B18;
  background: var(--yellow);
  border-radius: 34px 38px 32px 36px;
  transform: rotate(1deg);
  box-shadow: 0 10px 20px -12px rgba(122, 84, 96, .85);
}

.btn--taxi:hover {
  transform: rotate(-1deg) scale(1.04) translateY(-2px);
  box-shadow: 0 16px 26px -12px rgba(122, 84, 96, .9);
}

.btn__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn__icon circle { fill: currentColor; stroke: none; }

.footer__text {
  margin-top: 26px;
  font-size: clamp(1.3rem, 5.5vw, 1.8rem);
}

/* ---------- покачивание каракулей ---------- */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(4deg); }
}

/* ---------- подсказка после клика по «Буду!» ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  max-width: min(88vw, 420px);
  padding: 13px 22px;
  font-family: var(--f-hand);
  font-size: 1.15rem;
  text-align: center;
  color: var(--white);
  background: var(--berry);
  border-radius: 24px 28px 22px 26px;
  box-shadow: 0 14px 30px -14px rgba(122, 84, 96, .9);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}

.toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* вариант со ссылкой внутри — по нему нужно уметь кликать */
.toast--action { pointer-events: auto; }

.toast__link {
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255, 255, 255, .6);
}

.toast__link:hover { border-color: var(--white); }

/* ---------- конфетти ---------- */
#confetti {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* ---------- появление при скролле ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-in { opacity: 1; transform: none; }

/* ---------- адаптив ---------- */
@media (max-width: 700px) {
  .frame {
    margin: 12px auto;
    padding: 10px;
    border-radius: calc(var(--radius) + 8px);
  }
  .sec { padding: 38px 20px; }
  .wave { height: 32px; background-size: 800px 32px; }
  .cd { min-width: 66px; padding: 13px 8px 11px; }
  .cd__num { font-size: 1.85rem; }
  .guests__grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .guest__pic { height: 130px; }

  /* на узком экране заголовок занимает всю ширину — уводим Китти наверх, в угол */
  .guests { padding-top: 58px; }
  .kitty--guests { left: auto; right: 4%; top: 6px; width: 54px; }
  .kitty--hero { right: -12%; width: 74px; }
}

@media (max-width: 380px) {
  body { font-size: 17px; }
  .cd { min-width: 60px; }
  .cd__lbl { font-size: .74rem; }
}

/* каракули за карточкой прячем на узких экранах — там нет места */
@media (max-width: 900px) {
  .bg-doodles { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- печать ---------- */
@media print {
  .bg-doodles, #confetti { display: none; }
  .frame { border: none; margin: 0; }
  .card { box-shadow: none; }
  .reveal { opacity: 1; transform: none; }
}