/* Gate B: a short construction sequence that resolves to the approved static hero. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-monogram__grid {
    animation: hero-grid-reveal 400ms cubic-bezier(.22,.7,.22,1) both;
  }

  .js .hero-monogram__axis--horizontal {
    transform-origin: left center;
    animation: hero-axis-horizontal 700ms cubic-bezier(.2,.72,.18,1) 250ms both;
  }

  .js .hero-monogram__axis--vertical {
    transform-origin: center top;
    animation: hero-axis-vertical 700ms cubic-bezier(.2,.72,.18,1) 300ms both;
  }

  .js .hero-monogram__mark {
    animation: hero-geometry-reveal 700ms cubic-bezier(.2,.72,.18,1) 300ms both;
  }

  .js .hero-monogram__mark::before {
    animation: hero-ring-reveal 660ms cubic-bezier(.2,.72,.18,1) 410ms both;
  }

  .js .hero-monogram__mark::after {
    animation: hero-ring-reveal 620ms cubic-bezier(.2,.72,.18,1) 520ms both;
  }

  .js .hero-monogram__mark img {
    animation: hero-identity-reveal 700ms cubic-bezier(.16,.76,.18,1) 700ms both;
  }

  .js .hero-monogram__index,
  .js .hero-monogram__scale,
  .js .hero-monogram figcaption {
    animation: hero-notation-reveal 500ms ease-out 820ms both;
  }

  .js .kinetic-layer {
    animation: kinetic-activate 600ms ease-out 1400ms both;
  }

  .js .kinetic-orbit__rotor--outer {
    animation: kinetic-orbit-clockwise 64s linear 1400ms infinite;
  }

  .js .kinetic-orbit__rotor--inner {
    animation: kinetic-orbit-counter 38s linear 1400ms infinite;
  }

  .js .kinetic-tracker--one {
    animation: kinetic-orbit-clockwise 46s linear 1400ms infinite;
  }

  .js .kinetic-tracker--two {
    animation: kinetic-orbit-counter 29s linear 1400ms infinite;
  }

  .js .kinetic-sweep {
    animation: kinetic-signal-sweep 12.5s linear 1800ms infinite both;
  }

  .js .kinetic-signal-node--one {
    animation: kinetic-node-one 12.5s linear 1800ms infinite both;
  }

  .js .kinetic-signal-node--two {
    animation: kinetic-node-two 12.5s linear 1800ms infinite both;
  }

  .js .kinetic-core-energy {
    animation:
      kinetic-activate 600ms ease-out 1400ms both,
      kinetic-core-pulse 10s ease-in-out 2000ms infinite;
  }
}

@keyframes hero-grid-reveal {
  from { opacity: 0; }
  to { opacity: var(--grid-opacity); }
}

@keyframes hero-axis-horizontal {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes hero-axis-vertical {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes hero-geometry-reveal {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes hero-ring-reveal {
  from { opacity: 0; transform: var(--ring-plane) scale(.72); }
  to { opacity: 1; transform: var(--ring-plane) scale(1); }
}

@keyframes hero-identity-reveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}

@keyframes hero-notation-reveal {
  from { opacity: 0; transform: translateY(.3rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kinetic-activate {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes kinetic-orbit-clockwise {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@keyframes kinetic-orbit-counter {
  from { transform: rotate(0); }
  to { transform: rotate(-360deg); }
}

@keyframes kinetic-signal-sweep {
  0%, 52% { opacity: 0; transform: rotate(0); }
  57% { opacity: .68; }
  72% { opacity: .24; }
  78%, 100% { opacity: 0; transform: rotate(360deg); }
}

@keyframes kinetic-node-one {
  0%, 57%, 63%, 100% { border-color: #8b8b8b; opacity: .32; transform: scale(1); }
  60% { border-color: #fff; opacity: .92; transform: scale(1.35); }
}

@keyframes kinetic-node-two {
  0%, 66%, 72%, 100% { border-color: #777; opacity: .28; transform: scale(1); }
  69% { border-color: #e5e5e5; opacity: .78; transform: scale(1.3); }
}

@keyframes kinetic-core-pulse {
  0%, 100% { border-color: #444; opacity: .24; transform: scale(.985); }
  50% { border-color: #707070; opacity: .46; transform: scale(1.025); }
}

.hero-monogram.is-kinetic-paused .hero-monogram__mark::before,
.hero-monogram.is-kinetic-paused .hero-monogram__mark::after,
.hero-monogram.is-kinetic-paused .kinetic-layer,
.hero-monogram.is-kinetic-paused .kinetic-orbit__rotor,
.hero-monogram.is-kinetic-paused .kinetic-tracker,
.hero-monogram.is-kinetic-paused .kinetic-sweep,
.hero-monogram.is-kinetic-paused .kinetic-signal-node,
.hero-monogram.is-kinetic-paused .kinetic-core-energy {
  animation-play-state: paused !important;
}

@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .js .hero-monogram__mark::before {
    animation: hero-ring-reveal 660ms cubic-bezier(.2,.72,.18,1) 410ms both;
  }

  .js .hero-monogram__mark::after {
    animation: hero-ring-reveal 620ms cubic-bezier(.2,.72,.18,1) 520ms both;
  }

  .kinetic-layer--inner,
  .kinetic-sweep,
  .kinetic-signal-node {
    display: none;
  }

  .js .kinetic-orbit__rotor--outer {
    animation-duration: 70s;
  }

  .js .kinetic-tracker--one {
    animation-duration: 52s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-monogram__grid,
  .hero-monogram__frame::before,
  .hero-monogram__frame::after,
  .hero-monogram__axis,
  .hero-monogram__mark,
  .hero-monogram__mark::before,
  .hero-monogram__mark::after,
  .hero-monogram__symbol,
  .hero-monogram__mark img,
  .hero-monogram__index,
  .hero-monogram__scale,
  .hero-monogram figcaption,
  .kinetic-layer,
  .kinetic-orbit__rotor,
  .kinetic-tracker,
  .kinetic-sweep,
  .kinetic-signal-node,
  .kinetic-core-energy {
    animation: none !important;
  }

  .hero-monogram__grid,
  .kinetic-layer--outer,
  .kinetic-layer--inner { transform: none; will-change: auto; }

  .hero-monogram__symbol { transform: none; will-change: auto; }
}