/* ---------------------------------------------------------------------------
   theme-motion.css
   Wave G motion + delight layer for Solutions and Problems LLC.
   Loads after theme-ascent.css. Anything that animates more than micro-state
   honors prefers-reduced-motion via @media short-circuit blocks.

   Contents:
     M1  Hero portrait tonal reveal on first paint (filter-only, 1400ms)
     M2  Home positioning sentence 3-line stagger reveal (520ms, 120ms inter)
     M3  Services drop-numerals scroll-driven entrance (900ms opacity)
     M4  Phone CTA pressed state (60ms scale + brightness)
     M5  View Transitions API as progressive enhancement
     D-alpha  Red period breathes once on first paint (1200ms, single iter)
     D-beta   400ms italic-serif "calling" breath state on tel: handoff
     D-gamma  Hover-only "BRIEFED IN WRITING" tracked-out label slides in
--------------------------------------------------------------------------- */


/* ===== M1 Hero portrait tonal reveal on first paint ====================== */

@media (prefers-reduced-motion: no-preference) {
  body.sp-design .sp-hero__photo {
    filter: brightness(0.4) saturate(0) blur(8px);
    transition: filter 1400ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: filter;
  }
  body.sp-design.is-ready .sp-hero__photo,
  body.sp-design .sp-hero__photo.is-revealed {
    filter: brightness(1) saturate(0.78) contrast(1.05) blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.sp-design .sp-hero__photo {
    filter: brightness(1) saturate(0.78) contrast(1.05) blur(0);
  }
}


/* ===== M2 Home positioning sentence 3-line stagger reveal ================ */

@media (prefers-reduced-motion: no-preference) {
  body.sp-design .sp-positioning__line {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 520ms var(--sp-ease), transform 520ms var(--sp-ease);
  }
  body.sp-design .sp-positioning.is-in .sp-positioning__line:nth-of-type(1) { transition-delay: 0ms;   }
  body.sp-design .sp-positioning.is-in .sp-positioning__line:nth-of-type(2) { transition-delay: 120ms; }
  body.sp-design .sp-positioning.is-in .sp-positioning__line:nth-of-type(3) { transition-delay: 240ms; }
  body.sp-design .sp-positioning.is-in .sp-positioning__line {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.sp-design .sp-positioning__line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ===== M3 Services drop-numerals scroll-driven entrance ================== */

@media (prefers-reduced-motion: no-preference) {
  body.sp-design .sp-service-row__bignum {
    opacity: 0;
    transition: opacity 900ms var(--sp-ease);
  }
  body.sp-design .sp-service-row.is-in .sp-service-row__bignum,
  body.sp-design .sp-service-row__bignum.is-in {
    opacity: 0.07;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.sp-design .sp-service-row__bignum {
    opacity: 0.07;
    transition: none;
  }
}


/* ===== M4 Phone CTA pressed state ======================================== */

body.sp-design .sp-phone,
body.sp-design .sp-phone--icon,
body.sp-design .sp-mobile-nav__phone,
body.sp-design .sp-band__phone,
body.sp-design .sp-contact__phone,
body.sp-design a[href^="tel:"] {
  transition: transform 60ms var(--sp-ease), filter 60ms var(--sp-ease), color 200ms var(--sp-ease);
}
@media (prefers-reduced-motion: no-preference) {
  body.sp-design .sp-phone:active,
  body.sp-design .sp-phone--icon:active,
  body.sp-design .sp-mobile-nav__phone:active,
  body.sp-design .sp-band__phone:active,
  body.sp-design .sp-contact__phone:active,
  body.sp-design a[href^="tel:"]:active {
    transform: scale(0.985);
    filter: brightness(1.15);
  }
}


/* ===== M5 View Transitions API =========================================== */

@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: sp-fade-out 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: sp-fade-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes sp-fade-out {
  to { opacity: 0; }
}
@keyframes sp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Keep persistent UI out of the cross-fade so it does not flicker. */
body.sp-design .sp-phone__dot,
body.sp-design .sp-mobile-nav,
body.sp-design .sp-header {
  view-transition-name: none;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}


/* ===== D-alpha Red period breathes once on first paint =================== */

@media (prefers-reduced-motion: no-preference) {
  body.sp-design .sp-period--breath {
    display: inline-block;
    transform-origin: center;
    animation: sp-period-breath 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 1500ms 1 both;
  }
  @keyframes sp-period-breath {
    0%   { transform: scale(0.95); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1.00); }
  }
}
@media (prefers-reduced-motion: reduce) {
  body.sp-design .sp-period--breath {
    animation: none;
    transform: scale(1);
  }
}


/* ===== D-beta italic-serif "calling" breath on tel: handoff ============== */

body.sp-design .sp-call-breath {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 12, 0.92);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--sp-ease);
  font-family: var(--sp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--sp-bone);
}
body.sp-design .sp-call-breath.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.sp-design .sp-call-breath {
    transition: none;
  }
}


/* ===== D-gamma Hover label slides in on service ladder rows ============== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.sp-design .sp-service__hover-label {
    transition: opacity 220ms var(--sp-ease), transform 220ms var(--sp-ease);
  }
  body.sp-design .sp-service:hover .sp-service__hover-label {
    opacity: 0.6;
    transform: translate(0, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.sp-design .sp-service__hover-label {
    transition: none;
  }
  body.sp-design .sp-service:hover .sp-service__hover-label {
    opacity: 0.6;
    transform: translate(0, -50%);
  }
}