/* ==========================================================================
   MOTION LAYER
   Loaded last, on top of styles.css / services.css / about.css / contact.css.
   Everything here is additive polish — the pages are fully usable without it,
   and all of it is switched off under prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SECTION TITLES — masked line rise
   The block fades; the words slide up out of a mask. Reads as one motion
   instead of the whole box sliding, which is why the head's own reveal is
   downgraded to a fade here.
   -------------------------------------------------------------------------- */
@keyframes lineRise {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeSoft {
  from {
    opacity: 0;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.section-head.sr {
  /* no box translate: the title's own mask supplies the movement */
  transform: none;
}

.section-head.sr.in {
  animation-name: fadeSoft;
}

.section-title .tl {
  display: block;
  overflow: hidden;
  /* descenders would otherwise clip against the mask edge */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.section-title .tl > span {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

.sr.in .section-title .tl > span {
  animation: lineRise 0.9s var(--ease) forwards;
  animation-delay: calc(var(--li, 0) * 0.075s + 0.05s);
}

/* --------------------------------------------------------------------------
   2. SERVICES SHOWCASE — content staggers in when a service is selected
   -------------------------------------------------------------------------- */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.svc-panel.is-active .svc-panel-title {
  animation: riseIn 0.55s var(--ease) both;
  animation-delay: 0.04s;
}

.svc-panel.is-active .svc-panel-copy {
  animation: riseIn 0.55s var(--ease) both;
  animation-delay: 0.11s;
}

.svc-panel.is-active .svc-chips li {
  animation: riseIn 0.5s var(--ease) both;
  animation-delay: calc(0.16s + var(--ci, 0) * 0.045s);
}

.svc-panel.is-active .svc-panel-visual {
  animation: riseIn 0.6s var(--ease) both;
  animation-delay: 0.1s;
}

/* --------------------------------------------------------------------------
   3. CURSOR SPOTLIGHT on cards — a soft highlight that follows the pointer
   -------------------------------------------------------------------------- */
.spot {
  position: relative;
}

.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.085),
    rgba(255, 255, 255, 0) 62%
  );
}

.spot:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. SCROLL PROGRESS — hairline at the very top of interior pages
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.9)
  );
}

/* --------------------------------------------------------------------------
   5. HERO VIDEO — very slow drift so the still frames never feel frozen
   -------------------------------------------------------------------------- */
@keyframes slowZoom {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.12);
  }
}

.svc-hero-video {
  animation: slowZoom 28s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   6. FOOTER WATERMARK — drifts up slightly as it enters view
   -------------------------------------------------------------------------- */
.footer-watermark {
  transform: translateY(var(--wm-shift, 0px));
  transition: transform 0.1s linear;
}

/* --------------------------------------------------------------------------
   7. Small lifts that were missing
   -------------------------------------------------------------------------- */
.serve-card,
.outcome,
.aside-card,
.founder-card,
.team-card {
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease);
}

.founder-card:hover,
.team-card:hover,
.aside-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
}

.svc-panel-visual {
  transition: border-color 0.4s ease;
}

.svc-panel.is-active:hover .svc-panel-visual {
  border-color: var(--hairline-strong);
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — everything above reverts to a plain, static page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .section-title .tl > span,
  .svc-panel.is-active .svc-panel-title,
  .svc-panel.is-active .svc-panel-copy,
  .svc-panel.is-active .svc-chips li,
  .svc-panel.is-active .svc-panel-visual,
  .svc-hero-video {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .section-head.sr,
  .section-head.sr.in {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .spot::after {
    display: none;
  }

  .scroll-progress {
    display: none;
  }

  .footer-watermark {
    transform: none !important;
  }

  .founder-card:hover,
  .team-card:hover,
  .aside-card:hover {
    transform: none;
  }
}