/**
 * About-page Piksel story: draw the Orbix Dijital route once on the page's white
 * canvas, then settle into a calm ambient state without pointer tracking.
 */

.about-piksel {
  --about-intro: 7.2s;
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  min-height: 540px;
  place-items: center;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
  cursor: default;
}

.about-piksel::before,
.about-piksel::after {
  position: absolute;
  z-index: -2;
  border: 1px solid rgba(52, 120, 246, 0.09);
  border-radius: 50%;
  content: "";
}

.about-piksel::before {
  top: -24%;
  left: -38%;
  width: 128%;
  aspect-ratio: 1;
}

.about-piksel::after {
  right: -47%;
  bottom: -37%;
  width: 142%;
  aspect-ratio: 1;
}

.about-piksel__ambient {
  position: absolute;
  z-index: -1;
  top: 3%;
  right: -4%;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(117, 87, 232, 0.18), rgba(52, 120, 246, 0.08) 40%, transparent 71%);
  filter: blur(22px);
  animation:
    aboutAmbientReveal var(--about-intro) ease-out 0s 1 forwards,
    aboutAmbientIdle 5.8s ease-in-out var(--about-intro) infinite alternate;
}

.about-piksel__route {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.94;
  pointer-events: none;
}

.about-piksel__route-guide,
.about-piksel__route-line,
.about-piksel__route-comet {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-piksel__route-guide {
  stroke: rgba(52, 120, 246, 0.15);
  stroke-width: 1.25;
}

.about-piksel__route-line {
  stroke: url(#about-piksel-route-gradient);
  stroke-width: 2.25;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: url(#about-piksel-route-glow);
  animation: aboutRouteDraw var(--about-intro) cubic-bezier(0.3, 0.72, 0.24, 1) 0s 1 forwards;
}

.about-piksel__route-comet {
  opacity: 0;
  stroke: #3478f6;
  stroke-width: 7;
  stroke-dasharray: 0.65 99.35;
  stroke-dashoffset: 0;
  filter: url(#about-piksel-route-glow);
  animation: aboutRouteComet var(--about-intro) cubic-bezier(0.32, 0.66, 0.25, 1) 0s 1 forwards;
}

.about-piksel__orbit-system {
  position: absolute;
  z-index: 2;
  top: 19%;
  right: 7%;
  width: 33%;
  aspect-ratio: 1;
  opacity: 0;
  transform: scale(0.72);
  transform-origin: center;
  will-change: opacity, transform;
  animation: aboutOrbitSystemReveal var(--about-intro) cubic-bezier(0.2, 0.78, 0.28, 1) 0s 1 forwards;
}

.about-piksel__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(52, 120, 246, 0.48);
  border-radius: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.about-piksel__orbit i {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: #7557e8;
  box-shadow: 0 0 20px rgba(117, 87, 232, 0.95);
  transform: translateY(-50%);
}

.about-piksel__orbit--outer {
  width: 112%;
  height: 46%;
  transform: translate(-50%, -50%) rotate(-17deg);
  animation: aboutOrbitOuter 18s linear var(--about-intro) infinite;
}

.about-piksel__orbit--inner {
  width: 84%;
  height: 34%;
  border-color: rgba(117, 87, 232, 0.46);
  transform: translate(-50%, -50%) rotate(25deg);
  animation: aboutOrbitInner 14s linear var(--about-intro) infinite reverse;
}

.about-piksel__orbit--inner i {
  right: -4px;
  left: auto;
  width: 8px;
  height: 8px;
  border-width: 1px;
  background: #66b9ff;
  box-shadow: 0 0 18px rgba(102, 185, 255, 0.94);
}

.about-piksel__brand-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 66%;
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%);
}

.about-piksel__brand-mark img {
  display: block;
  width: 92%;
  height: auto;
}

.about-piksel__mascot {
  position: absolute;
  z-index: 4;
  bottom: 8px;
  left: 42%;
  width: min(84%, 410px);
  aspect-ratio: 1122 / 1402;
  opacity: 0;
  translate: -50% 0;
  transform-origin: 50% 82%;
  will-change: opacity, transform;
  animation:
    aboutMascotEntrance var(--about-intro) cubic-bezier(0.18, 0.78, 0.24, 1) 0s 1 forwards,
    aboutMascotIdle 6.4s ease-in-out var(--about-intro) infinite alternate;
}

.about-piksel__pose {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.about-piksel__pose img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scaleX(-1);
  user-select: none;
  -webkit-user-drag: none;
}

.about-piksel__pose--arrival {
  z-index: 1;
  opacity: 1;
  animation: aboutArrivalPose var(--about-intro) ease-in-out 0s 1 forwards;
}

.about-piksel__pose--presenting {
  z-index: 2;
  opacity: 0;
  animation: aboutPresentingPose var(--about-intro) ease-in-out 0s 1 forwards;
}

.about-piksel__antenna {
  position: absolute;
  z-index: 4;
  top: 5.1%;
  left: 49.2%;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0 10%, #8fd1ff 24%, rgba(123, 94, 255, 0.88) 47%, transparent 72%);
  filter: blur(1px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.4);
  animation:
    aboutAntennaIntro var(--about-intro) ease-out 0s 1 forwards,
    aboutAntennaIdle 6s ease-in-out calc(var(--about-intro) + 1.8s) infinite;
}

.about-piksel__wink {
  position: absolute;
  z-index: 5;
  top: 27.8%;
  right: 36.9%;
  width: 10.5%;
  height: 5.6%;
  border-radius: 50%;
  opacity: 0;
  border-bottom: 3px solid #aabaff;
  background: #050612;
  box-shadow: 0 4px 9px rgba(83, 123, 255, 0.42);
  transform: rotate(-7deg) scaleY(0.05);
  transform-origin: center;
  animation:
    aboutWinkIntro var(--about-intro) ease-in-out 0s 1 forwards,
    aboutWinkIdle 7.4s ease-in-out calc(var(--about-intro) + 1.2s) infinite;
}

.about-piksel__hand-light {
  position: absolute;
  z-index: 6;
  top: 58%;
  right: 23%;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0 13%, #76c7ff 30%, #745cff 55%, transparent 73%);
  box-shadow: 0 0 18px #6aaaff, 0 0 36px rgba(117, 87, 232, 0.72);
  transform: scale(0.2);
  animation: aboutHandLight var(--about-intro) ease-out 0s 1 forwards;
}

@keyframes aboutAmbientReveal {
  0% { opacity: 0; transform: scale(0.82); }
  20% { opacity: 0.34; }
  64%, 100% { opacity: 0.9; transform: scale(1); }
}

@keyframes aboutAmbientIdle {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0.76; transform: scale(1.07); }
}

@keyframes aboutRouteDraw {
  0%, 29% { stroke-dashoffset: 100; opacity: 0; }
  34% { opacity: 1; }
  68%, 100% { stroke-dashoffset: 0; opacity: 0.78; }
}

@keyframes aboutRouteComet {
  0%, 30% { opacity: 0; stroke-dashoffset: 0; }
  34% { opacity: 1; }
  67% { opacity: 1; stroke-dashoffset: -100; }
  71%, 100% { opacity: 0; stroke-dashoffset: -100; }
}

@keyframes aboutOrbitSystemReveal {
  0%, 54% { opacity: 0; transform: scale(0.72) rotate(-7deg); }
  72%, 100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes aboutOrbitOuter {
  from { transform: translate(-50%, -50%) rotate(-17deg); }
  to { transform: translate(-50%, -50%) rotate(343deg); }
}

@keyframes aboutOrbitInner {
  from { transform: translate(-50%, -50%) rotate(25deg); }
  to { transform: translate(-50%, -50%) rotate(385deg); }
}

@keyframes aboutMascotEntrance {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.94); }
  15% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  23% { transform: translate3d(0, -4px, 0) scale(1); }
  31% { transform: translate3d(0, -2px, 0) scale(1); }
  42%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes aboutMascotIdle {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -4px, 0); }
}

