/* ========================================================================== 
   Ultivo Global Solutions LLP — Motion & Animation System
   File: css/animations.css
   Purpose: Refined micro-interactions, ambient movement and AOS enhancements
   ========================================================================== */

:root {
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 700ms;
  --motion-ambient: 14s;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================================================== 
   Page entrance
   ========================================================================== */

@keyframes ultivo-page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: ultivo-page-enter 500ms var(--ease-standard) both;
}

/* ========================================================================== 
   Header and navigation
   ========================================================================== */

@keyframes ultivo-header-drop {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-header {
  animation: ultivo-header-drop 620ms var(--ease-emphasized) both;
}

.brand__logo {
  transition:
    transform var(--motion-base) var(--ease-emphasized),
    filter var(--motion-base) ease;
}

.brand:hover .brand__logo {
  transform: translateY(-2px) scale(1.015);
  filter: drop-shadow(0 8px 12px rgba(14, 63, 137, 0.12));
}

.primary-nav__link {
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-standard);
}

.primary-nav__link:hover {
  transform: translateY(-1px);
}

.nav-toggle span {
  transform-origin: center;
  transition:
    transform var(--motion-base) var(--ease-emphasized),
    opacity var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

/* ========================================================================== 
   Hero motion
   ========================================================================== */

@keyframes ultivo-hero-zoom {
  0% {
    transform: scale(1.015) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.075) translate3d(-0.8%, -0.4%, 0);
  }
  100% {
    transform: scale(1.035) translate3d(0.5%, 0.3%, 0);
  }
}

@keyframes ultivo-overlay-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.92;
  }
}

@keyframes ultivo-scroll-line {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  35% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
  65% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes ultivo-scroll-label {
  0%,
  100% {
    opacity: 0.64;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}

.hero__media img {
  will-change: transform;
  animation: ultivo-hero-zoom var(--motion-ambient) ease-in-out infinite alternate;
}

.hero__overlay {
  animation: ultivo-overlay-breathe 8s ease-in-out infinite;
}

.hero__scroll span:first-child {
  animation: ultivo-scroll-label 2.2s ease-in-out infinite;
}

.hero__scroll-line {
  animation: ultivo-scroll-line 2.2s var(--ease-standard) infinite;
}

/* ========================================================================== 
   Buttons and text links
   ========================================================================== */

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  bottom: -40%;
  left: -42%;
  width: 30%;
  transform: skewX(-22deg) translateX(-220%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.34),
    transparent
  );
  transition: transform 650ms var(--ease-emphasized);
}

.button:hover::before,
.button:focus-visible::before {
  transform: skewX(-22deg) translateX(650%);
}

.button:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 80ms;
}

.text-link {
  transition:
    color var(--motion-fast) ease,
    gap var(--motion-base) var(--ease-emphasized);
}

.text-link:hover {
  gap: 12px;
}

/* ========================================================================== 
   Media cards and images
   ========================================================================== */

.media-card {
  transform: translateZ(0);
  transition:
    transform var(--motion-slow) var(--ease-emphasized),
    box-shadow var(--motion-slow) var(--ease-standard);
}

.media-card > img {
  transition:
    transform 900ms var(--ease-emphasized),
    filter 500ms ease;
}

.media-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(8, 34, 76, 0.18);
}

.media-card:hover > img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

@keyframes ultivo-badge-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

.media-card__badge {
  animation: ultivo-badge-float 4.8s ease-in-out infinite;
}

/* ========================================================================== 
   Cards and feature interactions
   ========================================================================== */

.service-card__icon,
.process-list__number,
.feature-item::before {
  transition:
    transform var(--motion-base) var(--ease-bounce),
    background-color var(--motion-base) ease,
    color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.service-card:hover .service-card__icon {
  transform: translateY(-3px) rotate(-4deg) scale(1.08);
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 12px 24px rgba(15, 78, 163, 0.22);
}

.service-card__index {
  transition:
    color var(--motion-base) ease,
    transform var(--motion-base) var(--ease-emphasized);
}

.service-card:hover .service-card__index {
  transform: translate(-2px, 2px) scale(1.08);
  color: rgba(15, 78, 163, 0.17);
}

.industry-card__number {
  transition:
    transform var(--motion-base) var(--ease-bounce),
    color var(--motion-fast) ease;
}

.industry-card:hover .industry-card__number {
  transform: translateX(5px);
  color: #ffb06f;
}

.process-list__item:hover .process-list__number {
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 10px 24px rgba(244, 124, 32, 0.26);
}

.feature-item {
  transition:
    transform var(--motion-base) var(--ease-emphasized),
    background-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.feature-item:hover {
  transform: translateY(-4px);
}

/* ========================================================================== 
   Lists, counters and supporting details
   ========================================================================== */

.check-list li::before {
  transition:
    transform var(--motion-base) var(--ease-bounce),
    background-color var(--motion-base) ease,
    color var(--motion-base) ease;
}

.check-list li:hover::before {
  transform: scale(1.12) rotate(-6deg);
  background: var(--color-primary);
  color: var(--color-white);
}

.trust-strip__item {
  transition:
    transform var(--motion-base) var(--ease-emphasized),
    background-color var(--motion-base) ease;
}

.trust-strip__item:hover {
  transform: translateY(-4px);
  background: rgba(15, 78, 163, 0.035);
}

.trust-strip__number {
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-bounce);
}

.trust-strip__item:hover .trust-strip__number {
  transform: scale(1.045);
  color: var(--color-accent);
}

/* ========================================================================== 
   Accordion
   ========================================================================== */

.accordion__item {
  transition:
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease,
    transform var(--motion-base) var(--ease-emphasized);
}

.accordion__item:hover,
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  transform: translateY(-2px);
  border-color: rgba(15, 78, 163, 0.2);
  box-shadow: 0 12px 32px rgba(11, 48, 93, 0.08);
}

