/* Cinematic scroll layer — luminous, optimistic and shared across the whole site. */
:root {
  --spirit-blue: #102957;
  --spirit-sky: #79bfff;
  --spirit-violet: #726fa8;
  --spirit-gold: #e8ba67;
  --cinematic-x: 0px;
  --cinematic-y: 0px;
  --cinematic-z: 0px;
  --cinematic-rotate: 0deg;
  --cinematic-scale: 1;
  --cinematic-opacity: 1;
  --cinematic-glow: 0.25;
  --journey: 0;
}

.cosmic-scene {
  background:
    radial-gradient(ellipse at 17% 10%, rgba(225, 128, 49, 0.24), transparent 26%),
    radial-gradient(ellipse at 77% 29%, rgba(65, 126, 222, 0.22), transparent 40%),
    radial-gradient(ellipse at 28% 73%, rgba(85, 73, 139, 0.14), transparent 43%),
    linear-gradient(155deg, #030711 0%, #07132b 38%, #0c2145 66%, #050b1c 100%);
}

.cosmic-scene:before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-radial-gradient(
      circle at 52% 46%,
      transparent 0 84px,
      rgba(192, 229, 255, 0.045) 86px 87px
    ),
    conic-gradient(
      from calc(var(--journey) * 1turn) at 50% 50%,
      rgba(255, 255, 255, 0.025),
      transparent 17%,
      rgba(109, 216, 255, 0.05),
      transparent 55%,
      rgba(242, 211, 138, 0.055),
      transparent 86%
    );
  opacity: 0.66;
  transform: rotate(calc(var(--journey) * 10deg)) scale(1.08);
}

.cosmic-scene:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(1, 5, 15, 0.48),
    transparent 24% 74%,
    rgba(1, 5, 15, 0.36)
  );
  pointer-events: none;
}

.spirit-sun {
  position: absolute;
  left: 8vw;
  top: 6vh;
  width: clamp(210px, 31vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.61;
  background: radial-gradient(circle, #fff8de 0 2.5%, #ffbe6b92 8%, #d96b294c 24%, transparent 64%);
  filter: blur(2px);
  transform: translate3d(calc(var(--journey) * 28px), calc(var(--journey) * -16px), 0);
}

.aurora {
  position: absolute;
  width: 85vw;
  height: 32vh;
  border-radius: 50%;
  filter: blur(44px);
  mix-blend-mode: screen;
  opacity: 0.25;
  will-change: transform;
}
.aurora-a {
  left: -18vw;
  top: 34vh;
  background: linear-gradient(
    100deg,
    transparent 6%,
    #3b9f9c4b 30%,
    #3e83cf55 51%,
    #766aa545 76%,
    transparent 96%
  );
  transform: rotate(-12deg)
    translate3d(calc(var(--journey) * 55px), calc(var(--journey) * -28px), 0);
  animation: auroraBreath 13s ease-in-out infinite alternate;
}
.aurora-b {
  right: -25vw;
  bottom: 2vh;
  background: linear-gradient(
    95deg,
    transparent,
    #427fb34a 24%,
    #d28a3d40 54%,
    #705f9a38 76%,
    transparent
  );
  transform: rotate(13deg) translate3d(calc(var(--journey) * -45px), calc(var(--journey) * 30px), 0);
  animation: auroraBreath 16s ease-in-out -5s infinite alternate-reverse;
}

.earth-atmosphere {
  background:
    radial-gradient(ellipse at 70% 40%, rgba(84, 147, 229, 0.19), transparent 33%),
    radial-gradient(ellipse at 16% 25%, rgba(217, 111, 43, 0.15), transparent 40%),
    radial-gradient(ellipse at 45% 72%, rgba(98, 82, 154, 0.12), transparent 48%);
  opacity: 0.72;
  transform: translate3d(var(--earth-x, 0), calc(var(--earth-y, 0px) - var(--journey) * 22px), 0)
    scale(1.08);
}

.global-earth-wrap {
  position: absolute;
  right: -12vw;
  top: 15vh;
  width: min(74vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: calc(0.25 + var(--journey) * 0.1);
  transform: translate3d(calc(var(--journey) * -8vw), calc(var(--journey) * 9vh), 0)
    rotate(calc(-7deg + var(--journey) * 18deg));
  filter: drop-shadow(0 0 65px rgba(81, 137, 218, 0.24));
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle, #000 0 52%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0 52%, transparent 70%);
  will-change: transform, opacity;
}
.global-earth-wrap:after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(151, 194, 248, 0.28);
  border-radius: 50%;
  box-shadow:
    inset 30px -25px 70px rgba(1, 6, 20, 0.46),
    0 0 38px rgba(93, 151, 225, 0.2);
}
.global-earth {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 44%;
  filter: saturate(0.92) brightness(0.72) contrast(1.28);
  mix-blend-mode: normal;
}

.celestial-ring {
  position: absolute;
  right: -7vw;
  top: 20vh;
  width: min(63vw, 790px);
  aspect-ratio: 1;
  border: 1px solid rgba(226, 240, 255, 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 42px rgba(107, 216, 255, 0.08),
    inset 0 0 42px rgba(242, 211, 138, 0.06);
  transform: rotateX(66deg) rotateZ(calc(12deg + var(--journey) * 16deg));
}
.celestial-ring-b {
  width: min(72vw, 900px);
  top: 15vh;
  right: -11vw;
  border-style: dashed;
  border-color: rgba(242, 211, 138, 0.16);
  transform: rotateX(70deg) rotateZ(calc(-26deg - var(--journey) * 12deg));
}

.light-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  box-shadow: 0 0 26px currentColor;
  opacity: 0.62;
  animation: orbFloat 9s ease-in-out infinite alternate;
}
.light-orb-a {
  width: 9px;
  height: 9px;
  left: 17%;
  top: 62%;
  color: #8ceaff;
  background: currentColor;
}
.light-orb-b {
  width: 7px;
  height: 7px;
  right: 24%;
  top: 20%;
  color: #f3d98b;
  background: currentColor;
  animation-delay: -4s;
}

main {
  perspective: 1500px;
  transform-style: preserve-3d;
}
main > section {
  position: relative;
  transform-style: preserve-3d;
}
main > section:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88vw, 1120px);
  height: 72%;
  transform: translate(-50%, -50%) scale(calc(0.92 + var(--scene-energy, 0) * 0.08));
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(143, 220, 255, calc(0.025 + var(--scene-energy, 0) * 0.08)),
    transparent 68%
  );
  filter: blur(22px);
  pointer-events: none;
  opacity: 0.95;
}

