/* ============================================================
   tell_logo_hover.css — brand logo hover bounce (platform-wide)
   Deploy to: website/static/css/tell_logo_hover.css

   Self-contained: only adds the bounce animation. It does NOT define
   the logo's base look (fill/size/colour) — that already lives in
   layout.css (.tell-logo) or landing.css (.lp-brand). So this file is
   safe to load in ANY area, including ones that don't load layout.css
   (student, login, landing).

   Handles BOTH logo variants:
     .tell-logo  — the _brand_logo.html macro (teacher/institution/
                   login/student). Bars carry .tell-logo__bar--1..5.
     .lp-brand   — the landing hero lockup. Bars are unclassed <rect>s,
                   so they're staggered via :nth-child.

   The bounce runs off the .is-eq class (added by tell_logo_hover.js),
   NOT :hover — so once started it always plays through to the settle,
   even if the pointer leaves mid-animation.
   ============================================================ */

/* Bars scale from their shared baseline (all rect bottoms sit at y=24). */
.tell-logo__bars,
.lp-brand__bars { overflow: visible; }          /* let the brief overshoot show */

.tell-logo__bars rect,
.lp-brand__bars rect {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

/* ── Equalizer bounce (shared keyframes) ── */
.tell-logo.is-eq .tell-logo__bars rect,
.lp-brand.is-eq  .lp-brand__bars  rect {
    animation-name: tell-eq;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-duration: 1.2s;
}

/* Gently desynced. .tell-logo uses the bar classes; .lp-brand has no
   bar classes, so it uses :nth-child (same heights, same order). */
.tell-logo.is-eq .tell-logo__bar--1,
.lp-brand.is-eq  .lp-brand__bars rect:nth-child(1) { animation-duration: 1.15s; animation-delay: 0.00s; }
.tell-logo.is-eq .tell-logo__bar--2,
.lp-brand.is-eq  .lp-brand__bars rect:nth-child(2) { animation-duration: 1.30s; animation-delay: 0.05s; }
.tell-logo.is-eq .tell-logo__bar--3,
.lp-brand.is-eq  .lp-brand__bars rect:nth-child(3) { animation-duration: 1.05s; animation-delay: 0.03s; }
.tell-logo.is-eq .tell-logo__bar--4,
.lp-brand.is-eq  .lp-brand__bars rect:nth-child(4) { animation-duration: 1.40s; animation-delay: 0.08s; }
.tell-logo.is-eq .tell-logo__bar--5,
.lp-brand.is-eq  .lp-brand__bars rect:nth-child(5) { animation-duration: 1.20s; animation-delay: 0.02s; }

@keyframes tell-eq {
    0%   { transform: scaleY(1);    }
    22%  { transform: scaleY(0.55); }
    52%  { transform: scaleY(1.10); }
    78%  { transform: scaleY(0.88); }
    100% { transform: scaleY(1);    }
}

/* ── Wordmark pulse ── */
.tell-logo.is-eq .tell-logo__word,
.lp-brand.is-eq  .lp-brand__word {
    animation: tell-word-pulse 1.15s ease-in-out;
    transform-origin: left center;   /* grow from the bars side, no drift */
}

@keyframes tell-word-pulse {
    0%, 100% { transform: scale(1);     }
    40%      { transform: scale(1.055); }
    72%      { transform: scale(0.992); }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .tell-logo.is-eq .tell-logo__bars rect,
    .lp-brand.is-eq  .lp-brand__bars  rect,
    .tell-logo.is-eq .tell-logo__word,
    .lp-brand.is-eq  .lp-brand__word { animation: none; }
}