/* v2. #features visual polish.
 *
 * Three things, all scoped under #features so nothing else is caught:
 *   1. Arial everywhere inside the little animations (house rule; they were
 *      inheriting the page's display face and reading as a different product).
 *   2. The chips and buttons in those animations get the same glass treatment
 *      the real buttons on this page use, instead of a flat 1px outline.
 *   3. Depth on the two flags.
 */

/* 1. ---------------------------------------------------------------- type */
#features .grid > * > div:first-child,
#features .grid > * > div:first-child * {
  font-family: Arial, Helvetica, sans-serif;
}

/* 2. --------------------------------------------------------------- glass */
#features .fv-press,
#features .fv-swap-out,
#features .fv-swap-in,
#features .fv-in[class*="rounded-full"] {
  border-color: transparent !important;
  background:
    linear-gradient(hsl(0 0% 100% / .82), hsl(0 0% 100% / .82)) padding-box,
    linear-gradient(150deg,
        hsl(0 0% 100% / .95) 0%,
        hsl(var(--line-strong)) 30%,
        hsl(0 0% 100% / .9) 55%,
        hsl(var(--warm)) 78%,
        hsl(var(--line-strong)) 100%) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .06),
    0 4px 12px hsl(var(--deep) / .10),
    inset 0 1px hsl(0 0% 100% / .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The autobuy "armed" pill is the one solid-dark element in the set; keep it
   dark but give it the same rim and lift so it belongs to the same family. */
#features .fv-swap-in {
  background:
    linear-gradient(hsl(var(--deep)), hsl(var(--deep))) padding-box,
    linear-gradient(150deg,
        hsl(0 0% 100% / .55) 0%,
        hsl(var(--deep)) 45%,
        hsl(0 0% 100% / .35) 100%) border-box !important;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .18),
    0 6px 18px hsl(var(--deep) / .26),
    inset 0 1px hsl(0 0% 100% / .28) !important;
}

/* 3. --------------------------------------------------------------- flags */
#features .fv-flag {
  border-radius: 2.5px;
  overflow: hidden;
  filter:
    drop-shadow(0 1px 1px hsl(var(--deep) / .18))
    drop-shadow(0 3px 6px hsl(var(--deep) / .16));
}


/* ---------------------------------------------------------- more glass --
   The placeholder rows, the marketplace chips, the ONE FEED box and the
   autobuy input are the remaining flat 1px boxes in these animations. Same
   rim + lift as everything else so the whole set reads as one material. */
#features .fv-in > div,
#features .fv-vanish,
#features .cr-chip,
#features .cr-feed,
#features .fv-feed > span,
#features [class*="rounded-md"][class*="border-line"],
#features [class*="rounded-lg"][class*="border-line"] {
  border-color: transparent !important;
  background:
    linear-gradient(hsl(0 0% 100% / .80), hsl(0 0% 100% / .80)) padding-box,
    linear-gradient(150deg,
        hsl(0 0% 100% / .95) 0%,
        hsl(var(--line-strong)) 32%,
        hsl(0 0% 100% / .9) 58%,
        hsl(var(--warm)) 80%,
        hsl(var(--line-strong)) 100%) border-box !important;
  border: 1px solid transparent !important;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .05),
    0 3px 9px hsl(var(--deep) / .08),
    inset 0 1px hsl(0 0% 100% / .9);
}

/* ------------------------------------------------- spam turns red on press
   The cursor in this animation lands on the SPAM chip at about the halfway
   point (fv-press holds scale(1) to 48%, then dips). A second animation on
   the same element, same 4s loop, tints it exactly there -- matching what the
   real dashboard does when you flag a dealer. Declaring both keeps the
   original press; setting `animation` alone would replace it. */
#features .fv-press {
  animation:
    fv-press var(--fv-loop, 4s) cubic-bezier(.4, 0, .2, 1) infinite,
    fv-press-red var(--fv-loop, 4s) cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes fv-press-red {
  0%, 46%   { color: hsl(var(--fg)); background-color: transparent; }
  52%, 84%  { color: #c8102e; background-color: hsl(354 84% 45% / .10); }
  92%, 100% { color: hsl(var(--fg)); background-color: transparent; }
}

/* ------------------------------------------------------ travelling items
   offset-path puts each item ON its bezier. The old version animated a plain
   translate() from the chip to the centre, which is a straight line across a
   curved rail -- the items visibly drifted off the track. */
#features .cr-fly {
  offset-rotate: 0deg;
  animation: cr-fly 3.2s linear infinite;
  opacity: 0;
}
#features .cr-lane-0 { offset-path: path("M37.5 2 C37.5 30, 150 26, 150 54"); }
#features .cr-lane-1 { offset-path: path("M112.5 2 C112.5 30, 150 26, 150 54"); }
#features .cr-lane-2 { offset-path: path("M187.5 2 C187.5 30, 150 26, 150 54"); }
#features .cr-lane-3 { offset-path: path("M262.5 2 C262.5 30, 150 26, 150 54"); }
@keyframes cr-fly {
  0%        { offset-distance: 0%;   opacity: 0; }
  14%       { opacity: 1; }
  84%       { opacity: 1; }
  100%      { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #features .cr-fly { animation: none; opacity: .5; offset-distance: 50%; }
}