/* =========================================================
   BOOMER AUTOMATION — HOME CSS
   File: home.v1.css
   Purpose: landing page specific sections, hero, loader,
   liquid effects, slider, process, and CTA.
========================================================= */

/* =========================================================
   LOADER
========================================================= */

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(54, 243, 255, 0.16), transparent 34%),
    #030712;
  transition: opacity 600ms ease, visibility 600ms ease;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-orb {
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 42% 58% 62% 38% / 42% 42% 58% 58%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9), transparent 16%),
    linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
  filter: drop-shadow(0 0 44px rgba(54, 243, 255, 0.42));
  animation: liquidMorph 2.8s ease-in-out infinite alternate, loaderFloat 1.8s ease-in-out infinite alternate;
}

.loader-brand {
  position: relative;
  top: 6rem;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.loader-line {
  position: relative;
  top: 8rem;
  width: 10rem;
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
}

.loader-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: loaderLine 1.25s ease-in-out infinite;
}

@keyframes loaderLine {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(240%);
  }
}

@keyframes loaderFloat {
  from {
    transform: translateY(-0.35rem) rotate(-2deg);
  }

  to {
    transform: translateY(0.35rem) rotate(2deg);
  }
}

/* =========================================================
   AMBIENT LIQUID BACKGROUND
========================================================= */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(124, 92, 255, 0.14), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(54, 243, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #030712 0%, #07111f 48%, #030712 100%);
}

.liquid {
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 42% 58% 68% 32% / 38% 46% 54% 62%;
  filter: blur(34px);
  opacity: 0.24;
  animation: liquidMorph 12s ease-in-out infinite alternate;
}

.liquid-one {
  top: 5%;
  left: -10%;
  background: var(--accent);
}

.liquid-two {
  top: 42%;
  right: -12%;
  background: var(--accent-2);
  animation-delay: -3s;
}

.liquid-three {
  bottom: -18%;
  left: 25%;
  background: var(--accent-3);
  animation-delay: -6s;
}

@keyframes liquidMorph {
  0% {
    border-radius: 42% 58% 68% 32% / 38% 46% 54% 62%;
  }

  50% {
    border-radius: 66% 34% 40% 60% / 58% 34% 66% 42%;
  }

  100% {
    border-radius: 38% 62% 52% 48% / 44% 60% 40% 56%;
  }
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: 7.5rem 0 4rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, 0.94) 0%, rgba(3, 7, 18, 0.62) 48%, rgba(3, 7, 18, 0.2) 100%),
    radial-gradient(circle at 20% 45%, rgba(54, 243, 255, 0.18), transparent 38%);
}

.hero-image-wrap {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center;
  opacity: 0.46;
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform;
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.82) 100%),
    radial-gradient(circle at 65% 48%, rgba(124, 92, 255, 0.28), transparent 30%);
}

.hero-content {
  width: var(--container);
  max-width: 850px;
  margin-inline: auto;
}

.hero h1 {
  max-width: 880px;
  margin-bottom: 1.2rem;
  font-size: clamp(3.2rem, 9vw, 7.8rem);
  line-height: 0.86;
  letter-spacing: -0.09em;
}

.hero-copy {
  max-width: 680px;
  margin-bottom: 1.7rem;
  color: var(--soft);
  font-size: clamp(1.06rem, 2vw, 1.35rem);
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.hero-contact-strip {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 700;
}

.hero-contact-strip a {
  transition: color var(--transition-fast);
}

.hero-contact-strip a:hover {
  color: var(--accent);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
}

.scroll-cue span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--accent);
  animation: scrollCue 1.5s ease-in-out infinite;
}

@keyframes scrollCue {
  0% {
    opacity: 0;
    transform: translateY(-0.7rem);
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(0.7rem);
  }
}

/* =========================================================
   TRANSFORMATION SECTION
========================================================= */

.transformation {
  position: relative;
  overflow: hidden;
}

.automation-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.2rem;
  align-items: stretch;
}

.flow-column {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px);
}

.flow-column p {
  position: relative;
  margin: 0.65rem 0;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--soft);
  animation: flowItem 5s ease-in-out infinite;
}

.flow-column p:nth-child(3) {
  animation-delay: 0.35s;
}

.flow-column p:nth-child(4) {
  animation-delay: 0.7s;
}