@keyframes aboutArrivalPose {
  0%, 45% { opacity: 1; transform: scale(1); }
  54%, 100% { opacity: 0; transform: scale(0.985); }
}

@keyframes aboutPresentingPose {
  0%, 45% { opacity: 0; transform: scale(0.985); }
  54%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes aboutAntennaIntro {
  0%, 17%, 33%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  21% { opacity: 1; transform: translate(-50%, -50%) scale(1.36); }
  26% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.82); }
  30% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes aboutAntennaIdle {
  0%, 74%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  82% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.92); }
  89% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.7); }
}

@keyframes aboutWinkIntro {
  0%, 73%, 82%, 100% { opacity: 0; transform: rotate(-7deg) scaleY(0.05); }
  76%, 79% { opacity: 1; transform: rotate(-7deg) scaleY(1); }
}

@keyframes aboutWinkIdle {
  0%, 80%, 88%, 100% { opacity: 0; transform: rotate(-7deg) scaleY(0.05); }
  83%, 86% { opacity: 1; transform: rotate(-7deg) scaleY(1); }
}

@keyframes aboutHandLight {
  0%, 40% { opacity: 0; transform: scale(0.2); }
  47% { opacity: 1; transform: scale(1.18); }
  55% { opacity: 0.88; transform: scale(0.82); }
  68%, 100% { opacity: 0; transform: scale(0.35); }
}

