/**
 * Home Next Showreel — support-story abstract UI (no screenshots / no real cases)
 */

/* ——— Scene titles (unified) ——— */
.nw-showreel {
  --scene-label-size: 13px;
  --scene-title-size: 24px;
}

.nw-showreel__scene-label,
.nw-showreel__scene-heading {
  left: 4%;
  top: 5%;
  z-index: 8;
  gap: 5px;
  max-width: min(48%, 300px);
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}

.nw-showreel__scene-label-en {
  font-size: var(--scene-label-size);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}

.nw-showreel__scene-label-en-row--sp {
  display: none;
}

.nw-showreel__scene-label-en-row--pc {
  display: inline;
}

.nw-showreel__scene-label-jp {
  display: none !important;
}

.nw-showreel__scene-visual {
  z-index: 1;
}

@media (min-width: 981px) {
  .nw-showreel__scene-visual {
    position: absolute;
    inset: 0;
  }
}

.nw-next-js .nw-showreel__scene.is-active .nw-showreel__scene-label-en {
  animation: nw-sr-title-in 0.55s ease both;
}

.nw-showreel__scene.is-leaving .nw-showreel__scene-label,
.nw-showreel__scene.is-leaving .nw-showreel__scene-heading {
  opacity: 0;
  transition: opacity 0.35s ease;
}

@keyframes nw-sr-title-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Soft scene transitions (PC) */
@media (min-width: 981px) {
  .nw-showreel__scene {
    transform: scale(0.97) translate3d(3%, 0, 0);
    filter: blur(5px);
  }

  .nw-showreel__scene.is-active {
    transform: scale(1) translate3d(0, 0, 0);
    filter: none;
  }

  .nw-showreel__scene.is-leaving {
    transform: scale(0.98) translate3d(-3%, 0, 0);
    filter: blur(3px);
  }
}

/* ——— Abstract EC page (shared) ——— */
.nw-sr-ec {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: rgba(18, 18, 18, 0.92);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

.nw-sr-ec__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex: 0 0 auto;
}

.nw-sr-ec__chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.nw-sr-ec__chrome em {
  flex: 1;
  height: 8px;
  margin-left: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  font-style: normal;
}

.nw-sr-ec__page {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 10px 12px 12px;
  gap: 10px;
  background: #161616;
}

.nw-sr-ec__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nw-sr-ec__logo {
  width: 42px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.nw-sr-ec__nav {
  display: flex;
  gap: 6px;
  flex: 1;
}

.nw-sr-ec__nav i {
  display: block;
  width: 18px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
}

.nw-sr-ec__nav i.is-active {
  background: rgba(255, 255, 255, 0.7);
}

.nw-sr-ec__cart {
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
}

.nw-sr-ec__hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  min-height: 0;
}

.nw-sr-ec__media {
  border-radius: 6px;
  background: linear-gradient(145deg, #3a3a3a, #1c1c1c 55%, #2a2a2a);
  position: relative;
  overflow: hidden;
  min-height: 90px;
}

.nw-sr-ec__media::after {
  content: "";
  position: absolute;
  inset: 18% 22%;
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
}

.nw-sr-ec__copy {
  display: grid;
  align-content: center;
  gap: 7px;
}

.nw-sr-ec__h {
  display: block;
  height: 12px;
  width: 78%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.78);
}