.flow-column p:nth-child(5) {
  animation-delay: 1.05s;
}

.flow-column-after p {
  background: rgba(54, 243, 255, 0.09);
  color: var(--text);
}

.flow-label {
  display: inline-block;
  margin-bottom: 0.7rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flow-pulse {
  position: relative;
  width: 2px;
  min-height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 30px rgba(54, 243, 255, 0.7);
}

.flow-pulse::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 28px rgba(54, 243, 255, 0.95);
  transform: translateX(-50%);
  animation: pulseTravel 3s ease-in-out infinite;
}

@keyframes pulseTravel {
  0% {
    top: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    top: calc(100% - 1rem);
    opacity: 0;
  }
}

@keyframes flowItem {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0.25rem);
  }
}

/* =========================================================
   SERVICES SLIDER
========================================================= */

.services {
  overflow: hidden;
}

.service-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 42vw);
  gap: 1rem;
  width: min(100%, 1440px);
  margin: 2.2rem auto 0;
  padding: 0 1rem 1.2rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(54, 243, 255, 0.55) rgba(255, 255, 255, 0.08);
}

.service-slide {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 2rem;
  overflow: hidden;
  scroll-snap-align: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}

.service-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 18, 0.08) 0%, rgba(3, 7, 18, 0.94) 72%),
    radial-gradient(circle at 40% 30%, rgba(54, 243, 255, 0.2), transparent 40%);
}

.service-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-slide:hover img {
  transform: scale(1.08);
}

.service-slide-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.2rem, 3vw, 2rem);
}

.service-slide-content span {
  color: var(--accent);
  font-weight: 950;
}

.service-slide-content h3 {
  max-width: 11ch;
  margin: 0.45rem 0 0.8rem;
  font-size: clamp(1.8rem, 3.4vw, 3.1rem);
  line-height: 0.92;
  letter-spacing: -0.07em;
}

.service-slide-content p {
  max-width: 520px;
  margin-bottom: 0;
  color: var(--soft);
}

/* =========================================================
   SYSTEMS SECTION
========================================================= */

.systems {
  position: relative;
  overflow: hidden;
}

.systems-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.systems-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;

  /* Shared orbit size.
     This only affects the AI orbit visual and does not change
     the rest of the page layout. */
  --home-orbit-size: clamp(19rem, 42vw, 31rem);
}

.system-core {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(9rem, 26vw, 16rem);
  height: clamp(9rem, 26vw, 16rem);
  border: 1px solid rgba(54, 243, 255, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.26), transparent 20%),
    linear-gradient(135deg, rgba(54, 243, 255, 0.24), rgba(124, 92, 255, 0.22));
  box-shadow:
    inset 0 0 50px rgba(255, 255, 255, 0.07),
    0 0 90px rgba(54, 243, 255, 0.22);
  animation: coreFloat 4s ease-in-out infinite alternate;
}

.system-core span {
  font-size: clamp(2.4rem, 8vw, 5rem);
  font-weight: 950;
  letter-spacing: -0.1em;
  color: var(--text);
}

/* Shared orbit base.
   Both orbit paths are the same size and centered on the AI core.
   The overlap comes from opposite diagonal tilts, not from making
   one ring smaller than the other. */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--home-orbit-size);
  height: var(--home-orbit-size);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
}

/* Glowing moving point on each orbit. */
.orbit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 30px rgba(54, 243, 255, 0.9);
  transform: translateY(-50%);
}

/* First orbit.
   Same size as orbit two, tilted one way around the AI core. */
.orbit-one {
  z-index: 2;
  border-color: rgba(54, 243, 255, 0.28);
  box-shadow:
    inset 0 0 70px rgba(54, 243, 255, 0.06),
    0 0 70px rgba(54, 243, 255, 0.1);
  animation: orbitOneSpin 13s linear infinite;
}

/* Second orbit.
   Same size as orbit one, tilted the opposite way around the AI core. */
.orbit-two {
  z-index: 3;
  border-color: rgba(124, 92, 255, 0.3);
  box-shadow:
    inset 0 0 60px rgba(124, 92, 255, 0.06),
    0 0 60px rgba(124, 92, 255, 0.1);
  animation: orbitTwoSpin 10s linear infinite reverse;
}

