/* web/themes/techprosolutions/css/components/speed-compare.css */

/* ========================================================================
   FONT
======================================================================== */
@font-face {
  font-family: 'Manrope';
  src: url('../../fonts/Manrope-VariableFont_wght.woff2?v=2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ========================================================================
   SPEED COMPARE — "other platform vs EasyTax" liquid-fill pills
   Pure CSS/SVG, no JS. Designed for LIGHT backgrounds (labels are dark).

   Geometry (reference-matched): tall slender rounded rectangles, 72x200px,
   24px radius — NOT full capsules. 24px is a deliberate reference-match
   departure from the theme's 16/12/9999 radius set, scoped to this
   component only.

   Liquid anatomy (per pill): a bottom-anchored solid block whose top edge is
   an SVG wave strip. The strip is 200% wide and holds exactly TWO wave
   periods, so translateX(-50%) = one full period and the loop is seamless at
   every frame. The strip's bottom 4px are solid fill overlapping the block,
   killing any subpixel hairline at the join.

   The slow bar stops 20px short of 100% so its wave undulates INSIDE the
   pill (a true 100% block would push the wave into the overflow clip).

   Stacking: liquid z1 -> gloss ::after z2. The gloss is a decorative glass
   reflection flush to the right inner edge, fading downward.
======================================================================== */
.speed-compare {
  /* Deep teal for the "other platform" liquid: --et-green-2 (#1D9E75)
     darkened until the white 14px stat passes AA normal-text (4.7:1 vs the
     4.5 minimum; the token itself only manages 3.4:1). Display-only liquid
     shade — brand tokens stay untouched. */
  --sc-teal: #17835F;
  --sc-teal-wash: var(--et-wash, #E8F5E9); /* empty headroom of the slow pill */
  --sc-navy: var(--et-navy, #1C3557);      /* EasyTax liquid — 11:1 with white */
  --sc-navy-wash: #E4EDF9;                 /* empty body of the fast pill (pale navy wash) */
  --sc-pill-w: 4.5rem;                     /* 72px */
  --sc-pill-h: 12.5rem;                    /* 200px */
  --sc-radius: 1.5rem;                     /* 24px rounded-rectangle corners */
  --sc-wave-h: 1.25rem;                    /* 20px strip: 16px ripple headroom + 4px solid overlap */
  --sc-fill-fast: 2.25rem;                 /* 36px = 18% — smallest on-grid fill that holds the stat above its 16px inset */

  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--et-space-12, 3rem); /* 48px */
  font-family: 'Manrope', system-ui, sans-serif;
}

.speed-compare__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--et-space-4, 1rem); /* 16px pill -> caption */
  flex: none; /* fixed-geometry pills must never be squashed by a tight flex track */
}

.speed-compare__pill {
  position: relative;
  width: var(--sc-pill-w);
  height: var(--sc-pill-h);
  border-radius: var(--sc-radius);
  overflow: hidden;
  isolation: isolate; /* Safari: keeps the transformed liquid clipped by the rounded corners */
}

/* Glass reflection: vertical stripe flush to the right inner edge, strongest
   at the top (light from above), fading as it descends. The pill's own
   overflow clip conforms it to the 24px corners. Decorative only. */
.speed-compare__pill::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 0.75rem; /* 12px */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.10)
  );
  pointer-events: none;
  z-index: 2; /* strictly above the liquid (z1) */
}

.speed-compare__pill--slow { background-color: var(--sc-teal-wash); }
.speed-compare__pill--fast { background-color: var(--sc-navy-wash); }

/* ------------------------------------------------------------------------
   LIQUID — one colour source: currentColor paints both block and wave.
------------------------------------------------------------------------ */
.speed-compare__liquid {
  position: absolute;
  inset: auto 0 0 0;
  background-color: currentColor;
  z-index: 1; /* under the gloss */
}

.speed-compare__liquid--slow {
  color: var(--sc-teal);
  height: calc(100% - var(--sc-wave-h)); /* 180px — wave headroom, see block comment above */
}

