/* Shared motion layer. The content remains visible if JavaScript is unavailable. */
.reveal { opacity: 1; transform: none; }

.motion-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #5c8dff, #b6abff 48%, #d9ff4f);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}
[dir="rtl"] .motion-progress { transform-origin: right; }

.motion-ready:not(.motion-paused) .reveal {
  transition: opacity 800ms var(--ease), transform 900ms var(--ease);
  transition-delay: var(--motion-delay, 0ms);
}
.motion-ready:not(.motion-paused) .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(30px);
}
.motion-ready:not(.motion-paused) .motion-item {
  transition: opacity 700ms var(--ease), translate 850ms var(--ease), box-shadow 300ms ease, transform 350ms var(--ease);
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms, 0ms;
}
.motion-ready:not(.motion-paused) .motion-item:not(.motion-seen) {
  opacity: 0;
  translate: 0 24px;
}
.motion-ready .motion-item.motion-seen { opacity: 1; translate: 0 0; }

.motion-ready:not(.motion-paused) .hero-copy { animation: none; }
.motion-ready:not(.motion-paused) .hero-copy > * {
  animation: motion-entrance 950ms var(--ease) both;
}
.motion-ready .hero-copy > :nth-child(1) { animation-delay: 60ms; }
.motion-ready .hero-copy > :nth-child(2) { animation-delay: 160ms; }
.motion-ready .hero-copy > :nth-child(3) { animation-delay: 290ms; }
.motion-ready .hero-copy > :nth-child(4) { animation-delay: 410ms; }

.motion-ready:not(.motion-paused) .hero h1 .accent-line {
  background-size: 170% 100%;
  animation: motion-title-light 4200ms 400ms ease-in-out both;
}
.motion-ready:not(.motion-paused) .hero-art {
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.055);
}
.motion-hero-glow {
  position: absolute;
  z-index: 1;
  inset: -8%;
  pointer-events: none;
  background: radial-gradient(ellipse at 78% 44%, rgba(78, 173, 255, .18), transparent 38%);
  transform: translate3d(var(--light-x, 0px), var(--light-y, 0px), 0);
}
.motion-hero-glow::after {
  position: absolute;
  inset: -20%;
  content: "";
  background: linear-gradient(112deg, transparent 40%, rgba(110, 195, 255, .1) 48%, rgba(212, 231, 255, .26) 50%, transparent 54%);
  opacity: 0;
  transform: translateX(-55%);
  animation: motion-light-pass 3200ms 300ms var(--ease) both;
}
.motion-ready:not(.motion-paused) .hero-proof > span {
  animation: motion-entrance 800ms var(--ease) both;
  animation-delay: calc(550ms + var(--proof-delay, 0ms));
}

.motion-card { position: relative; isolation: isolate; }
.motion-spotlight {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(430px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(92, 141, 255, .19), transparent 68%);
  transition: opacity 400ms ease;
}
.motion-card:focus-within .motion-spotlight { opacity: 1; }

.motion-ready:not(.motion-paused) :is(.button, .header-cta, .brief-submit, .offer-path-primary) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.motion-ready:not(.motion-paused) :is(.button, .header-cta, .brief-submit, .offer-path-primary)::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.45) 48%, transparent 72%);
  transform: translateX(-140%);
}
.motion-ready:not(.motion-paused) :is(.button, .header-cta, .brief-submit, .offer-path-primary):is(:hover, :focus-visible)::after {
  animation: motion-button-light 650ms ease-out;
}
.motion-ready :is(.button, .text-link, .arrow-link, .header-cta) > span[aria-hidden="true"] {
  transition: translate 280ms var(--ease);
}
.motion-ready:not(.motion-paused) :is(.button, .text-link, .arrow-link, .header-cta):is(:hover, :focus-visible) > span[aria-hidden="true"] {
  translate: 3px -3px;
}
.motion-ready:not(.motion-paused) .process-step .step-line span {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1100ms var(--ease);
  transition-delay: calc(160ms + var(--motion-delay, 0ms));
}
.motion-ready:not(.motion-paused) .process-step.is-visible .step-line span { transform: scaleX(1); }
.motion-ready:not(.motion-paused) .process-step.is-visible .step-line strong {
  animation: motion-step-halo 1200ms 300ms ease-out both;
}
.motion-ready:not(.motion-paused) .growth-loop.is-visible::after {
  animation: motion-loop-turn 1600ms 400ms var(--ease) both;
}
.motion-ready:not(.motion-paused) .brief-dialog[open] { animation-duration: 380ms; }
.motion-ready:not(.motion-paused) .brief-dialog[open]::backdrop {
  animation: motion-backdrop-in 250ms ease-out both;
}
.technology:hover .technology-track,
.motion-offscreen .technology-track { animation-play-state: paused; }

