/* 97 — S14 Improving motion layer.
   The authored composition stays intact. On desktop a fixed-size scene is
   revealed with a clip, then explains signal → six nodes → +63% result. */

.imp-stage {
  --imp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --imp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.imp-diagnostic {
  position: absolute;
  inset: 42px 20px;
  z-index: 2;
  display: none;
  flex-direction: column;
  justify-content: center;
  color: #eaeaea;
  pointer-events: none;
}

.imp-diagnosticLabel,
.imp-diagnosticMode {
  position: absolute;
  left: 0;
  right: 0;
  font-family: "Inter", sans-serif;
  text-align: center;
  text-transform: uppercase;
}

.imp-diagnosticLabel {
  top: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.12em;
}

.imp-diagnosticMode {
  bottom: 0;
  font-size: 9px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.08em;
  opacity: 0.56;
}

.imp-diagnosticGraph {
  width: 100%;
  height: 94px;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
}

.imp-diagnosticGraph img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.88;
}

@media (min-width: 1201px) {
  .imp-stage.is-motion {
    position: relative;
    height: 500vh;
  }

  .imp-stage.is-motion .imp {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    padding: 0;
    overflow: hidden;
  }

  .imp-stage.is-motion .imp-panel {
    width: 100vw;
    height: 100vh;
    min-height: 720px;
    border-radius: 0;
    clip-path: inset(24px 24px 24px 24px round 32px);
    will-change: clip-path;
    background:
      radial-gradient(115% 85% at 16% 98%, rgba(132, 33, 178, 0.50), transparent 60%),
      radial-gradient(95% 75% at 94% 2%, rgba(132, 33, 178, 0.38), transparent 58%),
      rgba(28, 18, 38, 0.72);
  }

  .imp-stage.is-motion .imp-card--4 {
    top: auto;
    bottom: 274px;
  }

  .imp-stage.is-motion .imp-card--5,
  .imp-stage.is-motion .imp-card--6 {
    top: auto;
    bottom: 133px;
  }

  .imp-stage.is-motion .imp-arc--bl {
    top: auto;
    bottom: 13px;
  }

  .imp-stage.is-motion .imp-arc {
    opacity: 0;
    transition:
      opacity 160ms var(--imp-ease-out),
      transform 160ms var(--imp-ease-out);
  }

  .imp-stage.is-motion .imp-arc--bl {
    transform: translate3d(-18px, 18px, 0);
  }

  .imp-stage.is-motion .imp-arc--tr {
    transform: rotate(180deg) translate3d(-18px, 18px, 0);
  }

  .imp-stage.is-motion .imp-arc.is-on {
    opacity: 1;
    transition-duration: 240ms;
  }

  .imp-stage.is-motion .imp-arc--bl.is-on {
    transform: translate3d(0, 0, 0);
  }

  .imp-stage.is-motion .imp-arc--tr.is-on {
    transform: rotate(180deg) translate3d(0, 0, 0);
  }

  .imp-stage.is-motion .imp-donut {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
      rgba(36, 24, 48, 0.62);
    border: 1px solid rgba(234, 236, 244, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    isolation: isolate;
  }

  .imp-stage.is-motion .imp-ringImg,
  .imp-stage.is-motion .imp-donutVal,
  .imp-stage.is-motion .imp-donutCaption,
  .imp-stage.is-motion .imp-ringNum,
  .imp-stage.is-motion .imp-loyal {
    will-change: transform, opacity;
  }

  .imp-stage.is-motion .imp-diagnostic {
    display: flex;
  }

  .imp-stage.is-motion + .brf-section {
    position: relative;
    z-index: 6;
    margin-top: -100vh;
  }
}

@media (max-width: 1200px) {
  .imp-diagnostic {
    display: none;
  }
}

@media (min-width: 1201px) and (max-height: 719px) {
  .imp-stage {
    height: auto;
  }

  .imp-stage .imp {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0 24px;
  }

  .imp-stage .imp-panel {
    width: auto;
    height: 940px;
    min-height: 0;
    clip-path: none;
    border-radius: 32px;
  }

  .imp-diagnostic {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .imp-arc {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1201px) {
  .imp-stage {
    height: auto;
  }

  .imp-stage .imp {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .imp-stage .imp-panel {
    width: auto;
    height: 940px;
    min-height: 0;
    clip-path: none;
    border-radius: 32px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .imp-diagnostic { display: none; }

  .imp-arc {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}