/* VitalLogic Labs — shared styles
   Tailwind (via CDN) handles almost everything; this file only holds the
   handful of things Tailwind's utility classes can't express directly. */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid #C0C0C0;
  outline-offset: 2px;
}

/* ── Brushed Silver / Chrome treatment ───────────────────────────────────
   Used on every CTA button. No gold, no warm tones. */
.bg-silver-gradient {
  background: linear-gradient(135deg,
    #707070 0%,
    #e0e0e0 25%,
    #ffffff 45%,
    #a0a0a0 65%,
    #cfcfcf 85%,
    #707070 100%);
}

/* Dark shadow beneath + a thin bright rim above — reads as embossed
   metal. Used on buttons (filters work on any element). */
.silver-depth {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35))
    drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.85));
}

/* Faint ambient wash across the whole header — sets the overall mood
   but is too far from the logo (which sits at the left) to read as a
   glow on its own. The real spotlight is .logo-spotlight below. */
.header-spotlight {
  position: relative;
  overflow: hidden;
}

.header-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.header-spotlight nav {
  position: relative;
  z-index: 1;
}

/* Soft background highlight pinned behind the logo mark and wordmark,
   independent of viewport width (the header-wide gradient above can't
   reliably line up with the logo since it sits off-center at the left
   edge of the nav). Kept deliberately faint and heavily blurred so it
   reads as ambient light, not a light source competing with the logo
   itself — the logo/text keep their own natural, un-boosted color. */
.logo-spotlight {
  position: relative;
  z-index: 0;
}

.logo-spotlight::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -40%;
  width: 220%;
  height: 260%;
  background: radial-gradient(ellipse at 65% 35%,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0.04) 70%,
    transparent 100%);
  filter: blur(24px);
  z-index: -1;
  pointer-events: none;
}

/* Logo mark — real transparent PNG cutout, no background rectangle.
   Left at natural brightness; lighting comes from .logo-spotlight
   behind it, not from boosting the asset itself. */
.logo-mark {
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}

/* Wordmark set as live text with the same metallic treatment as the
   CTA buttons (bg-silver-gradient), so it's crisp at any size/DPI.
   A subtle radial-gradient highlight is screened on top of the natural
   metallic gradient so the top-right of the letters catches a soft
   sheen, like light glancing off brushed metal — echoing
   .logo-spotlight without overpowering the base color.
   .product-name shares this exact treatment (short single-line text,
   same scale as the wordmark) so product titles in the comparison
   table/cards match the rest of the site instead of sitting in plain
   white — the surrounding price/spec/rating data stays plain for
   scannability, only the title gets the chrome look. */
.logo-text,
.product-name {
  background:
    radial-gradient(circle at top right,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.45) 20%,
      transparent 55%),
    linear-gradient(135deg,
      #707070 0%,
      #e0e0e0 25%,
      #ffffff 45%,
      #a0a0a0 65%,
      #cfcfcf 85%,
      #707070 100%);
  background-blend-mode: screen;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Same premium metallic gradient + soft top-right sheen as the logo,
   carried through onto each page's primary heading so the chrome
   treatment reads as the site's typographic identity, not just a
   header decoration. Falloff is wider than .logo-text since a page
   heading spans much more horizontal space than the wordmark. */
.metallic-heading {
  background:
    radial-gradient(circle at top right,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.4) 25%,
      transparent 65%),
    linear-gradient(135deg,
      #707070 0%,
      #e0e0e0 25%,
      #ffffff 45%,
      #a0a0a0 65%,
      #cfcfcf 85%,
      #707070 100%);
  background-blend-mode: screen;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}