/* Bento card animated gradient borders.
   Extracted from critical.css — only loaded on pages that render bento cards
   (currently the About page and any service page using bento-* classes).
   Inline lenis smooth-scroll rules also live here so the file does double duty
   on pages that need bento; lenis rules also exist in critical.css for global use. */

@property --card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bento__card--service,
  .bento__card--step,
  .bento__card--checklist,
  .bento__card--cta {
    position: relative;
  }

  .bento__card--service::before,
  .bento__card--step::before,
  .bento__card--checklist::before,
  .bento__card--cta::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from var(--card-angle), transparent 25%, rgba(201, 136, 74, 0.4) 50%, transparent 75%);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
    animation: spinBorder 3s linear infinite;
  }

  .bento__card--service::after,
  .bento__card--step::after,
  .bento__card--checklist::after,
  .bento__card--cta::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: var(--color-surface);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s;
  }

  .bento__card--step::after {
    background: var(--color-surface-dark);
  }

  .bento__card--cta::after {
    background: var(--color-surface-dark);
  }

  .bento__card--service:hover::before,
  .bento__card--step:hover::before,
  .bento__card--checklist:hover::before,
  .bento__card--cta:hover::before,
  .bento__card--service:hover::after,
  .bento__card--step:hover::after,
  .bento__card--checklist:hover::after,
  .bento__card--cta:hover::after {
    opacity: 1;
  }

  @keyframes spinBorder {
    to {
      --card-angle: 360deg;
    }
  }

  [data-theme='light'] .bento__card--service::before,
  [data-theme='light'] .bento__card--step::before,
  [data-theme='light'] .bento__card--checklist::before,
  [data-theme='light'] .bento__card--cta::before {
    background: conic-gradient(from var(--card-angle), transparent 25%, rgba(30, 40, 80, 0.3) 50%, transparent 75%);
  }
}