/* ===========================================================
       Public /reading landing page — card grid of available tests.
       =========================================================== */
    #reading-list .wrap{ max-width:1180px; margin:0 auto; padding:60px 24px 100px; }
    #reading-list h2{ margin:8px 0 6px; font-size:34px; font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; }
    #reading-list .eyebrow{
      text-transform:uppercase; letter-spacing:1.2px;
      font-size:12px; font-weight:700; color:#11A37F;
      margin:0 0 4px;
    }
    #reading-list .sub{
      color:#5b6b78; margin:0 0 36px; max-width:680px; font-size:15.5px; line-height:1.55;
    }
    .rl-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:18px;
    }
    @media (max-width:960px){ .rl-grid{ grid-template-columns:repeat(2, 1fr); } }
    @media (max-width:640px){ .rl-grid{ grid-template-columns:1fr; } }

    .rl-card{
      position:relative;
      display:flex; flex-direction:column;
      gap:10px;
      padding:18px 22px;
      background:#ffffff;
      border:1px solid #e4e8ec;
      border-radius:16px;
      text-decoration:none;
      color:inherit;
      box-shadow:0 1px 0 rgba(20,30,40,.04), 0 8px 22px -16px rgba(20,30,40,.16);
      transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s cubic-bezier(.2,.8,.2,1),
        border-color .25s ease;
      overflow:hidden;
      isolation:isolate;
    }
    /* Slow rotating conic-gradient sweep behind the card — appears on hover
       like a glowing teal beam catching the edge. Sits in a ::before pseudo
       BEHIND the content (z-index:-1 from isolation). */
    .rl-card::before{
      content:'';
      position:absolute; inset:-2px;
      border-radius:inherit;
      background:conic-gradient(from var(--rl-spin, 0deg),
        transparent 0deg,
        rgba(17,163,127,.55) 70deg,
        transparent 140deg,
        transparent 360deg);
      opacity:0;
      transition:opacity .35s ease;
      z-index:-2;
      pointer-events:none;
    }
    /* Inner mask so only a thin glowing border shows through, not the whole bg.
       Explicit colour (not `inherit`) — `background:inherit` on a pseudo-element
       resolves to the parent's *computed* background, but Safari sometimes
       paints it transparent which leaks the gradient through the entire card. */
    .rl-card::after{
      content:'';
      position:absolute; inset:1px;
      border-radius:15px;
      background:#ffffff;
      z-index:-1;
      pointer-events:none;
    }
    .rl-card:hover{
      transform:translateY(-6px) scale(1.012);
      border-color:transparent;
      box-shadow:
        0 1px 0 rgba(20,30,40,.05),
        0 26px 50px -22px rgba(17,163,127,.45),
        0 8px 18px -12px rgba(17,163,127,.25);
    }
    .rl-card:hover::before{
      opacity:1;
      animation:rlCardSpin 3.2s linear infinite;
    }
    /* Title catches a subtle teal tint on hover for that final pop */
    .rl-card:hover .rl-card-title{
      color:#0E8A6C;
      transition:color .25s ease;
    }
    /* "→ Start" indicator that fades in from the bottom-right on hover.
       Placed at the bottom corner so the FREE / PREMIUM badge in the head
       row stays untouched. */
    .rl-card-title::after{
      content:' →';
      display:inline-block;
      color:#11A37F;
      opacity:0; transform:translateX(-8px);
      transition:opacity .25s ease .05s, transform .3s cubic-bezier(.2,.8,.2,1) .05s;
      pointer-events:none;
      will-change:transform, opacity;
    }
    .rl-card:hover .rl-card-title::after{
      opacity:1; transform:translateX(4px);
    }
    @keyframes rlCardSpin{
      to { --rl-spin:360deg; }
    }
    /* CSS variable registration so it animates. Falls back gracefully where
       @property isn't supported (the conic gradient just won't rotate). */
    @property --rl-spin{
      syntax:'<angle>';
      inherits:false;
      initial-value:0deg;
    }
    .rl-card-head{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .rl-card-eyebrow{
      font-size:12.5px; font-weight:600;
      color:#5b6b78;
      letter-spacing:.3px;
      min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    /* Status pills (QuizBank "N saved" + FREE/PREMIUM) grouped on the right so
       they sit side by side instead of stacking in the same corner. */
    .rl-card-badges{
      display:flex; align-items:center; gap:6px; flex-shrink:0;
    }
    .rl-card-badge{
      display:inline-block;
      font-weight:800; font-size:11px; letter-spacing:.6px;
      padding:3px 10px; border-radius:999px;
      text-transform:uppercase;
    }
    .rl-card-badge--free{
      background:#22c55e; color:#04280f;
    }
    .rl-card-badge--premium{
      background:#dfe5eb; color:#5b6b78;
    }
    .rl-card-title{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-weight:800;
      font-size:20px; line-height:1.25;
      color:#0d1620;
      margin-top:2px;
    }
    .rl-card-meta{
      display:flex; flex-wrap:wrap; gap:6px;
      color:#5b6b78; font-size:13.5px;
    }
    .rl-card-dot{ opacity:.55; }
    .rl-card-loading,
    .rl-loading{ padding:40px; color:#5b6b78; }

    /* Premium / locked cards */
    .rl-card--premium{
      pointer-events:auto;
      filter:none;
    }
    .rl-card--premium .rl-card-eyebrow,
    .rl-card--premium .rl-card-title,
    .rl-card--premium .rl-card-meta{
      filter:blur(4px);
      opacity:.55;
    }
    .rl-card-lock{
      position:absolute; inset:auto auto 0 0;
      width:100%;
      padding:14px 18px;
      display:flex; align-items:center; justify-content:center;
      gap:6px;
      font-weight:800; font-size:14px; color:#11A37F;
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.85) 35%);
      pointer-events:none;
    }
    .rl-card-lock-icon{ font-size:14px; }

    /* ---- Completed test treatment ----------------------------------- */
    /* "✓ Band X.X" pill — the shared "aurora achievement" identity
       (cyan→blue→indigo). Deliberately NOT another green: teal is the free
       accent on this page, so the old emerald pill disappeared into it.
       The gradient drifts + the glow pulses so finished tests catch the eye. */
    .rl-card-done-badge{
      position:relative; overflow:hidden;
      display:inline-flex; align-items:center; gap:5px;
      font-weight:800; font-size:11px; letter-spacing:.2px;
      padding:3px 9px 3px 5px; border-radius:999px;
      color:#fff; white-space:nowrap;
      background:linear-gradient(120deg,#22d3ee,#3b82f6 45%,#818cf8 75%,#22d3ee);
      background-size:220% 220%;
      border:1px solid rgba(255,255,255,.28);
      box-shadow:0 4px 14px -4px rgba(59,130,246,.6);
      animation:llDoneDrift 4s ease-in-out infinite, llDoneGlow 2.6s ease-in-out infinite;
    }
    .rl-card-done-ico{
      display:inline-flex; align-items:center; justify-content:center;
      width:14px; height:14px; border-radius:50%;
      background:rgba(255,255,255,.94);
      color:#2563eb; font-size:9px; font-weight:900; line-height:1;
    }
    @keyframes llDoneDrift{
      0%,100%{ background-position:0% 50%; }
      50%    { background-position:100% 50%; }
    }
    @keyframes llDoneGlow{
      0%,100%{ box-shadow:0 4px 14px -4px rgba(59,130,246,.5); }
      50%    { box-shadow:0 6px 20px -3px rgba(99,102,241,.8); }
    }
    /* Faint blue wash on the completed card's inner surface (the ::after
       mask) + a tinted border so finished tests stand apart at a glance. */
    .rl-card--done{ border-color:rgba(59,130,246,.45); }
    .rl-card--done::after{
      background:linear-gradient(180deg, rgba(59,130,246,.06), #ffffff 58%);
    }
    /* "↻ Solve again" footer — the ↻ sweeps a full turn on card hover. */
    .rl-card-redo{
      display:inline-flex; align-items:center; gap:6px;
      font-size:12.5px; font-weight:700; color:#2563eb;
      margin-top:auto;
    }
    .rl-card-redo-ico{
      display:inline-block; font-size:13px; line-height:1;
      transition:transform .55s cubic-bezier(.2,.8,.2,1);
    }
    .rl-card:hover .rl-card-redo-ico{ transform:rotate(360deg); }

    /* Empty state */
    .rl-empty{
      padding:28px;
      border:1px dashed #d2d8de;
      border-radius:14px;
      color:#5b6b78;
      text-align:center;
    }

    /* Dark-mode parity */
    [data-theme="dark"] #reading-list .sub{ color:#94a3b0; }
    [data-theme="dark"] .rl-card{
      background:#1a2129;
      border-color:#29333e;
      color:#e6eef5;
      box-shadow:none;
    }
    /* Inner mask matches the dark card surface so the glowing border ring
       (the ::before conic-gradient) frames the card cleanly in dark mode. */
    [data-theme="dark"] .rl-card::after{ background:#1a2129; }
    [data-theme="dark"] .rl-card:hover{
      border-color:transparent;
      box-shadow:
        0 26px 50px -22px rgba(17,163,127,.55),
        0 8px 22px -10px rgba(17,163,127,.3);
    }
    [data-theme="dark"] .rl-card:hover .rl-card-title{ color:#3fcf9f; }
    [data-theme="dark"] .rl-card-eyebrow,
    [data-theme="dark"] .rl-card-meta{ color:#94a3b0; }
    [data-theme="dark"] .rl-card-title{ color:#e6eef5; }
    [data-theme="dark"] .rl-card-badge--premium{ background:#29333e; color:#94a3b0; }
    [data-theme="dark"] .rl-card-done-badge{
      border-color:rgba(255,255,255,.20);
      box-shadow:0 4px 14px -4px rgba(59,130,246,.5);
    }
    [data-theme="dark"] .rl-card--done{ border-color:rgba(96,165,250,.42); }
    [data-theme="dark"] .rl-card--done::after{
      background:linear-gradient(180deg, rgba(59,130,246,.12), #1a2129 58%);
    }
    [data-theme="dark"] .rl-card-redo{ color:#60a5fa; }
    [data-theme="dark"] .rl-card-lock{
      background:linear-gradient(180deg, transparent, rgba(26,33,41,.92) 35%);
    }
    [data-theme="dark"] .rl-empty{ border-color:#29333e; color:#94a3b0; }


    /* ===================================================================
       LISTENING CARDS — premium animated redesign. Scoped to
       #listening-list so the Reading grid keeps its existing look.
       Staggered entrance · cursor-follow spotlight + 3D tilt (vars set by
       lxAttachCardFX in 17-listening-exam.js) · animated gradient border ·
       shine sweep · gold "premium vault" vs teal "free" accents.
       =================================================================== */
    @property --ll-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
    @keyframes llCardIn{
      0%{ opacity:0; transform:translateY(36px) rotateX(12deg) scale(.965); }
      60%{ opacity:1; }
      100%{ opacity:1; transform:translateY(0) rotateX(0) scale(1); }
    }
    @keyframes llBorderFlow{ to{ --ll-ang:360deg; } }
    @keyframes llLockFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
    @keyframes llBadgeShine{ 0%{ background-position:-160% 0; } 60%,100%{ background-position:260% 0; } }

    #listening-list .rl-grid{ perspective:1300px; gap:20px; }

    #listening-list .rl-card{
      --ll-accent:#11A37F; --ll-accent2:#3fcf9f; --ll-glow:rgba(17,163,127,.22);
      --mx:50%; --my:28%; --rx:0deg; --ry:0deg;
      padding:20px 22px 22px;
      border-radius:20px;
      border:1px solid transparent;
      transform-style:preserve-3d;
      transform-origin:center bottom;   /* cards "stand up" into place */
      /* backwards (not both): holds opacity:0 during the stagger delay so later
         cards don't flash in, but does NOT pin the end transform — so the
         :hover lift/tilt applies cleanly once the entrance finishes. */
      animation:llCardIn .62s cubic-bezier(.16,1,.3,1) backwards;
      /* CAPPED. `--i` is the TEST NUMBER (17-listening-exam.js), not the row's
         position on screen, and the library is 85 tests — so the last card was
         delayed 84 * 46ms = 3.9 SECONDS, held at opacity:0 the whole time by
         `backwards`. The bottom of the list simply wasn't there for anyone who
         scrolled straight down. A stagger only reads as a stagger for the
         handful of cards you can see at once; past that it is dead air, so
         clamp it at 16 (same idiom as .sh-card in 25-shadowing.css:96). */
      animation-delay:calc(min(var(--i,0), 16) * 46ms);
      transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease;
      will-change:transform;
    }
    #listening-list .rl-card--premium{ --ll-accent:#f59e0b; --ll-accent2:#fbbf24; --ll-glow:rgba(245,158,11,.24); }
    /* Completed cards adopt the aurora identity: the animated border ring,
       cursor spotlight and hover glow all flow blue, and the ring is faintly
       visible AT REST (slow flow) so done tests are unmissable in the grid. */
    #listening-list .rl-card--done{
      --ll-accent:#38bdf8; --ll-accent2:#818cf8; --ll-glow:rgba(59,130,246,.28);
      box-shadow:0 14px 34px -26px rgba(59,130,246,.55);
    }
    #listening-list .rl-card--done::before{
      opacity:.5; animation:llBorderFlow 7s linear infinite;
    }
    #listening-list .rl-card--done:hover::before{ opacity:.95; }
    #listening-list .rl-card--done:hover .rl-card-title{ color:#60a5fa; }

    /* ::before = animated gradient border ring (accent-tinted, flows on hover) */
    #listening-list .rl-card::before{
      background:conic-gradient(from var(--ll-ang),
        var(--ll-accent) 0deg, var(--ll-accent2) 90deg,
        transparent 160deg, transparent 250deg,
        var(--ll-accent) 360deg);
      inset:-1.5px; opacity:0; transition:opacity .35s ease; z-index:-2;
    }
    #listening-list .rl-card:hover::before{ opacity:.95; animation:llBorderFlow 4s linear infinite; }

    /* ::after = inner surface: cursor-follow spotlight + a diagonal shine that
       sweeps across on hover. */
    #listening-list .rl-card::after{
      inset:1.5px; border-radius:18px; z-index:-1;
      background-color:#161d25;
      background-image:
        radial-gradient(360px circle at var(--mx) var(--my), var(--ll-glow), transparent 45%),
        linear-gradient(105deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%);
      background-size:100% 100%, 240% 100%;
      background-position:0 0, -70% 0;
      background-repeat:no-repeat;
      transition:background-position .75s ease;
    }
    #listening-list .rl-card:hover::after{ background-position:0 0, 170% 0; }

    /* Lift + 3D tilt toward the cursor + accent glow */
    #listening-list .rl-card:hover{
      transform:translateY(-9px) scale(1.02) rotateX(var(--rx)) rotateY(var(--ry));
      box-shadow:
        0 30px 60px -26px var(--ll-glow),
        0 12px 26px -16px rgba(0,0,0,.5);
    }
    /* keep the title's hover tint on-accent (overrides the shared teal) */
    #listening-list .rl-card--premium:hover .rl-card-title{ color:#fbbf24; }

    /* Title + meta lift slightly in 3D for depth */
    #listening-list .rl-card-title,
    #listening-list .rl-card-head{ transform:translateZ(26px); }
    #listening-list .rl-card-meta{ transform:translateZ(16px); }

    /* PREMIUM badge → gold gradient with a shine pass on hover */
    #listening-list .rl-card-badge--premium{
      background:linear-gradient(135deg,#fde68a,#f59e0b);
      color:#3a2600; position:relative; overflow:hidden;
      box-shadow:0 2px 8px -2px rgba(245,158,11,.6);
    }
    #listening-list .rl-card-badge--premium::after{
      content:''; position:absolute; inset:0;
      background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
      background-size:240% 100%; background-position:-160% 0;
    }
    #listening-list .rl-card:hover .rl-card-badge--premium::after{ animation:llBadgeShine 1.1s ease; }
    #listening-list .rl-card-badge--free{
      background:linear-gradient(135deg,#34d399,#11A37F); color:#04280f;
      box-shadow:0 2px 8px -2px rgba(17,163,127,.55);
    }

    /* Premium "vault" footer + floating lock */
    #listening-list .rl-card-lock{
      color:#fbbf24;
      background:linear-gradient(180deg, transparent, rgba(10,14,20,.9) 38%);
      font-weight:800; letter-spacing:.2px;
    }
    #listening-list .rl-card:hover .rl-card-lock-icon{
      display:inline-block; animation:llLockFloat 1.2s ease-in-out infinite;
    }
    /* Premium cards: show the NAME + difficulty clearly so non-premium users can
       see which tests exist and how many. Only the meta line (sitting behind the
       lock pill) keeps a light blur as the upgrade tease. */
    #listening-list .rl-card--premium .rl-card-eyebrow,
    #listening-list .rl-card--premium .rl-card-title{ filter:none; opacity:1; }
    #listening-list .rl-card--premium .rl-card-meta{ filter:blur(3px); opacity:.55; }

    /* Light-mode parity for the inner surface */
    [data-theme="light"] #listening-list .rl-card::after{ background-color:#ffffff; }
    [data-theme="light"] #listening-list .rl-card-lock{
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.92) 38%);
      color:#b4730a;
    }

    @media (prefers-reduced-motion: reduce){
      #listening-list .rl-card{ animation:none; }
      #listening-list .rl-card:hover{ transform:translateY(-5px); }
      #listening-list .rl-card:hover::before{ animation:none; }
      #listening-list .rl-card:hover::after{ transition:none; }
      #listening-list .rl-card:hover .rl-card-lock-icon{ animation:none; }
      #listening-list .rl-card--done::before{ animation:none; }
      .rl-card-done-badge{ animation:none; }
    }

