/* ============================================================
   Vistachem Silica — Apple-design refinement layer
   Layered on top of style.css. Non-destructive: only sharpens
   typography, materials, depth, and motion per Apple's HIG /
   "Designing Fluid Interfaces" principles.
   ============================================================ */

/* ---------- 1. Typography: optical, size-specific tracking & leading ---------- */
/* Large display text wants NEGATIVE tracking + tight leading; body near 0. */
.hero__title,
.section-title,
h1 {
  letter-spacing: -0.022em;
  line-height: 1.06;
  font-optical-sizing: auto;
}
h2 { letter-spacing: -0.018em; line-height: 1.1; }
h3 { letter-spacing: -0.012em; line-height: 1.18; }
h4 { letter-spacing: -0.006em; }
/* Body copy: tracking to 0, comfortable leading (already 1.6 in base) */
body { letter-spacing: 0; }
.section-lead, p { letter-spacing: 0; }
/* Small meta/labels want a touch of POSITIVE tracking for legibility */
.sol-card__apps, .meta, figcaption, .card-meta { letter-spacing: 0.005em; }

/* ---------- 2. Materials & depth: translucent chrome, tiered shadows ---------- */
:root {
  /* Depth tiers — bigger surfaces read as thicker (stronger blur + deeper shadow) */
  --shadow-card:  0 1px 2px rgba(20,32,31,.05), 0 6px 16px rgba(20,32,31,.05);
  --shadow-lift:  0 8px 20px rgba(20,32,31,.10), 0 20px 48px rgba(20,32,31,.08);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);   /* iOS-like decelerate */
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Header: richer frosted material (was blur 10px) — brighter top edge = light catching glass */
.site-header {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(20,32,31,.06);
  border-bottom: 1px solid rgba(223,228,225,.6);
}

/* Mega dropdown: read as a real floating material arriving (materialize, don't just fade) */
.mega {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-lift);
  transition: opacity .22s var(--ease-out-soft),
              transform .28s var(--ease-out-soft),
              visibility .22s;
}

/* ---------- 3. Springy, physical interactions ---------- */
/* Cards: lift with an iOS-decelerate curve; deeper, tiered shadow */
.sol-card,
.card,
.case-card,
.doc-card,
.wp-card,
.feature {
  transition: transform .38s var(--ease-out-soft),
              box-shadow .38s var(--ease-out-soft),
              border-color .28s ease;
  will-change: transform;
}
.sol-card:hover,
.card:hover,
.case-card:hover,
.wp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

/* Buttons: respond on the PRESS, instant + continuous; scale down when held */
.btn { transition: transform .2s var(--ease-out-soft), background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: scale(0.97) translateY(0); transition: transform 90ms ease-out; }

/* Nav links + interactive rows get the same press feedback */
.nav__links > li > a { transition: color .2s, background .2s var(--ease-out-soft); }
.mega__item:active,
.sol-card__link:active { transform: scale(0.98); }

/* Anchor dropdowns/popovers to their trigger, not their center */
.nav__links > li { position: relative; }

/* ---------- 4. Scroll-reveal entrance (spring-like, staggered) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-out-soft), transform .6s var(--ease-out-soft);
  will-change: transform, opacity;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 5. Scroll edge effect instead of a hard divider under header ---------- */
.hero,
.section:first-of-type {
  --edge: 0;
}

/* ---------- 6. Focus: keep it crisp and on-brand ---------- */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

/* ---------- 7. Accessibility: reduced motion / transparency / contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; transition: opacity .2s ease; }
  .sol-card:hover, .card:hover, .case-card:hover, .wp-card:hover { transform: none; }
  .btn:hover { transform: none; }
  .btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mega { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header { background: #fff; border-bottom-color: var(--ink); }
  .sol-card, .card { border: 1px solid var(--ink-3); }
}