.brand { position: relative; }
/* Animate the original logo's dot independently, preserving its artwork. */
.brand-wordmark { clip-path: inset(31.5% 0 0); }
.brand-dot {
  position: absolute;
  inset: 0;
  clip-path: inset(14% 22% 68.5% 71.5%);
  transform-origin: 74.9% 31.1%;
  animation: logo-dot-pulse 3.4s ease-in-out infinite;
}
.short-line {
  transform-origin: left center;
  animation: line-loading 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes logo-dot-pulse {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.32); }
  70% { transform: scale(.78); }
}
@keyframes line-loading {
  0%, 10% { transform: scaleX(0); }
  78%, 92% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

.hero-art {
  overflow: hidden;
  --animal-opacity: .4;
  background: transparent;
}
.clip-defs { position: absolute; pointer-events: none; }
.art-still { transition: opacity 450ms; }
.still-animals { opacity: var(--animal-opacity); }
.motion-background, .still-background { clip-path: url(#pedestal-contour); }
.motion-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms;
}
.has-layers .motion-stage { opacity: 1; }
.has-layers .art-still { opacity: 0; }
.motion-background,
.heart-layer {
  display: block;
  width: 100%;
  height: 100%;
}

.heart-invitation {
  position: absolute;
  inset: 0;
  transform-origin: 50% 43%;
}
.is-inviting .heart-invitation { animation: heart-invite 1.2s ease-in-out; }
.heart-impact {
  position: absolute;
  inset: 0;
  clip-path: url(#heart-contour);
}
.heart-impact::before,
.heart-impact::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: 14%;
  aspect-ratio: 1;
  border: 2px solid var(--sun);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.15);
}
.is-inviting .heart-impact::before,
.is-inviting .heart-impact::after { animation: heart-impact .72s .12s ease-out both; }
.is-inviting .heart-impact::after { animation-delay: .28s; }
.heart-motion {
  position: absolute;
  inset: 0;
  transform-origin: 50% 43%;
  animation: heart-drift 5.6s ease-in-out infinite;
  will-change: transform;
}
/* The pointer lands exactly where the two click ripples begin. */
.heart-motion::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: clamp(28px, 7%, 48px);
  aspect-ratio: 36 / 44;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 44'%3E%3Cpath d='M5 3V31L12 24L18 37L24 34L18 22H29Z' fill='%23fffbf5' stroke='%2374051c' stroke-width='2.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgb(74 5 28 / 18%));
  opacity: 0;
  transform: translate(-14%, -7%);
  transform-origin: 14% 7%;
  pointer-events: none;
}
.is-inviting .heart-motion::after { animation: heart-pointer-click 1.2s ease-in-out both; }
.heart-layer { clip-path: url(#heart-contour); }
.animal-reflections {
  position: absolute;
  inset: 0;
  opacity: var(--animal-opacity);
  clip-path: url(#heart-contour);
}
.reflection-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.turtle-body { clip-path: url(#turtle-body-contour); }
.cat-body { clip-path: url(#cat-body-contour); }
.cat-tail {
  clip-path: url(#cat-tail-contour);
  transform-origin: 56.86% 45.15%;
  animation: cat-tail-sway 7.6s ease-in-out infinite;
}
.turtle-head {
  clip-path: url(#turtle-head-contour);
  transform-origin: 48.04% 43.87%;
  animation: turtle-head-nod 9.2s -2s ease-in-out infinite;
}
.heart-shadow {
  position: absolute;
  left: 43%;
  top: 75.4%;
  width: 34%;
  height: 2.8%;
  background: radial-gradient(ellipse, rgb(93 40 4 / 32%) 0%, rgb(93 40 4 / 12%) 47%, transparent 73%);
  transform-origin: center;
  animation: shadow-drift 5.6s ease-in-out infinite;
}
[data-motion="paused"] .heart-invitation,
[data-motion="paused"] .heart-impact::before,
[data-motion="paused"] .heart-impact::after,
[data-motion="paused"] .heart-motion,
[data-motion="paused"] .heart-motion::after,
[data-motion="paused"] .heart-shadow,
[data-motion="paused"] .cat-tail,
[data-motion="paused"] .turtle-head { animation-play-state: paused; }

@keyframes shadow-drift {
  0%, 100% { transform: scale(1) rotate(4deg); opacity: .85; }
  50% { transform: translateX(2%) scale(.78) rotate(4deg); opacity: .45; }
}

@keyframes cat-tail-sway {
  0%, 15%, 100% { transform: rotate(-2deg); }
  45%, 60% { transform: rotate(3deg); }
  80% { transform: rotate(-1deg); }
}
@keyframes turtle-head-nod {
  0%, 20%, 100% { transform: rotate(1deg); }
  50%, 65% { transform: rotate(-3deg) translateY(-.035%); }
}

@keyframes heart-drift {
  0%, 100% { transform: perspective(1000px) translate(-.6%, -.8%) rotateY(-12deg) rotateZ(-3deg); }
  50% { transform: perspective(1000px) translate(.6%, -4.2%) rotateY(12deg) rotateZ(3deg); }
}

/* A visible pointer click: compression, recoil, then ripples on the heart. */
@keyframes heart-invite {
  0%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(.6%) scale(.945); }
  40% { transform: translateY(-.8%) scale(1.035); }
  70% { transform: translateY(0) scale(.995); }
}
@keyframes heart-impact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  20% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
}
@keyframes heart-pointer-click {
  0% { opacity: 0; transform: translate(25%, 25%) scale(1.05); }
  12% { opacity: 1; transform: translate(-14%, -7%) scale(1); }
  20% { opacity: 1; transform: translate(-14%, -7%) scale(.82); }
  36%, 58% { opacity: 1; transform: translate(-14%, -7%) scale(1); }
  85%, 100% { opacity: 0; transform: translate(15%, 18%) scale(1); }
}