/* ============ Hero (Screen 1) ============ */
.hero { padding: 0 var(--gutter); }

.hero__card {
  --s: 1;                         /* масштаб от скролла (hero.js) */
  position: relative; overflow: hidden; isolation: isolate;
  /* ниже карточки уже виден заголовок второго экрана */
  height: calc(100svh - var(--hdr-h) - 120px);
  min-height: 540px; max-height: 760px;
  border-radius: var(--r-xl);
  background-color: var(--card);
  transform: scale(var(--s)); transform-origin: 50% 0;
  will-change: transform;
}
.hero__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 70% 85%, rgba(255, 255, 255, .18), transparent 70%);
}
/* «шторка» старого цвета: при смене питомца уезжает вверх и открывает новый */
.hero__wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: inset(0 0 100% 0); }
.hero__wash.is-running { animation: wash 1s var(--ease-in-out) forwards; }
@keyframes wash {
  from { clip-path: inset(0 0 0 0 round 0 0 50% 50% / 0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0 round 0 0 50% 50% / 0 0 80px 80px); }
}
.hero__card.is-switching { animation: hero-squeeze .95s var(--ease-in-out); }
@keyframes hero-squeeze {
  0%, 100% { transform: scale(var(--s)); }
  40% { transform: scale(calc(var(--s) * .97)); border-radius: 44px; }
}

/* ---------- Жирная линия за питомцем ---------- */
.hero__swoosh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.hero__swoosh path {
  fill: none; stroke: var(--accent-alt); stroke-width: 70; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke var(--t-theme) var(--ease-in-out);
}
body.is-ready .hero__swoosh path { animation: line-draw 1.6s var(--ease-out) .25s forwards; }
.hero__card.is-switching .hero__swoosh path { animation: line-redraw 1.4s var(--ease-out) forwards; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes line-redraw { 0%, 25% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }

/* ---------- Питомцы ---------- */
.hero__pets { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__pet {
  position: absolute; left: 66%; bottom: 0;
  height: 56%; width: auto; max-width: none;
  transform: translate(-50%, calc(100% + 140px));
  transition: transform .55s cubic-bezier(.7, 0, .84, 0);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .14));
}
.hero__pet--cat { height: 54%; }
/* на телефоне питомец чуть выше кнопок, нижний край растворяется */
@media (max-width: 639px) {
  .hero__pet { bottom: 64px; height: 50%; left: 64%;
    -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
    /* drop-shadow вместе с маской в iOS Safari рисует серый прямоугольник по границам фото */
    filter: none; }
  .hero__pet--cat { height: 50%; }
}
body.is-ready[data-pet="dog"] .hero__pet--dog,
body.is-ready[data-pet="cat"] .hero__pet--cat {
  transform: translate(-50%, 0);
  transition: transform 1s var(--ease-out) .32s;
}

/* ---------- Еда вокруг ---------- */
.floats--back { z-index: 0; }
.floats--front { z-index: 2; }
.hero .float { opacity: 0; transition: opacity 1s ease .6s; }
body.is-ready .hero .float { opacity: var(--o, 1); }
.hero .f-far { --o: .6; }
.hero-f1 { width: 44px; left: 72%; top: 30%; --r0: -20deg; --dur: 9s; }
.hero-f2 { display: none; }
.hero-f3 { width: 60px; left: 84%; top: 32%; --r0: 12deg; --dur: 7.5s; --delay: -2s; }
.hero-f4 { width: 46px; left: 16%; top: 60%; --r0: -8deg; --dur: 8.5s; --delay: -4s; }
.hero-f5 { width: 130px; right: -34px; bottom: 120px; --r0: 18deg; --dur: 10s; --delay: -1s; }

/* «палочки» у морды */
.hero__doodle {
  position: absolute; z-index: 2; width: 52px; left: 40%; top: 44%;
  fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; overflow: visible;
  animation: wiggle 3.2s ease-in-out infinite;
}
.hero__doodle path { stroke-dasharray: 120; stroke-dashoffset: 120; }
body.is-ready .hero__doodle path { animation: draw .9s var(--ease-out) forwards; }
.hero__doodle path:nth-child(1) { animation-delay: .9s !important; }
.hero__doodle path:nth-child(2) { animation-delay: 1.02s !important; }
.hero__doodle path:nth-child(3) { animation-delay: 1.14s !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* сердечко «маркером» справа от питомца */
.hero__heart {
  position: absolute; z-index: 2; width: 42px; left: 84%; top: 50%;
  fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  rotate: 12deg;
  animation: heart-beat 2.8s ease-in-out infinite 2.4s;
}
.hero__heart path { stroke-dasharray: 260; stroke-dashoffset: 260; }
body.is-ready .hero__heart path { animation: draw 1.2s var(--ease-out) 1.3s forwards; }
.hero__card.is-switching .hero__heart path { animation: heart-redraw 1.4s var(--ease-out) forwards; }
@keyframes heart-redraw { 0%, 25% { stroke-dashoffset: 260; } 100% { stroke-dashoffset: 0; } }
@keyframes heart-beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.14); } 86% { transform: scale(.96); } 92% { transform: scale(1.08); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-7deg) scale(1.06); } }

