/* Apple-style motion layer for the Rainbow Tech clone.
   Progressive enhancement: everything is gated behind html.has-motion
   (added by an inline script only when IntersectionObserver exists and
   the user has not requested reduced motion). */

:root {
  --ease-apple: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-apple-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ------------------------------------------------------------------ */
/* Sticky frosted-glass header (macOS / Apple nav feel)               */
/* ------------------------------------------------------------------ */
header.u-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 990;
  transition:
    background-color 0.6s var(--ease-apple),
    box-shadow 0.6s var(--ease-apple),
    backdrop-filter 0.6s var(--ease-apple),
    -webkit-backdrop-filter 0.6s var(--ease-apple);
}

header.u-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.72) !important;
  background-image: none !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.06);
}

/* nav link underline sweep */
header.u-header .u-nav a {
  position: relative;
  transition: color 0.35s var(--ease-apple);
}
header.u-header .u-nav a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-apple);
}
header.u-header .u-nav a:hover::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------------ */
/* Scroll reveal                                                      */
/* ------------------------------------------------------------------ */
.has-motion .anim {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity 0.9s var(--ease-apple),
    transform 1.05s var(--ease-apple);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.has-motion .anim.in {
  opacity: 1;
  transform: translateY(0);
}

/* images "settle" into place (slight scale-down) */
.has-motion .anim-img {
  opacity: 0;
  transform: translateY(42px) scale(1.06);
  transition:
    opacity 1s var(--ease-apple),
    transform 1.3s var(--ease-apple);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.has-motion .anim-img.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* hero content: gentle entrance, then scroll-linked drift (JS) */
.hero-drift {
  will-change: transform, opacity;
}

/* ------------------------------------------------------------------ */
/* Micro-interactions                                                 */
/* ------------------------------------------------------------------ */
a.u-btn,
button.u-btn {
  transition:
    transform 0.45s var(--ease-apple),
    box-shadow 0.45s var(--ease-apple),
    background-color 0.35s var(--ease-apple),
    color 0.35s var(--ease-apple);
}
a.u-btn:hover,
button.u-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

img.u-image {
  transition:
    transform 0.7s var(--ease-apple),
    filter 0.7s var(--ease-apple);
}
a:hover > img.u-image,
.u-image-link:hover img.u-image {
  transform: scale(1.04);
}

/* soft focus dim on siblings while a card is hovered */
.u-layout-cell {
  transition: transform 0.5s var(--ease-apple), box-shadow 0.5s var(--ease-apple);
}
.u-layout-cell:hover {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .has-motion .anim,
  .has-motion .anim-img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  header.u-header .u-nav a::after { transition: none; }
}