/* ============================================================
   Ultra-Premium Interactions - Visual Polish and Micro-Interactions
   CrowAgent Website - 2026
   
   Purpose: Contains all visual polish, micro-interaction
   enhancements, and premium feel rules from the ultra-premium
   audit. Sits in the components layer to respect the existing
   cascade (below overrides layer).
   
   Colour tokens only - never hardcode hex values.
   Uses: var(--teal), var(--bg), var(--cloud), var(--steel),
         var(--mist), var(--surf), var(--border)
============================================================ */

@layer components {

  /* ----------------------------------------------------------
     Nav hover underline animation
     Task 1.2 - slide-in underline via ::after, colour transition
     Scoped to dark sections only to avoid white-on-white in
     light blog article areas.
  ---------------------------------------------------------- */
  .ca-section-dark .nav-links a,
  [data-theme="dark"] .nav-links a {
    position: relative;
    transition: color 200ms var(--ease-out);
  }

  .ca-section-dark .nav-links a::after,
  [data-theme="dark"] .nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--white);
    transition: width 200ms var(--ease-out);
  }

  .ca-section-dark .nav-links a:hover,
  [data-theme="dark"] .nav-links a:hover {
    color: var(--white);
  }

  .ca-section-dark .nav-links a:hover::after,
  [data-theme="dark"] .nav-links a:hover::after {
    width: 100%;
  }

  /* ----------------------------------------------------------
     Card compound hover
     Task 1.3 - lift + border glow + shadow depth
  ---------------------------------------------------------- */
  .ca-card {
    transition: transform 0.3s var(--ease-spring),
                border-color 0.3s var(--ease-spring),
                box-shadow 0.3s var(--ease-spring);
  }

  .ca-card:hover {
    transform: translateY(-4px);
    border-color: var(--teal-25);
    box-shadow: var(--shadow-card-hover);
  }

  /* ----------------------------------------------------------
     Section gradient blend
     Task 1.4 - gradient overlap on dark-to-light transitions
     Only targets the specific homepage "For your role" section
     to avoid affecting other light sections across the site.
  ---------------------------------------------------------- */
  #sectors.ca-section-light {
    position: relative;
  }

  #sectors.ca-section-light::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
  }

  /* ----------------------------------------------------------
     Product bento accent colours
     Task 1.6 - per-product border accent via data-product attr
  ---------------------------------------------------------- */
  [data-product="crowcash"] {
    border-color: var(--sky);
  }

  [data-product="crowcash"]:hover {
    border-color: var(--sky);
    background-image: linear-gradient(135deg, var(--sky-dim) 0%, transparent 60%);
  }

  [data-product="crowmark"] {
    border-color: var(--mark);
  }

  [data-product="crowmark"]:hover {
    border-color: var(--mark);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--mark) 6%, transparent) 0%, transparent 60%);
  }

  [data-product="crowcyber"] {
    border-color: var(--teal-l);
  }

  [data-product="crowcyber"]:hover {
    border-color: var(--teal-l);
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--teal-l) 6%, transparent) 0%, transparent 60%);
  }

  [data-product="core"] {
    border-color: var(--teal-d);
  }

  [data-product="core"]:hover {
    border-color: var(--teal-d);
    background-image: linear-gradient(135deg, var(--teal-dim) 0%, transparent 60%);
  }

  /* ----------------------------------------------------------
     CTA spring hover + press
     Task 1.8 - scale bounce on hover, compress on active
  ---------------------------------------------------------- */
  .btn-primary,
  .btn-hero,
  .btn-teal-sm,
  .sv-btn-primary,
  .sv-btn--primary,
  [data-cta] {
    transition: all 0.3s var(--ease-spring);
  }

  .btn-primary:hover,
  .btn-hero:hover,
  .btn-teal-sm:hover,
  .sv-btn-primary:hover,
  .sv-btn--primary:hover,
  [data-cta]:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-btn-hover);
  }

  .btn-primary:active,
  .btn-hero:active,
  .btn-teal-sm:active,
  .sv-btn-primary:active,
  .sv-btn--primary:active,
  [data-cta]:active {
    transform: translateY(0) scale(0.98);
  }

  /* ----------------------------------------------------------
     Footer density (top gradient border, column separators)
     Task 1.9 - subtle top edge gradient + column dividers
     Scoped to .ca-footer only (not bare footer elements).
  ---------------------------------------------------------- */
  .ca-footer {
    position: relative;
  }

  .ca-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal-12), transparent);
  }

  .ca-footer [class*="col"]:not(:last-child) {
    border-right: 1px solid var(--white-06);
  }

  /* ----------------------------------------------------------
     Announcement bar shimmer
     Task 1.10 - sliding gradient highlight, infinite loop
  ---------------------------------------------------------- */
  .announce-bar {
    position: relative;
    overflow: hidden;
  }

  .announce-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--teal-08) 50%, transparent 100%);
    animation: announce-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }

  @keyframes announce-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* ----------------------------------------------------------
     Scroll progress gradient
     Task 1.11 - gradient fill with glow at leading edge
  ---------------------------------------------------------- */
  #scroll-progress,
  .scroll-progress {
    background: linear-gradient(90deg, var(--teal), var(--teal-l));
    box-shadow: 0 0 8px var(--teal-40);
  }

  /* ----------------------------------------------------------
     Section depth layering (Wave 2)
     Task 2.1 - removed: the section separator was causing
     text clipping across multiple pages. The existing design
     already has sufficient visual separation between sections.
  ---------------------------------------------------------- */

  /* ----------------------------------------------------------
     Icon container refinement (Wave 2)
     Task 2.2 - per-card gradient backgrounds via nth-child
  ---------------------------------------------------------- */
  .ca-card:nth-child(1) .w-12.h-12,
  .ca-card:nth-child(1) [class*="icon"] {
    background: linear-gradient(135deg, var(--teal-06), var(--teal-12));
  }

  .ca-card:nth-child(2) .w-12.h-12,
  .ca-card:nth-child(2) [class*="icon"] {
    background: linear-gradient(135deg, var(--sky-dim), color-mix(in srgb, var(--sky) 12%, transparent));
  }

  .ca-card:nth-child(3) .w-12.h-12,
  .ca-card:nth-child(3) [class*="icon"] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mark) 6%, transparent), color-mix(in srgb, var(--mark) 12%, transparent));
  }

  /* ----------------------------------------------------------
     Marquee enhancements (Wave 2)
     Task 2.3 - hover pause and typography refinement
  ---------------------------------------------------------- */
  .ca-marquee-band:hover .ca-marquee-list {
    animation-play-state: paused;
  }

  .ca-marquee-item {
    letter-spacing: 0.15em;
    font-weight: 800;
  }

  /* ----------------------------------------------------------
     How It Works section (Task 1.7)
  ---------------------------------------------------------- */
  .how-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
  }

  /* Connecting line between steps (desktop) */
  .how-steps::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--teal-12);
    z-index: 0;
  }

  .how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
    max-width: 280px;
  }

  .how-step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--teal);
    background: var(--bg);
    margin-bottom: 1.5rem;
  }

  .how-step h3 {
    color: var(--cloud);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }

  .how-step p {
    color: var(--steel);
    max-width: 280px;
    font-size: 0.875rem;
    line-height: 1.6;
    overflow: visible;
  }

  /* Mobile: vertical stack */
  @media (max-width: 768px) {
    .how-steps {
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
    }

    .how-steps::before {
      top: 0;
      bottom: 0;
      left: 50%;
      right: auto;
      width: 2px;
      height: 100%;
      transform: translateX(-50%);
    }

    .how-step {
      max-width: 100%;
    }
  }



  /* ----------------------------------------------------------
     Reduced motion guard
     Disables all animations and transitions for users who
     prefer reduced motion.
  ---------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

}