.cinematic-content {
  transform: perspective(1500px)
    translate3d(var(--cinematic-x), var(--cinematic-y), var(--cinematic-z))
    rotateX(var(--cinematic-rotate)) scale(var(--cinematic-scale));
  opacity: var(--cinematic-opacity);
  filter: saturate(calc(0.88 + var(--cinematic-glow) * 0.25))
    brightness(calc(0.9 + var(--cinematic-glow) * 0.1));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.scene-near .cinematic-content {
  filter: saturate(1.12) brightness(1.02);
}
.scene-near .section-label {
  text-shadow: 0 0 24px rgba(242, 211, 138, 0.48);
}
.scene-near .card,
.scene-near .flow-step,
.scene-near .id-console {
  box-shadow:
    0 28px 80px rgba(6, 20, 52, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.22);
}

.automation-core,
.hero,
.manifesto,
.universe,
.flow,
.digital-id,
.identity,
.cta {
  text-shadow: 0 2px 22px rgba(5, 19, 47, 0.35);
}
.nav-wrap {
  background: linear-gradient(180deg, rgba(3, 10, 25, 0.94), rgba(6, 20, 44, 0.66), transparent);
}
.card,
.card-wide,
.id-console,
.flow-outcome {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(7, 25, 55, 0.6));
  border-color: rgba(160, 203, 247, 0.25);
  box-shadow:
    0 20px 55px rgba(1, 6, 18, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.14);
}
.automation-node {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(6, 22, 51, 0.66));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 18px 42px rgba(1, 7, 21, 0.38);
}
.button.ghost {
  background: rgba(9, 28, 61, 0.55);
  border-color: rgba(172, 212, 249, 0.25);
}
.button.gold {
  box-shadow: 0 14px 42px rgba(242, 201, 107, 0.25);
}
.footer {
  background: linear-gradient(180deg, rgba(5, 15, 34, 0.36), rgba(2, 7, 18, 0.78));
}
.earth-portrait img {
  opacity: 0.94;
  filter: brightness(0.78) saturate(0.92) contrast(1.17)
    drop-shadow(0 24px 42px rgba(0, 4, 14, 0.72));
  border-color: rgba(118, 167, 229, 0.46);
}

@keyframes auroraBreath {
  to {
    opacity: 0.62;
    filter: blur(54px);
    margin-top: 3vh;
  }
}
@keyframes orbFloat {
  to {
    transform: translate3d(28px, -38px, 0) scale(1.35);
  }
}

@media (max-width: 900px) {
  .global-earth-wrap {
    right: -32vw;
    top: 23vh;
    width: 105vw;
    opacity: calc(0.13 + var(--journey) * 0.08);
  }
  .celestial-ring {
    right: -28vw;
    width: 95vw;
    top: 29vh;
  }
  .celestial-ring-b {
    right: -36vw;
    width: 110vw;
    top: 23vh;
  }
  .spirit-sun {
    left: -7vw;
    top: 9vh;
    width: 55vw;
  }
  .cinematic-content {
    transform: translate3d(0, var(--cinematic-y), 0) scale(var(--cinematic-scale));
    filter: none;
  }
}

@media (max-width: 580px) {
  .cosmic-scene {
    background:
      radial-gradient(ellipse at 14% 10%, rgba(225, 128, 49, 0.19), transparent 27%),
      radial-gradient(ellipse at 74% 35%, rgba(65, 126, 222, 0.18), transparent 41%),
      linear-gradient(160deg, #030711, #08162f 51%, #071127);
  }
  .global-earth-wrap {
    right: -54vw;
    top: 25vh;
    width: 142vw;
    opacity: calc(0.12 + var(--journey) * 0.06);
    transform: translate3d(calc(var(--journey) * -12vw), calc(var(--journey) * 5vh), 0)
      rotate(calc(-7deg + var(--journey) * 12deg));
  }
  .celestial-ring {
    right: -47vw;
    top: 31vh;
    width: 130vw;
  }
  .celestial-ring-b {
    right: -60vw;
    top: 26vh;
    width: 152vw;
  }
  .aurora {
    width: 125vw;
    height: 27vh;
    filter: blur(35px);
    opacity: 0.35;
  }
  main > section:before {
    height: 58%;
    width: 110vw;
  }
  .cinematic-content {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --journey: 0 !important;
  }
  .cinematic-content {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .global-earth-wrap,
  .spirit-sun,
  .earth-atmosphere,
  .celestial-ring {
    transform: none !important;
  }
}

/* Keep sibling sections in normal hit-testing planes. Each visual scene retains its own perspective. */
main#top {
  perspective: none;
  transform-style: flat;
}
#ai-automation {
  transform-style: flat;
}
#ai-automation .automation-inner {
  transform: none !important;
  transform-style: flat;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto;
}