/* =========================================================
   ROUND A5 - ABOUT HERO IMPACT ALIGNMENT
   ========================================================= */

.about-hero-visual[data-about-hero-animation] {
  --about-logo-impact-x: 86.8%;
  --about-logo-impact-y: 61.2%;
  --about-logo-progress: 0;
  --about-logo-scale: 0.965;
  --about-tech-progress: 0;
}

.about-hero-visual[data-about-hero-animation] .about-comet-canvas {
  z-index: 1;
}

.about-hero-visual[data-about-hero-animation] .about-hero-logo-stage {
  z-index: 3;
  opacity: var(--about-logo-progress);
  transform: translateY(-8px) scale(var(--about-logo-scale));
  transform-origin: var(--about-logo-impact-x) var(--about-logo-impact-y);
  will-change: opacity, transform, filter;
}

.about-hero-visual[data-about-hero-animation] .about-hero-logo {
  transition: none;
}

.about-logo-impact-anchor {
  position: absolute;
  top: var(--about-logo-impact-y);
  left: var(--about-logo-impact-x);
  z-index: 8;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.about-hero-visual[data-about-hero-debug='true'] .about-logo-impact-anchor {
  width: 12px;
  height: 12px;
  border: 1px solid #fff;
  background: #22d3ee;
  box-shadow: 0 0 0 5px rgba(34, 211, 238, .25), 0 0 22px rgba(34, 211, 238, .9);
}

.about-hero-visual[data-about-hero-debug='true'] .about-logo-impact-anchor::before,
.about-hero-visual[data-about-hero-debug='true'] .about-logo-impact-anchor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 255, 255, .88);
  transform: translate(-50%, -50%);
}

.about-hero-visual[data-about-hero-debug='true'] .about-logo-impact-anchor::before { width: 34px; height: 1px; }
.about-hero-visual[data-about-hero-debug='true'] .about-logo-impact-anchor::after { width: 1px; height: 34px; }

/* =========================================================
   ROUND A5 - ABOUT HERO CONSTELLATIONS
   ========================================================= */

.about-constellation {
  position: absolute;
  z-index: 2;
  display: block;
  overflow: visible;
  opacity: .78;
  pointer-events: none;
}

.about-constellation--southern-cross {
  top: 7%;
  left: 5.5%;
  width: clamp(82px, 19%, 126px);
}

.about-constellation--three-marias {
  top: 8%;
  right: 6%;
  width: clamp(104px, 23%, 154px);
}

.about-constellation__line {
  fill: none;
  stroke: rgba(167, 139, 250, .24);
  stroke-width: 1;
  stroke-linecap: round;
}

.about-constellation__star {
  fill: #fff;
  filter: drop-shadow(0 0 4px rgba(103, 232, 249, .94));
  transform-box: fill-box;
  transform-origin: center;
  animation: about-star-twinkle 3.4s ease-in-out infinite;
}

.about-constellation__star:nth-of-type(2) { animation-delay: -.7s; }
.about-constellation__star:nth-of-type(3) { animation-delay: -1.55s; }
.about-constellation__star:nth-of-type(4) { animation-delay: -2.15s; }
.about-constellation__star:nth-of-type(5) { animation-delay: -2.8s; }
.about-constellation__star:nth-of-type(6) { animation-delay: -1.1s; }

@keyframes about-star-twinkle {
  0%, 100% { opacity: .46; transform: scale(.84); }
  48% { opacity: 1; transform: scale(1.2); }
  62% { opacity: .72; transform: scale(1); }
}

/* =========================================================
   ROUND A5 - ABOUT HERO TECHNOLOGY EFFECT
   ========================================================= */

.about-logo-tech-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  opacity: var(--about-tech-progress);
  pointer-events: none;
}

.about-logo-tech-orbit,
.about-logo-tech-pulse {
  position: absolute;
  top: var(--about-logo-impact-y);
  left: var(--about-logo-impact-x);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.about-logo-tech-orbit {
  width: 86px;
  height: 86px;
  border: 1px solid rgba(167, 139, 250, .5);
  box-shadow: inset 0 0 18px rgba(34, 211, 238, .12), 0 0 22px rgba(139, 92, 246, .16);
  animation: about-tech-orbit 3.8s linear infinite;
}

.about-logo-tech-orbit::before,
.about-logo-tech-orbit::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px rgba(103, 232, 249, .95);
}

.about-logo-tech-orbit::before { top: 8px; left: 12px; width: 4px; height: 4px; }
.about-logo-tech-orbit::after { right: 4px; bottom: 22px; width: 3px; height: 3px; }

.about-logo-tech-pulse {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(34, 211, 238, .75);
  box-shadow: 0 0 22px rgba(34, 211, 238, .35);
  animation: about-tech-pulse 1.9s ease-out infinite;
}

.about-logo-tech-scan {
  position: absolute;
  top: 18%;
  right: 8%;
  left: 7%;
  height: 2px;
  opacity: .8;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .18), rgba(255, 255, 255, .84), rgba(167, 139, 250, .26), transparent);
  box-shadow: 0 0 16px rgba(34, 211, 238, .34);
  animation: about-tech-scan 2.7s cubic-bezier(.3, .1, .35, 1) infinite;
}

.about-logo-tech-circuit {
  position: absolute;
  height: 1px;
  border-radius: 999px;
  opacity: .62;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .62), rgba(167, 139, 250, .18), transparent);
  animation: about-tech-circuit 2.6s ease-in-out infinite;
}

