/* =====================================================================
   THELAPX — SHARED PERFORMANCE & SMOOTH-TRANSITION LAYER
   Loaded once, cached across every page (unlike the per-page inline
   <style> blocks). Only adds motion/perceived-speed polish — does not
   touch layout, color, or brand styling.
   ===================================================================== */

:root {
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.16s;
  --dur-med: 0.25s;
}

/* Smooth in-page anchor scrolling (e.g. "#" nav jumps) */
html {
  scroll-behavior: smooth;
}

/* Gentle page-entrance fade so navigating between pages never feels like
   a hard, jarring flash-of-white reload. Pure CSS, no JS/render-blocking. */
body {
  animation: thelapxPageIn 0.32s var(--ease-smooth) both;
}
@keyframes thelapxPageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Consistent, GPU-cheap transitions (transform/opacity/color only —
   never width/height/top/left, which would force layout thrashing). */
a,
button,
input,
select,
textarea,
[class*="btn"],
[class*="card"],
[class*="chip"],
[class*="tab"],
[class*="badge"] {
  transition:
    transform var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-med) var(--ease-smooth),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}

/* Subtle, consistent lift on hoverable cards/buttons that don't already
   define their own hover transform. Safe no-op if a page overrides it. */
[class*="btn"]:hover,
[class*="card"]:hover {
  transform: translateY(-2px);
}
[class*="btn"]:active {
  transform: translateY(0) scale(0.98);
}

/* Smooth reveal for content as it scrolls into view (progressive
   enhancement — everything is visible by default even without JS). */
.thelapx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth);
}
.thelapx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Lazy-loaded images fade in once decoded instead of popping in. */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.35s ease;
}
img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* Respect people who've asked their OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}