@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(1deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.72;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.42);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 24px rgba(57, 255, 20, 0.72);
  }
}

@keyframes contactFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes loaderRing {
  0% {
    transform: rotate(0deg) scale(0.96);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(0.96);
  }
}

@keyframes loaderLogo {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  45% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes loaderLine {
  0% {
    transform: translateX(-130%);
  }
  100% {
    transform: translateX(260%);
  }
}

@keyframes logoCut {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  10% {
    opacity: 1;
    clip-path: inset(0 82% 0 0);
  }
  62% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  76% {
    opacity: 1;
    clip-path: inset(0 0 0 32%);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

@keyframes logoTopSlice {
  0%,
  18% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
    filter: brightness(1);
  }
  38% {
    opacity: 1;
    transform: translate(-3px, -3px) rotate(-0.25deg);
    filter: brightness(1.08);
  }
  58% {
    opacity: 1;
    transform: translate(-8px, -8px) rotate(-0.8deg);
    filter: brightness(1.18);
  }
  74% {
    opacity: 1;
    transform: translate(-16px, -16px) rotate(-1.8deg);
    filter: brightness(1.28);
  }
  100% {
    opacity: 0;
    transform: translate(-64px, -64px) rotate(-4.8deg);
    filter: brightness(0.86);
  }
}

@keyframes logoBottomSlice {
  0%,
  18% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
    filter: brightness(1);
  }
  38% {
    opacity: 1;
    transform: translate(3px, 3px) rotate(0.25deg);
    filter: brightness(1.07);
  }
  58% {
    opacity: 1;
    transform: translate(8px, 8px) rotate(0.8deg);
    filter: brightness(1.15);
  }
  74% {
    opacity: 1;
    transform: translate(16px, 16px) rotate(1.8deg);
    filter: brightness(1.24);
  }
  100% {
    opacity: 0;
    transform: translate(64px, 64px) rotate(4.8deg);
    filter: brightness(0.84);
  }
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes revealGlow {
  0% {
    box-shadow: 0 0 0 rgba(57, 255, 20, 0);
  }
  55% {
    box-shadow: 0 0 34px rgba(57, 255, 20, 0.12);
  }
  100% {
    box-shadow: inherit;
  }
}

@keyframes liquidWave {
  0% {
    border-radius: 48% 52% 0 0;
    background-position: 0% 42%, 100% 52%, 20% 72%, 0% 50%;
  }
  50% {
    border-radius: 58% 42% 0 0;
    background-position: 100% 46%, 0% 58%, 86% 68%, 100% 50%;
  }
  100% {
    border-radius: 48% 52% 0 0;
    background-position: 0% 42%, 100% 52%, 20% 72%, 0% 50%;
  }
}

body:not(.is-loaded) .site-header,
body:not(.is-loaded) main,
body:not(.is-loaded) .site-footer,
body:not(.is-loaded) .floating-contact,
body:not(.is-loaded) .scroll-top {
  opacity: 0;
}

body.is-loaded main,
body.is-loaded .site-footer {
  animation: pageFadeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-loader__slice .page-loader__ring {
  animation: loaderRing 2.6s linear infinite;
}

.page-loader__stage {
  animation: loaderLogo 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-loader__slice--top {
  animation: logoTopSlice 1.34s cubic-bezier(0.22, 1, 0.36, 1) 560ms both;
}

.page-loader__slice--bottom {
  animation: logoBottomSlice 1.34s cubic-bezier(0.22, 1, 0.36, 1) 560ms both;
}

.page-loader__slash {
  animation: logoCut 1.18s cubic-bezier(0.65, 0, 0.35, 1) 610ms both;
}

.page-loader__line::before {
  animation: loaderLine 1.35s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.btn--primary::before,
.btn--primary::after {
  animation: liquidWave 2.8s ease-in-out infinite;
}

.btn--primary::after {
  animation-duration: 3.4s;
  animation-direction: reverse;
}

.device-card--phone,
.orbit-badge {
  animation: float 7s ease-in-out infinite;
}

.floating-contact__item {
  animation: contactFloat 5.6s ease-in-out infinite;
}

.floating-contact__item--email {
  animation-delay: 0.7s;
}

.orbit-badge--secure {
  animation-delay: 1.1s;
}

.eyebrow__dot {
  animation: pulseGlow 1.7s ease-in-out infinite;
}

.scroll-reveal {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(36px) scale(0.985);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.scroll-reveal.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.glass-card.scroll-reveal.visible,
.service-card.scroll-reveal.visible,
.project-card.scroll-reveal.visible,
.workflow-step.scroll-reveal.visible {
  animation: revealGlow 900ms ease both;
}

.hero__content.visible .eyebrow,
.hero__content.visible h1,
.hero__content.visible .hero__lead,
.hero__content.visible .hero__actions,
.hero__content.visible .hero__meta {
  animation: heroRise 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__content.visible h1 {
  animation-delay: 90ms;
}

.hero__content.visible .hero__lead {
  animation-delay: 170ms;
}

.hero__content.visible .hero__actions {
  animation-delay: 250ms;
}

.hero__content.visible .hero__meta {
  animation-delay: 330ms;
}

.hero__visual.visible .device-stack {
  animation: heroRise 950ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.service-card:nth-child(2),
.project-card:nth-child(2),
.workflow-step:nth-child(2) {
  transition-delay: 80ms;
}

.service-card:nth-child(3),
.project-card:nth-child(3),
.workflow-step:nth-child(3) {
  transition-delay: 160ms;
}

.service-card:nth-child(4),
.workflow-step:nth-child(4) {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}