/* Purple moving point for the second orbit. */
.orbit-two::before {
  background: var(--accent-2);
  box-shadow: 0 0 30px rgba(124, 92, 255, 0.9);
}

/* First overlapping orbit animation.
   The ring is centered, flattened into an ellipse, tilted,
   and then rotated so the glowing point travels around the AI core. */
@keyframes orbitOneSpin {
  from {
    transform: translate(-50%, -50%) rotate(-26deg) scaleY(0.48) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-26deg) scaleY(0.48) rotate(360deg);
  }
}

/* Second overlapping orbit animation.
   Same size, opposite tilt, reverse movement. */
@keyframes orbitTwoSpin {
  from {
    transform: translate(-50%, -50%) rotate(26deg) scaleY(0.48) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(26deg) scaleY(0.48) rotate(360deg);
  }
}

@keyframes coreFloat {
  from {
    transform: translateY(-0.4rem);
  }

  to {
    transform: translateY(0.4rem);
  }
}

.feature-list {
  display: grid;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--soft);
}

.feature-list li::before {
  content: "";
  position: absolute;
  top: 0.72rem;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(54, 243, 255, 0.8);
}

/* =========================================================
   PROCESS
========================================================= */

.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
}

.process-track::before {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(54, 243, 255, 0.16), transparent);
  animation: processScan 4.5s ease-in-out infinite;
}

.process-step {
  position: relative;
  min-height: 280px;
  padding: 1.35rem;
  background: rgba(3, 7, 18, 0.76);
}

.process-step span {
  color: var(--accent);
  font-weight: 950;
}

.process-step h3 {
  margin: 5rem 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  letter-spacing: -0.06em;
}

.process-step p {
  margin-bottom: 0;
}

@keyframes processScan {
  0% {
    transform: translateX(0);
  }

  55%,
  100% {
    transform: translateX(390%);
  }
}

/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 10% 5%;
  z-index: -1;
  border-radius: 3rem;
  background:
    radial-gradient(circle at 30% 35%, rgba(54, 243, 255, 0.2), transparent 36%),
    radial-gradient(circle at 70% 55%, rgba(124, 92, 255, 0.22), transparent 38%);
  filter: blur(10px);
}

.final-cta-inner {
  max-width: 900px;
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 2.4rem;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.final-cta h2 {
  max-width: 800px;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
}

.final-cta p {
  max-width: 620px;
  margin-bottom: 1.5rem;
}

/* =========================================================
   RESPONSIVE HOME
========================================================= */

@media (max-width: 980px) {
  .service-slider {
    grid-auto-columns: minmax(300px, 78vw);
  }

  .systems-grid {
    grid-template-columns: 1fr;
  }

  .systems-visual {
    min-height: 380px;
    --home-orbit-size: clamp(18rem, 70vw, 28rem);
  }

  .process-track {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .hero {
    align-items: end;
    min-height: 100svh;
    padding: 7rem 0 6.5rem;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(3, 7, 18, 0.38) 0%, rgba(3, 7, 18, 0.96) 70%),
      radial-gradient(circle at 50% 35%, rgba(54, 243, 255, 0.18), transparent 38%);
  }

  .hero-image {
    height: 105%;
    opacity: 0.54;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .hero-contact-strip {
    font-size: 0.88rem;
  }

  .scroll-cue {
    display: none;
  }

  .automation-flow {
    grid-template-columns: 1fr;
  }

  .flow-pulse {
    width: 100%;
    min-height: 2px;
    height: 2px;
  }

  .flow-pulse::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: pulseTravelMobile 3s ease-in-out infinite;
  }

  .service-slider {
    grid-auto-columns: minmax(282px, 86vw);
    padding-inline: 0.85rem;
  }

  .service-slide {
    min-height: 470px;
  }

  .systems-visual {
    --home-orbit-size: clamp(16rem, 78vw, 22rem);
  }

  .system-core {
    width: clamp(8rem, 42vw, 11rem);
    height: clamp(8rem, 42vw, 11rem);
  }

  .process-track {
    grid-template-columns: 1fr;
  }

  .process-step {
    min-height: 230px;
  }

  .process-step h3 {
    margin-top: 3rem;
  }

  .final-cta-inner {
    border-radius: 1.6rem;
  }
}

@keyframes pulseTravelMobile {
  0% {
    left: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 1rem);
    opacity: 0;
  }
}