/* =========================================================
   FRAMER-INSPIRED SCROLL MOTION SYSTEM — HOMEPAGE ONLY
   Native CSS + JS, no runtime dependency.
   ========================================================= */
html {
  scroll-padding-top: 92px;
}

body.motion-ready {
  --scroll-progress: 0;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* Thin cinematic progress indicator */
.scroll-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: rgba(255,255,255,.04);
}
.scroll-progress > i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--scroll-progress));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #4f7cff, #8b5cf6 68%, #fff);
  box-shadow: 0 0 20px rgba(91,108,255,.46);
  will-change: transform;
}

/* Desktop chapter rail */
.scroll-rail {
  position: fixed;
  z-index: 70;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 5px;
  padding: 9px 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(5,7,11,.58);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}
.scroll-rail button {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.scroll-rail button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(1);
  background: #66717e;
  transition: width .25s ease, height .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.scroll-rail button:hover::before {
  width: 7px;
  height: 7px;
  background: #d5dce4;
}
.scroll-rail button.is-active::before {
  width: 8px;
  height: 8px;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(91,108,255,.12), 0 0 20px rgba(91,108,255,.55);
}
.scroll-rail button span {
  position: absolute;
  pointer-events: none;
  white-space: nowrap;
  right: 22px;
  top: 50%;
  transform: translate(8px,-50%);
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(4,6,10,.92);
  color: #cbd5e1;
  font: 700 8px/1 Space Grotesk, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.scroll-rail button:hover span,
.scroll-rail button:focus-visible span {
  opacity: 1;
  visibility: visible;
  transform: translate(0,-50%);
}

/* Active section status pill in header */
.scroll-status {
  display: none;
  align-items: center;
  gap: 8px;
  color: #8d99a8;
  font: 700 9px/1 Space Grotesk, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.scroll-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px rgba(91,108,255,.65);
}
.scroll-status b {
  color: #dbe2ea;
  font-weight: 700;
}

/* Current header link */
.nav a.is-active {
  color: #fff !important;
}
.nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Generic scene treatment */
.motion-section {
  --scene-p: 0;
  --scene-y: 0px;
  --scene-scale: 1;
  --scene-opacity: 1;
  isolation: isolate;
}
.motion-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  top: 12%;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate3d(-50%, var(--scene-glow-y, 0px), 0) scale(var(--scene-glow-scale, .72));
  background: radial-gradient(circle, rgba(91,108,255,.085), rgba(91,108,255,.025) 28%, transparent 68%);
  opacity: var(--scene-glow-opacity, .18);
  filter: blur(4px);
  will-change: transform, opacity;
}

/* Disable old binary reveal once the progressive system is live */
.motion-ready .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Smooth progressive children */
.scroll-motion-item {
  --sm-x: 0px;
  --sm-y: 0px;
  --sm-z: 0px;
  --sm-scale: 1;
  --sm-rotate-x: 0deg;
  --sm-rotate-y: 0deg;
  --sm-opacity: 1;
  --sm-blur: 0px;
  opacity: var(--sm-opacity);
  transform:
    perspective(1400px)
    translate3d(var(--sm-x), var(--sm-y), var(--sm-z))
    scale(var(--sm-scale))
    rotateX(var(--sm-rotate-x))
    rotateY(var(--sm-rotate-y));
  filter: blur(var(--sm-blur));
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
}

/* Headline clipping similar to premium Framer hero/section reveals */
.motion-heading {
  clip-path: inset(0 0 var(--heading-clip, 0%) 0 round 2px);
  transform: translate3d(0,var(--heading-y,0px),0);
  opacity: var(--heading-opacity,1);
  will-change: clip-path, transform, opacity;
}

/* Large section number watermark */
.motion-section-number {
  position: absolute;
  z-index: -1;
  top: 42px;
  right: max(20px, calc((100vw - var(--max))/2));
  color: rgba(255,255,255,.025);
  font: 700 clamp(88px, 12vw, 180px)/.8 Space Grotesk, sans-serif;
  letter-spacing: -.09em;
  user-select: none;
  pointer-events: none;
  transform: translate3d(var(--num-x,0px),0,0);
  opacity: var(--num-opacity,.8);
  will-change: transform, opacity;
}

/* Extra depth for cards */
.motion-card {
  position: relative;
  transform-style: preserve-3d;
}
.motion-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(360px circle at var(--card-x,50%) var(--card-y,50%),
      rgba(255,255,255,.075), transparent 48%);
  opacity: var(--card-glow,0);
  transition: opacity .25s ease;
}
.motion-card:hover::after {
  --card-glow: 1;
}

