/* =====================================================================
   CaminhoIT site-wide motion (assets/js/site-motion.js)
   ---------------------------------------------------------------------
   Brings the homepage's animation language to every page: the public
   site (page kit, service, location, legal, KB, blog, booking, login and
   error templates) and the client portal / operations area. Loaded by
   header-v2.php and header-v2-auth.php.

   Self-contained: the portal does not load home.css, so the keyframes
   and reveal rules the homepage defines there are repeated in section 0
   (identical definitions, so the order the files load in is irrelevant).

   .s-app     set on portal pages: the same effects, quicker, and without
              the marketing flourishes (parallax, tilt, magnetic pull).

   Gates (same contract as the homepage):
     .h-motion  set in <head> before first paint unless reduced motion is
                requested; drives the hero entrance and parallax. Pure
                CSS, so the entrance never waits on JavaScript.
     .h-fine    a mouse or trackpad; enables the cursor-driven effects.
     .h-ready   site-motion.js has run; only then may content start
                hidden for the scroll reveal.

   Contents
     0. Foundation (easing, keyframes, reveal, glare, focus groups)
     1. Hero entrance (photo heroes: .p-mast, legal, KB)
     2. Hero visuals (places, glass card, orbit)
     3. Scroll reveal timing and in-view details
     4. Cards and links: tilt, glare and hover
     5. Image panels
     6. Parallax images
     7. FAQ and metrics
     8. Portal and sign-in
     9. Reduced motion
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 0. Foundation                                                       */
/* ------------------------------------------------------------------ */
:root { --s-ease: cubic-bezier(.2, .7, .2, 1); --s-dur: .9s; --s-step: 90ms; }
.s-app { --s-dur: .55s; --s-step: 45ms; }