/* Preserve the legacy subpage header while sharing the motion layer. */
.language-switch:not(details) { display: flex; align-items: center; gap: 9px; }
.language-switch:not(details) .lang-button {
  display: inline-flex;
  width: auto;
  min-height: 40px;
  padding: 8px 9px;
}
.profilio-page-brand .profilio-operator-mark { height: auto; object-fit: contain; }

/* Arabic and Gurmukhi need space for marks outside the Latin cap height. */
:is([lang="ur"], [lang="pa"]) .hero h1 { line-height: 1.15; letter-spacing: -.025em; }
:is([lang="ur"], [lang="pa"]) .hero h1 .accent-line { padding-block: .14em; margin-block: -.14em; }

@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .motion-ready:not(.motion-paused) .motion-card {
    transition: transform 350ms var(--ease), box-shadow 350ms ease, background 300ms ease, opacity 700ms var(--ease), translate 850ms var(--ease);
    transition-delay: 0ms, 0ms, 0ms, var(--motion-delay, 0ms), var(--motion-delay, 0ms);
  }
  .motion-ready:not(.motion-paused) .motion-card:hover {
    z-index: 2;
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px);
    box-shadow: 0 22px 55px rgba(7, 17, 31, .18), inset 0 0 0 1px rgba(111, 159, 255, .35);
  }
  .motion-ready:not(.motion-paused) .motion-card:hover .motion-spotlight { opacity: 1; }
  .motion-ready:not(.motion-paused) .service-card .service-number {
    transition: translate 300ms var(--ease), color 300ms;
  }
  .motion-ready:not(.motion-paused) .service-card:hover .service-number { translate: 8px 0; color: var(--lime); }
}

@media (max-width: 860px) {
  .motion-ready:not(.motion-paused) .hero-art { transform: none; }
  .motion-hero-glow { display: none; }
  .motion-ready:not(.motion-paused) .reveal:not(.is-visible) { transform: translateY(18px); }
  .motion-ready:not(.motion-paused) .motion-item:not(.motion-seen) { translate: 0 16px; }
}

@keyframes motion-entrance {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motion-title-light {
  0% { background-position: 100% 50%; }
  65%, 100% { background-position: 0% 50%; }
}
@keyframes motion-light-pass {
  0% { opacity: 0; transform: translateX(-55%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(65%); }
}
@keyframes motion-button-light { to { transform: translateX(140%); } }
@keyframes motion-step-halo {
  0% { box-shadow: 0 0 0 0 rgba(217,255,79,.3); }
  100% { box-shadow: 0 0 0 16px rgba(217,255,79,0); }
}
@keyframes motion-loop-turn {
  from { rotate: -160deg; scale: .8; }
  to { rotate: 0deg; scale: 1; }
}
@keyframes motion-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.motion-paused .motion-hero-glow { display: none; }
.motion-paused :is(.reveal, .motion-item) { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; animation: none !important; }
.motion-paused .hero-art { transform: none !important; }
.motion-paused .hero-copy, .motion-paused .hero-copy > *, .motion-paused .hero-proof > span {
  animation: none !important; opacity: 1 !important; transform: none !important;
}
.motion-paused .technology-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-copy > *, .hero-proof > span { animation: none !important; opacity: 1 !important; transform: none !important; }
  .motion-hero-glow { display: none; }
  .motion-progress { transition: none; }
  .reveal, .motion-item { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; animation: none !important; }
  .motion-card, .hero-art { transform: none !important; }
  .hero h1 .accent-line { animation: none !important; }
  .motion-spotlight { display: none; }
}