.nw-sr-ec__p {
  display: block;
  height: 5px;
  width: 92%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.nw-sr-ec__p--sm {
  width: 64%;
}

.nw-sr-ec__cta {
  display: block;
  width: 58%;
  height: 22px;
  margin-top: 4px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.nw-sr-ec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.nw-sr-ec__card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 5px;
}

.nw-sr-ec__card-media {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: linear-gradient(160deg, #444, #222);
}

.nw-sr-ec__card-name {
  height: 5px;
  width: 72%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
}

.nw-sr-ec__card-price {
  height: 4px;
  width: 40%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.nw-sr-ec__card-btn {
  height: 14px;
  width: 70%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.85);
}

.nw-sr-browser--main {
  width: min(74%, 520px);
  right: 3%;
  top: 14%;
  bottom: 8%;
  z-index: 3;
  transform: rotate(-2.5deg);
}

.nw-sr-aux {
  position: absolute;
  left: 4%;
  bottom: 4%;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nw-sr-aux span {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.4);
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

.nw-sr-story {
  position: absolute;
  inset: 0;
}

/* ——— Phase labels ——— */
.nw-sr-phase {
  position: absolute;
  left: 3%;
  top: calc(4% + clamp(52px, 7vw, 78px));
  z-index: 8;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.nw-sr-phase span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
}

@keyframes nw-sr-phase-1 {
  0%, 18% { opacity: 1; }
  22%, 100% { opacity: 0; }
}
@keyframes nw-sr-phase-2 {
  0%, 18% { opacity: 0; }
  22%, 38% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes nw-sr-phase-3 {
  0%, 38% { opacity: 0; }
  42%, 68% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes nw-sr-phase-4 {
  0%, 68% { opacity: 0; }
  72%, 100% { opacity: 1; }
}

/* ——— CLARIFY: unsorted → extract → prioritize → requirements ——— */
.nw-sr-ask {
  position: absolute;
  z-index: 4;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(12, 12, 12, 0.82);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 1;
}

.nw-sr-ask:nth-child(1) { left: 8%; top: 22%; transform: rotate(-4deg); }
.nw-sr-ask:nth-child(2) { left: 62%; top: 18%; transform: rotate(3deg); }
.nw-sr-ask:nth-child(3) { left: 14%; top: 48%; transform: rotate(2deg); }
.nw-sr-ask:nth-child(4) { left: 68%; top: 44%; transform: rotate(-3deg); }
.nw-sr-ask:nth-child(5) { left: 36%; top: 28%; transform: rotate(5deg); }
.nw-sr-ask:nth-child(6) { left: 48%; top: 62%; transform: rotate(-2deg); }

.nw-sr-extracts {
  position: absolute;
  inset: 22% 18% 28%;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-extract {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(8, 8, 8, 0.88);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
}

.nw-sr-extract em {
  font-style: normal;
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

.nw-sr-priority {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(46%, 260px);
  transform: translate(-50%, -50%);
  z-index: 5;
  display: grid;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-priority span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 10, 10, 0.86);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateX(-8px);
  position: relative;
}

.nw-sr-priority span::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -7px;
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, 0.28);
}

.nw-sr-priority span:last-child::after {
  display: none;
}

.nw-sr-priority b {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.nw-sr-board--req {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(54%, 300px);
  transform: translate(-50%, -50%) scale(0.94);
  z-index: 6;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(10, 10, 10, 0.9);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  opacity: 0;
}

.nw-sr-board__title {
  grid-column: 1 / -1;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}

.nw-sr-board__item {
  display: block;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.nw-sr-board__item em {
  font-style: normal;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82);
}

.nw-sr-board__done {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
}

.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-phase [data-phase="1"] {
  animation: nw-sr-phase-1 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-phase [data-phase="2"] {
  animation: nw-sr-phase-2 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-phase [data-phase="3"] {
  animation: nw-sr-phase-3 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-phase [data-phase="4"] {
  animation: nw-sr-phase-4 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-ask {
  animation: nw-sr-ask-life 5s ease both;
  animation-delay: calc(var(--i) * 0.06s);
}

.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-extracts {
  animation: nw-sr-hold-mid 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-extract {
  animation: nw-sr-extract-in 5s ease both;
  animation-delay: calc(var(--i) * 0.04s);
}

.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-priority {
  animation: nw-sr-priority-wrap 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-priority span {
  animation: nw-sr-priority-item 5s ease both;
  animation-delay: calc(var(--i) * 0.05s);
}

.nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-board--req {
  animation: nw-sr-board-req 5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nw-sr-ask-life {
  0%, 20% { opacity: 1; }
  38%, 100% { opacity: 0.18; }
}

@keyframes nw-sr-hold-mid {
  0%, 18% { opacity: 0; }
  24%, 40% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

@keyframes nw-sr-extract-in {
  0%, 18% { opacity: 0; transform: translateY(10px); }
  26%, 40% { opacity: 1; transform: translateY(0); }
  48%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes nw-sr-priority-wrap {
  0%, 40% { opacity: 0; }
  46%, 68% { opacity: 1; }
  76%, 100% { opacity: 0; }
}

@keyframes nw-sr-priority-item {
  0%, 40% { opacity: 0; transform: translateX(-10px); }
  48%, 68% { opacity: 1; transform: translateX(0); }
  76%, 100% { opacity: 0; }
}

@keyframes nw-sr-board-req {
  0%, 68% { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
  78%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ——— DESIGN: wire → structure → visual → static design ready ——— */
.nw-sr-artboard {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.nw-sr-artboard__frame {
  position: absolute;
  right: 8%;
  top: 14%;
  bottom: 12%;
  width: min(68%, 480px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.nw-sr-artboard__grid {
  position: absolute;
  right: 10%;
  top: 16%;
  bottom: 14%;
  width: min(64%, 450px);
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  border-radius: 2px;
}

.nw-sr-anno {
  position: absolute;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

.nw-sr-anno--select {
  right: 18%;
  top: 38%;
  width: 22%;
  height: 18%;
  border: 1px solid rgba(120, 180, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(120, 180, 255, 0.15);
  border-radius: 4px;
}

.nw-sr-anno--typo {
  left: 10%;
  top: 28%;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.45);
}

.nw-sr-anno--space {
  left: 10%;
  top: 36%;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.45);
}

.nw-sr-swatches {
  position: absolute;
  right: 12%;
  bottom: 16%;
  z-index: 5;
  display: flex;
  gap: 5px;
  opacity: 0;
}

.nw-sr-swatches i {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #111;
}

.nw-sr-swatches i:nth-child(2) { background: #d8d8d8; }
.nw-sr-swatches i:nth-child(3) { background: #fff; }

.nw-sr-story--design .nw-sr-ec--design {
  --ec-page-bg: #ffffff;
  --ec-border: transparent;
  --ec-media: transparent;
  --ec-media-glow: transparent;
  --ec-ink: transparent;
  --ec-cta-bg: transparent;
  --ec-cta-border: transparent;
  --ec-card-bg: transparent;
  --ec-card-radius: 0;
  --ec-shadow: none;
  --ec-gap: 16px;
  --ec-hero-cols: 1fr 1fr;
  --ec-lift: 0;
  --ec-chrome: #f7f7f7;
  --ec-content-op: 0;
  position: absolute;
  right: 10%;
  top: 16%;
  bottom: 14%;
  width: min(64%, 450px);
  transform: none;
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__chrome {
  background: var(--ec-chrome);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__chrome i {
  background: rgba(0, 0, 0, 0.18);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__chrome em {
  background: rgba(0, 0, 0, 0.08);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__page {
  background: var(--ec-page-bg);
  gap: var(--ec-gap);
  box-shadow: var(--ec-shadow);
}

.nw-next-js .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__header,
.nw-next-js .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__hero,
.nw-next-js .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__grid {
  opacity: 0;
}

.nw-next-js .nw-sr-story--design .nw-sr-artboard__grid,
.nw-next-js .nw-sr-story--design .nw-sr-anno,
.nw-next-js .nw-sr-story--design .nw-sr-swatches,
.nw-next-js .nw-sr-story--design .nw-sr-aux {
  opacity: 0;
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__logo,
.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__nav i,
.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__h,
.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__p,
.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-name,
.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-price {
  background: var(--ec-ink);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__cart {
  border-color: var(--ec-border);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__hero {
  grid-template-columns: var(--ec-hero-cols);
  gap: var(--ec-gap);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__media {
  background: var(--ec-media);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-card-radius);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__media::after {
  background: var(--ec-media-glow);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__cta {
  background: var(--ec-cta-bg);
  border: 1px solid var(--ec-cta-border);
  box-shadow: none;
  height: 24px;
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card {
  background: var(--ec-card-bg);
  border-color: var(--ec-border);
  border-radius: var(--ec-card-radius);
  transform: translateY(var(--ec-lift));
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-media {
  background: var(--ec-media);
  border: 1px solid var(--ec-border);
  border-radius: calc(var(--ec-card-radius) * 0.6);
}

.nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-btn {
  background: var(--ec-cta-bg);
  border: 1px solid var(--ec-cta-border);
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design {
  animation: nw-sr-design-grow 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__header {
  animation: nw-sr-design-part-header 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__hero {
  animation: nw-sr-design-part-hero 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__grid {
  animation: nw-sr-design-part-grid 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="1"] {
  animation: nw-sr-design-phase-1 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="2"] {
  animation: nw-sr-design-phase-2 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="3"] {
  animation: nw-sr-design-phase-3 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="4"] {
  animation: nw-sr-design-phase-4 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-artboard__frame {
  animation: nw-sr-design-frame-in 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-artboard__grid {
  animation: nw-sr-design-grid-in 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-anno,
.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-swatches,
.nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-aux {
  animation: nw-sr-design-anno-in 5s linear both;
}

/* Blank → wire → structure → visual → ready */
@keyframes nw-sr-design-grow {
  /* Phase 0: blank white canvas (0–0.5s) */
  0%, 10% {
    --ec-page-bg: #ffffff;
    --ec-border: transparent;
    --ec-media: transparent;
    --ec-media-glow: transparent;
    --ec-ink: transparent;
    --ec-cta-bg: transparent;
    --ec-cta-border: transparent;
    --ec-card-bg: transparent;
    --ec-card-radius: 0px;
    --ec-shadow: none;
    --ec-gap: 16px;
    --ec-hero-cols: 1fr 1fr;
    --ec-lift: 0px;
    --ec-chrome: #f7f7f7;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
  /* Phase 1: wireframe (0.5–1.5s) */
  12%, 30% {
    --ec-page-bg: #ffffff;
    --ec-border: rgba(20, 20, 20, 0.34);
    --ec-media: transparent;
    --ec-media-glow: transparent;
    --ec-ink: rgba(20, 20, 20, 0.28);
    --ec-cta-bg: transparent;
    --ec-cta-border: rgba(20, 20, 20, 0.4);
    --ec-card-bg: transparent;
    --ec-card-radius: 0px;
    --ec-shadow: none;
    --ec-gap: 16px;
    --ec-hero-cols: 1fr 1fr;
    --ec-lift: 0px;
    --ec-chrome: #f0f0f0;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
  /* Phase 2: structure (1.5–2.5s) */
  32%, 50% {
    --ec-page-bg: #fafafa;
    --ec-border: rgba(20, 20, 20, 0.2);
    --ec-media: #e8e8e8;
    --ec-media-glow: transparent;
    --ec-ink: rgba(20, 20, 20, 0.42);
    --ec-cta-bg: transparent;
    --ec-cta-border: rgba(20, 20, 20, 0.5);
    --ec-card-bg: rgba(255, 255, 255, 0.7);
    --ec-card-radius: 4px;
    --ec-shadow: none;
    --ec-gap: 10px;
    --ec-hero-cols: 1.2fr 0.8fr;
    --ec-lift: 0px;
    --ec-chrome: #efefef;
    background: #f7f7f7;
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
  /* Phase 3: visual design (2.5–4s) */
  52%, 80% {
    --ec-page-bg: #fafafa;
    --ec-border: rgba(20, 20, 20, 0.12);
    --ec-media: linear-gradient(145deg, #d8d8d8, #bcbcbc 60%, #cfcfcf);
    --ec-media-glow: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
    --ec-ink: rgba(20, 20, 20, 0.72);
    --ec-cta-bg: #1a1a1a;
    --ec-cta-border: #1a1a1a;
    --ec-card-bg: #fff;
    --ec-card-radius: 8px;
    --ec-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    --ec-gap: 10px;
    --ec-hero-cols: 1.15fr 0.85fr;
    --ec-lift: 0px;
    --ec-chrome: #f3f3f3;
    background: #f0f0f0;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
  /* Phase 4: DESIGN READY (4–5s) */
  82%, 100% {
    --ec-page-bg: #ffffff;
    --ec-border: rgba(20, 20, 20, 0.1);
    --ec-media: linear-gradient(145deg, #ececec, #d4d4d4 55%, #e2e2e2);
    --ec-media-glow: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08));
    --ec-ink: rgba(20, 20, 20, 0.88);
    --ec-cta-bg: #111;
    --ec-cta-border: #111;
    --ec-card-bg: #fff;
    --ec-card-radius: 8px;
    --ec-shadow: none;
    --ec-gap: 10px;
    --ec-hero-cols: 1.15fr 0.85fr;
    --ec-lift: 0px;
    --ec-chrome: #f7f7f7;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
}

@keyframes nw-sr-design-part-header {
  0%, 10% { opacity: 0; }
  14%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-part-hero {
  0%, 16% { opacity: 0; }
  20%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-part-grid {
  0%, 22% { opacity: 0; }
  26%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-phase-1 {
  0%, 10% { opacity: 0; }
  12%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}

@keyframes nw-sr-design-phase-2 {
  0%, 30% { opacity: 0; }
  34%, 50% { opacity: 1; }
  54%, 100% { opacity: 0; }
}

@keyframes nw-sr-design-phase-3 {
  0%, 50% { opacity: 0; }
  54%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

@keyframes nw-sr-design-phase-4 {
  0%, 80% { opacity: 0; }
  84%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-frame-in {
  0%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-grid-in {
  0%, 30% { opacity: 0; }
  34%, 80% { opacity: 0.55; }
  84%, 100% { opacity: 0.35; }
}

@keyframes nw-sr-design-anno-in {
  0%, 80% { opacity: 0; }
  86%, 100% { opacity: 1; }
}

@keyframes nw-sr-anno-in {
  0%, 68% { opacity: 0; }
  78%, 100% { opacity: 1; }
}

.nw-sr-ec.is-final,
.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design {
  --ec-page-bg: #ffffff;
  --ec-border: rgba(20, 20, 20, 0.1);
  --ec-media: linear-gradient(145deg, #ececec, #d4d4d4 55%, #e2e2e2);
  --ec-media-glow: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08));
  --ec-ink: rgba(20, 20, 20, 0.88);
  --ec-cta-bg: #111;
  --ec-cta-border: #111;
  --ec-card-bg: #fff;
  --ec-card-radius: 8px;
  --ec-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  --ec-gap: 10px;
  --ec-hero-cols: 1.15fr 0.85fr;
  --ec-lift: 0px;
  --ec-chrome: #f7f7f7;
  --ec-content-op: 1;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__header,
.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__hero,
.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__grid,
.nw-sr-ec.is-final .nw-sr-ec__header,
.nw-sr-ec.is-final .nw-sr-ec__hero,
.nw-sr-ec.is-final .nw-sr-ec__grid {
  opacity: 1;
}

.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__page,
.nw-sr-ec.is-final .nw-sr-ec__page {
  background: #ffffff;
}

.nw-sr-ec.is-final .nw-sr-ec__chrome {
  background: #f7f7f7;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.nw-sr-ec.is-final .nw-sr-ec__chrome i {
  background: rgba(0, 0, 0, 0.18);
}

.nw-sr-ec.is-final .nw-sr-ec__logo,
.nw-sr-ec.is-final .nw-sr-ec__nav i,
.nw-sr-ec.is-final .nw-sr-ec__h,
.nw-sr-ec.is-final .nw-sr-ec__p,
.nw-sr-ec.is-final .nw-sr-ec__card-name,
.nw-sr-ec.is-final .nw-sr-ec__card-price {
  background: rgba(20, 20, 20, 0.82);
}

.nw-sr-ec.is-final .nw-sr-ec__nav i.is-active {
  background: rgba(20, 20, 20, 0.95);
}

.nw-sr-ec.is-final .nw-sr-ec__cart {
  border-color: rgba(20, 20, 20, 0.45);
}

.nw-sr-ec.is-final .nw-sr-ec__media,
.nw-sr-ec.is-final .nw-sr-ec__card-media {
  background: linear-gradient(145deg, #ececec, #d4d4d4 55%, #e2e2e2);
  border: 1px solid rgba(20, 20, 20, 0.08);
}

.nw-sr-ec.is-final .nw-sr-ec__cta,
.nw-sr-ec.is-final .nw-sr-ec__card-btn {
  background: #111;
  border-color: #111;
  box-shadow: none;
}

.nw-sr-ec.is-final .nw-sr-ec__card {
  background: #fff;
  border-color: rgba(20, 20, 20, 0.1);
}

.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-phase {
  display: none;
}

.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-artboard__frame,
.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-artboard__grid,
.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-anno,
.nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-swatches {
  opacity: 1;
}

/* ——— BUILD: static design → code → interactive → LIVE ——— */
.nw-sr-editor {
  position: absolute;
  left: 3%;
  top: 18%;
  width: min(30%, 220px);
  z-index: 4;
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(6, 6, 6, 0.88);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  transform: rotate(-2deg);
  font-family: var(--font-en);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
}

.nw-sr-editor__title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.nw-sr-editor__line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  opacity: 0;
  padding: 2px 4px;
  border-radius: 4px;
}

.nw-sr-editor__line i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}

.nw-sr-editor__cursor {
  width: 8px;
  height: 14px;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  margin-left: 14px;
}

.nw-sr-build-preview {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.nw-sr-story--build .nw-sr-ec--build {
  right: 10%;
  top: 16%;
  bottom: 14%;
  width: min(64%, 450px);
  transform: none;
  background: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  overflow: hidden;
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__chrome {
  background: #f7f7f7;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__chrome i {
  background: rgba(0, 0, 0, 0.16);
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__page {
  background: #fff;
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__logo,
.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__nav i,
.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__h,
.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__p,
.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-name,
.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-price {
  background: rgba(20, 20, 20, 0.75);
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__cart {
  border-color: rgba(20, 20, 20, 0.4);
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__media,
.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-media {
  background: linear-gradient(145deg, #ececec, #d6d6d6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__cta,
.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-btn {
  background: #111;
  box-shadow: none;
}

.nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

/* Start as static design comp (same look as DESIGN READY) */
.nw-sr-story--build .nw-sr-ec--build.is-comp .nw-sr-ec__header,
.nw-sr-story--build .nw-sr-ec--build.is-comp .nw-sr-ec__hero,
.nw-sr-story--build .nw-sr-ec--build.is-comp .nw-sr-ec__grid {
  opacity: 1;
}

.nw-sr-linkpulse {
  position: absolute;
  left: 32%;
  top: 42%;
  width: 18%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transform-origin: left center;
}

.nw-sr-fx-cursor {
  position: absolute;
  right: 34%;
  top: 36%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(20, 20, 20, 0.75);
  background: rgba(255, 255, 255, 0.85);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.nw-sr-cart-drawer {
  position: absolute;
  right: 10%;
  top: 16%;
  bottom: 14%;
  width: 0;
  max-width: 28%;
  z-index: 6;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0;
  opacity: 0;
}

.nw-sr-cart-drawer em {
  font-style: normal;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(20, 20, 20, 0.55);
  padding: 10px 10px 0;
}

.nw-sr-cart-drawer i {
  display: block;
  height: 28px;
  margin: 0 10px;
  border-radius: 4px;
  background: rgba(20, 20, 20, 0.08);
}

.nw-sr-live-badge {
  position: absolute;
  right: 12%;
  top: 18%;
  z-index: 8;
  padding: 4px 8px;
  border-radius: 99px;
  background: #111;
  color: #fff;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0;
}

.nw-sr-admin {
  position: absolute;
  right: 3%;
  top: 12%;
  width: 16%;
  z-index: 5;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(16, 16, 16, 0.9);
  display: grid;
  gap: 7px;
  transform: rotate(4deg);
  border-radius: 8px;
  opacity: 0;
}

.nw-sr-admin__title {
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

.nw-sr-admin__row {
  height: 8px;
  background: rgba(255, 255, 255, 0.14);
}

.nw-sr-admin__row.is-on {
  background: rgba(255, 255, 255, 0.55);
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-phase [data-phase="1"] {
  animation: nw-sr-phase-1 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-phase [data-phase="2"] {
  animation: nw-sr-phase-2 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-phase [data-phase="3"] {
  animation: nw-sr-phase-3 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-phase [data-phase="4"] {
  animation: nw-sr-phase-4 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-editor {
  animation: nw-sr-editor-in 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-editor__line {
  animation: nw-sr-line-in 5s ease both;
  animation-delay: calc(0.15s + var(--i) * 0.1s);
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-editor__cursor {
  animation: nw-sr-cursor 5s steps(1) both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__nav i.is-active {
  animation: nw-sr-nav-live 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__cta {
  animation: nw-sr-cta-live 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__card:nth-child(2) {
  animation: nw-sr-card-select 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-linkpulse {
  animation: nw-sr-linkpulse 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-fx-cursor {
  animation: nw-sr-fx-cursor 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-cart-drawer {
  animation: nw-sr-cart-open 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-live-badge {
  animation: nw-sr-live-badge 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-admin {
  animation: nw-sr-admin-in 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-aux {
  animation: nw-sr-aux-late 5s ease both;
}

.nw-sr-story--build .nw-sr-aux {
  opacity: 0;
}

@keyframes nw-sr-editor-in {
  0%, 2% { opacity: 0; transform: rotate(-2deg) translateX(-8px); }
  12%, 100% { opacity: 1; transform: rotate(-2deg) translateX(0); }
}

@keyframes nw-sr-line-in {
  0% { opacity: 0; color: rgba(255, 255, 255, 0.2); background: transparent; }
  8%, 18% { opacity: 1; color: #fff; background: rgba(255, 255, 255, 0.08); }
  28%, 100% { opacity: 1; color: rgba(255, 255, 255, 0.72); background: transparent; }
}

@keyframes nw-sr-cursor {
  0%, 5% { opacity: 0; transform: translateY(0); }
  8%, 55% { opacity: 1; }
  12% { transform: translateY(0); }
  25% { transform: translateY(20px); }
  38% { transform: translateY(40px); }
  50% { transform: translateY(60px); }
  62%, 100% { opacity: 0; transform: translateY(80px); }
}

@keyframes nw-sr-linkpulse {
  0%, 18% { opacity: 0; transform: scaleX(0.2); }
  28%, 42% { opacity: 1; transform: scaleX(1); }
  55%, 100% { opacity: 0; }
}

@keyframes nw-sr-nav-live {
  0%, 35% { background: rgba(20, 20, 20, 0.75); }
  45%, 100% { background: rgba(20, 20, 20, 0.95); box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.12); }
}

@keyframes nw-sr-cta-live {
  0%, 42% { transform: scale(1); box-shadow: none; }
  50% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(20, 20, 20, 0.12); }
  58%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
}

@keyframes nw-sr-card-select {
  0%, 48% { border-color: rgba(0, 0, 0, 0.1); transform: translateY(0); }
  56%, 100% {
    border-color: rgba(20, 20, 20, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  }
}

@keyframes nw-sr-fx-cursor {
  0%, 40% { opacity: 0; transform: translate(0, 0); }
  48% { opacity: 1; transform: translate(-10px, 18px); }
  58% { opacity: 1; transform: translate(-42px, 52px); }
  68% { opacity: 1; transform: translate(28px, 28px); }
  78%, 100% { opacity: 0.35; transform: translate(40px, 20px); }
}

@keyframes nw-sr-cart-open {
  0%, 58% { opacity: 0; width: 0; padding: 0; }
  68%, 100% { opacity: 1; width: 26%; padding: 0 0 10px; }
}

@keyframes nw-sr-live-badge {
  0%, 70% { opacity: 0; transform: translateY(-4px); }
  80%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-admin-in {
  0%, 15% { opacity: 0; }
  28%, 100% { opacity: 1; }
}

@keyframes nw-sr-aux-late {
  0%, 72% { opacity: 0; }
  82%, 100% { opacity: 1; }
}

/* ——— CREATE: plan → edit → publish → digital reach ——— */
.nw-sr-globe {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(58%, 320px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-globe__hub {
  opacity: 0;
}

.nw-sr-globe__node {
  opacity: 0;
}

.nw-sr-globe__ping {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}

.nw-sr-globe__arc {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  opacity: 0.9;
}

.nw-sr-packet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}

.nw-sr-packet--land {
  left: 24%;
  top: 40%;
}

.nw-sr-packet--port {
  right: 18%;
  top: 36%;
}

.nw-sr-create-hub {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  gap: 6px;
  opacity: 0;
}

.nw-sr-create-hub span {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 8, 0.82);
  border-radius: 8px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}

.nw-sr-video {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(160deg, #2a2a2a, #121212);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.nw-sr-video--land {
  left: 6%;
  top: 28%;
  width: min(38%, 260px);
  aspect-ratio: 16 / 9;
  transform: rotate(-3deg);
}

.nw-sr-video--port {
  right: 8%;
  top: 22%;
  width: min(18%, 120px);
  aspect-ratio: 9 / 16;
  transform: rotate(4deg);
}

.nw-sr-video__ratio {
  position: absolute;
  left: 8px;
  top: 8px;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

.nw-sr-video__play {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.nw-sr-video__play::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #111;
}

.nw-sr-video__cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.nw-sr-share {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.nw-sr-share span {
  position: absolute;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 8, 0.8);
  border-radius: 6px;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  opacity: 0;
}

.nw-sr-share span:nth-child(1) { left: 18%; top: 18%; }
.nw-sr-share span:nth-child(2) { right: 16%; top: 16%; }
.nw-sr-share span:nth-child(3) { left: 48%; bottom: 14%; }

.nw-sr-story--create .nw-sr-aux {
  opacity: 0;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-phase [data-phase="1"] {
  animation: nw-sr-phase-1 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-phase [data-phase="2"] {
  animation: nw-sr-phase-2 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-phase [data-phase="3"] {
  animation: nw-sr-phase-3 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-phase [data-phase="4"] {
  animation: nw-sr-phase-4 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-create-hub {
  animation: nw-sr-hub-life 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-video--land {
  animation: nw-sr-video-in 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-video--port {
  animation: nw-sr-video-in 5s ease 0.12s both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-share span {
  animation: nw-sr-share-out 5s ease both;
  animation-delay: calc(0.05s + var(--i) * 0.08s);
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe {
  animation: nw-sr-globe-in 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__hub {
  animation: nw-sr-hub-glow 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__arc[data-arc="1"] {
  animation: nw-sr-arc-1 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__arc[data-arc="2"] {
  animation: nw-sr-arc-2 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__arc[data-arc="3"] {
  animation: nw-sr-arc-3 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__arc[data-arc="4"] {
  animation: nw-sr-arc-4 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="1"] .nw-sr-globe__node {
  animation: nw-sr-node-1 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="2"] .nw-sr-globe__node {
  animation: nw-sr-node-2 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="3"] .nw-sr-globe__node {
  animation: nw-sr-node-3 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="4"] .nw-sr-globe__node {
  animation: nw-sr-node-4 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="1"] .nw-sr-globe__ping {
  animation: nw-sr-ping-1 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="2"] .nw-sr-globe__ping {
  animation: nw-sr-ping-2 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="3"] .nw-sr-globe__ping {
  animation: nw-sr-ping-3 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-globe__end[data-end="4"] .nw-sr-globe__ping {
  animation: nw-sr-ping-4 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-packet--land {
  animation: nw-sr-packet-in 5s ease both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-packet--port {
  animation: nw-sr-packet-in 5s ease 0.12s both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-aux {
  animation: nw-sr-aux-late 5s ease both;
}

@keyframes nw-sr-hub-life {
  0%, 5% { opacity: 0; transform: translate(-50%, -40%); }
  12%, 22% { opacity: 1; transform: translate(-50%, -50%); }
  34%, 55% { opacity: 0.12; transform: translate(-50%, -50%) scale(0.92); }
  65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes nw-sr-video-in {
  0%, 18% { opacity: 0; transform: translateY(12px) scale(0.96); }
  28%, 100% { opacity: 1; }
}

@keyframes nw-sr-share-out {
  0%, 40% { opacity: 0; transform: translateY(8px); }
  50%, 70% { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0.35; transform: translateY(-10px); }
}

@keyframes nw-sr-globe-in {
  0%, 48% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  60%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes nw-sr-hub-glow {
  0%, 52% { opacity: 0; }
  62%, 100% { opacity: 1; }
}

/* Reach arcs: staggered within DIGITAL REACH window (~58–95%) */
@keyframes nw-sr-arc-1 {
  0%, 58% { stroke-dashoffset: 280; opacity: 0.15; }
  70%, 100% { stroke-dashoffset: 0; opacity: 0.92; }
}
@keyframes nw-sr-arc-2 {
  0%, 62% { stroke-dashoffset: 280; opacity: 0.15; }
  76%, 100% { stroke-dashoffset: 0; opacity: 0.88; }
}
@keyframes nw-sr-arc-3 {
  0%, 66% { stroke-dashoffset: 280; opacity: 0.15; }
  82%, 100% { stroke-dashoffset: 0; opacity: 0.86; }
}
@keyframes nw-sr-arc-4 {
  0%, 70% { stroke-dashoffset: 280; opacity: 0.15; }
  88%, 100% { stroke-dashoffset: 0; opacity: 0.84; }
}

@keyframes nw-sr-node-1 {
  0%, 68% { opacity: 0; }
  74%, 100% { opacity: 1; }
}
@keyframes nw-sr-node-2 {
  0%, 74% { opacity: 0; }
  80%, 100% { opacity: 1; }
}
@keyframes nw-sr-node-3 {
  0%, 80% { opacity: 0; }
  86%, 100% { opacity: 1; }
}
@keyframes nw-sr-node-4 {
  0%, 86% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

@keyframes nw-sr-ping-1 {
  0%, 70% { opacity: 0; transform: scale(1); }
  74% { opacity: 0.65; transform: scale(1); }
  86%, 100% { opacity: 0; transform: scale(3.1); }
}
@keyframes nw-sr-ping-2 {
  0%, 76% { opacity: 0; transform: scale(1); }
  80% { opacity: 0.65; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(3); }
}
@keyframes nw-sr-ping-3 {
  0%, 82% { opacity: 0; transform: scale(1); }
  86% { opacity: 0.65; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(3.2); }
}
@keyframes nw-sr-ping-4 {
  0%, 88% { opacity: 0; transform: scale(1); }
  92% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.3); }
}

@keyframes nw-sr-packet-in {
  0%, 45% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  55% { opacity: 1; transform: translate(40px, 10px) scale(1); }
  68% { opacity: 1; transform: translate(90px, 20px) scale(0.85); }
  78%, 100% { opacity: 0; transform: translate(110px, 24px) scale(0.4); }
}

/* ——— OPERATE: PLAN → DO → CHECK(+NEXT ISSUE) → ACT → V2 → NEXT STEP ——— */
.nw-sr-pdca {
  position: absolute;
  left: 8%;
  top: 42%;
  width: 150px;
  height: 150px;
  transform: translateY(-50%);
  z-index: 3;
}

.nw-sr-pdca svg {
  width: 100%;
  height: 100%;
}

.nw-sr-pdca__progress {
  stroke-dasharray: 22 78;
  stroke-dashoffset: 0;
  transform-origin: 70px 70px;
  transform-box: view-box;
  transform: rotate(-90deg);
}

.nw-sr-pdca__needle {
  transform-origin: 70px 70px;
  transform-box: view-box;
}

.nw-sr-pdca__dot {
  /* rotated via parent .nw-sr-pdca__needle */
}

.nw-sr-pdca__item {
  position: absolute;
  display: grid;
  gap: 1px;
  font-family: var(--font-en);
  color: rgba(255, 255, 255, 0.35);
  opacity: 0.35;
}

.nw-sr-pdca__item b {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.nw-sr-pdca__item i {
  font-style: normal;
  font-size: 9px;
  font-family: var(--font-jp, sans-serif);
  color: rgba(255, 255, 255, 0.32);
}

.nw-sr-pdca__item[data-step="1"] { left: 52px; top: -8px; }
.nw-sr-pdca__item[data-step="2"] { right: -22px; top: 62px; }
.nw-sr-pdca__item[data-step="3"] { left: 48px; bottom: -10px; }
.nw-sr-pdca__item[data-step="4"] { left: -26px; top: 62px; }

.nw-sr-op-ui {
  position: absolute;
  right: 8%;
  top: 20%;
  width: min(48%, 300px);
  aspect-ratio: 16 / 11;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(18, 18, 18, 0.92);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  padding: 10px 12px 12px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
}

.nw-sr-op-ui__chrome {
  display: flex;
  gap: 5px;
}

.nw-sr-op-ui__chrome i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.nw-sr-op-ui__h {
  display: block;
  height: 10px;
  width: 78%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 2;
}

.nw-sr-op-ui__p {
  display: block;
  height: 5px;
  width: 58%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  align-self: start;
}

.nw-sr-op-ui__cta {
  display: block;
  width: 42%;
  height: 22px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  align-self: end;
  position: relative;
  z-index: 2;
  margin-left: 0;
}

.nw-sr-op-ui__sel {
  position: absolute;
  border: 1px solid rgba(180, 210, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(180, 210, 255, 0.18);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.nw-sr-op-ui__sel--msg {
  left: 10px;
  top: 34px;
  width: 72%;
  height: 28px;
}

.nw-sr-op-ui__sel--cta {
  left: 10px;
  bottom: 10px;
  width: 48%;
  height: 28px;
}

.nw-sr-op-ui__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.nw-sr-op-ui__ver {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
}

.nw-sr-op-ui__ver--v2 {
  color: #fff;
}

.nw-sr-op-plan {
  position: absolute;
  left: 38%;
  top: 22%;
  z-index: 5;
  display: grid;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-op-plan span {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 8, 0.82);
  border-radius: 6px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  width: max-content;
}

.nw-sr-op-plan__title {
  color: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.nw-sr-op-do {
  position: absolute;
  left: 38%;
  top: 24%;
  z-index: 5;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-op-do span {
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 8, 0.82);
  border-radius: 6px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
}

.nw-sr-op-do__v {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.nw-sr-op-checks {
  position: absolute;
  left: 38%;
  bottom: 18%;
  z-index: 5;
  display: grid;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-op-checks span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.5);
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.75);
  width: max-content;
}

.nw-sr-op-checks i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.nw-sr-next-issue {
  position: absolute;
  left: 36%;
  top: 46%;
  transform: translateY(-50%) scale(0.94);
  z-index: 7;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(8, 8, 8, 0.92);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.nw-sr-next-issue__en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
}

.nw-sr-next-issue__detail {
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.nw-sr-op-link {
  position: absolute;
  left: 48%;
  top: 52%;
  width: 18%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), transparent);
  opacity: 0;
  z-index: 6;
  transform-origin: left center;
  pointer-events: none;
}

.nw-sr-op-act {
  position: absolute;
  right: 10%;
  bottom: 12%;
  z-index: 6;
  display: grid;
  gap: 4px;
  justify-items: end;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-op-act span {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.nw-sr-op-act__arrow {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.nw-sr-op-act__done {
  font-size: 18px;
  color: #fff;
  opacity: 0;
}

.nw-sr-op-act__improved {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
}

.nw-sr-next-step {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) scale(0.92);
  z-index: 8;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(8, 8, 8, 0.92);
  border-radius: 10px;
  display: grid;
  gap: 3px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.nw-sr-next-step__en {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}

.nw-sr-next-step__jp {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

/* Phase labels: PLAN 0–20 / DO 20–42 / CHECK 42–68 / ACT 68–100 */
.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-phase [data-phase="1"] {
  animation: nw-sr-op-phase-1 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-phase [data-phase="2"] {
  animation: nw-sr-op-phase-2 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-phase [data-phase="3"] {
  animation: nw-sr-op-phase-3 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-phase [data-phase="4"] {
  animation: nw-sr-op-phase-4 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-pdca__item[data-step="1"] {
  animation: nw-sr-op-hl-1 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-pdca__item[data-step="2"] {
  animation: nw-sr-op-hl-2 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-pdca__item[data-step="3"] {
  animation: nw-sr-op-hl-3 5s linear both;
}
.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-pdca__item[data-step="4"] {
  animation: nw-sr-op-hl-4 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-pdca__needle {
  animation: nw-sr-op-dot 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-pdca__progress {
  animation: nw-sr-op-progress 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-plan {
  animation: nw-sr-op-plan 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-ui__sel {
  animation: nw-sr-op-sel 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-do {
  animation: nw-sr-op-do 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-ui__h {
  animation: nw-sr-op-h 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-ui__cta {
  animation: nw-sr-op-cta 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-ui__ver--v1 {
  animation: nw-sr-op-ver-v1 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-ui__ver--v2 {
  animation: nw-sr-op-ver-v2 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-checks {
  animation: nw-sr-op-checks 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-ui__scan {
  animation: nw-sr-op-scan 5s linear both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-next-issue {
  animation: nw-sr-op-issue 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-link {
  animation: nw-sr-op-link 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-act {
  animation: nw-sr-op-act 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-act__done {
  animation: nw-sr-op-v2 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-act__improved {
  animation: nw-sr-op-improved 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-next-step {
  animation: nw-sr-op-step 5s ease both;
}

.nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-op-ui {
  animation: nw-sr-op-ui-life 5s ease both;
}

@keyframes nw-sr-op-phase-1 {
  0%, 18% { opacity: 1; }
  22%, 100% { opacity: 0; }
}
@keyframes nw-sr-op-phase-2 {
  0%, 18% { opacity: 0; }
  22%, 40% { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes nw-sr-op-phase-3 {
  0%, 40% { opacity: 0; }
  44%, 66% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes nw-sr-op-phase-4 {
  0%, 66% { opacity: 0; }
  70%, 100% { opacity: 1; }
}

@keyframes nw-sr-op-hl-1 {
  0%, 18% { opacity: 1; color: #fff; }
  24%, 100% { opacity: 0.35; color: rgba(255, 255, 255, 0.35); }
}
@keyframes nw-sr-op-hl-2 {
  0%, 18% { opacity: 0.35; }
  22%, 40% { opacity: 1; color: #fff; }
  46%, 100% { opacity: 0.35; color: rgba(255, 255, 255, 0.35); }
}
@keyframes nw-sr-op-hl-3 {
  0%, 40% { opacity: 0.35; }
  44%, 66% { opacity: 1; color: #fff; }
  72%, 100% { opacity: 0.35; color: rgba(255, 255, 255, 0.35); }
}
@keyframes nw-sr-op-hl-4 {
  0%, 66% { opacity: 0.35; }
  70%, 100% { opacity: 1; color: #fff; }
}

@keyframes nw-sr-op-dot {
  0%, 18% { transform: rotate(0deg); }
  22%, 40% { transform: rotate(90deg); }
  44%, 66% { transform: rotate(180deg); }
  70%, 100% { transform: rotate(270deg); }
}

@keyframes nw-sr-op-progress {
  0%, 18% { transform: rotate(-90deg); stroke-dasharray: 22 78; }
  22%, 40% { transform: rotate(0deg); stroke-dasharray: 22 78; }
  44%, 66% { transform: rotate(90deg); stroke-dasharray: 22 78; }
  70%, 100% { transform: rotate(180deg); stroke-dasharray: 22 78; }
}

@keyframes nw-sr-op-plan {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  10%, 18% { opacity: 1; transform: translateY(0); }
  24%, 100% { opacity: 0; }
}

@keyframes nw-sr-op-sel {
  0%, 6% { opacity: 0; }
  12%, 20% { opacity: 1; }
  28%, 100% { opacity: 0; }
}

@keyframes nw-sr-op-do {
  0%, 20% { opacity: 0; }
  24%, 38% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes nw-sr-op-h {
  0%, 20% { width: 78%; }
  28%, 66% { width: 56%; }
  78%, 100% { width: 62%; }
}

@keyframes nw-sr-op-cta {
  0%, 20% {
    width: 42%;
    margin-left: 0;
    background: rgba(255, 255, 255, 0.35);
    height: 22px;
  }
  28%, 66% {
    width: 48%;
    margin-left: 28%;
    background: rgba(255, 255, 255, 0.55);
    height: 22px;
  }
  78%, 100% {
    width: 58%;
    margin-left: 0;
    background: #fff;
    height: 26px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }
}

@keyframes nw-sr-op-ver-v1 {
  0%, 22% { opacity: 0; }
  28%, 66% { opacity: 1; }
  74%, 100% { opacity: 0; }
}

@keyframes nw-sr-op-ver-v2 {
  0%, 80% { opacity: 0; }
  86%, 100% { opacity: 1; }
}

@keyframes nw-sr-op-checks {
  0%, 42% { opacity: 0; }
  48%, 62% { opacity: 1; }
  72%, 100% { opacity: 0; }
}

@keyframes nw-sr-op-scan {
  0%, 42% { opacity: 0; top: 18%; }
  46% { opacity: 1; top: 18%; }
  62% { opacity: 1; top: 78%; }
  68%, 100% { opacity: 0; top: 82%; }
}

/* NEXT ISSUE: 3.0–3.8s ≈ 60–76% */
@keyframes nw-sr-op-issue {
  0%, 58% { opacity: 0; transform: translateY(-50%) scale(0.94); }
  64%, 74% { opacity: 1; transform: translateY(-50%) scale(1); }
  82%, 100% { opacity: 0; transform: translateY(-54%) scale(0.96); }
}

@keyframes nw-sr-op-link {
  0%, 68% { opacity: 0; transform: scaleX(0.2); }
  74%, 82% { opacity: 1; transform: scaleX(1); }
  90%, 100% { opacity: 0; }
}

@keyframes nw-sr-op-act {
  0%, 68% { opacity: 0; }
  74%, 100% { opacity: 1; }
}

@keyframes nw-sr-op-v2 {
  0%, 82% { opacity: 0; transform: translateY(4px); }
  88%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-op-improved {
  0%, 86% { opacity: 0; }
  90%, 100% { opacity: 1; }
}

@keyframes nw-sr-op-step {
  0%, 90% { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
  94%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes nw-sr-op-ui-life {
  0%, 88% { opacity: 1; filter: none; }
  94%, 100% { opacity: 0.35; filter: blur(1px); }
}

/* ——— SP dedicated layout ——— */
@media (max-width: 980px) {
  .nw-showreel {
    --scene-label-size: 11px;
    --scene-title-size: 17.5px;
  }

  .nw-showreel__scene-heading {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 3;
    display: grid;
    gap: 4px;
    max-width: 100%;
    width: 100%;
    min-height: 52px;
    max-height: 64px;
    padding: 0 2px;
    box-sizing: border-box;
    text-shadow: none;
    flex: 0 0 auto;
  }

  .nw-showreel__scene-visual {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto;
    min-height: 200px;
    height: 210px;
    max-height: 230px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .nw-sr-story {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .nw-sr-phase {
    left: 2%;
    top: 2%;
    max-width: 70%;
    font-size: 9px;
  }

  /* Hide PC-heavy chrome on SP */
  .nw-sr-aux,
  .nw-sr-admin,
  .nw-sr-anno,
  .nw-sr-swatches,
  .nw-sr-artboard__grid,
  .nw-sr-extracts,
  .nw-sr-priority,
  .nw-sr-ask--pc,
  .nw-sr-board__item--pc,
  .nw-sr-editor__line--pc,
  .nw-sr-create-hub,
  .nw-sr-share,
  .nw-sr-op-checks,
  .nw-sr-op-plan__item--pc,
  .nw-sr-op-do__label--pc,
  .nw-sr-op-plan__title,
  .nw-sr-op-ui__sel--msg,
  .nw-sr-op-link,
  .nw-sr-pdca__item i,
  .nw-sr-fx-cursor,
  .nw-sr-packet,
  .nw-sr-next-step__jp,
  .nw-sr-op-act__improved,
  .nw-sr-next-issue__detail {
    display: none !important;
  }

  /* ——— CLARIFY ——— */
  .nw-sr-story--clarify .nw-sr-phase {
    display: none;
  }

  .nw-sr-ask {
    font-size: 11px;
    padding: 7px 10px;
  }

  .nw-sr-ask:nth-child(2) { left: 6%; top: 16%; }
  .nw-sr-ask:nth-child(3) { left: 48%; top: 12%; }
  .nw-sr-ask:nth-child(6) { left: 22%; top: 46%; }

  .nw-sr-board--req {
    width: min(78%, 260px);
    left: 50%;
    top: 52%;
  }

  .nw-sr-board--req .nw-sr-board__item {
    font-size: 11px;
  }

  /* ——— DESIGN ——— */
  .nw-sr-story--design .nw-sr-artboard {
    inset: 4% 0 2%;
  }

  .nw-sr-artboard__frame {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
  }

  .nw-sr-story--design .nw-sr-ec--design {
    left: 4%;
    right: 4%;
    width: auto;
    max-width: 100%;
    top: 8%;
    bottom: 8%;
    transform: none;
    filter: none;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design {
    animation: nw-sr-design-grow-sp 6s linear both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__header {
    animation: nw-sr-design-part-header-sp 6s linear both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__hero {
    animation: nw-sr-design-part-hero-sp 6s linear both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__grid {
    animation: nw-sr-design-part-grid-sp 6s linear both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="1"],
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="2"],
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="3"] {
    display: none;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-phase [data-phase="4"] {
    animation: nw-sr-design-phase-sp-4 6s linear both;
  }

  /* ——— BUILD ——— */
  .nw-sr-story--build .nw-sr-phase [data-phase="1"],
  .nw-sr-story--build .nw-sr-phase [data-phase="2"],
  .nw-sr-story--build .nw-sr-phase [data-phase="3"] {
    display: none;
  }

  .nw-sr-editor {
    left: 2%;
    top: 6%;
    width: min(42%, 140px);
    transform: none;
    z-index: 2;
  }

  .nw-sr-editor__line {
    font-size: 9px;
  }

  .nw-sr-build-preview {
    position: absolute;
    inset: 8% 2% 6% 28%;
    overflow: visible;
  }

  .nw-sr-story--build .nw-sr-ec--build {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    max-width: 100%;
    transform: none;
  }

  .nw-sr-cart-drawer {
    display: block;
    width: 42%;
    right: 0;
    bottom: 8%;
  }

  .nw-sr-live-badge {
    display: block;
    right: 6%;
    top: 8%;
  }

  /* ——— CREATE ——— */
  .nw-sr-story--create .nw-sr-phase {
    display: none;
  }

  .nw-sr-globe {
    display: block;
    left: 50%;
    top: 58%;
    width: min(54%, 180px);
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .nw-sr-video--land {
    left: 2%;
    top: 6%;
    width: 46%;
    max-width: 160px;
    transform: none;
    z-index: 3;
  }

  .nw-sr-video--port {
    right: 2%;
    top: 4%;
    width: 20%;
    max-width: 72px;
    transform: none;
    z-index: 3;
  }

  /* ——— OPERATE ——— */
  .nw-sr-story--operate .nw-sr-phase {
    display: none;
  }

  .nw-sr-pdca {
    width: 100px;
    height: 100px;
    left: 50%;
    top: 8%;
    transform: translateX(-50%);
  }

  .nw-sr-pdca svg {
    width: 100px;
    height: 100px;
  }

  .nw-sr-op-ui {
    left: 50%;
    right: auto;
    top: 48%;
    width: min(70%, 220px);
    transform: translateX(-50%);
  }

  .nw-sr-op-plan,
  .nw-sr-op-do {
    left: 4%;
    right: auto;
    top: 40%;
    font-size: 10px;
  }

  .nw-sr-next-issue {
    left: 50%;
    top: 36%;
    transform: translateX(-50%);
  }

  .nw-sr-op-act {
    right: 4%;
    bottom: 4%;
    left: auto;
  }

  .nw-sr-next-step {
    left: 50%;
    bottom: 2%;
    top: auto;
    transform: translateX(-50%);
  }

  .nw-sr-next-step__en {
    font-size: 9px;
  }

  /* Legacy PC-story SP overrides disabled — SP uses .nw-sr-sp symbolic scenes */
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-ask,
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-board--req,
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design,
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__header,
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__hero,
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__grid {
    animation: none !important;
  }
}

@keyframes nw-sr-design-grow-sp {
  /* blank */
  0%, 8% {
    --ec-page-bg: #ffffff;
    --ec-border: transparent;
    --ec-media: transparent;
    --ec-media-glow: transparent;
    --ec-ink: transparent;
    --ec-cta-bg: transparent;
    --ec-cta-border: transparent;
    --ec-card-bg: transparent;
    --ec-card-radius: 0px;
    --ec-hero-cols: 1fr 1fr;
    --ec-chrome: #f7f7f7;
    background: #ffffff;
  }
  /* wire */
  12%, 40% {
    --ec-page-bg: #ffffff;
    --ec-border: rgba(20, 20, 20, 0.34);
    --ec-media: transparent;
    --ec-media-glow: transparent;
    --ec-ink: rgba(20, 20, 20, 0.28);
    --ec-cta-bg: transparent;
    --ec-cta-border: rgba(20, 20, 20, 0.4);
    --ec-card-bg: transparent;
    --ec-card-radius: 0px;
    --ec-hero-cols: 1fr 1fr;
    --ec-chrome: #f0f0f0;
    background: #ffffff;
  }
  /* ready */
  55%, 100% {
    --ec-page-bg: #ffffff;
    --ec-border: rgba(20, 20, 20, 0.1);
    --ec-media: linear-gradient(145deg, #ececec, #d4d4d4 55%, #e2e2e2);
    --ec-media-glow: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08));
    --ec-ink: rgba(20, 20, 20, 0.88);
    --ec-cta-bg: #111;
    --ec-cta-border: #111;
    --ec-card-bg: #fff;
    --ec-card-radius: 8px;
    --ec-hero-cols: 1.15fr 0.85fr;
    --ec-chrome: #f7f7f7;
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
  }
}

@keyframes nw-sr-design-part-header-sp {
  0%, 8% { opacity: 0; }
  12%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-part-hero-sp {
  0%, 14% { opacity: 0; }
  18%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-part-grid-sp {
  0%, 20% { opacity: 0; }
  24%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-phase-sp-1 {
  0%, 8% { opacity: 0; }
  12%, 42% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

@keyframes nw-sr-design-phase-sp-4 {
  0%, 48% { opacity: 0; }
  55%, 100% { opacity: 1; }
}

@keyframes nw-sr-design-anno-in-sp {
  0%, 50% { opacity: 0; }
  58%, 100% { opacity: 1; }
}

@keyframes nw-sr-phase-sp-1 {
  0%, 40% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes nw-sr-phase-sp-4 {
  0%, 45% { opacity: 0; }
  55%, 100% { opacity: 1; }
}

@keyframes nw-sr-ask-life-sp {
  0%, 35% { opacity: 1; }
  55%, 100% { opacity: 0.15; }
}

@keyframes nw-sr-board-req-sp {
  0%, 45% { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
  60%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ——— reduced-motion: finished static states ——— */
@media (prefers-reduced-motion: reduce) {
  .nw-showreel__scene-label-en,
  .nw-showreel__scene-label-jp,
  .nw-next-js .nw-showreel__scene.is-active [class*="nw-sr-"],
  .nw-next-js .nw-showreel__scene.is-active .nw-sr-phase span {
    animation: none !important;
  }

  .nw-sr-story--clarify .nw-sr-asks,
  .nw-sr-story--clarify .nw-sr-extracts,
  .nw-sr-story--clarify .nw-sr-priority {
    display: none !important;
  }

  .nw-sr-story--clarify .nw-sr-board--req,
  .nw-sr-story--clarify .nw-sr-phase [data-phase="4"] {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .nw-sr-story--clarify .nw-sr-phase [data-phase="1"],
  .nw-sr-story--clarify .nw-sr-phase [data-phase="2"],
  .nw-sr-story--clarify .nw-sr-phase [data-phase="3"] {
    opacity: 0 !important;
  }

  .nw-sr-story--design .nw-sr-ec--design {
    --ec-page-bg: #ffffff;
    --ec-border: rgba(20, 20, 20, 0.1);
    --ec-media: linear-gradient(145deg, #ececec, #d4d4d4 55%, #e2e2e2);
    --ec-media-glow: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08));
    --ec-ink: rgba(20, 20, 20, 0.88);
    --ec-cta-bg: #111;
    --ec-cta-border: #111;
    --ec-card-bg: #fff;
    --ec-card-radius: 8px;
    --ec-hero-cols: 1.15fr 0.85fr;
    --ec-chrome: #f7f7f7;
    background: #ffffff;
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__header,
  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__hero,
  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__grid,
  .nw-sr-story--design .nw-sr-aux {
    opacity: 1 !important;
  }

  .nw-sr-story--design .nw-sr-phase [data-phase="4"],
  .nw-sr-story--design .nw-sr-artboard__frame,
  .nw-sr-story--design .nw-sr-artboard__grid,
  .nw-sr-story--design .nw-sr-anno,
  .nw-sr-story--design .nw-sr-swatches {
    opacity: 1 !important;
  }

  .nw-sr-story--design .nw-sr-phase [data-phase="1"],
  .nw-sr-story--design .nw-sr-phase [data-phase="2"],
  .nw-sr-story--design .nw-sr-phase [data-phase="3"] {
    opacity: 0 !important;
  }

  .nw-sr-story--build .nw-sr-editor,
  .nw-sr-story--build .nw-sr-editor__line,
  .nw-sr-story--build .nw-sr-admin,
  .nw-sr-story--build .nw-sr-aux,
  .nw-sr-story--build .nw-sr-live-badge,
  .nw-sr-story--build .nw-sr-cart-drawer,
  .nw-sr-story--build .nw-sr-phase [data-phase="4"] {
    opacity: 1 !important;
  }

  .nw-sr-story--build .nw-sr-cart-drawer {
    width: 26% !important;
    padding: 0 0 10px !important;
  }

  .nw-sr-story--create .nw-sr-video,
  .nw-sr-story--create .nw-sr-globe,
  .nw-sr-story--create .nw-sr-aux,
  .nw-sr-story--create .nw-sr-globe__hub,
  .nw-sr-story--create .nw-sr-phase [data-phase="4"] {
    opacity: 1 !important;
  }

  .nw-sr-story--create .nw-sr-globe__arc {
    stroke-dashoffset: 0 !important;
    opacity: 0.9 !important;
  }

  .nw-sr-story--create .nw-sr-globe__node {
    opacity: 1 !important;
  }

  .nw-sr-story--create .nw-sr-create-hub,
  .nw-sr-story--create .nw-sr-share {
    display: none !important;
  }

  .nw-sr-story--operate .nw-sr-pdca,
  .nw-sr-story--operate .nw-sr-op-ui,
  .nw-sr-story--operate .nw-sr-next-issue,
  .nw-sr-story--operate .nw-sr-op-act,
  .nw-sr-story--operate .nw-sr-op-act__done,
  .nw-sr-story--operate .nw-sr-op-act__improved,
  .nw-sr-story--operate .nw-sr-phase [data-phase="4"] {
    opacity: 1 !important;
  }

  .nw-sr-story--operate .nw-sr-op-ui__cta {
    width: 58% !important;
    margin-left: 0 !important;
    background: #fff !important;
    height: 26px !important;
  }

  .nw-sr-story--operate .nw-sr-op-ui__h {
    width: 62% !important;
  }

  .nw-sr-story--operate .nw-sr-op-ui__ver--v2 {
    opacity: 1 !important;
  }

  .nw-sr-story--operate .nw-sr-op-ui__ver--v1 {
    opacity: 0 !important;
  }

  .nw-sr-story--operate .nw-sr-op-plan,
  .nw-sr-story--operate .nw-sr-op-do,
  .nw-sr-story--operate .nw-sr-op-checks,
  .nw-sr-story--operate .nw-sr-op-link,
  .nw-sr-story--operate .nw-sr-next-step,
  .nw-sr-story--operate .nw-sr-op-ui__sel,
  .nw-sr-story--operate .nw-sr-op-ui__scan {
    opacity: 0 !important;
  }

  .nw-sr-story--operate .nw-sr-next-issue {
    left: 8%;
    top: 22%;
    transform: none !important;
  }

  .nw-sr-story--operate .nw-sr-op-act {
    opacity: 1 !important;
  }

  .nw-sr-story--operate .nw-sr-pdca__item {
    opacity: 0.45 !important;
  }

  .nw-sr-story--operate .nw-sr-pdca__item[data-step="4"] {
    opacity: 1 !important;
    color: #fff !important;
  }
}

/* JS off: finished states */
.nw-next:not(.nw-next-js) .nw-sr-story--clarify .nw-sr-asks,
.nw-next:not(.nw-next-js) .nw-sr-story--clarify .nw-sr-extracts,
.nw-next:not(.nw-next-js) .nw-sr-story--clarify .nw-sr-priority,
.nw-next:not(.nw-next-js) .nw-sr-story--clarify .nw-sr-phase,
.nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-phase,
.nw-next:not(.nw-next-js) .nw-sr-story--create .nw-sr-phase,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-phase,
.nw-next:not(.nw-next-js) .nw-sr-story--create .nw-sr-create-hub,
.nw-next:not(.nw-next-js) .nw-sr-story--create .nw-sr-share,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-plan,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-do,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-checks,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-link,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-next-step,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-ui__sel,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-ui__scan {
  display: none;
}

.nw-next:not(.nw-next-js) .nw-sr-story--clarify .nw-sr-board--req {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-editor,
.nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-editor__line,
.nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-admin,
.nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-aux,
.nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-live-badge {
  opacity: 1;
}

.nw-next:not(.nw-next-js) .nw-sr-story--create .nw-sr-video,
.nw-next:not(.nw-next-js) .nw-sr-story--create .nw-sr-globe,
.nw-next:not(.nw-next-js) .nw-sr-story--create .nw-sr-aux {
  opacity: 1;
}

.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-ver--v2 {
  opacity: 1;
}

.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-next-issue,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-ui__ver--v2 {
  opacity: 1;
}

.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-act,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-act__done,
.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-act__improved {
  opacity: 1;
}

.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-ui__ver--v1 {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-op-ui__cta {
  width: 58%;
  background: #fff;
  height: 26px;
}

.nw-next:not(.nw-next-js) .nw-sr-story--operate .nw-sr-next-issue {
  left: 8%;
  top: 22%;
  transform: none;
}

.nw-sr-shot img {
  display: none !important;
}