.about-logo-tech-circuit--one { top: 38%; left: 14%; width: 30%; }
.about-logo-tech-circuit--two { top: 61%; right: 17%; width: 26%; animation-delay: -.85s; }
.about-logo-tech-circuit--three { top: 72%; left: 28%; width: 22%; animation-delay: -1.7s; }

.about-hero-visual.is-impact .about-hero-logo,
.about-hero-visual.is-logo-active .about-hero-logo {
  animation: about-logo-cosmic-breathe 2.8s ease-in-out infinite;
}

@keyframes about-tech-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) scaleX(1.04); }
  to { transform: translate(-50%, -50%) rotate(360deg) scaleX(1.04); }
}

@keyframes about-tech-pulse {
  0% { opacity: .72; transform: translate(-50%, -50%) scale(.5); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

@keyframes about-tech-scan {
  0% { opacity: 0; transform: translateY(-10px); }
  14% { opacity: .85; }
  72% { opacity: .52; }
  100% { opacity: 0; transform: translateY(118px); }
}

@keyframes about-tech-circuit {
  0%, 100% { opacity: .18; transform: scaleX(.45); }
  50% { opacity: .76; transform: scaleX(1); }
}

@keyframes about-logo-cosmic-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 12px rgba(167, 139, 250, .25)) drop-shadow(0 0 28px rgba(34, 211, 238, .11));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(167, 139, 250, .44)) drop-shadow(0 0 38px rgba(34, 211, 238, .23));
  }
}

.about-hero-visual[data-about-test-mode='true'] .about-logo-tech-layer *,
.about-hero-visual[data-about-test-mode='true'] .about-hero-logo,
.about-hero-visual[data-about-test-mode='true'] .about-constellation__star {
  animation-play-state: paused !important;
}

@media (max-width: 1100px) {
  .about-constellation--southern-cross { top: 6%; left: 5%; }
  .about-constellation--three-marias { top: 7%; right: 5%; }
}

@media (max-width: 680px) {
  .about-hero-visual[data-about-hero-animation] {
    --about-logo-impact-x: 86.8%;
    --about-logo-impact-y: 61.2%;
  }

  .about-hero-visual[data-about-hero-animation] .about-hero-logo-stage {
    transform: translateY(-5px) scale(var(--about-logo-scale));
  }

  .about-constellation { opacity: .68; }
  .about-constellation--southern-cross { top: 5.5%; left: 4.5%; width: 76px; }
  .about-constellation--three-marias { top: 6.5%; right: 4%; width: 96px; }
  .about-logo-tech-orbit { width: 66px; height: 66px; }
  .about-logo-tech-scan { animation-name: about-tech-scan-mobile; }

  @keyframes about-tech-scan-mobile {
    0% { opacity: 0; transform: translateY(-6px); }
    14% { opacity: .8; }
    72% { opacity: .48; }
    100% { opacity: 0; transform: translateY(82px); }
  }
}

/* =========================================================
   ROUND A5 - ABOUT HERO REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .about-hero-visual[data-about-hero-animation] {
    --about-logo-progress: 1 !important;
    --about-logo-scale: 1 !important;
    --about-tech-progress: .28 !important;
  }

  .about-hero-visual[data-about-hero-animation] .about-hero-logo-stage {
    opacity: 1 !important;
    transform: translateY(-8px) scale(1) !important;
  }

  .about-constellation__star,
  .about-logo-tech-layer *,
  .about-hero-visual[data-about-hero-animation] .about-hero-logo {
    animation: none !important;
  }

  .about-logo-tech-scan,
  .about-logo-tech-circuit { display: none; }
  .about-logo-tech-orbit { opacity: .34; }
  .about-logo-tech-pulse { opacity: 0; }
}


/* =========================================================
   ROUND A10.1 - MOBILE HERO LOOP PARITY
   On coarse mobile pointers, the isolated Hero may override the
   reduced-motion static logo and repeat the complete desktop cycle.
   The loop remains visibility-gated and pauses outside the viewport
   or while the document is hidden.
   ========================================================= */
@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-hero-logo-stage {
    opacity: var(--about-logo-progress) !important;
    transform: translateY(-5px) scale(var(--about-logo-scale)) !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-logo-tech-layer {
    opacity: var(--about-tech-progress) !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-constellation__star {
    animation: about-star-twinkle 3.4s ease-in-out infinite !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-logo-tech-orbit {
    animation: about-tech-orbit 3.8s linear infinite !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-logo-tech-pulse {
    animation: about-tech-pulse 1.9s ease-out infinite !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-logo-tech-scan {
    display: block !important;
    animation: about-tech-scan-mobile 2.7s cubic-bezier(.3, .1, .35, 1) infinite !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-logo-tech-circuit {
    display: block !important;
    animation: about-tech-circuit 2.6s ease-in-out infinite !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-logo-tech-circuit--two {
    animation-delay: -.85s !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'] .about-logo-tech-circuit--three {
    animation-delay: -1.7s !important;
  }

  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'].is-impact .about-hero-logo,
  .about-hero-visual[data-about-hero-animation][data-about-mobile-motion='loop'].is-logo-active .about-hero-logo {
    animation: about-logo-cosmic-breathe 2.8s ease-in-out infinite !important;
  }
}