@keyframes float-gently {
  0%,100% {
    translate:0 0;
  }
  50% {
    translate:0 -8px;
  }
}

@keyframes enter-page {
  from {
    opacity:0;
    transform:translateY(16px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:no-preference) {
  .hero-copy,.page-hero .container {
    animation:enter-page .75s ease-out both;
  }
  .hero-visual {
    animation:enter-page 1s .15s ease-out both;
  }
  .float-code {
    animation:float-gently 7s ease-in-out infinite;
  }
  .float-status {
    animation:float-gently 8s 1s ease-in-out infinite;
  }
  .float-mobile {
    animation:float-gently 9s 2s ease-in-out infinite;
  }
  .reveal.is-observed {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .65s ease,transform .65s ease;
  }
  .reveal.is-observed.is-visible {
    opacity:1;
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .reveal {
    opacity:1!important;
    transform:none!important;
  }
}

@view-transition {
  navigation:auto;
}

::view-transition-old(root),::view-transition-new(root) {
  animation-duration:.16s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
  }
}

/* Ritmo visual discreto: geometría local, composición y microinteracciones. */
.page-hero,
.hero,
.cta-panel {
  isolation: isolate;
}
.page-hero > .container,
.hero > .container {
  position: relative;
  z-index: 1;
}
.page-hero::before,
.public-panel::before,
.company-section::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -1;
  pointer-events: none;
  background: url('../img/backgrounds/connection-grid.svg') center / cover no-repeat;
  opacity: .7;
}
.company-section::before { opacity: .45; }
.page-hero::after {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  right: -70px;
  top: -130px;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, #cdeaf460, #d5e6ff30 55%, transparent 72%);
}
.scroll-progress { display: none; }
@keyframes ambient-shift {
  from { transform: translate3d(-8px, 0, 0); }
  to { transform: translate3d(12px, 8px, 0); }
}
@keyframes surface-float {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}
@keyframes scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::before,
  .public-panel::before,
  .company-section::before,
  .page-hero::after {
    animation: ambient-shift 22s ease-in-out infinite alternate;
    animation-play-state: paused;
  }
  .page-hero.in-view::before,
  .page-hero.in-view::after,
  .public-panel.in-view::before,
  .company-section.in-view::before {
    animation-play-state: running;
  }
  .public-platform,
  .document-float,
  .project-art > .phone-mockup,
  .project-art > .dashboard {
    animation: surface-float 7s ease-in-out infinite alternate;
    animation-play-state: paused;
  }
  .public-panel.in-view .public-platform,
  .project-art.in-view > .phone-mockup,
  .project-art.in-view > .dashboard,
  .project-art.in-view .document-float {
    animation-play-state: running;
  }
  .hero:not(.in-view) .floating-card { animation-play-state: paused; }
  .services-grid .reveal:nth-child(4n+2),
  .process-grid .reveal:nth-child(2),
  .benefits-grid .reveal:nth-child(3n+2) { transition-delay: .06s; }
  .services-grid .reveal:nth-child(4n+3),
  .process-grid .reveal:nth-child(3),
  .benefits-grid .reveal:nth-child(3n+3) { transition-delay: .12s; }
  .services-grid .reveal:nth-child(4n+4),
  .process-grid .reveal:nth-child(4) { transition-delay: .18s; }
  .process-grid .reveal:nth-child(5) { transition-delay: .24s; }
  .service-card .icon-box .icon,
  .expertise-icon .icon,
  .benefit > .icon { transition: transform .3s ease; }
  .service-card:hover .icon-box .icon,
  .expertise-card:hover .expertise-icon .icon,
  .benefit:hover > .icon { transform: translateY(-2px) rotate(-5deg); }
  .company-facts,
  .contact-public { transition: border-color .25s, box-shadow .25s; }
  .company-facts:hover,
  .contact-public:hover { border-color: #b8ccef; box-shadow: 0 14px 40px #36517d10; }
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      display: block;
      position: fixed;
      top: var(--header-height);
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #334ddb, #63aacf);
      z-index: 51;
      transform-origin: left;
      transform: scaleX(0);
      animation: scroll-progress linear both;
      animation-timeline: scroll(root);
      pointer-events: none;
    }
  }
}
html[data-motion='paused'] { scroll-behavior: auto; }
html[data-motion='paused'] *,
html[data-motion='paused'] *::before,
html[data-motion='paused'] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion='paused'] .reveal { opacity: 1 !important; transform: none !important; }
html[data-motion='paused'] .scroll-progress { display: none; }
html.page-inactive *,
html.page-inactive *::before,
html.page-inactive *::after { animation-play-state: paused !important; }