/* ==========================================================
   Honey corgi in the corner - click it, hearts float up.
   Kept out of styles.css so the landing can be re-imported
   from Claude Design without losing him.
   ========================================================== */

.corgi-corner {
  position: fixed;
  right: clamp(10px, 2vw, 28px);
  bottom: clamp(6px, 1.5vw, 18px);
  z-index: 40;            /* under the topbar (50) and the tweaks panel (60) */
  width: clamp(96px, 11vw, 150px);
  aspect-ratio: 560 / 545;
}

.corgi {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.corgi img {
  width: 100%;
  filter: drop-shadow(0 10px 18px rgba(255,107,53,.28));
  transform-origin: 50% 92%;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.4), filter .25s ease;
  animation: corgi-breathe 3.6s ease-in-out infinite;
}
.corgi:hover img,
.corgi:focus-visible img {
  transform: scale(1.06) rotate(-3deg);
  filter: drop-shadow(0 14px 24px rgba(255,107,53,.4));
}
.corgi:focus-visible { outline: none; }
.corgi:focus-visible img { outline: 3px solid var(--c-orange); outline-offset: 6px; border-radius: 12px; }

.corgi.is-happy img { animation: corgi-bounce .52s cubic-bezier(.28,.84,.42,1); }

@keyframes corgi-breathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}
@keyframes corgi-bounce {
  0%   { transform: scale(1)          rotate(0deg); }
  25%  { transform: scale(1.14, .88)  rotate(-5deg); }
  55%  { transform: scale(.94, 1.08)  rotate(4deg); }
  80%  { transform: scale(1.04, .98)  rotate(-2deg); }
  100% { transform: scale(1)          rotate(0deg); }
}

/* ----- hearts ----- */

.corgi-hearts {
  position: absolute;
  inset: 0;
  z-index: 2;             /* above the dog, or he hides his own hearts */
  pointer-events: none;
}
.heart {
  position: absolute;
  left: 50%;
  bottom: 68%;
  width: 30px;
  color: var(--c-orange, #FF6B35);
  opacity: 0;
  will-change: transform, opacity;
  animation: heart-rise var(--dur, 1.3s) cubic-bezier(.32,.62,.5,1) forwards;
}
.heart svg { width: 100%; height: auto; display: block; }

@keyframes heart-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.35) rotate(var(--r0, 0deg));
  }
  18% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx, 0px) * .2), -14px) scale(1) rotate(var(--r0, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-1 * var(--dy, 120px)))
               scale(var(--s, 1.2)) rotate(var(--r1, 0deg));
  }
}

@media (max-width: 480px) {
  .corgi-corner { width: 88px; }
  .heart { width: 24px; }
}