/* A little warmth, with the original artwork and layout retained. */
.coffee-story-photo { position: relative; overflow: hidden; border-radius: 3px; }
.coffee-steam {
  display: none;
  position: absolute;
  left: 22.5%;
  top: 53.5%;
  width: 17%;
  height: 36%;
  transform: translate(-50%, -100%);
  overflow: visible;
  pointer-events: none;
}
.steam-wisp {
  fill: none;
  stroke: url(#steam-light);
  stroke-width: 15;
  stroke-linecap: round;
  filter: blur(2.5px);
  opacity: 0;
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  /* The main action stays visible and still throughout the opening. */
  .hero-is-entering .hero-copy > .eyebrow { animation: coffee-arrive .55s ease-out both; }
  .hero-is-entering .hero h1 { animation: coffee-arrive .8s cubic-bezier(.2,.65,.3,1) both; }
  .hero-is-entering .hero-lede,
  .hero-is-entering .owner-fees { animation: coffee-arrive .65s .1s ease-out both; }
  .hero-is-entering .hero-visual { animation: coffee-arrive .95s .08s cubic-bezier(.2,.65,.3,1) both; }

  .reveal.will-reveal {
    transform: translate(var(--reveal-x, 0px), var(--reveal-y, 16px));
    transition: opacity var(--reveal-duration, .7s) ease, transform var(--reveal-duration, .7s) cubic-bezier(.2,.65,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .section-heading.reveal,
  .split-heading.reveal,
  .faq-heading.reveal { --reveal-y: 12px; }
  .coffee-story-image.reveal { --reveal-y: 22px; --reveal-duration: .9s; }
  .coffee-story-copy.reveal { --reveal-x: 12px; --reveal-y: 0px; --reveal-duration: .8s; }
  .station-option.reveal { --reveal-y: 22px; --reveal-duration: .85s; }
  .process-list > .reveal { --reveal-y: 14px; --reveal-duration: .65s; }
  .reveal.will-reveal.is-visible,
  .reveal.will-reveal:focus-within { opacity: 1; transform: none; }
  .reveal.will-reveal:focus-within { transition: none; }

  .has-coffee-motion .steam-once .coffee-steam { display: block; }
  .steam-once .steam-wisp { animation: coffee-steam-rise 4s ease-in-out both; }
  .steam-once .steam-wisp:nth-of-type(2) { animation-delay: .3s; animation-duration: 3.6s; }
  .steam-once .steam-wisp:nth-of-type(3) { animation-delay: .65s; animation-duration: 3.2s; }
}

@keyframes coffee-arrive {
  from { opacity: .25; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes coffee-steam-rise {
  0% { opacity: 0; transform: translate(0, 16px) scale(.8, .85); }
  22% { opacity: .8; }
  65% { opacity: .46; }
  100% { opacity: 0; transform: translate(7px, -38px) scale(1.2, 1.08); }
}

@media (max-width: 740px) {
  .coffee-story-copy.reveal { --reveal-x: 0px; --reveal-y: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .coffee-steam { display: none !important; }
  .reveal.will-reveal { opacity: 1; transform: none; }
}