/* Homepage avatar V3 — human-first composition with the avatar merged into the cinematic field. */
.story-page--avatar-v3 {
  overflow-x: clip;
}

.story-page--avatar-v3 .story-stack,
.story-page--avatar-v3 .story-logos {
  overflow-x: clip;
}

/* No scroll-driven sequence on this page: release the pin so the hero scrolls naturally. */
.story-page--avatar-v3 .story-hero-pin {
  height: auto;
}

.story-page--avatar-v3 .story-hero-pin .story-hero {
  position: relative;
  top: auto;
  height: auto;
  min-height: 100svh;
}

/* The cinematic header is sticky and in-flow (105px at desktop): fill the remaining viewport exactly. */
@media (min-width: 1121px) {
  .story-page--avatar-v3 .story-hero-pin .story-hero {
    min-height: calc(100svh - 105px);
  }

  /* Undo the fixed 630px deck stage sizing from the shared cinematic hero. */
  .story-page--avatar-v3 .story-hero__inner {
    width: var(--cb-shell);
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
  }

  .story-page--avatar-v3 .story-hero__trust {
    margin: clamp(10px, 1.6vh, 20px) auto 0;
  }

  /* The shared 930px trust grid lets the long last item overflow and clip below ~1500px wide. */
  .story-page--avatar-v3 .story-hero__trust {
    width: auto;
    max-width: var(--cb-shell);
    grid-template-columns: repeat(4, auto);
    justify-content: center;
  }

  .story-page--avatar-v3 .story-hero__trust > span:last-child {
    white-space: normal;
  }
}

/* styles.css switches the header to burger mode below 1321px while the cinematic
   desktop header is defined from 1121px up: the overlap left the nav permanently
   expanded. Restore the desktop header in that band. */
@media (min-width: 1121px) and (max-width: 1320px) {
  .story-page--avatar-v3 .menu-toggle {
    display: none;
  }

  .story-page--avatar-v3 .site-header__inner {
    width: calc(100% - 48px);
    margin: 0 24px;
    grid-template-columns: 200px minmax(440px, 1fr) auto;
    gap: 20px;
  }

  .story-page--avatar-v3 .site-header__inner::before {
    left: 220px;
  }

  .story-page--avatar-v3 .header-actions {
    gap: 20px;
    padding: 0 18px;
  }

  .story-page--avatar-v3 .site-nav,
  .story-page--avatar-v3 .header-actions {
    grid-column: auto;
  }

  .story-page--avatar-v3 .site-nav {
    flex-direction: row;
    width: auto;
  }

  .story-page--avatar-v3 .site-nav a,
  .story-page--avatar-v3 .site-nav .nav-trigger {
    width: auto;
    justify-content: center;
    background: transparent;
  }

  .story-page--avatar-v3 .login-link {
    display: inline;
  }

  .story-page--avatar-v3 .header-cta {
    flex: 0 1 auto;
  }

  .story-page--avatar-v3 .mega-layer {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 110;
    transform: translateX(-50%);
    grid-column: auto;
  }

  .story-page--avatar-v3 .mega-layer:not([data-active-menu="solutions"]) {
    width: min(calc(100vw - 48px), 780px);
    padding-top: 16px;
  }
}

.story-page--avatar-v3 .story-hero__inner {
  flex: 1 1 auto;
  grid-template-columns: minmax(560px, 1.02fr) minmax(500px, 0.98fr);
  grid-template-areas: "avatar copy";
  gap: clamp(24px, 3.4vw, 72px);
  padding-bottom: 0;
}

.story-page--avatar-v3 .story-hero__copy {
  justify-self: start;
  align-self: center;
  max-width: 610px;
  padding-left: 0;
}

.story-page--avatar-v3 .story-hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -120px 0 -130px -150px;
  pointer-events: none;
  background: radial-gradient(ellipse at 66% 48%, rgba(5, 13, 29, 0.82) 0%, rgba(5, 13, 29, 0.48) 40%, transparent 73%);
  filter: blur(18px);
}

.story-page--avatar-v3 .story-brand-lockup {
  justify-content: flex-start;
}

.story-page--avatar-v3 .story-brand-lockup__line {
  flex: 0 1 178px;
}

.story-page--avatar-v3 .story-avatar {
  width: min(100%, 720px);
  min-height: min(72vh, 780px);
  justify-self: center;
  align-self: end;
  margin-left: 0;
}

.story-page--avatar-v3 .story-avatar::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 2px;
  width: 520px;
  height: 126px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(91, 175, 255, 0.27) 0%, rgba(80, 84, 221, 0.13) 43%, transparent 72%);
  filter: blur(18px);
  transform: translateX(-50%);
}

