/* корги из приложения */

.hero-snout {
  --c-fur1: #eeb070;
  --c-fur2: #d98a45;
  --c-fur3: #b5652a;
  --c-mask: #fff6ea;
  --c-mask-op: 0.96;
  --c-dots: #8a5a34;
  --c-ear1: #c97336;
  --c-ear2: #f4d9bd;
  --c-lea1: #3a2f2a;
  --c-lea2: #231c18;
  --c-lea3: #140f0d;
  --c-glint-op: 0.6;
  --c-pebble-op: 0.25;
  --c-shade: rgba(80, 50, 20, 0.25);
  --c-accent: #b0451a;
  --c-muted: #6b5d51;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(440px, 86vw);
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

/* На планшете и десктопе низ носа — 28 px от среза карточки, как в
   мини-приложении. SVG сдвигаем внутри фигуры: её низ остаётся на краю
   карточки, поэтому скрытый контейнер не получает лишний прокрут. */
@media (min-width: 901px) {
  .hero-snout {
    bottom: 0;
  }

  .hero-snout svg {
    transform: translateY(6.6px);
  }
}

@media (prefers-color-scheme: dark) {
  .hero-snout {
    --c-fur1: #666b7e;
    --c-fur2: #4a4e5e;
    --c-fur3: #2c2f3d;
    --c-mask: #c9cbd6;
    --c-mask-op: 0.9;
    --c-dots: #2c2f3d;
    --c-ear1: #3d4158;
    --c-ear2: #8c6a4f;
    --c-lea1: #221e1c;
    --c-lea2: #141110;
    --c-lea3: #060505;
    --c-glint-op: 0.6;
    --c-pebble-op: 0.3;
    --c-shade: rgba(0, 0, 0, 0.5);
    --c-accent: #f2b56b;
    --c-muted: #9ea1b3;
  }

  /* ночью блик меньше и тусклее */
  .hero-snout .bob {
    transform: scale(0.8);
    transform-box: fill-box;
    transform-origin: 50% 35%;
  }
}

.hero-snout svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-snout:focus-visible {
  outline: none;
}

.hero-snout:focus-visible .nose-shape {
  stroke: var(--c-accent);
  stroke-width: 3;
}

.hero-snout .nose-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 32;
  stroke-linejoin: round;
  pointer-events: all;
  cursor: pointer;
}

.hero-snout .fur1 { stop-color: var(--c-fur1); }
.hero-snout .fur2 { stop-color: var(--c-fur2); }
.hero-snout .fur3 { stop-color: var(--c-fur3); }
.hero-snout .lea1 { stop-color: var(--c-lea1); }
.hero-snout .lea2 { stop-color: var(--c-lea2); }
.hero-snout .lea3 { stop-color: var(--c-lea3); }
.hero-snout .mask { fill: var(--c-mask); opacity: var(--c-mask-op); transition: fill 0.5s; }
.hero-snout .whisk { fill: var(--c-dots); }
.hero-snout .pebble { opacity: var(--c-pebble-op); }
.hero-snout .ear-in { fill: var(--c-ear2); }
.hero-snout .ear-out { fill: var(--c-ear1); }
.hero-snout .z { font-family: Unbounded, sans-serif; font-weight: 500; fill: var(--c-muted); opacity: 0; }

