/* Premium motion — hero ambience, card hover glow, scroll reveal variants. */

@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, -6%) scale(1.05); }
  66% { transform: translate(-3%, 4%) scale(0.95); }
}

@keyframes orb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50% { transform: translateY(-24px) rotate(180deg); opacity: 1; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmer-sweep {
  0% { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(220%) skewX(-15deg); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.8; }
}

@keyframes hero-char-in {
  from {
    opacity: 0;
    transform: translateY(0.35em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes title-line-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes border-spin {
  to { transform: rotate(360deg); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes scroll-glow {
  0%, 100% { box-shadow: 0 0 12px var(--color-accent-glow); }
  50% { box-shadow: 0 0 24px var(--color-primary-glow), 0 0 8px var(--color-accent-glow); }
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue__icon {
    animation: scroll-cue-bounce 2s ease-in-out infinite;
  }

  .hero-scroll-cue.is-hidden .hero-scroll-cue__icon {
    animation: none;
  }
}

/* Hero ambience layer */
.hero-ambience {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: layout paint;
  transform: translateZ(0);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform, opacity;
  animation: aurora-drift 18s ease-in-out infinite, glow-pulse 8s ease-in-out infinite;
}

.hero-orb--1 {
  top: 10%;
  left: 5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
  animation-delay: 0s, 0s;
}

.hero-orb--2 {
  bottom: 5%;
  right: 15%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.3) 0%, transparent 70%);
  animation-delay: -6s, -2s;
}

.hero-orb--3 {
  top: 40%;
  right: 5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.25) 0%, transparent 70%);
  animation-delay: -12s, -4s;
}

.hero-mouse-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  z-index: 0;
  opacity: 0;
  will-change: transform;
}

.hero-banner:hover .hero-mouse-glow,
.hero-banner.is-loaded .hero-mouse-glow {
  opacity: 1;
}

/* Hero tech background — grid drift, beam, scanline, particles */
@keyframes hero-grid-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 40px 40px, 40px 40px; }
}

@keyframes hero-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.06); }
}

@keyframes hero-beam-rotate {
  from { transform: translate3d(-50%, -50%, 0) rotate(0deg); }
  to { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}

@keyframes hero-scan-sweep {
  0% { transform: translateY(-4vh); opacity: 0; }
  6% { opacity: 0.6; }
  94% { opacity: 0.35; }
  100% { transform: translateY(104vh); opacity: 0; }
}

@keyframes hero-line-fall {
  0% { transform: translateY(-20vh); opacity: 0; }
  8% { opacity: 0.45; }
  92% { opacity: 0.28; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes hero-particle-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.3;
  }
  50% {
    transform: translate3d(8px, -16px, 0);
    opacity: 0.75;
  }
}

@keyframes hero-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.35); opacity: 0.8; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-banner::before {
    animation: hero-grid-drift 28s linear infinite;
  }

  .hero-banner::after {
    animation: hero-glow-breathe 14s ease-in-out infinite;
  }

  /* Pause hero background motion once user scrolls past the fold */
  body.has-hero-fullscreen.is-hero-scrolled .hero-banner::before,
  body.has-hero-fullscreen.is-hero-scrolled .hero-banner::after,
  body.has-hero-fullscreen.is-hero-scrolled .hero-ambience,
  body.has-hero-fullscreen.is-hero-scrolled .hero-ambience * {
    animation-play-state: paused;
  }

  body.has-hero-fullscreen.is-hero-offscreen .hero-ambience,
  .hero-banner.hero-banner--offscreen .hero-ambience {
    visibility: hidden;
  }
}

.hero-tech-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120vmax;
  height: 120vmax;
  transform: translate3d(-50%, -50%, 0);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(59, 130, 246, 0.05) 24deg,
    transparent 48deg,
    rgba(6, 182, 212, 0.04) 96deg,
    transparent 132deg
  );
  opacity: 0.6;
  will-change: transform;
  animation: hero-beam-rotate 48s linear infinite;
}

.hero-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.18) 20%,
    rgba(59, 130, 246, 0.4) 50%,
    rgba(34, 211, 238, 0.18) 80%,
    transparent 100%
  );
  will-change: transform, opacity;
  animation: hero-scan-sweep 12s ease-in-out infinite;
  opacity: 0;
}

