/* ===========================================================
         LAB2 hero animation — scoped to .lab2-anim so it never bleeds.
         The whole animation is contained inside .hero-text (replacing
         the original H1). Each scene swaps the animation card's own
         background; the page's .hero / .hero-bg are unaffected.
         =========================================================== */
      .lab2-anim {
        --ink: #0A0A0A;

        /* Scene 1 — equalizer */
        --bg1: #18E58C;
        --dot: #C6FE59;
        --cols: 9;
        --col-duration: 0.9s;
        --col-stagger: 0.55s;
        --start-offset: -4.5s;
        --gap: 0px;
        --marker-col: 7;
        --marker-row: 2;
        --marker-delay: 0.4s;

        /* Scene 2 — pink + orange + lime growing circle */
        --bg2: #FFBDF3;
        --orange: #FF5B09;
        --lime2: #C6FE59;
        --lime-grow: 4.2s;
        --pct-end: 83;

        /* Scene 3 — orange bg with rising blue bars */
        --bg3: #FF5B09;
        --bar3: #5B55FF;
        --bars-grow: 1.4s;
        --bar-w: 16%;
        --bar-gap: 18px;
        --bars-margin: 34px;
        --bar-radius: 3.5vw;
        --rev-start: 0;
        --rev-end: 38;

        /* Positioning is inherited from .hero-bg (absolute, fills .hero).
           We just need to override the pink background-color so each
           scene's bg shows through, and add overflow + isolation. */
        background-color: transparent;
        overflow: hidden;
        isolation: isolate;
        font-family: 'Lab2', "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: var(--ink);
        container-type: inline-size;
      }

      .lab2-anim .scene {
        position: absolute;
        inset: 0;
        display: none;
      }
      .lab2-anim .scene.active { display: block; }

      /* Scene 1 — Equalizer */
      .lab2-anim .scene1 { background: var(--bg1); }
      .lab2-anim .eq {
        position: absolute;
        top: 0;
        left: calc(-50% / var(--cols));
        width: calc(100% + (100% / var(--cols)));
        height: 100%;
        display: grid;
        grid-template-columns: repeat(calc(var(--cols) + 1), 1fr);
        align-items: stretch;
        pointer-events: none;
        overflow: hidden;
      }
      .lab2-anim .col {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .lab2-anim .dot {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: var(--bg1);
        margin: calc(var(--gap) / 2) 0;
        will-change: background-color;
        animation: la-fill-in var(--col-duration) linear forwards;
        animation-delay: var(--delay);
      }
      @keyframes la-fill-in {
        0%   { background-color: var(--bg1); }
        85%  { background-color: var(--bg1); }
        100% { background-color: var(--dot); }
      }
      .lab2-anim .dot.pre-filled {
        background: var(--dot);
        animation: none;
      }
      .lab2-anim .marker {
        position: absolute;
        z-index: 2;
        inset: 0;
        container-type: inline-size;
        pointer-events: none;
        opacity: 0;
        animation: la-marker-in 0.45s ease-out forwards;
        animation-delay: var(--marker-delay, 0s);
      }
      @keyframes la-marker-in {
        from { opacity: 0; transform: scale(0.92); }
        to   { opacity: 1; transform: scale(1); }
      }
      .lab2-anim .dot.marker-host { overflow: visible; position: relative; }
      .lab2-anim .marker-big {
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-weight: 400;
        font-size: 4.5vw;
        letter-spacing: -0.04em;
        line-height: 1;
        color: var(--ink);
      }
      .lab2-anim .marker-pill-svg {
        position: absolute;
        top: 6%;
        right: -18%;
        width: 78%;
        height: auto;
        pointer-events: none;
        opacity: 0;
        animation: la-marker-pill-in 0.45s ease-out forwards;
        animation-delay: calc(var(--marker-delay, 0s) + 0.65s);
      }
      @keyframes la-marker-pill-in {
        from { opacity: 0; transform: translateY(-2px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* Scene 2 */
      .lab2-anim .scene2 { background: var(--bg2); }
      .lab2-anim .grow-stage { position: absolute; inset: 0; overflow: hidden; }
      .lab2-anim .orange {
        position: absolute;
        bottom: calc(50% - 34.5vh);
        right: -8vmin;
        width: 69vh;
        height: 69vh;
        border-radius: 50%;
        background: var(--orange);
      }
      .lab2-anim .lime {
        position: absolute;
        bottom: calc(50% - 34.5vh);
        right: calc(34.5vh - 8vmin - 28.75vh);
        width: 57.5vh;
        height: 57.5vh;
        display: block;
        transform: scale(0);
        transform-origin: bottom center;
        animation: la-grow-s var(--lime-grow) cubic-bezier(.2,.7,.2,1) forwards;
        animation-delay: 0.6s;
      }
      @keyframes la-grow-s {
        from { transform: scale(0); }
        to   { transform: scale(1); }
      }
      .lab2-anim .lime-circle {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--lime2);
      }
      @keyframes la-grow-lime {
        from { transform: scale(0); }
        to   { transform: scale(1); }
      }
      .lab2-anim .pct {
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
        font-size: 4.5vw;
        letter-spacing: -0.04em;
        line-height: 1;
        color: var(--ink);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: la-fade-in 0.3s ease-out forwards;
        animation-delay: 0.9s;
      }
      @keyframes la-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
      }
      .lab2-anim .lime-pill-svg {
        position: absolute;
        top: -30px;
        left: -30px;
        width: 93px;
        height: 30px;
        pointer-events: none;
        opacity: 0;
        animation: la-fade-in 0.3s ease-out forwards;
        animation-delay: 0.9s;
      }
      .lab2-anim .lime-pill-svg text {
        letter-spacing: 0;
        font-weight: 400;
      }
      .lab2-anim .pct [data-grow-pct] { display: inline-block; }
      .lab2-anim .lime-pill-svg-OLD-REMOVED {
        position: absolute;
        top: -8px;
        left: -70px;
        width: 93px;
        height: 30px;
        letter-spacing: 0;
        pointer-events: none;
        opacity: 1;
      }
      @keyframes la-pill-in {
        from { opacity: 0; transform: translate(var(--pill-tx), calc(var(--pill-ty) - 4px)); }
        to   { opacity: 1; transform: translate(var(--pill-tx), var(--pill-ty)); }
      }

      /* Scene 3 */
      .lab2-anim .scene3 { background: var(--bg3); }
      .lab2-anim .bars {
        position: absolute;
        right: var(--bars-margin);
        bottom: 0;
        /* Total bar block = 2/3 of container width (clamped sensibly) */
        width: clamp(420px, 66cqw, 1100px);
        height: 92%;
        display: flex;
        align-items: flex-end;
        justify-content: stretch;
        gap: var(--bar-gap);
        pointer-events: none;
      }
      .lab2-anim .bar-col {
        position: relative;
        flex: 1 1 0;
        height: 100%;
        display: flex;
        align-items: flex-end;
      }
      .lab2-anim .bar-fill {
        position: relative;
        width: 100%;
        height: 0;
        background: var(--bar3);
        border-radius: var(--bar-radius) var(--bar-radius) 0 0;
        overflow: visible;
        animation: la-bar-grow var(--bars-grow) cubic-bezier(.65,0,.35,1) forwards;
        animation-delay: 0.15s;
        will-change: height;
      }
      .lab2-anim .bar-col.b1 .bar-fill { --bar-final: 38%; }
      .lab2-anim .bar-col.b2 .bar-fill { --bar-final: 56%; }
      .lab2-anim .bar-col.b3 .bar-fill { --bar-final: 75%; }
      .lab2-anim .bar-col.b4 .bar-fill { --bar-final: 95%; }
      @keyframes la-bar-grow {
        from { height: 0%; }
        to   { height: var(--bar-final, 50%); }
      }
      .lab2-anim .rev-overlay {
        position: absolute;
        left: 0;
        right: 0;
        top: clamp(14px, 2.4cqw, 36px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        pointer-events: none;
      }
      .lab2-anim .rev-pill {
        width: auto;
        height: auto;
        margin-bottom: -13px;
        position: relative;
        top: -14px;
        left: -8vw;
      }
      .lab2-anim .rev-pct {
        color: var(--ink);
        font-weight: 400;
        font-size: 4.5vw;
        letter-spacing: -0.02em;
        line-height: 1;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }

      /* Mobile overrides */
      @media (max-width: 560px) {
        .lab2-anim {
          --marker-col: 2;
          --marker-row: 4;
          --col-duration: 1.3s;
          --col-stagger: 0.8s;
        }
        .lab2-anim .marker-big {
          font-size: 10.5vw;
        }
        .lab2-anim .marker-pill-svg,
        .lab2-anim .lime-pill-svg,
        .lab2-anim .rev-pill {
          height: 30px;
          width: auto;
        }
        .lab2-anim .orange {
          bottom: 0;
          right: -28vmin;
          width: 56vh;
          height: 56vh;
        }
        .lab2-anim .eq {
          left: calc(-65% / var(--cols));
          top: -80px;
          height: auto;
        }
        .lab2-anim .lime {
          bottom: 0;
          right: calc(28vh - 28vmin - 23.24vh);
          width: 46.48vh;
          height: 46.48vh;
        }
        .lab2-anim .pct {
          font-size: 10.5vw;
        }
        .lab2-anim .bars {
          width: clamp(610px, 66cqw, 1100px);
          height: 47%;
        }
        .lab2-anim {
          --bar-radius: 8.5vw;
        }
        .lab2-anim .rev-pct {
          font-size: 10.5vw;
        }
      }
      /* The animation's scenes provide their own backgrounds, so we don't
         need the page's pink fallback. The hero-image (3D phone) sits on top.
         The hero-text (LET'S TALK button) also sits on top via .hero > .wrap
         which is already z-index:1 in the original styles. */
      .hero-image { z-index: 2; }