/* ==========================================================================
   Catharsis bird — homepage hero ornament
   A chalk-line bird fighting a headwind, redrawn from the
   "bird mascot general" video. Self-contained: it reads the palette
   tokens from style.css but falls back to the literal values, and it
   touches nothing outside .bird-lane. Delete the <!-- bird --> block in
   index.html and this file to remove it.
   ========================================================================== */

/* The lane is in normal flow above the eyebrow, so it takes its own space
   and never overlaps the headline or buttons at any width. It is also the
   clip host for everything that moves. */
.bird-lane {
  position: relative;
  height: 104px;
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
  overflow: hidden;
  pointer-events: none;
}

/* Wind: faint streaks blowing right to left, against the bird. */
.bird-wind span {
  position: absolute; left: 0; width: 100%; height: 1px;
  transform: translateX(100%);
  animation: bird-wind 3.2s linear infinite;
}
.bird-wind span::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 56px; height: 1px;
  background: var(--tan, #e6dccf);
  opacity: .28;
}
.bird-wind span:nth-child(1) { top: 22%; animation-delay: -.4s; }
.bird-wind span:nth-child(2) { top: 58%; animation-delay: -1.7s; animation-duration: 2.6s; }
.bird-wind span:nth-child(3) { top: 84%; animation-delay: -2.5s; animation-duration: 3.8s; }
.bird-wind span:nth-child(2)::before { width: 84px; }

@keyframes bird-wind {
  from { transform: translateX(100%); }
  to   { transform: translateX(-20%); }
}

/* Three nested movers so their transforms compose:
   drift = progress across the lane (and getting blown back),
   bob   = the rise and fall of each wingbeat plus the nose tilt. */
.bird-drift {
  position: absolute; inset: 0;
  animation: bird-drift 19s ease-in-out infinite;
}
.bird-bob {
  position: absolute; left: 0; top: 50%;
  width: 120px; margin-top: -40px;
  animation: bird-bob 2.4s ease-in-out infinite;
}
.bird-bob svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Percentages are of the lane width. The bird is at most ~45% of the lane
   even on a 320px phone, so 55% is the furthest it can go and stay in. */
@keyframes bird-drift {
  0%   { transform: translateX(2%); }
  18%  { transform: translateX(30%); }
  26%  { transform: translateX(22%); }   /* gust */
  44%  { transform: translateX(50%); }
  52%  { transform: translateX(55%); }
  60%  { transform: translateX(38%); }   /* gust */
  72%  { transform: translateX(46%); }
  86%  { transform: translateX(8%); }    /* the big one */
  100% { transform: translateX(2%); }
}
@keyframes bird-bob {
  0%   { transform: translateY(4px)  rotate(6deg); }
  30%  { transform: translateY(-6px) rotate(-4deg); }
  55%  { transform: translateY(2px)  rotate(9deg); }
  80%  { transform: translateY(-3px) rotate(-7deg); }
  100% { transform: translateY(4px)  rotate(6deg); }
}

/* The drawing */
.bird-ink {
  fill: none;
  stroke: var(--tan-lt, #f2ebe1);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#bird-rough-a);
  animation: bird-boil .36s step-end infinite;
}
.bird-ink .bird-fill { fill: var(--ink, #1e292c); }
.bird-ink .bird-eye  { fill: var(--tan-lt, #f2ebe1); stroke: none; }

/* Line boil: the video redraws the line every frame. Cycling three
   roughening filters with different noise seeds gives the same jitter. */
@keyframes bird-boil {
  0%     { filter: url(#bird-rough-a); }
  33.3%  { filter: url(#bird-rough-b); }
  66.6%  { filter: url(#bird-rough-c); }
}

/* Wingbeat: three drawn poses swapped like frames, up-level-down-level. */
.bird-wing { visibility: hidden; animation: .52s step-end infinite; }
.bird-wing.is-up    { animation-name: bird-wing-up; }
.bird-wing.is-level { animation-name: bird-wing-level; }
.bird-wing.is-down  { animation-name: bird-wing-down; }
@keyframes bird-wing-up    { 0%   { visibility: visible; } 25% { visibility: hidden; } }
@keyframes bird-wing-level { 0%   { visibility: hidden; } 25% { visibility: visible; } 50% { visibility: hidden; } 75% { visibility: visible; } }
@keyframes bird-wing-down  { 0%   { visibility: hidden; } 50% { visibility: visible; } 75% { visibility: hidden; } }

@media (max-width: 900px) {
  .bird-lane { height: 88px; }
  .bird-bob  { width: 96px; margin-top: -32px; }
}

/* Still bird, wing level, no wind, for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .bird-wind { display: none; }
  .bird-drift, .bird-bob, .bird-ink, .bird-wing { animation: none; }
  .bird-drift { transform: translateX(8%); }
  .bird-bob   { transform: rotate(-3deg); }
  .bird-wing.is-level { visibility: visible; }
}