/* ==========================================================================
   RWL — motion layer
   Loaded after site-clarity.css. Pure CSS animations play on their own;
   scroll-triggered reveals rely on a small companion script
   (site-animate.js) that just toggles a `.is-inview` class via
   IntersectionObserver — every animation itself lives here, so if the
   script is ever blocked the page still renders fully, just without the
   reveal choreography.
   ========================================================================== */

/* Respect the user's OS-level motion preference. This block short-circuits
   every animation below to an instant, static state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------- keyframes */
@keyframes rwl-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rwl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rwl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes rwl-pulse-glow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.06); }
}
@keyframes rwl-shimmer {
  0%   { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}
@keyframes rwl-underline-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes rwl-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------------------------------------------------------- hero entrance
   These play automatically the moment the elements mount — no JS needed,
   since the hero is always above the fold on first paint. */
.hero__meta      { animation: rwl-fade-up .7s cubic-bezier(.16,.8,.24,1) both; animation-delay: .05s; }
.hero__title     { animation: rwl-fade-up .8s cubic-bezier(.16,.8,.24,1) both; animation-delay: .14s; }
.hero__lede      { animation: rwl-fade-up .8s cubic-bezier(.16,.8,.24,1) both; animation-delay: .24s; }
.hero__actions   { animation: rwl-fade-up .8s cubic-bezier(.16,.8,.24,1) both; animation-delay: .34s; }
.hero__motto     { animation: rwl-fade-in 1.1s ease both; animation-delay: .55s; }

.hero__glow      { animation: rwl-pulse-glow 6s ease-in-out infinite; }
.hero-towers     { animation: rwl-float 9s ease-in-out infinite; }
.hero-sweep      { animation: rwl-float 11s ease-in-out infinite reverse; }

/* strata band: gentle life without being distracting */
.strata__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: rwl-shimmer 7s ease-in-out infinite;
  pointer-events: none;
}
.strata__cell:nth-child(2)::after { animation-delay: .6s; }
.strata__cell:nth-child(3)::after { animation-delay: 1.2s; }
.strata__cell:nth-child(4)::after { animation-delay: 1.8s; }

/* ---------------------------------------------------------- scroll reveal
   site-animate.js adds [data-reveal] to cards/sections on mount, then
   flips them to .is-inview as they cross the viewport. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
  will-change: opacity, transform;
}
[data-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
}
/* stagger children of a grid as they reveal together */
.grid > [data-reveal]:nth-child(1) { transition-delay: 0s; }
.grid > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.grid > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.grid > [data-reveal]:nth-child(4) { transition-delay: .24s; }
.grid > [data-reveal]:nth-child(5) { transition-delay: .32s; }
.grid > [data-reveal]:nth-child(6) { transition-delay: .40s; }

/* ---------------------------------------------------------------- cards */
.card {
  transition: transform .45s cubic-bezier(.16,.8,.24,1), box-shadow .45s ease, border-color .45s ease;
}
.card:hover {
  transform: translateY(-6px);
}
.project-card__figure,
.insight-card__figure {
  overflow: hidden;
}
.project-card__figure img,
.insight-card__figure img {
  transition: transform .6s cubic-bezier(.16,.8,.24,1);
}
.card:hover .project-card__figure img,
.card:hover .insight-card__figure img {
  transform: scale(1.07);
}

.service-card__icon {
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .service-card__icon {
  transform: scale(1.12) rotate(-4deg);
}
.service-card__arrow,
.btn__arrow {
  transition: transform .35s cubic-bezier(.16,.8,.24,1);
  display: inline-block;
}
.card:hover .service-card__arrow {
  transform: translateX(5px);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* -------------------------------------------------------------- buttons */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size: 220% 100%;
  background-position: -140% 0;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.btn:hover::before {
  opacity: 1;
  animation: rwl-shimmer 1.1s ease;
}

/* ------------------------------------------------------------------ nav */
.nav__link {
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.16,.8,.24,1);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------------ misc */
.value {
  transition: transform .4s cubic-bezier(.16,.8,.24,1), box-shadow .4s ease;
}
.value:hover {
  transform: translateY(-4px);
}
.value__index {
  transition: color .4s ease, transform .4s ease;
}
.value:hover .value__index {
  transform: scale(1.08);
}

.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(circle, rgba(33,136,212,.18), transparent 60%);
  animation: rwl-float 10s ease-in-out infinite;
  pointer-events: none;
}

/* smooth in-page scrolling (anchor links, back-to-top, etc.) */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.card:hover {
  box-shadow: 0 22px 44px -20px rgba(33,136,212,.22), 0 8px 18px -8px rgba(16,26,34,.16);
}

/* smooth page-load fade so route changes don't feel like a hard cut */
#root {
  animation: rwl-fade-in .4s ease both;
}