/* ==========================================================================
   Adrem: motion.css
   Site-wide motion and hover layer (every page except the Home page, which has
   its own richer layer in home-v2.css). Loaded after components.css.
     · staggered reveals inside grids            · hover lift / image zoom on cards
     · parallax page heroes + floating shapes    · scroll progress bar
     · button micro-interactions                 · card tilt (pointer devices)
   Everything here is decoration: with JavaScript off, or with
   prefers-reduced-motion, the page renders static and fully usable.
   ========================================================================== */

/* ---- Scroll progress bar (motion.js sets --scroll) ---------------------- */
.site-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  transform: scaleX(var(--scroll, 0)); transform-origin: left;
  pointer-events: none;
}

/* ---- Staggered reveals inside a revealed container ---------------------- */
.js [data-stagger] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-visible [data-stagger] > *,
.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

/* ---- Hover micro-interactions ------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .card, .feature--card, .value, .job, .office-card, .contact-card, .pride-of__item,
  .ind-card, .post-card, .rs-feat, .rs-card, .testimonial {
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
  }
  .card:hover, .feature--card:hover, .value:hover, .job:hover, .office-card:hover,
  .contact-card:hover, .ind-card:hover, .rs-feat:hover, .rs-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg);
  }
  /* photos inside cards ease in a little */
  .card .media img, .service-card .media img, .ind-card img, .post-card img, .job__media img {
    transition: transform 0.6s var(--ease-out);
  }
  .card:hover .media img, .service-card:hover .media img, .ind-card:hover img, .post-card:hover img { transform: scale(1.05); }
  /* buttons: lift on hover, settle on press */
  .btn { transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.985); }
  /* role / industry chips */
  .role, .rs-role { transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
  .role:hover { transform: translateY(-3px); }
  /* the arrow in "Learn more" style links slides */
  .link-arrow .icon, .card__link .icon, .btn .icon { transition: transform var(--duration-base) var(--ease-out); }
  .link-arrow:hover .icon, .card__link:hover .icon, .btn:hover .icon { transform: translateX(3px); }
  /* tilt (motion.js sets the angles) */
  [data-tilt] { transform-style: preserve-3d; will-change: transform; }
}

/* ---- Page heroes: depth + two slow floating shapes ---------------------- */
/* Only ::before is free here, components.css uses .page-hero::after for the dark
   wash that keeps the hero text readable, so both blobs live in one layer. */
.page-hero { position: relative; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(26rem 26rem at 88% 4%, rgba(27, 152, 224, 0.5), transparent 62%),
    radial-gradient(30rem 30rem at 2% 96%, rgba(47, 108, 184, 0.45), transparent 62%);
  animation: motion-float 13s ease-in-out infinite;
}
.page-hero::after { z-index: 2; }
.page-hero .container { z-index: 3; }
@keyframes motion-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -22px, 0) scale(1.05); }
}
.page-hero__bg, .rs-hero__bg { will-change: transform; }

/* ---- Accessibility / no-JS --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .page-hero::before { animation: none; }
  .site-progress { display: none; }
}

/* ---- CTA dialog: Call us · WhatsApp us · Send an enquiry ---------------- */
.cta-modal {
  width: min(40rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); margin: auto; padding: 0; border: 0;
  border-radius: var(--radius-xl); background: transparent; color: var(--color-text);
  box-shadow: 0 40px 90px -30px rgba(11, 26, 54, 0.6);
}
.cta-modal::backdrop { background: rgba(11, 26, 54, 0.62); backdrop-filter: blur(3px); }
.cta-modal[open] { animation: cta-modal-in 0.32s var(--ease-out); }
.cta-modal[open]::backdrop { animation: cta-fade-in 0.32s var(--ease-out); }
@keyframes cta-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cta-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cta-modal__inner {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background: var(--n-0); border-radius: var(--radius-xl);
}
.cta-modal__inner::before {   /* brand wash in the corner */
  content: ""; position: absolute; right: -6rem; top: -8rem; width: 22rem; height: 22rem; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(27, 152, 224, 0.16), transparent 68%);
}
.cta-modal__close {
  position: absolute; top: 0.85rem; right: 0.85rem; width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: 50%; background: var(--n-0); color: var(--color-heading); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.cta-modal__close:hover { background: var(--color-primary); color: var(--n-0); transform: rotate(90deg); }
.cta-modal__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.cta-modal__title { font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.cta-modal__text { color: var(--color-text-muted); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.cta-modal__grid { display: grid; gap: var(--space-2); }
.cta-opt {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--n-0); color: inherit; text-decoration: none; font: inherit; cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.cta-opt:hover, .cta-opt:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; background: var(--color-bg-tint); }
.cta-opt__icon { flex: none; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--blue-500); color: var(--n-0); transition: transform var(--duration-base) var(--ease-out); }
.cta-opt--wa .cta-opt__icon { background: #1f8a4c; }
.cta-opt--mail .cta-opt__icon { background: var(--navy-500); }
.cta-opt--form .cta-opt__icon { background: var(--blue-600); }
.cta-opt:hover .cta-opt__icon { transform: rotate(-8deg) scale(1.08); }
.cta-opt__body { display: grid; gap: 2px; }
.cta-opt__body strong { font-family: var(--font-heading); font-size: var(--text-base); color: var(--color-heading); }
.cta-opt__body span { font-size: var(--text-sm); color: var(--color-text-muted); }
.cta-opt__go { margin-left: auto; color: var(--color-primary); transition: transform var(--duration-base) var(--ease-out); }
.cta-opt:hover .cta-opt__go { transform: translateX(4px); }
.cta-modal__note { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .cta-modal[open], .cta-modal[open]::backdrop { animation: none; } }

/* second step: the enquiry form in its own compact dialog */
.cta-modal--form { width: min(34rem, calc(100vw - 2rem)); }
.cta-form__grid { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .cta-form__grid { grid-template-columns: 1fr 1fr; } .cta-form__grid .field--full { grid-column: 1 / -1; } }
.cta-form .field__label { font-size: var(--text-sm); margin-bottom: 2px; }
.cta-form .input, .cta-form .select, .cta-form .textarea { padding: 0.55rem 0.7rem; }
.cta-form .textarea { min-height: 4.5rem; }
.cta-form .form__actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); align-items: center; }
.cta-form .form__status:empty { display: none; }
.cta-modal__more { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
.cta-modal__more .icon { width: 1rem; height: 1rem; transition: transform var(--duration-fast) var(--ease-out); }
.cta-modal__more:hover .icon { transform: translateX(3px); }