/*
 * /services/ — reveal motion. Loaded after services.css.
 * Everything pre-hidden lives under .motion-ready (added by services-motion.js),
 * so no-JS, JS errors and reduced motion all show the plain, finished page.
 * Only opacity / filter / transform / mask are animated; no vertical movement on text.
 */
@media (prefers-reduced-motion: no-preference) {
  .svc { --svc-ease: cubic-bezier(.39, .575, .565, 1); }

  /* ---------- text / fade targets (tagged .svc-rv by JS: --d delay, --dur, --b blur) ---------- */
  .svc.motion-ready .svc-rv { opacity: 0; filter: blur(var(--b, 3.8px)); }
  .svc.motion-ready .is-in .svc-rv,
  .svc.motion-ready .svc-rv.is-in {
    opacity: 1;
    filter: none;
    transition:
      opacity var(--dur, .9s) var(--svc-ease) calc(var(--d, 0ms) + var(--stag, 0ms)),
      filter var(--dur, .9s) var(--svc-ease) calc(var(--d, 0ms) + var(--stag, 0ms));
  }
  /* Interactive targets keep their own hover transitions. */
  .svc.motion-ready .is-in .svc-option.svc-rv {
    transition:
      opacity var(--dur, .8s) var(--svc-ease) calc(var(--d, 0ms) + var(--stag, 0ms)),
      filter var(--dur, .8s) var(--svc-ease) calc(var(--d, 0ms) + var(--stag, 0ms)),
      border-color .3s ease, background-color .3s ease;
  }
  .svc.motion-ready .is-in .svc-toggle.svc-rv {
    transition:
      opacity var(--dur, .8s) var(--svc-ease) calc(var(--d, 0ms) + var(--stag, 0ms)),
      filter var(--dur, .8s) var(--svc-ease) calc(var(--d, 0ms) + var(--stag, 0ms)),
      border-color .3s ease;
  }

  /* ---------- hero hairline: draws from the centre ---------- */
  .svc.motion-ready .svc-rule { transform: scaleX(0); transform-origin: center; }
  .svc.motion-ready .svc-hero.is-in .svc-rule {
    transform: scaleX(1);
    transition: transform 1s var(--svc-ease) var(--rule-d, 2400ms);
  }

  /* ---------- service cards ---------- */
  .svc.motion-ready .svc-card { isolation: isolate; }

  /* Photo: watercolour bloom. Edge layer stays 100%; the radial layer grows 0% -> 260%. */
  .svc.motion-ready .svc-card__media {
    -webkit-mask-image: url('../img/photo-wash-edge-b.svg'), radial-gradient(circle at 50% 55%, #000 0 55%, transparent 72%);
    mask-image: url('../img/photo-wash-edge-b.svg'), radial-gradient(circle at 50% 55%, #000 0 55%, transparent 72%);
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, 0% 0%;
    mask-size: 100% 100%, 0% 0%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .svc.motion-ready .svc-card.is-in .svc-card__media {
    -webkit-mask-size: 100% 100%, 260% 260%;
    mask-size: 100% 100%, 260% 260%;
    transition:
      -webkit-mask-size 1.2s ease-out var(--stag, 0ms),
      mask-size 1.2s ease-out var(--stag, 0ms);
  }

  /* Recommended pick: a soft, irregular rose stain behind the card's top area. */
  .svc.motion-ready .svc-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: -1;
    height: 62%;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(ellipse 62% 70% at 30% 26%, rgba(197, 139, 142, .10), rgba(197, 139, 142, 0) 72%),
      radial-gradient(ellipse 46% 54% at 72% 42%, rgba(197, 139, 142, .07), rgba(197, 139, 142, 0) 74%);
    transition: opacity 1.1s ease;
  }
  .svc.motion-ready .svc-card.is-recommended::before { opacity: 1; }

  /* ---------- comparison: header underline draws left to right (cell by cell, widths 16/28/28/28) ---------- */
  .svc.motion-ready .svc-table thead th,
  .svc.motion-ready .svc-table thead td {
    border-bottom-color: transparent;
    background: linear-gradient(rgba(30, 58, 95, .3), rgba(30, 58, 95, .3)) left bottom / 0% 1px no-repeat;
  }
  .svc.motion-ready .svc-table thead td { background-image: linear-gradient(rgba(30, 58, 95, .08), rgba(30, 58, 95, .08)); }
  .svc.motion-ready .svc-compare-section.is-in .svc-table thead th,
  .svc.motion-ready .svc-compare-section.is-in .svc-table thead td {
    background-size: 100% 1px;
    transition: background-size 224ms linear;
  }
  .svc.motion-ready .svc-compare-section.is-in .svc-table thead td { transition: background-size 128ms linear 300ms; }
  .svc.motion-ready .svc-compare-section.is-in .svc-table thead th:nth-child(2) { transition-delay: 428ms; }
  .svc.motion-ready .svc-compare-section.is-in .svc-table thead th:nth-child(3) { transition-delay: 652ms; }
  .svc.motion-ready .svc-compare-section.is-in .svc-table thead th:nth-child(4) { transition-delay: 876ms; }
}

/* Safety: reduced motion shows everything, immediately and unmasked. */
@media (prefers-reduced-motion: reduce) {
  .svc.motion-ready .svc-rv { opacity: 1 !important; filter: none !important; }
  .svc.motion-ready .svc-rule { transform: none !important; }
  .svc.motion-ready .svc-card__media {
    -webkit-mask-image: url('../img/photo-wash-edge-b.svg') !important;
    mask-image: url('../img/photo-wash-edge-b.svg') !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }
  .svc.motion-ready *, .svc.motion-ready *::before, .svc.motion-ready *::after {
    transition: none !important;
    animation: none !important;
  }
}