/* Three independent layers: entrance → pointer depth → quiet idle motion. */
.hero-avatar {
  position: absolute;
  transform-origin: 50% 65%;
}
.avatar-parallax,
.avatar-idle {
  width: 100%;
  height: 100%;
  transform-origin: 50% 65%;
}
.avatar-parallax {
  transform: translate3d(var(--avatar-x, 0px), var(--avatar-y, 0px), 0) rotate(var(--avatar-turn, 0deg));
}
.avatar-idle {
  --idle-lift: -4px;
  animation: avatar-breathe 7s 1.4s ease-in-out infinite;
}
.character-stage {
  overflow: hidden;
  translate: var(--stage-x, 0px) var(--stage-y, 0px);
}
.character-stage::after {
  content: '';
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse at 70% 25%, #fff2d8b3, #ffe1b32e 45%, transparent 70%);
  opacity: .3;
  animation: stage-light 9s 1s ease-in-out infinite alternate;
}
.hero .availability .icon {
  animation: availability-pulse 4.5s 1.4s ease-in-out infinite;
}

.hero.is-entering .character-stage {
  animation: hero-stage-enter 1s var(--ease) both;
}
.hero.is-entering .hero-avatar {
  animation: hero-avatar-enter 1.05s .08s var(--ease) both;
}
.hero.is-entering .availability,
.hero.is-entering h1,
.hero.is-entering .hero-description {
  animation: hero-copy-enter .8s var(--ease) both;
}
.hero.is-entering .availability { animation-delay: .18s; }
.hero.is-entering h1 { animation-delay: .28s; }
.hero.is-entering .hero-description { animation-delay: .4s; }
.hero.is-entering .section-nav a {
  animation: hero-tab-enter .6s var(--ease) both;
  animation-delay: .52s;
}
.hero.is-entering .section-nav a:nth-child(2) { animation-delay: .6s; }
.hero.is-entering .section-nav a:nth-child(3) { animation-delay: .68s; }
.hero.is-entering .section-nav a:nth-child(4) { animation-delay: .76s; }

.hero[data-motion=paused] .avatar-idle,
.hero[data-motion=paused] .character-stage::after,
.hero[data-motion=paused] .availability .icon {
  animation-play-state: paused;
}

@keyframes hero-stage-enter {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-avatar-enter {
  from { opacity: 0; transform: translateY(28px) rotate(-1.5deg) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-copy-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-tab-enter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes avatar-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(var(--idle-lift)) rotate(.25deg); }
}
@keyframes stage-light {
  from { opacity: .25; transform: translate3d(-3%, 2%, 0); }
  to { opacity: .65; transform: translate3d(3%, -2%, 0); }
}

@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .avatar-idle { --idle-lift: -2px; animation-duration: 9s; }
  .avatar-parallax { transform: none; }
  .character-stage { translate: none; }
}
@media (max-width: 700px) {
  .hero-illustrations,
  .hero-copy {
    translate: 0 var(--hero-dock-shift, 0px);
    transition: translate .2s var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero.is-entering .character-stage,
  .hero.is-entering .hero-avatar,
  .hero.is-entering .availability,
  .hero.is-entering h1,
  .hero.is-entering .hero-description,
  .hero.is-entering .section-nav a,
  .hero .avatar-idle,
  .hero .character-stage::after,
  .hero .availability .icon { animation: none; }
  .hero-avatar, .avatar-parallax, .avatar-idle { transform: none; }
  .character-stage { translate: none; }
  .character-stage::after { opacity: .3; }
  .hero-illustrations, .hero-copy { transition: none; }
}