.page-hero[data-hero-motion] {
  --ring-strength: .65;
  --ambient-strength: .7;
  --reveal-distance: 12px;
  isolation: isolate;
}

.page-hero[data-hero-motion] .container > h1 {
  animation: inner-hero-heading 650ms cubic-bezier(.2, .65, .3, 1) both;
}

.page-hero[data-hero-motion] .container > p:last-child {
  animation: inner-hero-subtitle 800ms ease-out 150ms both;
}

.inner-hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.inner-hero-ambient::before,
.inner-hero-ambient::after {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse at 78% 45%, #36c5ed1a, transparent 55%);
  animation: inner-hero-glow 26s ease-in-out infinite;
}

.inner-hero-ambient::after {
  background: radial-gradient(ellipse at 66% 68%, #0875db24, transparent 48%);
  animation-duration: 34s;
  animation-delay: -12s;
  animation-direction: reverse;
}

.page-hero[data-hero-motion] .page-hero-orb {
  z-index: 0;
  pointer-events: none;
}

.inner-hero-ring {
  position: absolute;
  inset: -1px;
  border: 1px solid #72c6ed24;
  border-top-color: #72c6ed70;
  border-radius: 50%;
  animation: inner-hero-ring-turn 32s linear infinite, inner-hero-ring-breathe 11s ease-in-out infinite;
}

.inner-hero-ring-wide {
  inset: -85px;
  border-top-color: #72c6ed38;
  animation-duration: 46s, 13s;
  animation-direction: reverse, normal;
}

.inner-hero-ring-far {
  inset: -170px;
  border-top-color: #72c6ed30;
  animation-duration: 62s, 15s;
}

.inner-hero-ring-core::after {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  left: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #86d9f3;
  box-shadow: 0 0 10px #36c5ed50;
  animation: inner-hero-point-pulse 3.5s ease-in-out infinite;
}

.inner-hero-detail {
  position: absolute;
  right: 0;
  top: 50%;
  width: min(55%, 650px);
  height: 100%;
  transform: translateY(-50%);
  mask-image: linear-gradient(90deg, transparent, #000 25%);
}

.page-hero[data-hero-motion="about"] { --ambient-strength: .85; }
.page-hero[data-hero-motion="services"] { --ring-strength: .45; }

.inner-hero-network {
  fill: none;
  stroke: #72c6ed30;
  stroke-width: 1;
}

.inner-hero-packet {
  fill: #86d9f3;
  animation: inner-hero-data-flow 14s linear infinite;
}

.inner-hero-packet-secondary {
  animation-duration: 18s;
  animation-delay: -9s;
  animation-direction: reverse;
}

.inner-hero-grid {
  top: -15%;
  right: -4%;
  height: 130%;
  background-image: linear-gradient(#72c6ed12 1px, transparent 1px), linear-gradient(90deg, #72c6ed12 1px, transparent 1px);
  background-size: 42px 42px;
  animation: inner-hero-grid-drift 30s ease-in-out infinite;
}

.inner-hero-grid::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(110deg, transparent 35%, #86d9f30d 50%, transparent 65%);
  animation: inner-hero-light-sweep 22s ease-in-out infinite;
}

.inner-hero-geometry {
  fill: none;
  stroke: #72c6ed30;
  stroke-width: 1;
}

.inner-hero-shape {
  transform-box: fill-box;
  transform-origin: center;
  animation: inner-hero-geometry-drift 28s ease-in-out infinite;
}

.inner-hero-shape-secondary {
  animation-duration: 36s;
  animation-delay: -14s;
  animation-direction: reverse;
}

.inner-hero-node {
  fill: #86d9f3;
  transform-box: fill-box;
  transform-origin: center;
  animation: inner-hero-node-float var(--node-duration, 14s) ease-in-out var(--node-delay, 0s) infinite;
}

.page-hero[data-hero-motion="contact"],
.page-hero[data-hero-motion="legal"] {
  --ring-strength: .3;
  --ambient-strength: .5;
}

.page-hero[data-hero-motion="contact"] .inner-hero-ring,
.page-hero[data-hero-motion="legal"] .inner-hero-ring {
  animation-duration: 46s, 14s;
}

.page-hero[data-hero-motion="contact"] .inner-hero-ring-wide,
.page-hero[data-hero-motion="legal"] .inner-hero-ring-wide {
  animation-duration: 58s, 16s;
}

.page-hero[data-hero-motion="contact"] .inner-hero-ring-far,
.page-hero[data-hero-motion="legal"] .inner-hero-ring-far {
  animation-duration: 72s, 18s;
}

@keyframes inner-hero-heading {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes inner-hero-subtitle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes inner-hero-glow {
  0%, 100% { transform: translate(-12px, 6px) scale(1); opacity: calc(var(--ambient-strength) * .6); }
  50% { transform: translate(24px, -10px) scale(1.04); opacity: var(--ambient-strength); }
}

@keyframes inner-hero-ring-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes inner-hero-ring-breathe {
  0%, 100% { opacity: calc(var(--ring-strength) * .65); }
  50% { opacity: var(--ring-strength); }
}

@keyframes inner-hero-point-pulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50% { opacity: .9; transform: scale(1.1); }
}

@keyframes inner-hero-data-flow {
  0% { transform: translateX(0); opacity: 0; }
  12%, 88% { opacity: .65; }
  100% { transform: translateX(410px); opacity: 0; }
}

@keyframes inner-hero-grid-drift {
  0%, 100% { transform: translate(0, 0); opacity: .5; }
  50% { transform: translate(16px, -12px); opacity: .8; }
}

@keyframes inner-hero-light-sweep {
  0%, 100% { transform: translateX(-20%); opacity: .3; }
  50% { transform: translateX(20%); opacity: .65; }
}

@keyframes inner-hero-geometry-drift {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); opacity: .5; }
  50% { transform: translate(10px, -6px) rotate(3deg); opacity: .8; }
}

@keyframes inner-hero-node-float {
  0%, 100% { transform: translate(0, 4px); opacity: .2; }
  50% { transform: translate(6px, -8px); opacity: .6; }
}

@media (max-width: 700px) {
  .page-hero[data-hero-motion] {
    --ring-strength: .4;
    --ambient-strength: .45;
    --reveal-distance: 8px;
  }
  .inner-hero-detail { width: 70%; opacity: .55; }
  .inner-hero-ring-far { display: none; }
  .inner-hero-ambient::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero[data-hero-motion] *,
  .page-hero[data-hero-motion] *::before,
  .page-hero[data-hero-motion] *::after {
    animation: none !important;
  }
  .page-hero[data-hero-motion] .container > h1,
  .page-hero[data-hero-motion] .container > p:last-child {
    opacity: 1;
    transform: none;
  }
  .inner-hero-ambient::before,
  .inner-hero-ambient::after { opacity: .4; }
  .inner-hero-ring { opacity: var(--ring-strength); }
  .inner-hero-packet { opacity: .4; }
  .inner-hero-grid,
  .inner-hero-grid::after { opacity: .5; }
  .inner-hero-node { opacity: .3; }
}