/*
  Animation-only styles. These rules do NOT set .hero's background, height,
  padding, or layout. Your existing crispy.css remains responsible for those.
*/
.hero .hero-animation {
  position: relative;
  width: min(76vw, 560px);
  height: clamp(210px, 25vw, 340px);
  margin-inline: auto;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero .hero-animation__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(5px) scale(.985);
  transition: opacity 650ms ease, transform 850ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.hero .hero-animation__stage.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hero .hero-animation__word {
  display: block;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(76px, 11vw, 150px);
  line-height: 1;
  white-space: nowrap;
}
.hero .hero-animation__art {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(31vw, 300px);
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
}
.hero .hero-animation__stage--coffee .hero-animation__art {
  max-width: min(78vw, 470px);
  max-height: min(31vw, 280px);
}
.hero .hero-animation__stage--record .hero-animation__art {
  max-width: min(64vw, 300px);
  max-height: min(34vw, 300px);
}
.hero .hero-animation__stage--logo .hero-animation__art {
  max-width: min(60vw, 270px);
  max-height: min(32vw, 270px);
}

/* Curved, taper-free steam. Position accounts for the transparent top margin
   in Coffee-cm.png, so the wisps sit just above the actual cup rim. */
.hero .hero-animation__steam {
  position: absolute;
  left: 50%;
  top: 13%;
  width: 116px;
  height: 82px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}
.hero .hero-animation__steam svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero .hero-animation__steam path {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  transform-origin: center;
  animation: heroSteamWisp 2.5s ease-in-out infinite;
}
.hero .hero-animation__steam path:nth-child(2) { animation-delay: -.8s; }
.hero .hero-animation__steam path:nth-child(3) { animation-delay: -1.5s; }
.hero .hero-animation__stage--coffee.is-active .hero-animation__steam { opacity: .9; }

.hero .hero-animation__notes {
  position: absolute;
  left: calc(50% + 93px);
  top: 27%;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(26px, 3.4vw, 39px);
  line-height: 1;
  opacity: 0;
  transform: translate(0, 5px) rotate(-7deg);
  transition: opacity 500ms ease, transform 650ms ease;
  pointer-events: none;
  text-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.hero .hero-animation__stage--record.is-active .hero-animation__notes {
  opacity: 1;
  transform: translate(0, 0) rotate(0);
}
.hero .hero-animation__notes span {
  display: inline-block;
  animation: heroNoteFloat 2.2s ease-in-out infinite;
}
.hero .hero-animation__notes span:nth-child(2) {
  font-size: .72em;
  animation-delay: -.9s;
}
.hero .hero-animation__stage--record.is-active .hero-animation__art {
  animation: heroRecordMotion 6s ease-in-out infinite;
}

@keyframes heroSteamWisp {
  0% { opacity: .25; transform: translateY(8px) translateX(0) scale(.94); }
  45% { opacity: .95; }
  100% { opacity: .1; transform: translateY(-10px) translateX(3px) scale(1.04); }
}
@keyframes heroNoteFloat {
  0%, 100% { opacity: .45; transform: translateY(3px) rotate(-4deg); }
  50% { opacity: 1; transform: translateY(-4px) rotate(4deg); }
}
@keyframes heroRecordMotion {
  0%, 100% { transform: rotate(-2deg) scale(.99); }
  50% { transform: rotate(2deg) scale(1); }
}
@media (max-width: 600px) {
  .hero .hero-animation { width: 88vw; height: 220px; }
  .hero .hero-animation__art { max-height: 190px; }
  .hero .hero-animation__stage--coffee .hero-animation__art { max-height: 170px; }
  .hero .hero-animation__stage--record .hero-animation__art { max-height: 190px; }
  .hero .hero-animation__stage--logo .hero-animation__art { max-height: 175px; }
  .hero .hero-animation__steam { top: 12%; width: 88px; height: 66px; }
  .hero .hero-animation__notes { left: calc(50% + 66px); top: 30%; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-animation__stage,
  .hero .hero-animation__notes,
  .hero .hero-animation__steam { transition: none; animation: none !important; }
  .hero .hero-animation__steam path,
  .hero .hero-animation__notes span,
  .hero .hero-animation__stage--record .hero-animation__art { animation: none !important; }
}