.story-page--avatar-v3 .story-avatar::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 7%;
  width: 300px;
  height: 88%;
  pointer-events: none;
  opacity: 0.66;
  background: linear-gradient(180deg, transparent, rgba(91, 184, 255, 0.12) 38%, rgba(98, 77, 233, 0.14) 72%, transparent);
  filter: blur(32px);
  transform: translateX(-50%) skewX(-8deg);
}

.story-page--avatar-v3 .story-avatar__halo {
  left: 50%;
  top: 50%;
  width: 680px;
  height: 580px;
  opacity: calc(0.94 - var(--avatar-progress, 0) * 0.16);
  background:
    radial-gradient(circle at 46% 29%, rgba(130, 213, 255, 0.22), transparent 30%),
    radial-gradient(ellipse at 43% 57%, rgba(71, 157, 246, 0.26), transparent 45%),
    radial-gradient(ellipse at 43% 78%, rgba(111, 77, 255, 0.24), transparent 48%),
    radial-gradient(ellipse at 49% 52%, rgba(5, 16, 38, 0.3), transparent 68%);
  filter: blur(12px);
}

.story-page--avatar-v3 .story-avatar-v3__depth {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 620px;
  height: 520px;
  border-radius: 46% 54% 48% 52%;
  pointer-events: none;
  opacity: 0.78;
  background:
    linear-gradient(90deg, rgba(4, 12, 27, 0.78), transparent 18% 82%, rgba(4, 12, 27, 0.65)),
    linear-gradient(180deg, transparent 0 68%, rgba(4, 13, 29, 0.68) 91%, rgba(4, 12, 27, 0.96));
  filter: blur(8px);
  transform: translateX(-50%);
}

.story-page--avatar-v3 .story-avatar__image {
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: clamp(460px, min(33vw, 60vh), 620px);
  filter:
    saturate(0.96)
    contrast(1.03)
    drop-shadow(0 36px 46px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 34px rgba(91, 184, 255, 0.14));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.88) 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.88) 91%, transparent 100%);
}

.story-page--avatar-v3 .story-avatar__rings {
  left: 0;
  right: 0;
  opacity: 0.9;
}

.story-page--avatar-v3 .story-avatar__rings span {
  left: 50%;
  top: 59%;
  width: 675px;
  height: 246px;
  border-width: 1px;
  box-shadow:
    0 0 13px rgba(103, 199, 255, 0.26),
    inset 0 0 15px rgba(141, 91, 255, 0.11);
}

.story-page--avatar-v3 .story-avatar__rings--back span:nth-child(1) {
  --ring-angle: 17deg;
  --ring-scale: 0.94;
  top: 55%;
}

.story-page--avatar-v3 .story-avatar__rings--back span:nth-child(2) {
  --ring-angle: -15deg;
  --ring-scale: 0.83;
  top: 59%;
}

.story-page--avatar-v3 .story-avatar__rings--back span:nth-child(3) {
  --ring-angle: 34deg;
  --ring-scale: 0.68;
  top: 52%;
}

.story-page--avatar-v3 .story-avatar__rings--front {
  z-index: 7;
  clip-path: inset(53% -14% -18% -14%);
}

.story-page--avatar-v3 .story-avatar__rings--front span:nth-child(1) {
  --ring-angle: 13deg;
  top: 64%;
}

.story-page--avatar-v3 .story-avatar__rings--front span:nth-child(2) {
  --ring-angle: -19deg;
  top: 65%;
}

.story-page--avatar-v3 .story-avatar__cloud {
  z-index: 4;
  top: 62px;
  left: 18px;
  right: auto;
  opacity: 0.7;
  transform: scale(0.82);
  filter:
    blur(0.25px)
    drop-shadow(0 16px 28px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 24px rgba(122, 107, 255, 0.3));
}

.story-page--avatar-v3 .story-avatar__particles {
  z-index: 8;
  left: 0;
  right: 0;
}

.story-page--avatar-v3 .story-avatar-v3__energy {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.story-page--avatar-v3 .story-avatar-v3__energy span {
  --energy-length: 112px;
  --energy-angle: 0deg;
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(185, 231, 255, 0.8);
  border-radius: 50%;
  background: #d8f5ff;
  box-shadow: 0 0 7px #fff, 0 0 18px #75cfff, 0 0 34px rgba(132, 92, 255, 0.8);
  animation: story-avatar-v3-node 4.8s ease-in-out infinite;
}

.story-page--avatar-v3 .story-avatar-v3__energy span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: var(--energy-length);
  height: 1px;
  opacity: 0.48;
  transform-origin: left center;
  transform: rotate(var(--energy-angle));
  background: linear-gradient(90deg, rgba(147, 220, 255, 0.78), transparent);
  box-shadow: 0 0 8px rgba(120, 205, 255, 0.44);
}

