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

@keyframes avatarFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(0, -16px, 0) rotate(2deg);
  }
}

@keyframes avatarWave {
  0%, 100% {
    transform: rotate(-42deg);
  }
  25% {
    transform: rotate(-72deg);
  }
  50% {
    transform: rotate(-34deg);
  }
  75% {
    transform: rotate(-66deg);
  }
}

@keyframes avatarGlow {
  from {
    opacity: 0.55;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes avatarBlink {
  0%, 46%, 54%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.12);
  }
}

@keyframes avatarShadow {
  0%, 100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.34;
    transform: translateX(-50%) scale(0.82);
  }
}

@keyframes avatarSpark {
  0%, 100% {
    opacity: 0.22;
    transform: translate3d(0, 0, 0) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate3d(8px, -10px, 0) scale(1.25);
  }
}

@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.965);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(0.965);
  }
}

@keyframes loaderGoldOrbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loaderGoldOrbitReverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@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%,
  34% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.84);
  }
  42% {
    opacity: 0.72;
    clip-path: inset(0 82% 0 0);
  }
  63% {
    opacity: 0.86;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.96);
  }
  75% {
    opacity: 0.46;
    clip-path: inset(0 0 0 32%);
  }
  88%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transform: translate(-50%, -50%) rotate(-45deg) scaleY(0.88);
  }
}

@keyframes cutBloom {
  0%,
  36% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.82);
    clip-path: inset(0 100% 0 0);
  }
  46% {
    opacity: 0.58;
    clip-path: inset(0 42% 0 0);
  }
  62% {
    opacity: 0.72;
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
    clip-path: inset(0 0 0 0);
  }
  76% {
    opacity: 0.38;
    clip-path: inset(0 0 0 38%);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.04);
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes cutDebris {
  0%,
  52% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-45deg) translateX(-18px) scale(0.86);
  }
  58% {
    opacity: 0.86;
  }
  82%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-45deg) translateX(22px) scale(1.06);
  }
}

@keyframes logoTopSlice {
  0%,
  55% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) skewX(0deg);
    filter: brightness(1) blur(0);
  }
  56% {
    opacity: 1;
    transform: translate(-78px, -68px) rotate(-6.3deg) skewX(-3.2deg) scale(0.98);
    filter: brightness(1.16) blur(0.35px) drop-shadow(0 26px 28px rgba(0, 0, 0, 0.36));
  }
  78% {
    opacity: 1;
    transform: translate(-108px, -96px) rotate(-7.2deg) skewX(-3.5deg) scale(0.97);
    filter: brightness(0.84) blur(0.72px) drop-shadow(0 30px 32px rgba(0, 0, 0, 0.38));
  }
  100% {
    opacity: 0;
    transform: translate(-108px, -96px) rotate(-7.2deg) skewX(-3.5deg) scale(0.97);
    filter: brightness(0.74) blur(0.82px) drop-shadow(0 30px 32px rgba(0, 0, 0, 0.38));
  }
}

@keyframes logoBottomSlice {
  0%,
  55% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) skewX(0deg);
    filter: brightness(1) blur(0);
  }
  56% {
    opacity: 1;
    transform: translate(78px, 68px) rotate(6.3deg) skewX(3.2deg) scale(0.98);
    filter: brightness(1.14) blur(0.35px) drop-shadow(0 -26px 28px rgba(0, 0, 0, 0.36));
  }
  78% {
    opacity: 1;
    transform: translate(108px, 96px) rotate(7.2deg) skewX(3.5deg) scale(0.97);
    filter: brightness(0.82) blur(0.72px) drop-shadow(0 -30px 32px rgba(0, 0, 0, 0.38));
  }
  100% {
    opacity: 0;
    transform: translate(108px, 96px) rotate(7.2deg) skewX(3.5deg) scale(0.97);
    filter: brightness(0.72) blur(0.82px) drop-shadow(0 -30px 32px rgba(0, 0, 0, 0.38));
  }
}

@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%;
  }
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  100% {
    transform: translate3d(2%, -3%, 0) scale(1.08) rotate(2deg);
  }
}

@keyframes gridScroll {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 60px, 0 0;
  }
}

@keyframes netDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-2.2%, 1.6%, 0);
  }
}

@keyframes nodeTwinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes clientsScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* RTL: drift the marquee the other direction so it reads naturally */
[dir="rtl"] .marquee__track {
  animation-name: clientsScrollRtl;
}

@keyframes clientsScrollRtl {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes ctaPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

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__ring::before {
  animation: loaderGoldOrbit 1.08s linear infinite;
}

.page-loader__ring::after {
  animation: loaderGoldOrbitReverse 1.55s linear infinite;
}

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

.page-loader__stage::before {
  animation: cutBloom 2.7s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}

.page-loader__stage::after {
  animation: cutDebris 2.7s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
}

.page-loader__slice--top {
  animation: logoTopSlice 2.7s cubic-bezier(0.16, 1, 0.18, 1) infinite both;
}

.page-loader__slice--bottom {
  animation: logoBottomSlice 2.7s cubic-bezier(0.16, 1, 0.18, 1) infinite both;
}

.page-loader__slash {
  animation: logoCut 2.7s cubic-bezier(0.65, 0, 0.35, 1) infinite 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),
.work-card:nth-child(2),
.process-step:nth-child(2),
.feature-card:nth-child(2),
.stat-card:nth-child(2) {
  transition-delay: 80ms;
}

.service-card:nth-child(3),
.process-step:nth-child(3),
.feature-card:nth-child(3),
.stat-card:nth-child(3) {
  transition-delay: 160ms;
}

.service-card:nth-child(4),
.work-card:nth-child(4),
.process-step:nth-child(4),
.feature-card:nth-child(4),
.stat-card:nth-child(4) {
  transition-delay: 240ms;
}

.service-card:nth-child(5),
.process-step:nth-child(5),
.feature-card:nth-child(5) {
  transition-delay: 320ms;
}

.service-card:nth-child(6),
.process-step:nth-child(6),
.feature-card:nth-child(6) {
  transition-delay: 400ms;
}

/* Directional reveal variants (premium SaaS-style entrances) */
.scroll-reveal--left {
  transform: translateX(-44px) scale(0.99);
}

.scroll-reveal--right {
  transform: translateX(44px) scale(0.99);
}

.scroll-reveal--scale {
  transform: scale(0.92);
}

.scroll-reveal--left.visible,
.scroll-reveal--right.visible,
.scroll-reveal--scale.visible {
  transform: translate(0, 0) scale(1);
}

@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;
  }
}