/* ============================================================
   AI1DESIGN — SERVICES.CSS
   Shared service-page animation + Byte divider layer
   ------------------------------------------------------------
   Purpose:
   - Keeps service-page motion separate from pages.css
   - Reuses one animation system across all service pages
   - Adds a sharp Byte divider between hero and details
   - Replays reveals when scrolling back up/down
   - Respects prefers-reduced-motion
============================================================ */

/* ============================================================
   1) SHARED REVEAL VARIABLES
============================================================ */

body.is-inner{
  --ai1svc-reveal-distance: 72px;
  --ai1svc-reveal-duration: 820ms;
  --ai1svc-reveal-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   2) GENERIC SERVICE REVEALS
============================================================ */

.ai1-services-js-active .ai1svc-reveal{
  opacity: 0;
  transition:
    opacity var(--ai1svc-reveal-duration) var(--ai1svc-reveal-ease),
    transform var(--ai1svc-reveal-duration) var(--ai1svc-reveal-ease);
  transition-delay: var(--ai1svc-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.ai1-services-js-active .ai1svc-reveal.is-inview{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1) !important;
}

/* Confident hero entrance */
.ai1-services-js-active .ai1svc-reveal-zoom{
  transform: translate3d(0, 28px, 0) scale(.965);
}

/* Main content from left */
.ai1-services-js-active .ai1svc-reveal-left{
  transform: translate3d(calc(var(--ai1svc-reveal-distance) * -1), 18px, 0);
}

/* Supporting content from right */
.ai1-services-js-active .ai1svc-reveal-right{
  transform: translate3d(var(--ai1svc-reveal-distance), 18px, 0);
}

/* Softer mini-card reveals */
.ai1-services-js-active .ai1svc-reveal-left-soft{
  transform: translate3d(-38px, 16px, 0);
}

.ai1-services-js-active .ai1svc-reveal-right-soft{
  transform: translate3d(38px, 16px, 0);
}

.ai1-services-js-active .ai1svc-reveal-up{
  transform: translate3d(0, 42px, 0);
}

/* When scrolling upwards, make hidden elements feel like they return
   from the direction of travel rather than always from below. */
body.ai1-scroll-up .ai1svc-reveal-up:not(.is-inview){
  transform: translate3d(0, -42px, 0);
}

body.ai1-scroll-up .ai1svc-reveal-left:not(.is-inview){
  transform: translate3d(calc(var(--ai1svc-reveal-distance) * -1), -18px, 0);
}

body.ai1-scroll-up .ai1svc-reveal-right:not(.is-inview){
  transform: translate3d(var(--ai1svc-reveal-distance), -18px, 0);
}

/* ============================================================
   3) SERVICE PAGE BYTE DIVIDER
   IMPORTANT: Byte itself is never scaled/blurred.
============================================================ */

.ai1-service-divider{
  position: relative;
  z-index: 30;
  height: 104px;
  margin: -52px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  isolation: isolate;
}

.ai1-service-divider-line{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: calc(100vw - 32px);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #ffe600,
    #39ff14,
    #00cfff,
    #ff4fd8,
    #ffe600
  );
  background-size: 400% 100%;
  box-shadow:
    0 0 22px rgba(57,255,20,.36),
    0 0 36px rgba(0,183,255,.26),
    0 10px 26px rgba(0,0,0,.28);

  /* Full line by default; JS-enabled pages animate it from the centre. */
  transform: translate(-50%, -50%) scaleX(1);
  transform-origin: center;
  transition:
    transform 900ms cubic-bezier(.22,1,.36,1),
    opacity 500ms ease;
  opacity: 1;

  animation: ai1svcDividerGradient 8s linear infinite;
}

.ai1-services-js-active .ai1-service-divider-line{
  transform: translate(-50%, -50%) scaleX(0);
  opacity: .5;
}

.ai1-services-js-active .ai1-service-divider-video{
  opacity: 0;
}

.ai1-service-divider.is-inview .ai1-service-divider-line{
  transform: translate(-50%, -50%) scaleX(1);
  opacity: 1;
}

.ai1-service-divider-video{
  position: relative;
  z-index: 2;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at center, #ffffff 0%, #dfefff 100%);
  border: 5px solid #ffffff;
  box-shadow:
    0 0 0 5px rgba(57,255,20,.26),
    0 0 28px rgba(57,255,20,.52),
    0 0 54px rgba(0,183,255,.30),
    0 18px 42px rgba(0,0,0,.34);

  /* Keep Byte sharp: opacity only, no transform/filter. */
  opacity: 1;
  transform: none !important;
  filter: none !important;
  will-change: opacity;
  transition: opacity 620ms ease 130ms;
}

.ai1-service-divider.is-inview .ai1-service-divider-video{
  opacity: 1;
  transform: none !important;
}

.ai1-service-divider-video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;

  /* Preserve the original framing, but never animate this transform. */
  transform: scale(1.12) !important;
  filter: none !important;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  will-change: auto;
}

/* ============================================================
   4) MINI-CARD STAGGER POLISH
============================================================ */

.ai1svc-reveal-card{
  transition-delay: var(--ai1svc-reveal-delay, 0ms);
}

/* Preserve existing hover effects after reveal. */
.ai1svc-reveal.is-inview:hover{
  will-change: auto;
}

/* ============================================================
   5) MOBILE TUNING
============================================================ */

@media (max-width: 900px){
  body.is-inner{
    --ai1svc-reveal-distance: 38px;
    --ai1svc-reveal-duration: 720ms;
  }

  .ai1-service-divider{
    height: 92px;
    margin: -46px 0;
  }

  .ai1-service-divider-video{
    width: 100px;
    height: 100px;
  }

  .ai1-service-divider-line{
    width: calc(100vw - 20px);
    height: 8px;
  }
}

@media (max-width: 560px){
  body.is-inner{
    --ai1svc-reveal-distance: 24px;
  }

  .ai1-service-divider{
    height: 82px;
    margin: -41px 0;
  }

  .ai1-service-divider-video{
    width: 88px;
    height: 88px;
    border-width: 4px;
  }

  .ai1-service-divider-line{
    height: 7px;
  }
}

/* ============================================================
   6) REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce){
  .ai1svc-reveal,
  .ai1-service-divider-line,
  .ai1-service-divider-video{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .ai1-service-divider-line{
    transform: translate(-50%, -50%) scaleX(1) !important;
  }

  .ai1-service-divider-video video{
    transform: scale(1.12) !important;
  }
}

/* ============================================================
   7) KEYFRAMES
============================================================ */

@keyframes ai1svcDividerGradient{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 400% 50%; }
}