/* ----- Mode chips on completed listening cards ----- */
/* Chips sit on the left of the "Solve again" footer strip. The footer is a
   flex row, so we push chips left, "Solve again" text right. Casual = green
   pill, Mock = amber pill — matches the reading library treatment. */
#listening-list .rl-card-redo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
#listening-list .rl-card-redo-left{
  display:inline-flex; align-items:center; gap:6px;
  min-width:0;
}
#listening-list .rl-card-mode-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px;
  font-size:.72em; font-weight:700; line-height:1.4;
  letter-spacing:.02em; text-transform:uppercase;
  border:1px solid rgba(0,0,0,.06);
  white-space:nowrap;
}
#listening-list .rl-card-mode-chip--casual{
  background:linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color:#6ee7b7; color:#065f46;
}
#listening-list .rl-card-mode-chip--mock{
  background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color:#fbbf24; color:#78350f;
}
[data-theme="dark"] #listening-list .rl-card-mode-chip--casual{
  background:linear-gradient(135deg, rgba(6,95,70,.35) 0%, rgba(6,95,70,.55) 100%);
  border-color:rgba(110,231,183,.4); color:#a7f3d0;
}
[data-theme="dark"] #listening-list .rl-card-mode-chip--mock{
  background:linear-gradient(135deg, rgba(146,64,14,.35) 0%, rgba(146,64,14,.55) 100%);
  border-color:rgba(251,191,36,.5); color:#fde68a;
}

