/* Motion layer. All effects are decorative and scoped to the homepage. */
.home-page .hero { background: var(--bg); }
.home-page .hero-layout, .home-page .hero-bottom { position: relative; z-index: 3; }
.home-page .hero-atmosphere { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.home-page .hero-monogram {
  z-index: 1;
  background: none;
  /* Blend the COMPLETE isolated artwork layer against the hero's opaque base.
     Blending only its animated child cannot reach the background across layers. */
  mix-blend-mode: screen;
  overflow: visible;
}
.home-page .hero-monogram::after { display: none; }
.home-page .hero-monogram .s-stage {
  position: absolute;
  width: 52%;
  height: 82%;
  top: 7%;
  right: 3%;
  transform: perspective(1400px) translate3d(var(--s-x, 0px), var(--s-y, 0px), 0)
    rotateX(var(--s-rx, 0deg)) rotateY(var(--s-ry, 0deg));
  transform-origin: center;
}
.home-page .hero-monogram .s-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: normal;
  opacity: 1;
  animation: s-breathe 9s ease-in-out infinite;
}
.technical-grid {
  position: absolute;
  inset: -15% -5% -45% 22%;
  background-image: linear-gradient(#689cdb13 1px, transparent 1px), linear-gradient(90deg, #689cdb13 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(950px) rotateX(34deg) rotateZ(-14deg) translate3d(var(--grid-x, 0px), 0, 0);
  mask-image: radial-gradient(ellipse at 67% 40%, #0009, transparent 64%);
  opacity: .8;
}
.ambient-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 77% 50%, #0b49ac45, transparent 43%), radial-gradient(ellipse at 52% 97%, #2365ae1c, transparent 48%);
  animation: light-breathe 10s ease-in-out infinite;
}
.signal-beams { position: absolute; inset: 0; }
.signal-beams span {
  position: absolute;
  top: -18%;
  width: 1px;
  height: 120%;
  background: linear-gradient(transparent 5%, #77c4ff20 40%, #77c4ff06 80%, transparent);
  transform: rotate(24deg);
  overflow: hidden;
}
.signal-beams span:nth-child(1) { left: 58%; }
.signal-beams span:nth-child(2) { left: 78%; }
.signal-beams span:nth-child(3) { left: 94%; }
.signal-beams span::after {
  content: '';
  position: absolute;
  top: -25%;
  width: 1px;
  height: 16%;
  background: linear-gradient(transparent, #b4e7ffb8, transparent);
  animation: beam-travel 7s linear infinite;
}
.signal-beams span:nth-child(2)::after { animation-delay: -3s; animation-duration: 9s; }
.signal-beams span:nth-child(3)::after { animation-delay: -5s; animation-duration: 11s; }
.home-page .hero-copy .gradient-text {
  background-size: 210% 100%;
  animation: title-spectrum 12s ease-in-out infinite;
}
.home-page .hero-caption .caption-line { position: relative; overflow: hidden; background: #678abd55; }
.home-page .hero-caption .caption-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #b9e8ff, transparent); animation: caption-signal 3.5s ease-in-out infinite; }
.home-page .scroll-circle { animation: scroll-nudge 3s ease-in-out infinite; }
.home-page .hero-eyebrow .spark { animation: status-breathe 3s ease-in-out infinite; }
.home-page .desktop-nav a { position: relative; }
.home-page .desktop-nav a::after { content: ''; position: absolute; bottom: 7px; left: 0; width: 100%; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.home-page .desktop-nav a:hover::after, .home-page .desktop-nav a[aria-current="location"]::after { transform: scaleX(1); }
.home-page .desktop-nav a[aria-current="location"] { color: var(--text); }
.home-page .button-primary { overflow: hidden; isolation: isolate; }
.home-page .button-primary::before { content: ''; position: absolute; inset: -70% auto -70% -65%; width: 45%; background: linear-gradient(90deg, transparent, #ffffff57, transparent); transform: translateX(-120%) rotate(23deg); z-index: -1; }
.home-page .button-primary:hover::before, .home-page .button-primary:focus-visible::before { animation: button-sheen .85s var(--ease); }
.home-page .hero .button-primary::before { animation: button-sheen 7s var(--ease) infinite; }
.home-page .spotlight {
  transform: perspective(1300px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease), border-color .35s, box-shadow .35s, opacity .75s var(--ease);
}
.home-page .spotlight.is-pending { transform: perspective(1300px) translateY(32px) rotateX(3deg); }
.home-page .spotlight::before { background: radial-gradient(600px circle at var(--pointer-x, 50%) var(--pointer-y, 0%), #619cff21, transparent 66%); }
.home-page .spotlight.pointer-active { border-color: #5c8fc67a; box-shadow: 0 18px 70px #02040855; }
.home-page .feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #abd6ff65, transparent);
  transform: scaleX(.4);
  opacity: .4;
  transition: transform .6s var(--ease), opacity .6s;
}
.home-page .feature-card:hover::after { transform: scaleX(1.5); opacity: 1; }
.home-page .section-heading.is-visible h2, .home-page .faq-heading.is-visible h2 { animation: headline-reveal .85s var(--ease) both; }
.home-page .section-heading.is-visible > p { animation: detail-reveal .95s .1s var(--ease) both; }
.home-page .feature-simple.is-visible .steps li { animation: detail-reveal .8s var(--ease) both; }
.home-page .feature-simple.is-visible .steps li:nth-child(2) { animation-delay: .12s; }
.home-page .feature-simple.is-visible .steps li:nth-child(3) { animation-delay: .24s; }
.home-page .network-origin { position: relative; overflow: hidden; box-shadow: 0 0 25px #327be614; }
.home-page .network-origin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, #8bbdff20 50%, transparent 75%); transform: translateX(-120%); animation: network-scan 6s ease-in-out infinite; }
.home-page .network-branches span { border-color: #4978a9; }
.home-page .network-branches span::after { content: ''; position: absolute; top: -2px; left: 0; width: 45%; height: 2px; background: linear-gradient(90deg, transparent, #a5dcff); opacity: 0; animation: packet-travel 4s linear infinite; }
.home-page .network-branches span:nth-child(2)::after { width: 2px; height: 40%; top: 0; left: -.5px; animation-name: packet-drop; background: linear-gradient(transparent, #a5dcff); }
.home-page .network-branches span:last-child::after { animation-delay: 1.7s; }
.home-page .network-nodes > span { animation: node-breathe 6s ease-in-out infinite; }
.home-page .network-nodes > span:nth-child(2) { animation-delay: -2s; }
.home-page .network-nodes > span:nth-child(3) { animation-delay: -4s; }
.home-page .privacy-visual { position: relative; overflow: hidden; }
.home-page .privacy-visual::after { content: ''; position: absolute; left: 0; right: 0; top: 10%; height: 1px; background: linear-gradient(90deg, transparent, #93caff66, transparent); animation: privacy-scan 7s ease-in-out infinite; }
.home-page .device { overflow: hidden; transition: background .4s, color .4s; }
.home-page .device::after { content: ''; position: absolute; inset: auto 20% 0; height: 2px; background: #7dbdff; box-shadow: 0 0 28px #74afff66; transform: scaleX(0); transition: transform .45s var(--ease); }
.home-page .device:hover::after { transform: scaleX(1); }
.home-page .device svg { transition: transform .55s var(--ease), color .35s; }
.home-page .device:hover svg { transform: translateY(-6px) scale(1.1); color: #b3ddff; }
.home-page .devices-grid.is-visible .device { animation: detail-reveal .8s var(--ease) both; }
.home-page .devices-grid.is-visible .device:nth-child(2) { animation-delay: .06s; }
.home-page .devices-grid.is-visible .device:nth-child(3) { animation-delay: .12s; }
.home-page .devices-grid.is-visible .device:nth-child(4) { animation-delay: .18s; }
.home-page .devices-grid.is-visible .device:nth-child(5) { animation-delay: .24s; }
.home-page .devices-grid.is-visible .device:nth-child(6) { animation-delay: .3s; }
.home-page .faq-list details { transition: border-color .4s, background .4s; }
.home-page .faq-list details[open] { border-bottom-color: #5587bd; background: linear-gradient(90deg, transparent, #5487cc08, transparent); }
.home-page .final-cta { isolation: isolate; }
.home-page .final-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 25% 100%, #285cbc2b, transparent 55%), radial-gradient(ellipse at 75% 100%, #277bb52b, transparent 55%); animation: closing-light 12s ease-in-out infinite; }
.home-page .final-cta::before { animation: closing-line 6s ease-in-out infinite; }
.home-page .footer-wordmark { background: linear-gradient(105deg, #121924 20%, #293b55 47%, #121924 65%); color: transparent; background-clip: text; -webkit-background-clip: text; background-size: 230% 100%; animation: wordmark-scan 16s ease-in-out infinite; }

@keyframes s-breathe { 0%,100% { transform: translate3d(0,0,0) rotate(-2deg); } 50% { transform: translate3d(0,-15px,0) rotate(1.5deg); } }
@keyframes light-breathe { 0%,100% { opacity: .62; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes beam-travel { to { transform: translateY(900%); } }
@keyframes title-spectrum { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes caption-signal { 0% { transform: translateX(-100%); } 70%,100% { transform: translateX(100%); } }
@keyframes scroll-nudge { 0%,70%,100% { transform: translateY(0); } 80% { transform: translateY(4px); } 90% { transform: translateY(-1px); } }
@keyframes status-breathe { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes button-sheen { 0%,72% { transform: translateX(-120%) rotate(23deg); } 100% { transform: translateX(580%) rotate(23deg); } }
@keyframes headline-reveal { from { opacity: .1; transform: translateY(16px); clip-path: inset(18% 0 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0); } }
@keyframes detail-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes network-scan { 0%,60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes packet-travel { 0%,20% { opacity: 0; transform: translateX(-30%); } 25% { opacity: 1; } 65% { opacity: 1; transform: translateX(140%); } 75%,100% { opacity: 0; transform: translateX(150%); } }
@keyframes packet-drop { 0%,10% { opacity: 0; transform: translateY(-40%); } 25% { opacity: 1; } 65% { opacity: 1; transform: translateY(130%); } 75%,100% { opacity: 0; transform: translateY(160%); } }
@keyframes node-breathe { 0%,25%,100% { border-color: #293955; } 45% { border-color: #5887c2; } }
@keyframes privacy-scan { 0%,35% { transform: translateY(0); opacity: 0; } 45% { opacity: .8; } 90%,100% { transform: translateY(140px); opacity: 0; } }
@keyframes closing-light { 0%,100% { opacity: .4; transform: translateX(-5%); } 50% { opacity: 1; transform: translateX(5%); } }
@keyframes closing-line { 0%,100% { opacity: .35; transform: scaleX(.8); } 50% { opacity: 1; transform: scaleX(1.1); } }
@keyframes wordmark-scan { 0%,35% { background-position: 100% 50%; } 85%,100% { background-position: 0% 50%; } }

/* Do not spend frames on scenes the visitor cannot see. */
.motion-ready .motion-scene:not(.is-in-view) *,
.motion-ready .motion-scene:not(.is-in-view) *::before,
.motion-ready .motion-scene:not(.is-in-view) *::after,
.motion-ready .motion-scene:not(.is-in-view)::before,
.motion-ready .motion-scene:not(.is-in-view)::after { animation-play-state: paused !important; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
.motion-paused .s-stage, .motion-paused .spotlight { transform: none !important; }
.motion-paused .hero-monogram img { transform: none !important; }

@media screen and (min-width: 901px) {
  .home-page .hero-monogram .s-stage { width: 48%; right: var(--page-gutter); }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .home-page .hero-monogram .s-stage { width: 52%; height: 72%; top: 16%; right: 1%; }
  .home-page .hero-monogram { opacity: .5; }
}
@media screen and (max-width: 600px) {
  .home-page .hero-monogram .s-stage { width: 290px; height: 290px; max-width: 82%; top: auto; bottom: 48px; right: 6%; }
  .technical-grid { inset: 30% -15% -30% 0; background-size: 52px 52px; opacity: .5; }
  .ambient-light { background: radial-gradient(ellipse at 67% 77%, #124ba838, transparent 45%); }
  .signal-beams { opacity: .45; }
  .signal-beams span:first-child { display: none; }
  .home-page .hero-monogram .s-stage img { animation-duration: 11s; }
  .home-page .spotlight { transform: none; }
  .home-page .spotlight.is-pending { transform: translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-enabled) .s-stage, html:not(.motion-enabled) .spotlight { transform: none !important; }
  html:not(.motion-enabled) .home-page .hero-monogram img { transform: none !important; }
  html:not(.motion-enabled) .technical-grid { transform: perspective(950px) rotateX(34deg) rotateZ(-14deg); }
}
@media print { .hero-atmosphere { display: none; } }