/* блик-боб: резкий верх, мягкий низ, градиент вместо размытия; правый тусклее */
.hero-snout .bob { fill: url(#bobG); opacity: var(--c-glint-op); }
.hero-snout .bob.b2 { opacity: calc(var(--c-glint-op) * 0.6); }
.hero-snout.is-sleep #glint { opacity: 0.45; }
.hero-snout .spark { fill: var(--c-accent); stroke: rgba(255, 236, 214, 0.6); stroke-width: 1; }

/* уши: в покое спрятаны за краем карточки */
.hero-snout .ear {
  transform-box: fill-box;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
}
.hero-snout .ear.r { transition-delay: 40ms; }
.hero-snout .ear.l { transform-origin: 70% 100%; transform: translateY(295px) rotate(-14deg); }
.hero-snout .ear.r { transform-origin: 30% 100%; transform: translateY(295px) rotate(14deg); }
.hero-snout .ear-k { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-snout.is-recording .ear,
.hero-snout.is-done .ear {
  transition-duration: 0.42s;
  transition-timing-function: cubic-bezier(0.22, 1.18, 0.36, 1);
}
.hero-snout.is-recording .ear.l { transform: translateY(0) rotate(-6deg); }
.hero-snout.is-recording .ear.r { transform: translateY(0) rotate(6deg); }

/* короткое нажатие: уши выезжают из покоя, стоят и возвращаются */
.hero-snout.is-peek .ear {
  transition-duration: 0.26s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}
.hero-snout.is-peek .ear.l { transform: translateY(0) rotate(-6deg); }
.hero-snout.is-peek .ear.r { transform: translateY(0) rotate(6deg); }

@keyframes perk {
  0% { transform: none; }
  35%, 50% { transform: translateY(-12px) rotate(3deg); }
  100% { transform: none; }
}
@keyframes perkR {
  0% { transform: none; }
  35%, 50% { transform: translateY(-12px) rotate(-3deg); }
  100% { transform: none; }
}
.hero-snout.is-done .ear.l .ear-k { animation: perk 0.85s cubic-bezier(0.3, 0.8, 0.3, 1) both; }
.hero-snout.is-done .ear.r .ear-k { animation: perkR 0.85s cubic-bezier(0.3, 0.8, 0.3, 1) 50ms both; }

/* покой: дыхание и редкое принюхивание */
.hero-snout .nostril { transform-box: fill-box; }
.hero-snout #nl,
.hero-snout #nr { transform-origin: 25% 80%; }
.hero-snout .life { transform-origin: 195px 130px; animation: breathe 3.8s ease-in-out infinite; }

@media (prefers-color-scheme: dark) {
  .hero-snout .life { animation-duration: 5.2s; }
}

@keyframes breathe {
  0%, 100% { transform: none; }
  50% { transform: translateY(-1.2px) scale(1.008); }
}
@keyframes tease {
  0%, 100% { transform: none; }
  8% { transform: translateY(-2.5px) scale(1.015); }
  14% { transform: none; }
  22% { transform: translateY(-2px) scale(1.012); }
  28% { transform: none; }
}
@keyframes flare {
  0%, 100% { transform: none; }
  8%, 22% { transform: scale(1.1, 1.2); }
  14%, 28% { transform: none; }
}
.hero-snout[data-tease] .life { animation: tease 1.6s ease-out; }
.hero-snout[data-tease] .nostril { animation: flare 1.6s ease-out; }

/* 3-е быстрое нажатие: подёргивание и наклон головы */
@keyframes twitch {
  0%, 100% { transform: none; }
  22% { transform: translateX(-3px) rotate(-1.4deg); }
  42% { transform: translateX(1.8px) rotate(0.8deg); }
  62% { transform: translateX(-0.8px) rotate(-0.3deg); }
  80% { transform: translateX(0.3px); }
}
@keyframes twitchN {
  0%, 100% { transform: none; }
  18% { transform: scale(1.14, 1.24); }
  34% { transform: scale(0.95, 1.03); }
  52% { transform: scale(1.07, 1.13); }
}
.hero-snout[data-twitch] .life { animation: twitch 0.6s cubic-bezier(0.3, 0.7, 0.4, 1) 0.12s; }
.hero-snout[data-twitch] .nostril { animation: twitchN 0.5s ease-out 0.14s; }
.hero-snout[data-twitch] #nr { animation-delay: 0.2s; }
.hero-snout .head { transform-origin: 195px 250px; transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.5, 1); }
.hero-snout.is-confused .head { transform: rotate(-9deg) translateX(-6px); }
.hero-snout.is-confused .ear.l { transform: translateY(20px) rotate(-6deg); }
.hero-snout.is-confused .ear.r { transform: translateY(100px) rotate(10deg); transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes flick {
  0%, 100% { transform: none; }
  30% { transform: translateY(-14px) rotate(9deg); }
  60% { transform: rotate(-3deg); }
}
.hero-snout.is-confused .ear.r .ear-k { animation: flick 0.5s ease-out 0.8s; }

/* касание, «пф», язык, капля, сердечки */
.hero-snout .ripple {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}
.hero-snout .puff { fill: #fff; stroke: rgba(80, 50, 20, 0.2); stroke-width: 1; pointer-events: none; }
@keyframes snortN {
  0%, 100% { transform: none; }
  25% { transform: scale(1.22, 1.3); }
}
.hero-snout[data-snort] .nostril { animation: snortN 0.45s ease-out; }
.hero-snout .tongue {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.hero-snout .tongue-sway { transform-origin: 50% 100%; will-change: transform; }
.hero-snout .tongue-body { fill: url(#tongueG); }
.hero-snout .tongue-shade { fill: #000; opacity: 0.16; }
.hero-snout .tongue-line { stroke: #a63c51; stroke-width: 3; stroke-linecap: round; fill: none; opacity: 0.45; }
.hero-snout .tongue-hi { fill: #fff; opacity: 0.4; }
.hero-snout .drop ellipse { fill: rgba(255, 255, 255, 0.22); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.hero-snout .drop-hi { fill: #fff; opacity: 0.9; }
.hero-snout .drop { pointer-events: none; }
.hero-snout .heart { fill: var(--c-accent); pointer-events: none; }
@keyframes wet {
  0%, 100% { opacity: var(--c-glint-op); }
  35% { opacity: 1; }
}
.hero-snout[data-lick] .bob { animation: wet 0.6s ease-out 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .hero-snout .life,
  .hero-snout[data-tease] .life,
  .hero-snout[data-twitch] .life,
  .hero-snout .nostril,
  .hero-snout .ear-k,
  .hero-snout .head,
  .hero-snout .z {
    animation: none !important;
  }

  .hero-snout .ear,
  .hero-snout .head {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }

  .hero-snout .nose-shape {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 120ms ease-out;
  }

  .hero-snout.is-tap .nose-shape {
    transform: scale(0.94);
  }
}


/* Телефон и портретный планшет: морда поднята, под носом полоса меха и маски */
@media (max-width: 900px) {
  .hero-snout {
    width: var(--snout-w);
    bottom: 0;
  }

  /* Низ носа — 25–29 px от края: сдвигаем рисунок внутри сцены, не выходя
     за её низ (иначе карточка прокручивается к выступающей сцене). */
  .hero-snout .head,
  .hero-snout .nose-hit {
    transform: translateY(6px);
  }

  /* Уши поднимаются чуть внутрь, чтобы не касаться боковых краёв карточки */
  @keyframes perk-in {
    0% { transform: none; }
    35%, 50% { transform: translate(4px, -10px) rotate(3deg); }
    100% { transform: none; }
  }
  @keyframes perk-in-r {
    0% { transform: none; }
    35%, 50% { transform: translate(-4px, -10px) rotate(-3deg); }
    100% { transform: none; }
  }

  .hero-snout.is-done .ear.l .ear-k { animation-name: perk-in; }
  .hero-snout.is-done .ear.r .ear-k { animation-name: perk-in-r; }
}