@keyframes h-fade-up   { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes h-pop-in    { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes h-settle    { from { scale: 1.1; } to { scale: 1.04; } }
@keyframes h-float     { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes h-shimmer   { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes h-rise      { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: none; } }
@keyframes h-tick-pop  { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes h-ring      {
  0%   { box-shadow: 0 0 0 0 rgba(118, 89, 255, .45); }
  100% { box-shadow: 0 0 0 14px rgba(118, 89, 255, 0); }
}

/* Scroll reveal: hidden only once the script has run (.h-ready). */
.h-ready .h-rv:not(.h-rv--list):not(.is-in),
.h-ready .h-rv--list:not(.is-in) > .h-rv__item { opacity: 0; }

/* Glare for tilting cards. */
.h-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .35s var(--s-ease);
}

/* Hover-to-focus groups: the rest of the group steps back. */
.h-focus-group > * { transition: opacity .3s var(--s-ease), filter .3s var(--s-ease); }
.h-focus-group.is-hovering > :not(.is-active) { opacity: .42; }
.h-partners .h-focus-group.is-hovering > :not(.is-active) { filter: grayscale(1); }

/* Magnetic primary buttons (the homepage rule, for pages without home.css). */
.h-fine:not(.s-app) .h-btn--primary { translate: var(--bx, 0px) var(--by, 0px); }

@keyframes s-title-in {
  from { clip-path: inset(100% -10% -25% -10%); translate: 0 .45em; }
  to   { clip-path: inset(-10% -10% -25% -10%); translate: none; }
}
@keyframes s-chip-in  { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes s-spin     { to { rotate: 360deg; } }
@keyframes s-breathe  { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes s-bar-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes s-zoom-out { from { scale: 1.28; } }

/* ------------------------------------------------------------------ */
/* 1. Hero entrance                                                    */
/* ------------------------------------------------------------------ */
/* The copy column arrives line by line: crumbs, pill, title, lead,
   actions, benefits. */
.h-motion :is(.p-mast__copy, .cit-lg-hero__copy, .cit-kb2-hero__copy, .cit-kb-hero__copy) > * {
  animation: h-fade-up .8s var(--s-ease) both;
}
.h-motion :is(.p-mast__copy, .cit-lg-hero__copy, .cit-kb2-hero__copy, .cit-kb-hero__copy) > :nth-child(1) { animation-delay: .05s; }
.h-motion :is(.p-mast__copy, .cit-lg-hero__copy, .cit-kb2-hero__copy, .cit-kb-hero__copy) > :nth-child(2) { animation-delay: .14s; }
.h-motion :is(.p-mast__copy, .cit-lg-hero__copy, .cit-kb2-hero__copy, .cit-kb-hero__copy) > :nth-child(3) { animation-delay: .26s; }
.h-motion :is(.p-mast__copy, .cit-lg-hero__copy, .cit-kb2-hero__copy, .cit-kb-hero__copy) > :nth-child(4) { animation-delay: .4s; }
.h-motion :is(.p-mast__copy, .cit-lg-hero__copy, .cit-kb2-hero__copy, .cit-kb-hero__copy) > :nth-child(5) { animation-delay: .52s; }
.h-motion :is(.p-mast__copy, .cit-lg-hero__copy, .cit-kb2-hero__copy, .cit-kb-hero__copy) > :nth-child(n+6) { animation-delay: .64s; }

/* The headline rises out of a mask, like the homepage's lines. */
.h-motion :is(.p-mast__title, .cit-lg-hero__title, .cit-kb2-hero__title, .cit-kb-hero__title) {
  animation-name: s-title-in;
  animation-duration: 1s;
}

/* Benefits under the buttons follow one after another (the homepage
   rule in home.css animates each li; only the timing differs here). */
.h-motion .p-mast .h-mast__benefits li:nth-child(1) { animation-delay: .7s; }
.h-motion .p-mast .h-mast__benefits li:nth-child(2) { animation-delay: .8s; }
.h-motion .p-mast .h-mast__benefits li:nth-child(n+3) { animation-delay: .9s; }

/* Shimmering accent, as on the homepage. */
.h-motion .p-mast__accent {
  background-image: linear-gradient(95deg, #9d8cff 0%, #7a63ff 30%, #b9adff 50%, #7a63ff 70%, #6d7dff 100%);
  background-size: 220% 100%;
  animation: h-shimmer 5s ease-in-out 1.2s infinite alternate;
}
.h-motion .p-mast--green .p-mast__accent {
  background-image: linear-gradient(95deg, #b8a9ff 0%, #8f7bff 30%, #9ff0cc 50%, #8f7bff 70%, #5fd3a2 100%);
}

/* The photograph settles in, then follows the cursor and the scroll
   (site-motion.js sets --hx/--hy on the hero). Scale and translate are
   separate properties, so the kit's centring transform is untouched. */
.h-motion :is(.p-mast__media img, .cit-lg-hero__photo, .cit-kb2-hero__photo) {
  scale: 1.04;
  animation: h-settle 1.8s var(--s-ease) both;
}
.h-motion .s-hero__media {
  translate: var(--hx, 0px) var(--hy, 0px);
  transition: translate .5s cubic-bezier(.2, .8, .3, 1);
  will-change: translate;
}
.h-motion .s-hero__inner {
  translate: var(--cx, 0px) var(--cy, 0px);
  opacity: var(--fade, 1);
  transition: translate .5s cubic-bezier(.2, .8, .3, 1);
}

/* ------------------------------------------------------------------ */
/* 2. Hero visuals                                                     */
/* ------------------------------------------------------------------ */
.h-motion .p-mast__place { animation: h-pop-in .7s var(--s-ease) .9s both, h-float 6s ease-in-out 1.6s infinite; }
.h-motion .p-mast__place--pt { animation-delay: 1.05s, 2.6s; }

.h-motion .p-mast__visual { animation: h-pop-in .9s var(--s-ease) .4s both; }
.h-motion .p-glass li { animation: h-fade-up .6s var(--s-ease) both; }
.h-motion .p-glass li:nth-child(1) { animation-delay: .7s; }
.h-motion .p-glass li:nth-child(2) { animation-delay: .8s; }
.h-motion .p-glass li:nth-child(3) { animation-delay: .9s; }
.h-motion .p-glass li:nth-child(4) { animation-delay: 1s; }
.h-motion .p-glass li:nth-child(n+5) { animation-delay: 1.1s; }
.h-motion .p-glass__icon { animation: h-tick-pop .5s var(--s-ease) 1.1s backwards; }

/* Orbit: the ring turns slowly, the mark breathes, the chips pop in and
   drift. Chips are centred with transform, so only scale/translate move. */
.h-motion .p-orbit::before { animation: s-spin 70s linear infinite; }
.h-motion .p-orbit__core { animation: h-pop-in .8s var(--s-ease) .5s both; }
.h-motion .p-orbit__core svg { animation: s-breathe 4.5s ease-in-out 1.4s infinite; }
.h-motion .p-orbit__chip { animation: s-chip-in .7s var(--s-ease) both, h-float 6s ease-in-out infinite; }
.h-motion .p-orbit__chip:nth-of-type(2) { animation-delay: .7s, 1.5s; }
.h-motion .p-orbit__chip:nth-of-type(3) { animation-delay: .8s, 2.3s; }
.h-motion .p-orbit__chip:nth-of-type(4) { animation-delay: .9s, 3.1s; }
.h-motion .p-orbit__chip:nth-of-type(5) { animation-delay: 1s, 1.9s; }
.h-motion .p-orbit__chip:nth-of-type(6) { animation-delay: 1.1s, 2.7s; }
.h-motion .p-orbit__chip:nth-of-type(n+7) { animation-delay: 1.2s, 3.5s; }

/* ------------------------------------------------------------------ */
/* 3. Scroll reveal                                                    */
/* ------------------------------------------------------------------ */
/* home.css hides .h-rv blocks until .is-in and plays h-rise. Blocks that
   arrive together are staggered by --bd (set per batch in the script). */
.h-ready .h-rv:not(.h-rv--list).is-in { animation: h-rise var(--s-dur) var(--s-ease) var(--bd, 0ms) backwards; }
.h-ready .h-rv--list.is-in > .h-rv__item { animation: h-rise var(--s-dur) var(--s-ease) calc(var(--bd, 0ms) + var(--i, 0) * var(--s-step)) backwards; }
@keyframes s-rise-sm { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
.s-app.h-ready .h-rv:not(.h-rv--list).is-in,
.s-app.h-ready .h-rv--list.is-in > .h-rv__item { animation-name: s-rise-sm; }

/* Details that play once their block is in view. */
.h-ready .is-in .p-tick { animation: h-tick-pop .5s var(--s-ease) calc(var(--bd, 0ms) + var(--ti, 0) * 70ms + .3s) backwards; }
.h-ready .is-in .p-card__bar { transform-origin: left center; animation: s-bar-grow .8s var(--s-ease) calc(var(--bd, 0ms) + var(--i, 0) * 90ms + .35s) backwards; }
.h-ready .is-in :is(.p-card__icon, .p-link__icon, .p-impact__icon) { animation: h-pop-in .6s var(--s-ease) calc(var(--bd, 0ms) + var(--i, 0) * 90ms + .2s) backwards; }
.h-ready .p-value__list.is-in > li > .cit-ico { animation: h-pop-in .6s var(--s-ease) calc(var(--bd, 0ms) + var(--i, 0) * 90ms + .25s) backwards; }

/* Showcase bands: the photograph eases out of a slow zoom while the copy
   steps in. */
.h-ready .p-show.is-in .p-show__photo { animation: s-zoom-out 1.6s var(--s-ease) var(--bd, 0ms) backwards; }
.h-ready .p-show.is-in .p-show__copy > * { animation: h-fade-up .7s var(--s-ease) backwards; }
.h-ready .p-show.is-in .p-show__copy > :nth-child(2) { animation-delay: .1s; }
.h-ready .p-show.is-in .p-show__copy > :nth-child(3) { animation-delay: .2s; }
.h-ready .p-show.is-in .p-show__copy > :nth-child(n+4) { animation-delay: .3s; }
.h-ready .p-show.is-in :is(.p-tile, .p-glass li) { animation: h-pop-in .6s var(--s-ease) calc(var(--ti, 0) * 90ms + .3s) backwards; }

/* ------------------------------------------------------------------ */
/* 4. Cards and links                                                  */
/* ------------------------------------------------------------------ */
/* Linked cards and link tiles tilt toward the cursor with the
   homepage's glare (.h-glare in home.css). */
.h-fine :is(.p-card, .p-link) { transform-style: preserve-3d; }
.h-fine :is(.p-card, .p-link).is-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
  transition: transform .12s linear, border-color .25s var(--s-ease), box-shadow .25s var(--s-ease);
  box-shadow: 0 26px 50px -28px rgba(30, 36, 90, .45);
}
:is(.p-card, .p-link).is-tilting .h-glare { opacity: 1; }
.p-card.is-tilting .p-card__media img { transform: scale(1.07); }
.p-card__media img { transition: transform .6s var(--s-ease); }

/* Every card answers the cursor a little, linked or not. */
:is(.p-card__icon, .p-link__icon, .p-impact__icon) { transition: transform .35s var(--s-ease), background-color .3s var(--s-ease), color .3s var(--s-ease); }
.h-fine .p-card:hover .p-card__icon,
.h-fine .p-link:hover .p-link__icon,
.h-why__item.is-active .p-impact__icon { transform: translateY(-4px) rotate(-6deg) scale(1.08); }
.p-card__bar { transition: width .45s var(--s-ease); }
.h-fine .p-card:hover .p-card__bar { width: 72px; }
.h-fine .p-card:not(:has(.p-card__link)):hover { border-color: #d6cffd; box-shadow: 0 22px 44px -28px rgba(30, 36, 90, .42); }

/* Value list rows and tiles in the dark bands. */
.p-value__list > li > .cit-ico { transition: transform .35s var(--s-ease); }
.p-value__list > li.is-active > .cit-ico { transform: translateY(-3px) rotate(-6deg) scale(1.1); }
.p-tile { transition: transform .3s var(--s-ease), background-color .3s var(--s-ease), border-color .3s var(--s-ease); }
.h-fine .p-tile:hover { transform: translateY(-4px); background: rgba(18, 30, 78, .7); border-color: rgba(255, 255, 255, .38); }

/* ------------------------------------------------------------------ */
/* 5. Image panels (cit_kit_panels)                                    */
/* ------------------------------------------------------------------ */
/* Same behaviour as the homepage service panels: the active panel opens
   up, the rest step back, a light follows the cursor. */
.p-panels.is-hovering .h-svc:not(.is-active) { filter: saturate(.5) brightness(.72); }
@media (min-width: 1081px) {
  .p-panels.is-hovering .h-svc { flex-grow: .8; }
  .p-panels.is-hovering .h-svc.is-active { flex-grow: 1.55; }
}
.h-svc__mark { translate: var(--px, 0px) var(--py, 0px); transition: transform .7s var(--s-ease), translate .6s cubic-bezier(.2, .8, .3, 1); }
.h-svc.is-active .h-svc__mark { transform: scale(1.1) rotate(-4deg); }

/* ------------------------------------------------------------------ */
/* 6. Parallax images                                                  */
/* ------------------------------------------------------------------ */
/* .h-cta__img is already handled in home.css. */
.h-motion .p-show__photo { translate: 0 var(--sp, 0px); scale: 1.12; }

/* ------------------------------------------------------------------ */
/* 7. FAQ and metrics                                                  */
/* ------------------------------------------------------------------ */
.h-motion .p-faq__item[open] > .p-faq__a { animation: h-fade-up .45s var(--s-ease) both; }
.p-faq__item { transition: border-color .25s var(--s-ease), box-shadow .25s var(--s-ease), transform .25s var(--s-ease); }
.h-fine .p-faq__item:not([open]):hover { transform: translateX(4px); border-color: #d6cffd; }

.p-metrics dt.is-counting { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* 8. Portal and sign-in                                               */
/* ------------------------------------------------------------------ */
/* Page heads enter like the public heroes, a little quicker. */
.h-motion :is(.cit-pagehead-portal__inner, .cit-pagehead-portal__inner > div,
              .dashboard-hero-content, .msp-hero .msp-wrap, .cit-ophead, .cit-ophead__text,
              .cit-auth__brand-inner) > * {
  animation: h-fade-up .65s var(--s-ease) both;
}
.h-motion :is(.cit-pagehead-portal__inner, .cit-pagehead-portal__inner > div,
              .dashboard-hero-content, .msp-hero .msp-wrap, .cit-ophead, .cit-ophead__text,
              .cit-auth__brand-inner) > :nth-child(2) { animation-delay: .08s; }
.h-motion :is(.cit-pagehead-portal__inner, .cit-pagehead-portal__inner > div,
              .dashboard-hero-content, .msp-hero .msp-wrap, .cit-ophead, .cit-ophead__text,
              .cit-auth__brand-inner) > :nth-child(3) { animation-delay: .16s; }
.h-motion :is(.cit-pagehead-portal__inner, .cit-pagehead-portal__inner > div,
              .dashboard-hero-content, .msp-hero .msp-wrap, .cit-ophead, .cit-ophead__text,
              .cit-auth__brand-inner) > :nth-child(n+4) { animation-delay: .24s; }
.h-motion :is(.cit-pagehead-portal h1, .dashboard-hero-title, .msp-h1, .cit-ophead h1, .cit-auth__heading) {
  animation-name: s-title-in;
  animation-duration: .8s;
}
.h-motion :is(.cit-pagehead-portal__photo, .cit-auth__photo) { scale: 1.04; animation: h-settle 1.6s var(--s-ease) both; }
.h-motion .cit-pagehead-portal__hand { animation: h-pop-in .8s var(--s-ease) .35s both; }

/* Sign-in: the card rises in, its fields follow; the brand points stagger. */
.h-motion .cit-auth__card { animation: h-pop-in .8s var(--s-ease) .1s both; }
.h-motion .cit-auth__card > * { animation: h-fade-up .6s var(--s-ease) both; }
.h-motion .cit-auth__card > :nth-child(1) { animation-delay: .25s; }
.h-motion .cit-auth__card > :nth-child(2) { animation-delay: .32s; }
.h-motion .cit-auth__card > :nth-child(3) { animation-delay: .39s; }
.h-motion .cit-auth__card > :nth-child(4) { animation-delay: .46s; }
.h-motion .cit-auth__card > :nth-child(n+5) { animation-delay: .53s; }
.h-motion .cit-auth__points > * { animation: h-fade-up .6s var(--s-ease) both; }
.h-motion .cit-auth__points > :nth-child(1) { animation-delay: .45s; }
.h-motion .cit-auth__points > :nth-child(2) { animation-delay: .55s; }
.h-motion .cit-auth__points > :nth-child(n+3) { animation-delay: .65s; }

/* Tiles answer the cursor: the icon lifts and tips. */
:is(.cit-stat, .cit-action, .cit-point, .msp-tile, .stat-card, .cit-card) :is(.cit-icon-box, .ico, .stat-icon) {
  transition: transform .35s var(--s-ease);
}
.h-fine :is(.cit-stat, .cit-action, .cit-point, .msp-tile, .stat-card, .cit-card):hover :is(.cit-icon-box, .ico, .stat-icon) {
  transform: translateY(-3px) rotate(-6deg) scale(1.08);
}
.h-ready .is-in :is(.cit-stat, .cit-action, .msp-tile) :is(.cit-icon-box, .ico) {
  animation: h-pop-in .55s var(--s-ease) calc(var(--bd, 0ms) + var(--i, 0) * var(--s-step) + .15s) backwards;
}
:is(.cit-stat__value, .stat-value, .stat-number, .msp-tile .v, .sc-value).is-counting { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* 9. Reduced motion                                                   */
/* ------------------------------------------------------------------ */
/* Everything above is gated by .h-motion / .h-fine / .h-ready, which are
   never set for reduced motion; this covers the plain hover transitions. */
@media (prefers-reduced-motion: reduce) {
  .p-card__icon, .p-link__icon, .p-impact__icon, .p-card__bar, .p-tile, .p-faq__item,
  .p-value__list > li > .cit-ico, .h-svc__mark, .p-card__media img { transition: none; }
  .p-tile:hover, .p-faq__item:hover { transform: none !important; }
}