/* DODWARE Haiku artwork motion.
 *
 * Every motion here is ONE restrained gesture that ends by itself. Nothing in this
 * file loops: `animation-iteration-count` is 1 everywhere, and the sparse ambient
 * cadence on the desktop card is a JavaScript rest timer, not an infinite keyframe.
 *
 * Two layers per motif: a transform gesture on the canonical still, and a motif
 * overlay (steam, ripple, cloud band) drawn over exactly the still's box. The
 * overlay is absolutely positioned inside the image's own parent and is `hidden`
 * unless a motion is actually running, so it can never take part in layout or
 * change a paper decoration's rect.
 *
 * Reduced motion is handled at the bottom, and also in haiku-artwork.js, which never
 * even starts a timer when the viewer has asked for reduced motion. Both halves are
 * deliberate: the stylesheet keeps a stray class from animating, and the script keeps
 * the ambient scheduler from running at all.
 */

.hx-art-host { position: relative; }
.hx-art-still { transform-origin: 50% 100%; }

.hx-art-fx {
  position: absolute; z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 1px;
}
.hx-art-fx[hidden] { display: none; }
.hx-art-fx::before, .hx-art-fx::after { content: ''; position: absolute; opacity: 0; }

/* ---------- 1. branch — a tiny leaf/twig shift ------------------------------- */

