/* Shared feedback for the marketing site, loaded after page styles. */
:root {
  --interaction-duration: 280ms;
  --interaction-ease: cubic-bezier(.16, 1, .3, 1);
  --interaction-accent: var(--accent-secondary-border, #68a9ff);
  --interaction-link: var(--accent-secondary, #97b2d6);
  --interaction-glow: rgba(104, 169, 255, .24);
  --card-accent: var(--accent-primary-border, #86efb7);
  --card-glow: rgba(134, 239, 183, .2);
}

html { scroll-behavior: smooth; }

:is(a[href], button, input, select, textarea, summary,
    .site-brand-mark, .brand-mark, .site-badge, .plan-badge,
    .recommended-ribbon, .environment-pill, .hardware-type,
    .hardware-icon, .hardware-backends span, .featured .product-rank,
    .storage-reserve-label output, .guide-card, .hardware-card, .plan-card,
    .article-facts, .library-status, .storage-calculator, .storage-results,
    .article-signup, .article-figure img, #email-shell, #cam-grid > div) {
  transition-property: color, background-color, background-size, border-color, box-shadow, filter, translate, scale, rotate;
  transition-duration: var(--interaction-duration);
  transition-timing-function: var(--interaction-ease);
}

:is(.guide-card, .hardware-card, .plan-card, .article-facts, .library-status,
    .storage-calculator, .storage-results, .article-signup, .comparison-scroll,
    .article-figure img) {
  border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
}

.plan-card.home-card { border-color: color-mix(in srgb, var(--card-accent) 70%, transparent); }
.comparison-pitch { border-left-color: var(--card-accent); }
.comparison-table thead .featured { box-shadow: inset 0 4px var(--card-accent); }

:is(.primary-link, .checkout-button, #submit-btn, .actions a:first-child) {
  --interaction-accent: var(--accent-primary-border, #86efb7);
  --interaction-glow: rgba(134, 239, 183, .24);
}

/* Decorative layers never intercept clicks or cover the card's controls. */
:where(button, .primary-link, .secondary-button, .checkout-button,
    .site-nav-join, .back-link, .actions a, .site-badge, .plan-badge,
    .environment-pill, .hardware-type, .hardware-icon, .hardware-backends span,
    .featured .product-rank, .guide-card, .hardware-card, .plan-card,
    .article-facts, .library-status, .storage-calculator, .storage-results,
    .article-signup) {
  position: relative;
}

:is(button, .primary-link, .secondary-button, .checkout-button,
    .site-nav-join, .back-link, .actions a, .site-badge, .plan-badge,
    .recommended-ribbon, .environment-pill, .hardware-type, .hardware-icon,
    .hardware-backends span, .featured .product-rank) {
  isolation: isolate;
}

:is(button, .primary-link, .secondary-button, .checkout-button,
    .site-nav-join, .back-link, .actions a, .site-badge, .plan-badge,
    .recommended-ribbon, .environment-pill, .hardware-type, .hardware-icon,
    .hardware-backends span, .featured .product-rank):not(:where(.stepper button))::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 49%, transparent 63%);
  background-size: 250% 100%;
  background-position: 180% 0;
  mix-blend-mode: soft-light;
  opacity: 0;
}

:is(.guide-card, .hardware-card, .plan-card, .article-facts,
    .library-status, .storage-calculator, .storage-results, .article-signup)::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  box-shadow: 0 0 12px var(--card-glow);
  opacity: 0;
  scale: .3 1;
  transition: opacity var(--interaction-duration) ease, scale 420ms var(--interaction-ease);
}

.guide-card .card-link > span {
  display: inline-block;
  transition: translate var(--interaction-duration) var(--interaction-ease);
}

:is(a[href], button, input:not([type="hidden"]), select, textarea, summary):focus-visible {
  outline: 2px solid var(--interaction-accent);
  outline-offset: 4px;
}

.stepper :is(button, input):focus-visible { outline-offset: -3px; }
.document a:focus-visible { outline-color: var(--accent-secondary-ink, #1d3553); }

:is(.plan-card, .article-signup, .storage-calculator, #email-shell):focus-within {
  border-color: var(--card-accent);
  box-shadow: 0 0 0 3px var(--card-glow), 0 0 28px var(--card-glow);
}

a.guide-card:focus-visible {
  border-color: var(--card-accent);
  box-shadow: 0 0 0 1px var(--card-accent), 0 0 28px var(--card-glow);
}

:is(.site-nav-links a:not(.site-nav-join), .footer-links a, .breadcrumbs a, .article-contents a) {
  background-image: linear-gradient(var(--interaction-link), var(--interaction-link));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
}

:is(.site-nav-links a:not(.site-nav-join), .footer-links a, .breadcrumbs a, .article-contents a):focus-visible {
  background-size: 100% 1px;
}

/* Only real controls receive pointer cursors and keyboard focus. */
@media (hover: hover) and (pointer: fine) {
  a[href]:not(:where(.primary-link, .secondary-button, .checkout-button,
      .site-nav-join, .back-link, .site-brand, .brand, .guide-card, .skip-link,
      .actions a)):hover {
    color: var(--interaction-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  .document a[href]:hover { color: var(--accent-secondary-ink, #1d3553); }

  :is(.site-nav-links a:not(.site-nav-join), .footer-links a, .breadcrumbs a, .article-contents a):hover {
    text-decoration-line: none;
    background-size: 100% 1px;
  }

  :is(.site-brand, .brand):hover { filter: brightness(1.12); }
  :is(.site-brand, .brand):hover :is(.site-brand-mark, .brand-mark) {
    box-shadow: 0 0 22px var(--card-glow);
  }

  :is(button, .primary-link, .secondary-button, .checkout-button,
      .site-nav-join, .back-link, .actions a):not(:where(.stepper button)):not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--interaction-accent);
    box-shadow: 0 0 0 1px var(--interaction-accent), 0 0 24px var(--interaction-glow), 0 12px 24px rgba(0, 0, 0, .28);
    filter: brightness(1.06);
  }

  .stepper button:not(:disabled):hover {
    box-shadow: inset 0 0 0 1px var(--interaction-accent);
  }

  :is(.site-badge, .plan-badge, .recommended-ribbon, .environment-pill,
      .hardware-type, .hardware-icon, .hardware-backends span,
      .featured .product-rank, .storage-reserve-label output):hover {
    box-shadow: 0 0 0 1px var(--interaction-accent), 0 0 20px var(--interaction-glow), 0 6px 14px rgba(0, 0, 0, .22);
    filter: brightness(1.07);
  }

  :is(.guide-card, .hardware-card, .plan-card, .article-facts,
      .library-status, .storage-calculator, .storage-results,
      .article-signup, .article-figure img, #cam-grid > div):hover {
    border-color: var(--card-accent);
    box-shadow: 0 0 0 1px var(--card-glow), 0 0 30px var(--card-glow), 0 20px 42px rgba(0, 0, 0, .3);
  }

  :is(input:not([type="hidden"]), select, textarea):not(:disabled):not([aria-invalid="true"]):hover {
    border-color: var(--interaction-accent);
  }

  .storage-calculator input[type="range"]:not(:disabled):hover { filter: brightness(1.12); }
}

/* A single sheen, an expanding edge, and a little lift add a flourish. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(button, .primary-link, .secondary-button, .checkout-button,
      .site-nav-join, .back-link, .actions a):not(:where(.stepper button)):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -3px;
  }

  :is(a.guide-card, .hardware-card, .plan-card):hover { translate: 0 -6px; }

  :is(.guide-card, .hardware-card, .plan-card, .article-facts,
      .library-status, .storage-calculator, .storage-results, .article-signup):hover::after {
    opacity: 1;
    scale: 1;
  }

  :is(button, .primary-link, .secondary-button, .checkout-button,
      .site-nav-join, .back-link, .actions a, .site-badge, .plan-badge,
      .recommended-ribbon, .environment-pill, .hardware-type, .hardware-icon,
      .hardware-backends span, .featured .product-rank):not(:where(.stepper button)):not(:disabled):not([aria-disabled="true"]):hover::after {
    animation: stonewatch-sheen 720ms ease-out both;
  }

  .hardware-card:hover .hardware-icon { rotate: -6deg; scale: 1.06; }
  :is(.site-brand, .brand):hover :is(.site-brand-mark, .brand-mark) { rotate: -8deg; scale: 1.08; }
  .guide-card:hover .card-link > span { translate: 6px 0; }

  :is(.site-badge, .plan-badge, .recommended-ribbon, .environment-pill,
      .hardware-type, .hardware-backends span, .featured .product-rank):hover {
    translate: 0 -2px;
    scale: 1.025;
  }

  :is(button, .primary-link, .secondary-button, .checkout-button,
      .site-nav-join, .back-link, .actions a):not(:disabled):not([aria-disabled="true"]):active {
    translate: 0 0;
    scale: .985;
    filter: brightness(.98);
  }
}

@keyframes stonewatch-sheen {
  0% { background-position: 180% 0; opacity: 0; }
  15%, 70% { opacity: 1; }
  100% { background-position: -140% 0; opacity: 0; }
}

/* Keep the Windows guide's PC specification badges still. */
.hardware-card .hardware-icon.hardware-icon-static {
  transition: none;
  rotate: none;
  scale: none;
  filter: none;
  box-shadow: none;
}

.hardware-icon-static::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --interaction-duration: 0s; }
  .guide-card .card-link > span { transition: none; }
  :is(.guide-card, .hardware-card, .plan-card, .article-facts,
      .library-status, .storage-calculator, .storage-results, .article-signup)::after {
    transition: none;
  }
}