/* VibeKey site motion layer — load after homepage-hub.css (unlayered; must beat hub/market base rules) v1 */

:root {
    --vk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --vk-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
    --vk-dur-xs: 140ms;
    --vk-dur-s: 280ms;
    --vk-dur-m: 650ms;
    --vk-dur-l: 900ms;
    --vk-stagger: 60ms;
  }

  @media (prefers-reduced-motion: no-preference) {
    html.vk-motion-on .vk-home-hero {
      view-timeline-name: --vk-hero;
      view-timeline-axis: block;
    }

    html.vk-motion-on .vk-hero-phone-stage {
      animation:
        vk-rise 0.9s var(--vk-ease-out) 0.15s backwards,
        vk-hero-parallax-phone linear both;
      animation-timeline: auto, view(--vk-hero);
      animation-range: normal, exit 0% exit 55%;
    }

    @keyframes vk-hero-parallax-phone {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(18px);
      }
    }

    html.vk-motion-on .vk-home-hero::before {
      animation: vk-hero-parallax-glow linear both;
      animation-timeline: view(--vk-hero);
      animation-range: exit 0% exit 50%;
    }

    @keyframes vk-hero-parallax-glow {
      from {
        opacity: 1;
      }
      to {
        opacity: 0.35;
      }
    }

    html.vk-motion-on .vibekey-compare-shell:not(.is-visible) .vk-compare-row {
      opacity: 0;
    }

    html.vk-motion-on .vibekey-compare-shell.is-visible .vk-compare-row {
      animation: vk-compare-row-in var(--vk-dur-m) var(--vk-ease-out) both;
      animation-delay: calc(var(--i, 0) * var(--vk-stagger));
    }

    html.vk-motion-on .vibekey-compare-shell.is-visible .vk-compare-row td,
    html.vk-motion-on .vibekey-compare-shell.is-visible .vk-compare-row th:not(.vibekey-compare-feature) {
      animation: vk-compare-cell-in var(--vk-dur-m) var(--vk-ease-out) both;
      animation-delay: calc(var(--i, 0) * var(--vk-stagger));
    }

    @keyframes vk-compare-row-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes vk-compare-cell-in {
      from {
        transform: translateX(-6px);
      }
      to {
        transform: translateX(0);
      }
    }

    html.vk-motion-on .vibekey-compare-shell.is-visible .vk-compare-row td.vibekey-compare-vk::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0.35rem;
      height: 2px;
      width: 100%;
      background: linear-gradient(90deg, #2dd4bf, transparent);
      transform: scaleX(0);
      transform-origin: left;
      animation: vk-compare-wipe 0.55s var(--vk-ease-out) both;
      animation-delay: calc(var(--i, 0) * var(--vk-stagger) + 0.12s);
    }

    html.vk-motion-on .vibekey-compare-table td.vibekey-compare-vk {
      position: relative;
    }

    @keyframes vk-compare-wipe {
      to {
        transform: scaleX(1);
      }
    }

    .vibekey-compare-art__item--card .vibekey-compare-art__link {
      position: relative;
      overflow: hidden;
    }

    .vibekey-compare-art__item--card.is-visible .vibekey-compare-art__link::after,
    .listing.vk-foil-revealed .store-card-preview--market-card::after {
      content: "";
      position: absolute;
      inset: -20%;
      background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 62%
      );
      transform: translateX(-120%);
      pointer-events: none;
      mix-blend-mode: screen;
      animation: vk-foil-sweep 0.85s var(--vk-ease-out) both;
    }

    @keyframes vk-foil-sweep {
      to {
        transform: translateX(120%);
      }
    }

    #vibekey-home-drop-preview.is-dealt .home-drop-card {
      animation: vk-drop-deal var(--vk-dur-m) var(--vk-ease-out) both;
    }

    #vibekey-home-drop-preview.is-dealt .home-drop-card:nth-child(1) {
      animation-delay: 0.05s;
    }

    #vibekey-home-drop-preview.is-dealt .home-drop-card:nth-child(2) {
      animation-delay: 0.12s;
    }

    #vibekey-home-drop-preview.is-dealt .home-drop-card:nth-child(3) {
      animation-delay: 0.19s;
    }

    @keyframes vk-drop-deal {
      from {
        opacity: 0;
        transform: translateY(16px) rotate(-2deg);
      }
      to {
        opacity: 1;
        transform: translateY(0) rotate(0);
      }
    }

    .hero-countdown.is-tick {
      animation: vk-countdown-tick 0.32s var(--vk-ease-snap);
    }

    @keyframes vk-countdown-tick {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.04);
      }
    }

    .vk-section-toolbar-peek-card {
      position: absolute;
      right: 12%;
      bottom: 38%;
      width: 22%;
      aspect-ratio: 778 / 1024;
      border-radius: 0.35rem;
      background: linear-gradient(145deg, #1e1b4b, #0f172a);
      border: 1px solid rgba(168, 85, 247, 0.35);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
      z-index: 12;
      pointer-events: none;
      opacity: 0;
    }

    .vk-section-phone__frame,
    .vk-app-screen__phone .vk-hero-phone {
      position: relative;
    }

    #vibe-cards.vk-toolbar-peek-play .vk-section-toolbar-peek-card {
      animation: vk-toolbar-peek 2.4s var(--vk-ease-out) 3;
    }

    @keyframes vk-toolbar-peek {
      0%,
      18%,
      100% {
        opacity: 0;
        transform: translate(0, 12px) scale(0.92);
      }
      28%,
      55% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      .market-page .listing.vk-tilt-active {
        transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important;
        transition: transform 0.12s ease-out;
      }
    }
  }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}

@view-transition {
  navigation: auto;
}

.vk-home-header.site-header,
.site-header {
  view-transition-name: vk-header;
}

#vibekey-home-drop-countdown,
.hero-countdown {
  min-height: 2rem;
}

#vibekey-home-drop-badge-text {
  display: inline-block;
  min-width: 6.5rem;
}