.speed-compare__liquid--fast {
  color: var(--sc-navy);
  height: var(--sc-fill-fast);
  /* The Fill: rises from below the clip and settles at 18%. Runs once on
     load; `backwards` holds it hidden through the 0.4s delay. The bezier is
     a decelerating ease-out — fast surge, soft liquid settle, no overshoot. */
  animation: speed-compare-rise 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

/* ------------------------------------------------------------------------
   WAVES — two strips per liquid, both gentle low-amplitude ripples (each
   period is 72px at the pill's width; front swell 5px, back 6px peak-to-
   trough). The opaque FRONT strip sits 16px above the block and drifts
   left; the 45%-opacity BACK strip sits 4px higher and drifts right, half
   again slower. Two out-of-sync surfaces read as moving liquid — one wave
   alone reads as a printed edge. Per-bar phase offsets keep the two pills
   from ever moving in lockstep.
------------------------------------------------------------------------ */
.speed-compare__wave {
  position: absolute;
  top: calc(-1 * var(--et-space-4, 1rem)); /* -16px */
  left: 0;
  display: block;
  width: 200%;
  height: var(--sc-wave-h);
  fill: currentColor;
  animation: speed-compare-drift 5s linear infinite;
}

/* Depth layer: painted first in the DOM, so the opaque front wave hides all
   of it except the crests peeking above the front surface. `reverse` plays
   the same ±one-period loop backwards — still perfectly seamless. */
.speed-compare__wave--back {
  top: calc(-1 * var(--sc-wave-h, 1.25rem)); /* -20px: waterline rides 4px above the front */
  opacity: 0.45;
  animation-duration: 8s;
  animation-direction: reverse;
}

.speed-compare__liquid--fast .speed-compare__wave {
  animation-delay: -2.5s;
}

.speed-compare__liquid--fast .speed-compare__wave--back {
  animation-delay: -4s;
}

/* ------------------------------------------------------------------------
   TEXT — stat rides inside the liquid (the fast bar's parent transform
   carries it up during the fill). 14px/700 white: AA-safe on both liquids
   (deep teal 4.7:1, navy 11:1). The 16px inset clears the 24px corner
   radius entirely — the full 72px width is available to the glyphs.
------------------------------------------------------------------------ */
.speed-compare__stat {
  position: absolute;
  right: 0;
  bottom: var(--et-space-4, 1rem); /* 16px */
  left: 0;
  color: #FFFFFF;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em; /* bold weight gets slight positive tracking */
  text-align: center;
}

.speed-compare__label {
  font-size: var(--et-body-sm-size, 0.9375rem); /* 15px */
  line-height: 1.5;
  letter-spacing: 0.02em; /* small type, positive tracking */
  text-align: center;
}

.speed-compare__label--slow {
  color: var(--et-body-color, #45464F);
  font-weight: 500;
}

.speed-compare__label--fast {
  color: var(--et-ink, #0A0A0A);
  font-weight: 800;
}

/* ------------------------------------------------------------------------
   KEYFRAMES
------------------------------------------------------------------------ */
@keyframes speed-compare-drift {
  to { transform: translateX(-50%); } /* exactly one wave period */
}

@keyframes speed-compare-rise {
  from { transform: translateY(calc(100% + var(--sc-wave-h, 1.25rem))); } /* own height + wave strip = fully below the clip */
}

/* ------------------------------------------------------------------------
   CONTEXT: BENTO CARD (animated_feature_card, "Bar chart US" option)
   The bar-chart card lives in a FIXED 258px grid row (sticky-features.css).
   At 16px card padding the content box is 226px tall; the component stacks
   200 (pill) + 4 (gap) + 20 (13px caption) = 224px. Pills keep their full
   locked geometry — only the spacing around them tightens.
------------------------------------------------------------------------ */
.animated-feature-card .speed-compare__item {
  gap: var(--et-space-1, 0.25rem); /* 4px */
}

.animated-feature-card .speed-compare__label {
  font-size: var(--et-overline-size, 0.8125rem); /* 13px */
}

/* Desktop only: trim the card's 40px vertical padding to 16px so the 224px
   component clears the fixed row. Mobile rows are auto-height — the card
   keeps its own padding there. */
@media (min-width: 992px) {
  .animated-feature-card--bar-chart:has(.speed-compare) {
    padding-block: var(--et-space-4, 1rem); /* 16px */
  }
}

/* ------------------------------------------------------------------------
   SMALL SCREENS — 192px total already fits a 320px viewport; tighten the
   gap anyway once host-section padding starts to squeeze.
------------------------------------------------------------------------ */
@media (max-width: 400px) {
  .speed-compare {
    gap: var(--et-space-8, 2rem); /* 32px */
  }
}

/* ------------------------------------------------------------------------
   REDUCED MOTION — waves freeze mid-undulation; the fast bar renders
   directly at its settled 18% fill.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .speed-compare__wave,
  .speed-compare__liquid--fast {
    animation: none;
  }
}