/* ==========================================================================
   LISTENING CATALOG INTRO — audio-native hero (scoped to #listening-list).
   Ties the /listening landing to the exam's "sonar" look: a gradient headline,
   a live mini-equalizer in the eyebrow and a soft ambient glow behind it.
   Reading's intro (#reading-list) is deliberately untouched.
   ========================================================================== */
#listening-list .rl-intro{ position:relative; }
#listening-list .rl-intro::before{
  content:''; position:absolute; z-index:-1; left:-4%; top:-46px;
  width:min(540px, 72%); height:270px; pointer-events:none; opacity:.9;
  background:
    radial-gradient(58% 60% at 28% 32%, rgba(16,185,129,.22), transparent 70%),
    radial-gradient(52% 55% at 72% 42%, rgba(34,211,238,.16), transparent 70%);
  filter:blur(22px);
}
[data-theme="light"] #listening-list .rl-intro::before{ opacity:.55; }

/* eyebrow → a "now playing" chip with a live equalizer */
#listening-list .eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 15px 6px 11px; border-radius:999px;
  background:color-mix(in srgb, #10b981 13%, transparent);
  border:1px solid color-mix(in srgb, #10b981 30%, transparent);
  color:#34d399; font-weight:800; letter-spacing:.11em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
[data-theme="light"] #listening-list .eyebrow{
  color:#0d9488; background:color-mix(in srgb, #0d9488 10%, transparent);
  border-color:color-mix(in srgb, #0d9488 26%, transparent);
}
#listening-list .ll-eq-mini{ display:inline-flex; align-items:flex-end; gap:2.5px; height:13px; }
#listening-list .ll-eq-mini i{
  width:3px; height:100%; border-radius:2px; transform:scaleY(.3); transform-origin:bottom;
  background:linear-gradient(180deg, #22d3ee, #10b981);
  animation:llEqMini 1s ease-in-out infinite;
}
#listening-list .ll-eq-mini i:nth-child(2){ animation-delay:-.25s; }
#listening-list .ll-eq-mini i:nth-child(3){ animation-delay:-.5s; }
#listening-list .ll-eq-mini i:nth-child(4){ animation-delay:-.75s; }
@keyframes llEqMini{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }

/* gradient headline (mirrors the exam start gate) */
#listening-list .rl-title{
  background:linear-gradient(100deg, #10b981, #22d3ee 48%, #b6f24e);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:220% auto; animation:llTitleShift 7s ease infinite;
}
[data-theme="light"] #listening-list .rl-title{
  background:linear-gradient(100deg, #0d9488, #0891b2 48%, #4d7c0f);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:220% auto;
}
@keyframes llTitleShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

@media (prefers-reduced-motion: reduce){
  #listening-list .ll-eq-mini i{ animation:none; transform:scaleY(.6); }
  #listening-list .rl-title{ animation:none; }
}

/* ==========================================================================
   LISTENING CATALOG — ambient audio-native backdrop (aurora + live equalizer).
   A fixed, decorative layer behind the whole /listening page that mirrors the
   exam "sonar" stage, so the catalog feels alive. Scoped to #listening-list.
   ========================================================================== */
#listening-list{ position: relative; }
#listening-list .wrap{ position: relative; z-index: 1; }
#listening-list .ll-ambient{ position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#listening-list .ll-aurora{
  position: absolute; border-radius: 50%; filter: blur(66px); opacity: .34;
  mix-blend-mode: screen; will-change: transform;
}
[data-theme="light"] #listening-list .ll-aurora{ mix-blend-mode: multiply; opacity: .18; }
#listening-list .ll-aurora--1{ width: 42vw; height: 42vw; left: -9vw; top: -8vw;
  background: radial-gradient(circle, #10b981, transparent 68%); animation: llAur1 22s ease-in-out infinite; }
#listening-list .ll-aurora--2{ width: 38vw; height: 38vw; right: -9vw; top: 8vh;
  background: radial-gradient(circle, #22d3ee, transparent 68%); animation: llAur2 27s ease-in-out infinite; }
#listening-list .ll-aurora--3{ width: 34vw; height: 34vw; left: 32%; bottom: -14vw; opacity: .16;
  background: radial-gradient(circle, #b6f24e, transparent 70%); animation: llAur3 31s ease-in-out infinite; }
#listening-list .ll-ambient-eq{
  position: absolute; left: 0; right: 0; bottom: 0; height: 22vh;
  display: flex; align-items: flex-end; justify-content: center; gap: 6px; opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
#listening-list .ll-ambient-eq i{
  width: 6px; height: 100%; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #22d3ee, #10b981);
  transform: scaleY(.15); transform-origin: bottom;
  animation: llEqBar 1.7s ease-in-out infinite; animation-delay: calc(var(--n) * -63ms);
}
@keyframes llEqBar{ 0%,100%{ transform: scaleY(.13); } 50%{ transform: scaleY(1); } }
@keyframes llAur1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(5vw,4vw) scale(1.12); } }
@keyframes llAur2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-5vw,4vw) scale(1.1); } }
@keyframes llAur3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(4vw,-4vw) scale(1.14); } }

@media (prefers-reduced-motion: reduce){
  #listening-list .ll-aurora,
  #listening-list .ll-ambient-eq i{ animation: none; }
  #listening-list .ll-ambient-eq i{ transform: scaleY(.5); }
}