.about-piksel.is-restarting .about-piksel__ambient,
.about-piksel.is-restarting .about-piksel__route-line,
.about-piksel.is-restarting .about-piksel__route-comet,
.about-piksel.is-restarting .about-piksel__orbit-system,
.about-piksel.is-restarting .about-piksel__orbit,
.about-piksel.is-restarting .about-piksel__mascot,
.about-piksel.is-restarting .about-piksel__pose,
.about-piksel.is-restarting .about-piksel__antenna,
.about-piksel.is-restarting .about-piksel__wink,
.about-piksel.is-restarting .about-piksel__hand-light {
  animation: none !important;
}

@media (max-width: 1020px) {
  .about-piksel__mascot {
    left: 42%;
    width: min(82%, 385px);
  }

  .about-piksel__orbit-system {
    top: 18%;
    right: 5%;
    width: 35%;
  }
}

@media (max-width: 760px) {
  .orbix-about-page .story-grid {
    gap: 28px;
  }

  .about-piksel {
    height: clamp(350px, 100vw, 400px);
    min-height: 0;
  }

  .about-piksel__mascot {
    bottom: 6px;
    left: 50%;
    width: min(70vw, 280px);
    max-width: none;
    translate: -50% 0;
  }

  .about-piksel__pose,
  .about-piksel__pose img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
  }

  .about-piksel__pose img {
    object-fit: contain;
    object-position: center bottom;
  }

  .about-piksel__orbit-system {
    top: 12%;
    right: 4%;
    width: 29%;
  }

  .about-piksel__hand-light {
    top: 56%;
    right: 19%;
  }
}

@media (max-width: 420px) {
  .about-piksel {
    height: clamp(350px, 100vw, 400px);
  }

  .about-piksel__mascot {
    width: min(70vw, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-piksel__ambient,
  .about-piksel__route-line,
  .about-piksel__route-comet,
  .about-piksel__orbit-system,
  .about-piksel__orbit,
  .about-piksel__mascot,
  .about-piksel__pose,
  .about-piksel__antenna,
  .about-piksel__wink,
  .about-piksel__hand-light {
    animation: none !important;
  }

  .about-piksel__ambient,
  .about-piksel__route-line,
  .about-piksel__orbit-system,
  .about-piksel__mascot,
  .about-piksel__pose--presenting {
    opacity: 1;
  }

  .about-piksel__route-line { stroke-dashoffset: 0; }
  .about-piksel__orbit-system { transform: scale(1); }
  .about-piksel__pose--arrival { opacity: 0; }
}