.grana-visitor {
  --grana-visitor-size: clamp(148px, 14vw, 212px);
  position: fixed;
  z-index: 24;
  left: 0;
  top: 0;
  width: var(--grana-visitor-size);
  height: var(--grana-visitor-size);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  contain: layout paint style;
  will-change: transform, opacity;
  transform-origin: 50% 80%;
  transition: opacity .24s ease;
}

.grana-visitor.is-visible { opacity: 1; }
.grana-visitor.is-attached { position: absolute; }

.grana-visitor__hit {
  appearance: none;
  position: absolute;
  z-index: 3;
  left: 11%;
  top: 27%;
  width: 79%;
  height: 56%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 46%;
  background: transparent;
  color: inherit;
  pointer-events: none;
  cursor: default;
}
.grana-visitor.is-resting .grana-visitor__hit { pointer-events: auto; cursor: pointer; }
.grana-visitor__hit:focus-visible { outline: 2px solid rgba(255, 190, 83, .92); outline-offset: 3px; }

.grana-visitor::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 17%;
  bottom: 13%;
  width: 68%;
  height: 9%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .48);
  filter: blur(5px);
  opacity: .82;
  transform: scale(1);
  transition: opacity .18s ease, transform .18s ease;
}

.grana-visitor.is-impact::after {
  opacity: .94;
  transform: scale(1.18, .62);
}

.grana-visitor__motion {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  transform-origin: 50% 72%;
  will-change: transform;
}

.grana-visitor__frame,
.grana-visitor__laugh {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 80%;
  -webkit-user-drag: none;
  transition: opacity .18s ease;
}

.grana-visitor__laugh {
  opacity: 0;
  transform: scale(1.17);
}

.grana-visitor.is-resting[data-pose="side"] .grana-visitor__frame {
  animation: grana-side-breathe 4.8s ease-in-out infinite;
}

.grana-visitor.is-resting[data-pose="belly"] .grana-visitor__frame {
  animation: grana-belly-breathe 4.2s ease-in-out infinite;
}

.grana-visitor.is-tickled .grana-visitor__hit,
.grana-visitor.is-recovering .grana-visitor__hit { pointer-events: none; cursor: default; }
.grana-visitor.is-tickled .grana-visitor__frame { opacity: 0; }
.grana-visitor.is-tickled .grana-visitor__motion { animation: grana-tickle-body 2.7s cubic-bezier(.2,.72,.25,1) both; }
.grana-visitor.is-tickled .grana-visitor__laugh--a { animation: grana-laugh-a 2.7s linear both; }
.grana-visitor.is-tickled .grana-visitor__laugh--b { animation: grana-laugh-b 2.7s linear both; }
.grana-visitor.is-recovering .grana-visitor__frame { opacity: 1; }

@keyframes grana-side-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-1.4px) scale(1.006, .996); }
  56% { transform: translateY(-1.1px) scale(1.004, .998); }
}

@keyframes grana-belly-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.2px) scale(1.004, .997); }
}

@keyframes grana-tickle-body {
  0% { transform: translate3d(0,0,0) rotate(0) scale(1); }
  8% { transform: translate3d(0,-2px,0) rotate(-3deg) scale(1.025,.978); }
  19% { transform: translate3d(1px,3px,0) rotate(9deg) scale(.97,1.035); }
  31% { transform: translate3d(-1px,-1px,0) rotate(-4deg) scale(1.045,.965); }
  45% { transform: translate3d(1px,1px,0) rotate(3deg) scale(.985,1.025); }
  59% { transform: translate3d(-1px,-1px,0) rotate(-2.5deg) scale(1.035,.978); }
  73% { transform: translate3d(1px,1px,0) rotate(2deg) scale(.99,1.018); }
  87% { transform: translate3d(-.5px,-.5px,0) rotate(-1deg) scale(1.014,.99); }
  100% { transform: translate3d(0,0,0) rotate(0) scale(1); }
}

@keyframes grana-laugh-a {
  0%, 14% { opacity: 0; }
  22%, 36% { opacity: 1; }
  48%, 57% { opacity: .12; }
  67%, 79% { opacity: 1; }
  89% { opacity: .18; }
  100% { opacity: 1; }
}

@keyframes grana-laugh-b {
  0%, 35% { opacity: 0; }
  46%, 58% { opacity: .92; }
  67%, 78% { opacity: .08; }
  88%, 96% { opacity: .96; }
  100% { opacity: 0; }
}

@media (max-width: 1100px) {
  .grana-visitor { --grana-visitor-size: clamp(126px, 18vw, 176px); }
}

@media (max-width: 700px) {
  .grana-visitor {
    --grana-visitor-size: clamp(106px, 31vw, 136px);
    z-index: 18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grana-visitor { transition: opacity .18s linear; }
  .grana-visitor__motion,
  .grana-visitor__frame,
  .grana-visitor__laugh { animation: none !important; }
}