.hero-flow-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-flow-line {
  position: absolute;
  top: 0;
  width: 1px;
  height: 130%;
  left: calc(12% + var(--line-i, 0) * 26%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34, 211, 238, 0.35) 42%,
    rgba(59, 130, 246, 0.28) 58%,
    transparent 100%
  );
  opacity: 0;
  will-change: transform, opacity;
  animation: hero-line-fall 8s linear infinite;
  animation-delay: calc(var(--line-i, 0) * -1.6s);
}

.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.75);
  will-change: transform, opacity;
  animation: hero-particle-float 12s ease-in-out infinite;
  animation-delay: calc(var(--p-i, 0) * -1s);
}

.hero-particle:nth-child(1) { left: 8%; top: 22%; animation-duration: 12s; }
.hero-particle:nth-child(2) { left: 24%; top: 58%; animation-duration: 14s; }
.hero-particle:nth-child(3) { left: 42%; top: 32%; animation-duration: 11s; }
.hero-particle:nth-child(4) { left: 58%; top: 68%; animation-duration: 13s; }
.hero-particle:nth-child(5) { left: 74%; top: 28%; animation-duration: 12s; }
.hero-particle:nth-child(6) { left: 88%; top: 52%; animation-duration: 14s; }

.hero-nodes {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.85);
  will-change: transform, opacity;
  animation: hero-node-pulse 5s ease-in-out infinite;
  animation-delay: calc(var(--node-i, 0) * -0.7s);
}

.hero-node:nth-child(1) { left: 18%; top: 32%; }
.hero-node:nth-child(2) { left: 48%; top: 20%; }
.hero-node:nth-child(3) { left: 72%; top: 48%; }
.hero-node:nth-child(4) { left: 36%; top: 72%; }

@media (max-width: 991px), (hover: none) {
  .hero-tech-beam,
  .hero-flow-lines,
  .hero-mouse-glow {
    display: none;
  }

  .hero-orb--3,
  .hero-scanline {
    display: none;
  }
}

/* Hero character reveal */
.hero-banner h1 {
  perspective: none;
}

.hero-char {
  display: inline-block;
  opacity: 0;
  transform-origin: bottom center;
}

.hero-banner.is-loaded .hero-char {
  animation: hero-char-in 0.6s var(--ease-out-expo) calc(var(--char-i, 0) * 0.04s) forwards;
}

.text-shine {
  display: inline;
  background: linear-gradient(
    120deg,
    #f8fafc 0%,
    #60a5fa 25%,
    #22d3ee 50%,
    #818cf8 75%,
    #f8fafc 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease infinite, hero-char-in 0.8s var(--ease-out-expo) 0.15s backwards;
}

/* Button shimmer */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-120%) skewX(-15deg);
  pointer-events: none;
}

.btn-primary:hover::after {
  animation: shimmer-sweep 0.8s var(--ease-out-expo);
}

/* Section title flourish */
.section-header h2,
.container > h2:not(.visually-hidden) {
  position: relative;
  display: inline-block;
}

.section-header h2::after,
.container > h2:not(.visually-hidden)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out-expo);
}

.reveal.is-visible .section-header h2::after,
.reveal.is-visible .container > h2::after {
  transform: scaleX(1);
}

/* Premium scroll reveal — section children */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] .grid,
  [data-reveal] .split,
  [data-reveal] .carousel,
  [data-reveal] .accordion-faq {
    perspective: 1200px;
  }

  .reveal-child--header {
    transform: translateY(20px) scale(0.98);
    filter: blur(6px);
  }

  .reveal-child--left {
    transform: translateX(-48px) rotateY(10deg) scale(0.94);
    filter: blur(10px);
    transform-origin: left center;
  }

  .reveal-child--right {
    transform: translateX(48px) rotateY(-10deg) scale(0.94);
    filter: blur(10px);
    transform-origin: right center;
  }

  .reveal-child--up {
    transform: translateY(56px) scale(0.88);
    filter: blur(12px);
    transform-origin: center bottom;
  }

  .reveal-child--scale {
    transform: scale(0.82) translateY(32px);
    filter: blur(14px);
    transform-origin: center center;
  }

  .reveal-child--fade {
    transform: translateY(12px) scale(0.98);
    filter: blur(4px);
  }

  .reveal.is-visible .reveal-child--header {
    transition-timing-function: var(--ease-out-expo);
  }

  .reveal.is-visible .section-header h2.reveal-child::after,
  .reveal.is-visible .container > h2.reveal-child::after {
    animation: title-line-grow 0.9s var(--ease-out-expo) 0.15s backwards;
  }
}