.story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(1) { left: 3%; top: 27%; --energy-angle: 18deg; --energy-length: 150px; }
.story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(2) { left: 10%; top: 63%; --energy-angle: -13deg; --energy-length: 116px; animation-delay: -1.2s; }
.story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(3) { left: 31%; top: 14%; --energy-angle: 48deg; --energy-length: 84px; animation-delay: -2.3s; }
.story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(4) { right: 11%; top: 34%; --energy-angle: 164deg; --energy-length: 122px; animation-delay: -3.4s; }
.story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(5) { right: 2%; top: 70%; --energy-angle: 196deg; --energy-length: 146px; animation-delay: -0.7s; }
.story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(6) { left: 27%; bottom: 8%; --energy-angle: -76deg; --energy-length: 88px; animation-delay: -2.8s; }

@keyframes story-avatar-v3-node {
  0%, 100% { opacity: 0.28; transform: scale(0.74); }
  50% { opacity: 1; transform: scale(1.16); }
}

/* Scroll cue lives in the copy column, below the CTAs. */
.story-page--avatar-v3 .story-avatar__cue {
  position: static;
  display: inline-grid;
  grid-template-columns: 64px auto;
  align-items: center;
  gap: 14px;
  margin-top: clamp(26px, 4.6vh, 46px);
  color: rgba(207, 223, 244, 0.55);
}

.story-page--avatar-v3 .story-avatar__cue > span {
  width: 64px;
  height: 1px;
  overflow: hidden;
  background: rgba(145, 205, 247, 0.16);
}

.story-page--avatar-v3 .story-avatar__cue > span i {
  width: 100%;
  transition: none;
  animation: story-avatar-v3-cue 2.8s ease-in-out infinite;
}

@keyframes story-avatar-v3-cue {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

@media (max-width: 1280px) and (min-width: 1121px) {
  .story-page--avatar-v3 .story-hero__inner {
    grid-template-columns: minmax(480px, 1.02fr) minmax(450px, 0.98fr);
  }

  .story-page--avatar-v3 .story-avatar {
    width: min(100%, 610px);
  }

  .story-page--avatar-v3 .story-avatar__image {
    width: clamp(430px, min(37vw, 58vh), 520px);
  }

  .story-page--avatar-v3 .story-avatar__rings span {
    width: 590px;
  }
}

@media (max-width: 1120px) {
  .story-page--avatar-v3 .story-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "avatar";
  }

  .story-page--avatar-v3 .story-hero__copy {
    justify-self: stretch;
    padding-left: 0;
  }

  .story-page--avatar-v3 .story-avatar {
    width: min(100%, 710px);
    min-height: min(62vh, 590px);
    margin-left: 0;
    justify-self: center;
  }

  .story-page--avatar-v3 .story-avatar__image {
    left: 50%;
    width: min(70vw, 500px);
  }

  .story-page--avatar-v3 .story-avatar__halo,
  .story-page--avatar-v3 .story-avatar-v3__depth {
    left: 50%;
  }
}

@media (max-width: 760px) {
  .story-page--avatar-v3 .story-avatar {
    min-height: min(56vh, 480px);
  }

  .story-page--avatar-v3 .story-avatar__image {
    left: 50%;
    width: min(96vw, 390px);
  }

  .story-page--avatar-v3 .story-avatar__halo {
    left: 50%;
    width: 460px;
    height: 420px;
  }

  .story-page--avatar-v3 .story-avatar-v3__depth {
    left: 50%;
    width: 420px;
    height: 380px;
  }

  .story-page--avatar-v3 .story-avatar__rings {
    left: 0;
    right: 0;
  }

  .story-page--avatar-v3 .story-avatar__rings span {
    left: 50%;
    width: 470px;
    height: 178px;
  }

  .story-page--avatar-v3 .story-avatar__cloud {
    top: 24px;
    left: -2px;
    transform: scale(0.62);
    transform-origin: top left;
  }

  .story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(1),
  .story-page--avatar-v3 .story-avatar-v3__energy span:nth-child(4) {
    display: none;
  }

  .story-page--avatar-v3 .story-avatar__cue {
    margin-top: 20px;
  }
}

@media (max-width: 420px) {
  .story-page--avatar-v3 .story-avatar {
    min-height: min(52vh, 430px);
  }

  .story-page--avatar-v3 .story-avatar__image {
    width: min(98vw, 365px);
  }

  .story-page--avatar-v3 .story-avatar__rings span {
    width: 430px;
    height: 164px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-page--avatar-v3 .story-avatar-v3__energy span,
  .story-page--avatar-v3 .story-avatar__cue > span i {
    animation: none !important;
  }

  .story-page--avatar-v3 .story-avatar__cue > span i {
    transform: none;
    width: 40%;
  }
}