/* Film/image zoom reveal */
.motion-media {
  overflow: hidden;
}
.motion-media > img,
.motion-media > video {
  transform: translate3d(0,var(--media-y,0px),0) scale(var(--media-scale,1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Hero becomes a cinematic opening stage */
.hero {
  overflow: clip;
}
.hero .hero-copy {
  transform: translate3d(0,var(--hero-copy-y,0px),0);
  opacity: var(--hero-copy-opacity,1);
  will-change: transform, opacity;
}
.hero .ccc-shell {
  transform:
    perspective(1500px)
    translate3d(0,var(--hero-shell-y,0px),0)
    scale(var(--hero-shell-scale,1))
    rotateX(var(--hero-shell-rx,0deg))
    rotateY(var(--hero-shell-ry,0deg));
  will-change: transform;
}
.hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:min(980px,75vw);
  height:min(980px,75vw);
  right:-28vw;
  top:-20vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(91,108,255,.11),transparent 62%);
  transform:translate3d(0,var(--hero-glow-y,0px),0);
  will-change:transform;
}

/* Film sections: viewport reveal + rounded framing inspired by Framer modules */
.hero-film-frame,
.ccc-motion-frame {
  transform-origin: 50% 50%;
}
.hero-film-section,
#ccc {
  perspective: 1500px;
}

/* Cards enter as a staged deck */
.motion-stack-item {
  transform-origin: 50% 100%;
}

/* Horizontal logo rails gain a subtle continuous masked edge */
.tool-rail,
.llm-logos,
.hero-tags {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

/* Slight high-end depth on active section */
.motion-section.is-current .glass {
  border-color: rgba(255,255,255,.145);
}
.motion-section.is-current .section-head .eyebrow {
  text-shadow: 0 0 20px rgba(91,108,255,.24);
}

/* Scroll hint only in opening viewport */
.scroll-hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #6d7885;
  font: 700 8px/1 Space Grotesk,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: var(--scroll-hint-opacity,.75);
}
.scroll-hint i {
  position: relative;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.scroll-hint i::after {
  content:"";
  position:absolute;
  left:0;
  top:-50%;
  width:1px;
  height:50%;
  background:var(--orange);
  animation: genesisScrollHint 1.8s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes genesisScrollHint {
  0% { transform:translateY(0); opacity:0; }
  25% { opacity:1; }
  80%,100% { transform:translateY(300%); opacity:0; }
}

/* A light section-to-section divider grows as it enters */
.motion-section.section-line::before {
  transform-origin: 50% 50%;
  transform: scaleX(var(--line-scale, .2));
  opacity: var(--line-opacity,.3);
  will-change: transform, opacity;
}

/* Desktop scrollytelling enhancement:
   copy has a little more breathing room, media feels like a scene */
@media (min-width: 1101px) {
  .scroll-status { display:flex; }
  .section {
    padding-top: clamp(108px, 9vw, 150px);
    padding-bottom: clamp(108px, 9vw, 150px);
  }
  .section-head {
    margin-bottom: clamp(48px, 5vw, 72px);
  }
  .media-frame,
  .ccc-motion-frame,
  .hero-film-frame {
    box-shadow:
      0 40px 120px rgba(0,0,0,.34),
      0 0 0 1px rgba(255,255,255,.025);
  }
}

/* Tablet: preserve motion but remove the floating rail */
@media (max-width: 1199px) {
  .scroll-rail { display:none; }
  .scroll-status { display:none; }
}

/* Mobile: simpler transforms, same story */
@media (max-width: 760px) {
  .motion-section-number {
    top: 34px;
    right: 12px;
    font-size: 78px;
  }
  .motion-section::after {
    width: 110vw;
    top: 4%;
  }
  .scroll-motion-item {
    --sm-rotate-x: 0deg !important;
    --sm-rotate-y: 0deg !important;
  }
  .scroll-hint {
    display:none;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .scroll-motion-item,
  .motion-heading,
  .motion-media > img,
  .motion-media > video,
  .hero .hero-copy,
  .hero .ccc-shell,
  .motion-section-number,
  .motion-section::after {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
  }
  .scroll-hint { display:none; }
  .scroll-progress > i { transition:none; }
}
/* Framer-inspired display typography without changing body copy */
.display,
.panel-title,
.command-title strong,
.team-lead div strong,
.passport-card h4,
.service-card h3,
.founder-copy blockquote {
  font-family: Urbanist, Space Grotesk, Inter, sans-serif;
}