/* Logo wall stagger pop */
.logo-wall ul > li.reveal-child {
  transform: scale(0.75) translateY(16px);
  filter: blur(6px);
}

.logo-wall.is-visible ul > li.reveal-child:hover {
  transform: translateY(-4px) scale(1.02);
  transition:
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal);
}

/* CTA block dramatic entrance */
.cta-block.reveal-child {
  transform: scale(0.9) translateY(40px);
  filter: blur(16px);
}

.reveal.is-visible .cta-block.reveal-child,
.reveal.is-visible .carousel.reveal-child,
.reveal.is-visible .accordion-item.reveal-child {
  transition: none;
}

.reveal.is-visible .cta-block.reveal-child {
  animation: cta-reveal-pop 1s var(--ease-out-expo) backwards;
  animation-delay: inherit;
}

@keyframes cta-reveal-pop {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(48px);
    filter: blur(16px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-4px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Carousel slide-in */
.carousel.reveal-child {
  transform: scale(0.92) translateY(36px);
  filter: blur(10px);
}

.reveal.is-visible .carousel.reveal-child {
  animation: carousel-reveal 0.9s var(--ease-out-expo) backwards;
  animation-delay: inherit;
}

@keyframes carousel-reveal {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(40px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* FAQ accordion items */
.accordion-item.reveal-child {
  transform: translateX(-24px) scale(0.98);
  filter: blur(6px);
  transform-origin: left center;
}

.reveal.is-visible .accordion-item.reveal-child {
  animation: accordion-slide-in 0.7s var(--ease-out-expo) backwards;
  animation-delay: inherit;
}

@keyframes accordion-slide-in {
  from {
    opacity: 0;
    transform: translateX(-32px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Card glow border on hover */

.tilt-card:hover::before,
.tilt-card.is-tilting::before {
  opacity: 1;
  animation: border-spin 3s linear infinite;
}

.case-study-card.tilt-card:hover .thumb-label {
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
  transform: translateY(-2px);
}

/* Hero media frame glow */
.hero-media::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--gradient-primary);
  opacity: 0.4;
  z-index: -1;
  filter: blur(20px);
  animation: glow-pulse 4s ease-in-out infinite;
}

/* Logo wall shimmer */
.logo-wall li {
  position: relative;
  overflow: hidden;
}

.logo-wall li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent);
  transform: translateX(-100%);
}

.logo-wall.is-visible li:hover::after {
  animation: shimmer-sweep 1.2s ease;
}

/* Testimonial quote accent */
.testimonial blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-family-display);
  font-size: 3rem;
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--space-2);
  animation: float-y 4s ease-in-out infinite;
}

/* CTA block animated border */
.cta-block {
  position: relative;
}

.cta-block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--color-primary), var(--color-accent), #818cf8, var(--color-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  animation: border-spin 8s linear infinite;
  pointer-events: none;
}

/* Scroll progress glow */
.scroll-progress {
  animation: scroll-glow 3s ease-in-out infinite;
}

/* Page header title */
.page-header h1 {
  background: linear-gradient(135deg, #f8fafc 0%, #94a3b8 60%, #60a5fa 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease infinite;
}

/* Site logo subtle glow */
.site-logo {
  transition: text-shadow var(--duration-normal);
}

.site-logo:hover {
  text-shadow: 0 0 20px var(--color-primary-glow);
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner::before,
  .hero-banner::after,
  .hero-tech-beam,
  .hero-scanline,
  .hero-flow-line,
  .hero-particle,
  .hero-node,
  .hero-orb,
  .text-shine,
  .btn-primary::after,
  .cta-block::after,
  .hero-media::after,
  .scroll-progress,
  .page-header h1,
  .testimonial blockquote::before,
  .reveal-child,
  .reveal.is-visible .cta-block.reveal-child,
  .reveal.is-visible .carousel.reveal-child,
  .reveal.is-visible .accordion-item.reveal-child {
    animation: none !important;
  }

  .hero-char {
    opacity: 1;
    animation: none !important;
  }

  .hero-mouse-glow {
    display: none;
  }

  .hero-scroll-cue__icon {
    animation: none !important;
  }
}