/* macOS-style floating dock magnification for home tool cards (desktop) */

@media (min-width: 900px) {
  /* Glass tray — main tool cards only (not Also try) */
  .rd-cards.cf-dock-tray[data-cf-floating-dock] {
    position: relative;
    padding: 22px 20px 26px;
    border-radius: 32px;
    background: linear-gradient(
      180deg,
      rgba(10, 14, 26, 0.62) 0%,
      rgba(4, 6, 12, 0.82) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .rd-cards.cf-dock-tray[data-cf-floating-dock]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
      ellipse 80% 50% at 50% 100%,
      rgba(90, 160, 255, 0.12),
      transparent 70%
    );
  }

  .rd-cards[data-cf-floating-dock] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: end;
  }

  /* Lab tools — bare dock row, room to pop above */
  .rd-lab {
    overflow: visible;
  }

  .rd-lab-grid[data-cf-floating-dock="x"] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    overflow: visible;
    padding: 32px 4px 8px;
    margin-top: -12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .rd-lab-grid[data-cf-floating-dock="x"]::-webkit-scrollbar {
    display: none;
  }

  .rd-lab-grid[data-cf-floating-dock="x"] .rd-lab-card {
    flex: 0 0 196px;
    max-width: 196px;
    overflow: visible;
  }

  .rd-lab-grid[data-cf-floating-dock="x"] .rd-lab-prev {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
  }

  .cf-dock-item {
    --dock-scale: 1;
    --dock-lift: 0px;
    transform: scale(var(--dock-scale)) translateY(calc(-1 * var(--dock-lift)));
    transform-origin: bottom center;
    transition:
      transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.25s ease,
      box-shadow 0.25s ease;
    will-change: transform;
  }

  [data-cf-floating-dock] .rd-card.cf-dock-item {
    transform: perspective(1100px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      scale(var(--dock-scale))
      translateY(calc(-1 * var(--dock-lift)));
  }

  [data-cf-floating-dock] .rd-card.cf-dock-item:hover {
    --ty: 0px !important;
    border-color: rgba(120, 170, 255, 0.35) !important;
    box-shadow:
      0 36px 84px rgba(0, 0, 0, 0.6),
      0 0 46px rgba(90, 160, 255, 0.12) !important;
  }

  [data-cf-floating-dock] .rd-lab-card.cf-dock-item:hover {
    transform: scale(var(--dock-scale)) translateY(calc(-1 * var(--dock-lift)));
    border-color: var(--lab-accent, rgba(90, 160, 255, 0.45));
  }

  [data-cf-floating-dock] .cf-dock-item.cf-dock-item--peak {
    z-index: 12;
    position: relative;
  }
}

@media (min-width: 1280px) {
  .rd-cards[data-cf-floating-dock] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-cards.cf-dock-tray[data-cf-floating-dock] {
    backdrop-filter: none;
  }

  .cf-dock-item {
    transform: none !important;
    transition: none !important;
  }
}