.hx-art-host[data-hx-motif="branch"].is-hx-animating .hx-art-still {
  animation: hx-branch var(--hx-motion-ms, 1500ms) cubic-bezier(.33, 0, .2, 1) 1 both;
}
@keyframes hx-branch {
  0%   { transform: rotate(0deg) translate(0, 0); }
  28%  { transform: rotate(.7deg) translate(.6px, -1px); }
  62%  { transform: rotate(-.35deg) translate(-.4px, .3px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

/* ---------- 2. stones — a water ripple --------------------------------------- */

.hx-art-host[data-hx-motif="stones"].is-hx-animating .hx-art-still {
  animation: hx-stones var(--hx-motion-ms, 1900ms) ease-out 1 both;
}
@keyframes hx-stones {
  0%   { transform: scaleY(1); }
  22%  { transform: scaleY(.994); }
  55%  { transform: scaleY(1.004); }
  100% { transform: scaleY(1); }
}
/* One ring, spreading and fading across the lower band where the water sits. */
.hx-art-host[data-hx-motif="stones"].is-hx-animating .hx-art-fx::before {
  left: 24%; bottom: 13%; width: 52%; height: 14%;
  border: 1px solid rgba(38, 37, 31, .5); border-radius: 50%;
  animation: hx-ripple var(--hx-motion-ms, 1900ms) ease-out 1 both;
}
@keyframes hx-ripple {
  0%   { opacity: 0; transform: scale(.25); }
  25%  { opacity: .55; }
  100% { opacity: 0; transform: scale(1.35); }
}

/* ---------- 3. coffee — steam ------------------------------------------------ */

.hx-art-host[data-hx-motif="coffee"].is-hx-animating .hx-art-still {
  animation: hx-coffee var(--hx-motion-ms, 2300ms) ease-in-out 1 both;
}
@keyframes hx-coffee {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.5px); }
}
.hx-art-host[data-hx-motif="coffee"].is-hx-animating .hx-art-fx::before,
.hx-art-host[data-hx-motif="coffee"].is-hx-animating .hx-art-fx::after {
  left: 42%; top: 24%; width: 9%; height: 26%;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(to top, rgba(38, 37, 31, .30), rgba(38, 37, 31, 0));
  filter: blur(1.2px);
  animation: hx-steam var(--hx-motion-ms, 2300ms) ease-out 1 both;
}
.hx-art-host[data-hx-motif="coffee"].is-hx-animating .hx-art-fx::after {
  left: 53%; width: 7%; animation-delay: calc(var(--hx-motion-ms, 2300ms) * .22);
}
@keyframes hx-steam {
  0%   { opacity: 0; transform: translateY(6%) scaleX(.8); }
  30%  { opacity: .75; }
  100% { opacity: 0; transform: translateY(-58%) scaleX(1.25) translateX(8%); }
}

/* ---------- 4. mountain — a slow cloud drift --------------------------------- */

.hx-art-host[data-hx-motif="mountain"].is-hx-animating .hx-art-fx::before {
  top: 30%; left: -30%; width: 42%; height: 9%;
  border-radius: 50%;
  background: linear-gradient(to right, rgba(244, 239, 223, 0), rgba(244, 239, 223, .85), rgba(244, 239, 223, 0));
  filter: blur(1.6px);
  animation: hx-drift var(--hx-motion-ms, 3600ms) linear 1 both;
}
@keyframes hx-drift {
  0%   { opacity: 0; transform: translateX(0); }
  18%  { opacity: .9; }
  82%  { opacity: .9; }
  100% { opacity: 0; transform: translateX(310%); }
}

/* ---------- 5. bamboo — a slight sway ---------------------------------------- */

.hx-art-host[data-hx-motif="bamboo"].is-hx-animating .hx-art-still {
  animation: hx-bamboo var(--hx-motion-ms, 2200ms) ease-in-out 1 both;
}
@keyframes hx-bamboo {
  0%   { transform: skewX(0deg) rotate(0deg); }
  30%  { transform: skewX(-.8deg) rotate(-.3deg); }
  66%  { transform: skewX(.5deg) rotate(.18deg); }
  100% { transform: skewX(0deg) rotate(0deg); }
}

/* ---------- 6. moon — a reflection ripple ------------------------------------ */

.hx-art-host[data-hx-motif="moon"].is-hx-animating .hx-art-fx::before {
  left: 18%; bottom: 10%; width: 64%; height: 3%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  filter: blur(.8px);
  animation: hx-shimmer var(--hx-motion-ms, 2600ms) ease-in-out 1 both;
}
.hx-art-host[data-hx-motif="moon"].is-hx-animating .hx-art-fx::after {
  left: 26%; bottom: 18%; width: 48%; height: 2%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  filter: blur(.8px);
  animation: hx-shimmer var(--hx-motion-ms, 2600ms) ease-in-out 1 both;
  animation-delay: calc(var(--hx-motion-ms, 2600ms) * .28);
}
@keyframes hx-shimmer {
  0%   { opacity: 0; transform: translateX(-6%) scaleX(.9); }
  35%  { opacity: .85; }
  100% { opacity: 0; transform: translateX(7%) scaleX(1.08); }
}

/* ---------- the shared-Haiku arrival reveal ---------------------------------- */

/* A short one-shot paper/ink pass when a shared Haiku REPLACES the current shared
   card. It runs once and hands the card back to the normal sparse ambient rule. */
.hx-arrival { position: relative; }
.hx-arrival.is-hx-arriving { animation: hx-arrive-paper 900ms cubic-bezier(.22, .7, .25, 1) 1 both; }
.hx-arrival.is-hx-arriving .card-title-text,
.hx-arrival.is-hx-arriving .hx-art-still { animation: hx-arrive-ink 900ms ease-out 1 both; }

@keyframes hx-arrive-paper {
  0%   { opacity: .15; transform: translateY(5px) scale(.985); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes hx-arrive-ink {
  0%   { opacity: 0; filter: blur(2.4px); }
  40%  { opacity: .55; filter: blur(1px); }
  100% { opacity: 1; filter: none; }
}

/* ---------- reduced motion --------------------------------------------------- */

/* Every surface above falls back to its canonical still. The script also refuses to
   start any trigger, ambient timer or reveal, so this is belt AND braces. */
@media (prefers-reduced-motion: reduce) {
  .hx-art-host .hx-art-still,
  .hx-art-fx, .hx-art-fx::before, .hx-art-fx::after,
  .hx-arrival, .hx-arrival .card-title-text {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .hx-art-fx { display: none !important; }
}