/* ============================================================
   smooth.css — Apple-tier perf overlay (loaded LAST)
   Goals: GPU layer hints + off-screen render skip + softer easing
   Rollback: remove the <link> tag in index.html — zero side effects
   Created: 2026-05-04
   ============================================================ */

/* ---- 1. Easing variables (extend, don't replace existing --ease-apple) ---- */
:root {
  /* iOS standard ease curves — use for any new transition */
  --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1); /* default UIView */
  --ease-ios-out: cubic-bezier(
    0.16,
    1,
    0.3,
    1
  ); /* same as --ease-apple, alias for clarity */
  --ease-ios-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-ios-spring: cubic-bezier(0.5, 1.5, 0.5, 1); /* gentle overshoot */
}

/* ---- 2. GPU layer hints — promote animated/interactive elements ----
   `will-change: transform` tells browser to put element on its own
   compositor layer = transforms become hardware-accelerated → no jank.
   Use sparingly: too many will-change layers = memory bloat.
*/

/* Hero graphics (Bold) — animated via float/spin/parallax */
.hero-graphics .hg,
.hero .mesh-blob,
.hero .hero-shape,
.hero .hl-box {
  will-change: transform;
  transform: translateZ(0); /* fallback hint for older Safari */
}

/* Cards that tilt on hover */
.work-card,
.b-card {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Magnetic buttons + interactive elements */
.mag,
.btn,
a.btn,
.cpill {
  will-change: transform;
}

/* Nav scrolled state — backdrop-filter is expensive, give it a layer */
nav.top {
  will-change: background, backdrop-filter;
  -webkit-backdrop-filter: saturate(100%) blur(0px); /* prime Safari */
}

/* ---- 3. content-visibility — DISABLED 2026-05-04 ----
   Tried `content-visibility: auto` with intrinsic-size hints, but mismatched
   intrinsic-size vs real height caused massive CLS on reveal (Lighthouse 1.3).
   Site is small enough (~6 MB total) that lazy paint isn't needed — removed.
   Lighthouse perf budget hit fine without this. Keep code commented as reference.
*/
/* section.block { content-visibility: auto; contain-intrinsic-size: 1px 900px; } */

/* ---- 4. Image rendering — async decode prevents main-thread block ---- */
img {
  /* note: 'loading=lazy' + 'decoding=async' is also set on <img> tags;
     this is a CSS-level fallback for any missed ones */
  image-rendering: -webkit-optimize-contrast;
}

/* ---- 5. Smoother scrollbar (webkit) — reduce visual noise ---- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 15, 15, 0.18);
  border-radius: 8px;
  transition: background 0.3s var(--ease-apple);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 15, 15, 0.35);
}

/* ---- 6. Reduced motion fallback — respect user preference ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-graphics .hg,
  .hero .mesh-blob,
  .hero .hero-shape,
  .hero .hl-box {
    will-change: auto; /* save memory when motion disabled */
    animation: none !important;
  }
}