/* PhonoLeaf website: motion layer (2026-10-20), on the home and comparison pages.
   Loaded after site-horizon.css. Owner asked for motion like
   justread.app's (COMPETITOR_SWOT.md section 15), built from our own art.

   Rules, from DESIGN.md: birds travel linearly, wingbeats are short and
   independent of travel; bees and butterflies may ease and hover. Everything
   is readable with motion off: reduced-motion turns every effect off and the
   page is complete at rest (nothing waits at opacity 0 without a fallback).
   The art is small web copies of the app's art (*-web.webp, ~150 KB in all);
   regenerate them if the app art changes. */

/* ------------------------------------------------ 1. hero: birds and light */

:root .hero .mark {
  position: relative;
  overflow: hidden;
  animation: pl-scene-drift 48s ease-in-out infinite alternate;
}
@keyframes pl-scene-drift {
  from { background-position: 46% 58%; }
  to   { background-position: 54% 58%; }
}

/* A bird is two stacked frames (wings up, wings down) that swap every
   0.3s, inside a box that crosses the scene in a straight line. */
.pl-bird {
  position: absolute;
  left: 0;
  width: clamp(18px, 2.6vw, 28px);
  aspect-ratio: 1;
  pointer-events: none;
  animation: pl-fly linear infinite;
  will-change: transform;
}
.pl-bird i {
  position: absolute; inset: 0;
  background: url('art/bird-0-web.webp') center / contain no-repeat;
}
.pl-bird i + i { background-image: url('art/bird-1-web.webp'); animation: pl-flap .3s steps(1) infinite; }
.pl-bird i:first-child { animation: pl-flap .3s steps(1) infinite reverse; }
@keyframes pl-flap { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pl-fly {
  from { transform: translate(-10vw, 0); }
  to   { transform: translate(110vw, -18px); }
}
.pl-bird.b1 { top: 26%; animation-duration: 19s; animation-delay: -4s; }
.pl-bird.b2 { top: 36%; animation-duration: 23s; animation-delay: -15s; transform: scale(.75); }
.pl-bird.b2 { width: clamp(14px, 2vw, 22px); }

/* ------------------------------------------- 2. the hero glides in on load */

:root .hero > :not(.mark) { animation: pl-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
:root .hero h1        { animation-delay: .05s; }
:root .hero .tagline  { animation-delay: .15s; }
:root .hero .lede     { animation-delay: .25s; }
:root .hero .stores   { animation-delay: .35s; }
:root .hero .cta-note { animation-delay: .42s; }
@keyframes pl-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------ 3. the feature strip */

.pl-strip {
  margin: 2.4rem 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pl-strip ul {
  display: flex;
  gap: .7rem;
  width: max-content;
  margin: 0;
  padding: .3rem 0;
  list-style: none;
  animation: pl-slide 70s linear infinite;
}
.pl-strip:hover ul,
.pl-strip:focus-within ul { animation-play-state: paused; }
.pl-strip li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: 500 .88rem/1.2 var(--font-ui);
  white-space: nowrap;
}
.pl-strip li b { color: var(--accent); font-weight: 600; }
@keyframes pl-slide { to { transform: translateX(-50%); } }
.pl-strip [aria-hidden="true"] { /* the duplicate half that makes the loop seamless */ }

/* ----------------------------------- 4. the forest grows at the bottom */

.pl-forest {
  position: relative;
  height: clamp(150px, 26vw, 230px);
  margin: 0 0 1.6rem;
  border-radius: var(--radius);
  background: url('art/meadow.webp') center 70% / cover no-repeat;
  box-shadow: var(--shadow-ink);
  overflow: hidden;
}
.pl-tree {
  position: absolute;
  bottom: 6%;
  height: 72%;
  aspect-ratio: 510 / 720;
  background: center bottom / contain no-repeat;
  transform-origin: 50% 100%;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
.pl-tree.t1 { left: 16%; background-image: url('art/conifer-web.webp'); }
.pl-tree.t2 { left: 42%; height: 84%; background-image: url('art/broadleaf-web.webp'); transition-delay: .25s; }
.pl-tree.t3 { left: 68%; height: 64%; background-image: url('art/poplar-web.webp'); transition-delay: .5s; }
/* Small until the forest scrolls into view, then they grow. Without the
   script (or with reduced motion) the class is never added: full size. */
.pl-forest.pl-waiting .pl-tree { transform: scale(.45); }

.pl-butterfly {
  position: absolute;
  top: 30%; left: 30%;
  width: clamp(16px, 2.2vw, 24px);
  aspect-ratio: 1;
  pointer-events: none;
  animation: pl-flutter 9s ease-in-out infinite alternate;
}
.pl-butterfly i { position: absolute; inset: 0; background: url('art/butterfly-0-web.webp') center / contain no-repeat; }
.pl-butterfly i + i { background-image: url('art/butterfly-1-web.webp'); animation: pl-flap .22s steps(1) infinite; }
.pl-butterfly i:first-child { animation: pl-flap .22s steps(1) infinite reverse; }
@keyframes pl-flutter {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(60px, -14px); }
  55%  { transform: translate(120px, 6px); }
  80%  { transform: translate(190px, -10px); }
  100% { transform: translate(250px, 4px); }
}

/* ------------------------------------- 5. sections settle in on scroll */

.pl-reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.pl-reveal.pl-below { opacity: 0; transform: translateY(16px); }

/* ---------------------------------------------------- motion turned off */

@media (prefers-reduced-motion: reduce) {
  :root .hero .mark,
  :root .hero > :not(.mark),
  .pl-bird, .pl-bird i, .pl-butterfly, .pl-butterfly i,
  .pl-strip ul { animation: none !important; }
  .pl-bird, .pl-butterfly { display: none; }
  .pl-strip { -webkit-mask-image: none; mask-image: none; }
  .pl-strip ul { flex-wrap: wrap; width: auto; justify-content: center; }
  .pl-strip [aria-hidden="true"] { display: none; }
  .pl-tree { transition: none; }
  .pl-reveal { transition: none; }
}