.accordion__panel:not([hidden]) {
  transform-origin: top;
  animation: ultivo-accordion-open 340ms var(--ease-emphasized) both;
}

@keyframes ultivo-accordion-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================================== 
   CTA and decorative ambient movement
   ========================================================================== */

@keyframes ultivo-orbit-one {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-18px, 14px, 0) scale(1.05);
  }
}

@keyframes ultivo-orbit-two {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(20px, -12px, 0) scale(0.96);
  }
}

.section--blue::before,
.cta-section::before {
  animation: ultivo-orbit-one 11s ease-in-out infinite;
}

.cta-section::after {
  animation: ultivo-orbit-two 13s ease-in-out infinite;
}

/* ========================================================================== 
   Footer and back-to-top
   ========================================================================== */

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-standard);
}

.site-footer__links a:hover {
  transform: translateX(4px);
}

.social-links a:hover {
  animation: ultivo-social-pop 420ms var(--ease-bounce) both;
}

@keyframes ultivo-social-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  55% {
    transform: translateY(-5px) scale(1.08);
  }
  100% {
    transform: translateY(-3px) scale(1);
  }
}

.back-to-top.is-visible {
  animation: ultivo-back-to-top-in 420ms var(--ease-bounce) both;
}

@keyframes ultivo-back-to-top-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.78);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================================================== 
   AOS refinements
   ========================================================================== */

[data-aos] {
  will-change: opacity, transform;
}

[data-aos][data-aos][data-aos-duration="800"],
body[data-aos-duration="800"] [data-aos] {
  transition-duration: 800ms;
}

body[data-aos-easing="ease"] [data-aos],
[data-aos] {
  transition-timing-function: var(--ease-emphasized);
}

/* Keep staggered grids feeling intentional without requiring extra markup. */
.card-grid > [data-aos]:nth-child(2),
.industry-grid > [data-aos]:nth-child(2),
.feature-grid > [data-aos]:nth-child(2) {
  transition-delay: 80ms;
}

.card-grid > [data-aos]:nth-child(3),
.industry-grid > [data-aos]:nth-child(3),
.feature-grid > [data-aos]:nth-child(3) {
  transition-delay: 160ms;
}

.card-grid > [data-aos]:nth-child(4),
.industry-grid > [data-aos]:nth-child(4),
.feature-grid > [data-aos]:nth-child(4) {
  transition-delay: 240ms;
}

.card-grid > [data-aos]:nth-child(5),
.industry-grid > [data-aos]:nth-child(5) {
  transition-delay: 320ms;
}

.card-grid > [data-aos]:nth-child(6),
.industry-grid > [data-aos]:nth-child(6) {
  transition-delay: 400ms;
}

/* ========================================================================== 
   Touch devices
   ========================================================================== */

@media (hover: none) {
  .brand:hover .brand__logo,
  .primary-nav__link:hover,
  .media-card:hover,
  .service-card:hover .service-card__icon,
  .service-card:hover .service-card__index,
  .industry-card:hover .industry-card__number,
  .process-list__item:hover .process-list__number,
  .feature-item:hover,
  .trust-strip__item:hover,
  .trust-strip__item:hover .trust-strip__number,
  .site-footer__links a:hover {
    transform: none;
  }

  .button:hover::before {
    transform: skewX(-22deg) translateX(-220%);
  }
}

/* ========================================================================== 
   Reduced-motion accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__media img,
  .hero__overlay,
  .hero__scroll span,
  .hero__scroll-line,
  .media-card__badge,
  .section--blue::before,
  .cta-section::before,
  .cta-section::after {
    animation: none !important;
  }
}


.page-hero__media img { animation: ultivo-hero-zoom var(--motion-ambient) ease-in-out infinite alternate; }
.detail-card,.sector-card,.program-card,.value-card,.kicker-card,.contact-form { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .page-hero__media img { animation:none !important; }
}