/* ---------- Текст + действия ---------- */
.hero__content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 24px calc(var(--page-x) - var(--gutter)) 16px;
  pointer-events: none;
}
.hero__content > * { pointer-events: auto; }
.hero__text { color: #fff; max-width: 640px; animation: rise 1.1s var(--ease-out) .05s both; }
.hero__title { font-size: clamp(32px, 9vw, 40px); }
.hero__sub { margin-top: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.05em; opacity: .95; }
.hero__promo { margin-top: 14px; font-size: 15px; font-weight: 600; }
.badge {
  display: inline-block; margin: 0 4px; padding: 3px 12px 4px;
  border-radius: 10px; background: var(--accent-alt); color: #fff;
  font-weight: 900; font-size: 1.25em; letter-spacing: -.05em;
  rotate: -6deg; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35);
  transition: background-color var(--t-theme);
  animation: badge-pop .9s var(--ease-out) .7s both;
}
@keyframes badge-pop { from { opacity: 0; transform: scale(.4) rotate(14deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }

.hero__actions { display: grid; gap: 8px; animation: rise 1s var(--ease-out) .45s both; }
.hero__actions .pet-switch { width: 100%; }

.hero__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 58px; padding: 6px 6px 6px 24px; border-radius: var(--r-pill);
  background: #fff; color: var(--ink); font-weight: 800; font-size: 16px;
  box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease-out);
}
.hero__cta { transition: transform .35s var(--ease-out), background-color .35s ease, color .35s ease, box-shadow .35s ease; }
.hero__cta:active { transform: scale(.97); }
/* наведение (на телефоне — нажатие): кнопка заливается мягким цветом бренда, кружок со стрелкой не меняется */
@media (hover: hover) {
  .hero__cta:hover { background: #9BBD88; color: #fff; }
  body[data-pet="cat"] .hero__cta:hover { background: #FF9E9A; }
}
.hero__cta:active { background: #9BBD88; color: #fff; }
body[data-pet="cat"] .hero__cta:active { background: #FF9E9A; }
.hero__cta-arrow {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-deep); color: #fff;
  transition: background-color var(--t-theme) var(--ease-in-out);
}
.hero__cta-arrow svg { width: 22px; height: 22px; transition: transform .4s var(--ease-out); }
.hero__cta:hover .hero__cta-arrow svg { transform: translateX(4px); }

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .hero__content { padding-top: 36px; padding-bottom: 28px; }
  .hero__title { font-size: clamp(40px, 6vw, 56px); }
  .hero__actions { grid-auto-flow: column; justify-content: start; }
  .hero__actions .pet-switch { width: auto; }
  .hero__pet { left: 70%; height: 66%; }
  .hero__pet--cat { height: 62%; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .hero { padding: var(--gutter); }
  .hero__card { height: calc(100svh - 2 * var(--gutter) - 190px); min-height: 560px; max-height: 800px; }
  .hero__content {
    justify-content: center; gap: 36px;
    padding-top: calc(var(--hdr-h) + 12px); padding-bottom: 56px;
  }
  .hero__text { max-width: 46%; }
  .hero__title { font-size: clamp(48px, 4.6vw, 72px); }
  .hero__sub { margin-top: 14px; font-size: clamp(20px, 1.8vw, 28px); }
  .hero__promo { margin-top: 22px; font-size: 18px; }
  .hero__cta { min-height: 62px; padding-left: 28px; font-size: 17px; }
  .pet-switch button { height: 52px; padding: 0 22px; font-size: 16px; }

  .hero__pet { left: 70%; height: 88%; }
  .hero__pet--cat { height: 86%; }

  .hero-f1 { width: 80px; left: 52%; top: 20%; }
  .hero-f2 { display: block; width: 70px; left: 92%; top: 66%; --dur: 11s; --delay: -6s; }
  .hero-f3 { width: 120px; left: 86%; top: 16%; }
  .hero-f4 { width: 92px; left: 50%; top: 70%; }
  .hero-f5 { width: 260px; right: -60px; bottom: -50px; }
  .hero__doodle { width: 84px; left: 49%; top: 40%; stroke-width: 4.5; }
  .hero__heart { width: 66px; left: 88%; top: 42%; stroke-width: 4.5; }
}