/**
 * Home Next Showreel — SP-only symbolic canvases
 * PC story UI is separated via .nw-sr-pc-only / .nw-sr-sp-only / .nw-sr-sp
 * Scene motion: transform + opacity first (clip-path only for code typing) · duration 6.5s · fill-mode both
 */

/* ——— Display separation ——— */
.nw-sr-pc-only { display: block; }
.nw-sr-sp-only,
.nw-sr-sp { display: none; }

@media (min-width: 981px) {
  .nw-sr-pc-only { display: block; }
  .nw-sr-sp-only,
  .nw-sr-sp { display: none !important; }
}

@media (max-width: 980px) {
  .nw-sr-pc-only { display: none !important; }
  .nw-sr-sp-only,
  .nw-sr-sp { display: block; }

  /* ——— Stage ——— */
  .nw-showreel__stage {
    width: min(88vw, 350px);
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: min(54svh, 440px);
    min-height: 0;
    margin-inline: auto;
  }

  .nw-showreel__stage-inner {
    position: absolute;
    inset: 0;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
  }

  .nw-showreel__scene {
    transform: translateY(12px) scale(0.985);
    filter: blur(2px);
  }

  .nw-showreel__scene.is-active {
    transform: none;
    filter: none;
  }

  .nw-showreel__scene.is-leaving {
    transform: translateY(-10px) scale(0.985);
    filter: blur(2px);
  }

  /* Heading: EN only */
  .nw-showreel__scene-heading {
    min-height: 28px;
    max-height: 36px;
    margin-bottom: 0;
    gap: 0;
  }

  .nw-showreel__scene-label-en {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .nw-showreel__scene-label-en-row--pc {
    display: none !important;
  }

  .nw-showreel__scene-label-en-row--sp {
    display: inline !important;
  }

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

  .nw-showreel__scene-visual {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
  }

  /* Particles: keep first 6 */
  .nw-showreel__dot:nth-child(n + 7) {
    display: none !important;
  }

  /* Indicator: fine 5-bar, large tap */
  .nw-showreel__indicator {
    gap: 6px;
    align-items: center;
  }

  .nw-showreel__ind-btn {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nw-showreel__ind-btn::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.2s ease, opacity 0.2s ease;
  }

  .nw-showreel__ind-btn.is-active::before,
  .nw-showreel__ind-btn[aria-current="true"]::before {
    background: rgba(255, 255, 255, 1);
  }

  .nw-showreel__ind-num,
  .nw-showreel__ind-name,
  .nw-showreel__ind-progress {
    display: none !important;
  }

  /* ——— Shared SP canvas shell ——— */
  .nw-sr-sp {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .nw-sr-sp-canvas {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .nw-sr-sp-canvas__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.2;
  }

  .nw-sr-sp-canvas__body {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    margin-top: 10px;
  }

  .nw-sr-sp-canvas__status {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right;
    color: rgba(255, 255, 255, 0.55);
    opacity: 0;
    line-height: 1.2;
  }

  .nw-sr-sp-phase {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    pointer-events: none;
  }

  /* =========================================
     CLARIFY — fragments → requirements list
     ========================================= */
  .nw-sr-sp-canvas--clarify .nw-sr-sp-frag {
    position: absolute;
    z-index: 2;
    font-family: var(--font-en);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-canvas--clarify .nw-sr-sp-frag:nth-child(1) {
    left: 8%;
    top: 18%;
    opacity: 0.55;
  }
  .nw-sr-sp-canvas--clarify .nw-sr-sp-frag:nth-child(2) {
    right: 10%;
    top: 28%;
    font-size: 9px;
    opacity: 0.4;
  }
  .nw-sr-sp-canvas--clarify .nw-sr-sp-frag:nth-child(3) {
    left: 22%;
    top: 58%;
    opacity: 0.65;
  }
  .nw-sr-sp-canvas--clarify .nw-sr-sp-frag:nth-child(4) {
    right: 14%;
    top: 62%;
    font-size: 8px;
    opacity: 0.45;
  }
  .nw-sr-sp-canvas--clarify .nw-sr-sp-frag:nth-child(5) {
    left: 42%;
    top: 38%;
    opacity: 0.5;
  }

  .nw-sr-sp-list {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(88%, 220px);
    transform: translate(-50%, -50%);
    display: grid;
    gap: 6px;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-list__title {
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
  }

  .nw-sr-sp-list__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0;
    transform: translateY(6px);
  }

  .nw-sr-sp-list__row em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.4);
    font-size: 9px;
    letter-spacing: 0.08em;
    min-width: 1.6em;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-frag:nth-child(1) {
    animation: nw-sr-sp2-frag-1 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-frag:nth-child(2) {
    animation: nw-sr-sp2-frag-2 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-frag:nth-child(3) {
    animation: nw-sr-sp2-frag-3 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-frag:nth-child(4) {
    animation: nw-sr-sp2-frag-4 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-frag:nth-child(5) {
    animation: nw-sr-sp2-frag-5 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-list {
    animation: nw-sr-sp2-list 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-list__row:nth-child(2) {
    animation: nw-sr-sp2-row 6.5s ease both;
    animation-delay: 0s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-list__row:nth-child(3) {
    animation: nw-sr-sp2-row 6.5s ease both;
    animation-delay: 0.06s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-list__row:nth-child(4) {
    animation: nw-sr-sp2-row 6.5s ease both;
    animation-delay: 0.12s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-list__row:nth-child(5) {
    animation: nw-sr-sp2-row 6.5s ease both;
    animation-delay: 0.18s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-list__row:nth-child(6) {
    animation: nw-sr-sp2-row 6.5s ease both;
    animation-delay: 0.24s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="clarify"].is-active .nw-sr-sp-canvas__status {
    animation: nw-sr-sp2-status 6.5s ease both;
  }

  /* =========================================
     DESIGN — wireframe draw → scan → visual design
     0–2.6 wireframe / 2.6–3.2 scan / 3.2–5.4 design fill / 5.4–6.5 ready
     ========================================= */
  .nw-sr-sp-canvas--design .nw-sr-sp-scan {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 38%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(200, 232, 90, 0.1) 44%,
      rgba(255, 255, 255, 0.5) 76%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-120%);
    will-change: transform, opacity;
  }

  .nw-sr-sp-site {
    position: absolute;
    left: 50%;
    top: 51%;
    z-index: 2;
    width: auto;
    height: min(92%, 248px);
    aspect-ratio: 9 / 16;
    transform: translate(-50%, -50%) scale(0.955);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 10px;
    background: rgba(10, 10, 10, 0.6);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px 7px 8px;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-site__chrome {
    flex: 0 0 auto;
    height: 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0.1);
    transform-origin: left center;
  }

  .nw-sr-sp-site__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
  }

  .nw-sr-sp-site__nav i {
    display: block;
    height: 2px;
    width: 14px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.3);
  }

  .nw-sr-sp-site__nav i:nth-child(2) {
    width: 10px;
  }

  .nw-sr-sp-site__nav i:nth-child(3) {
    width: 12px;
    margin-left: auto;
  }

  .nw-sr-sp-site__hero {
    position: relative;
    flex: 0 0 auto;
    height: 26%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    overflow: hidden;
    opacity: 0;
    transform: scaleX(0.1);
    transform-origin: left center;
  }

  .nw-sr-sp-site__hero-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(200, 232, 90, 0.24) 0%,
      rgba(255, 255, 255, 0.16) 48%,
      rgba(255, 255, 255, 0.04) 100%
    );
    opacity: 0;
  }

  .nw-sr-sp-site__h,
  .nw-sr-sp-site__p {
    position: relative;
    flex: 0 0 auto;
    border-radius: 1px;
    overflow: hidden;
    opacity: 0;
    transform: scaleX(0.1);
    transform-origin: left center;
  }

  .nw-sr-sp-site__h {
    height: 4px;
    width: 74%;
    background: rgba(255, 255, 255, 0.3);
  }

  .nw-sr-sp-site__p {
    height: 2.5px;
    width: 52%;
    background: rgba(255, 255, 255, 0.2);
  }

  .nw-sr-sp-site__h::after,
  .nw-sr-sp-site__p::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    opacity: 0;
  }

  .nw-sr-sp-site__cta {
    position: relative;
    flex: 0 0 auto;
    height: 13px;
    width: 48%;
    margin-top: 1px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 99px;
    overflow: hidden;
    opacity: 0;
    transform: scaleX(0.1);
    transform-origin: left center;
  }

  .nw-sr-sp-site__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #c8e85a;
    opacity: 0;
  }

  .nw-sr-sp-site__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: auto;
    opacity: 0;
  }

  .nw-sr-sp-site__card {
    display: grid;
    gap: 2px;
    align-content: start;
  }

  .nw-sr-sp-site__card i {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    overflow: hidden;
  }

  .nw-sr-sp-site__card i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06));
    opacity: 0;
  }

  .nw-sr-sp-site__card b,
  .nw-sr-sp-site__card em {
    position: relative;
    display: block;
    height: 2px;
    border-radius: 1px;
    overflow: hidden;
  }

  .nw-sr-sp-site__card b {
    width: 88%;
    background: rgba(255, 255, 255, 0.26);
  }

  .nw-sr-sp-site__card em {
    width: 52%;
    background: rgba(255, 255, 255, 0.4);
  }

  .nw-sr-sp-site__card:nth-child(2) b { width: 70%; }
  .nw-sr-sp-site__card:nth-child(2) em { width: 62%; }
  .nw-sr-sp-site__card:nth-child(3) b { width: 82%; }
  .nw-sr-sp-site__card:nth-child(3) em { width: 44%; }

  .nw-sr-sp-site__card em::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-phase--wire {
    animation: nw-sr-sp3-dsn-phase-wire 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-phase--design {
    animation: nw-sr-sp3-dsn-phase-design 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site {
    animation: nw-sr-sp3-dsn-site 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__chrome {
    animation: nw-sr-sp3-dsn-draw 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__nav {
    animation: nw-sr-sp3-dsn-fade 6.5s ease both;
    animation-delay: 0.08s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__hero {
    animation: nw-sr-sp3-dsn-draw 6.5s ease both;
    animation-delay: 0.16s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__h {
    animation: nw-sr-sp3-dsn-draw 6.5s ease both;
    animation-delay: 0.26s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__p {
    animation: nw-sr-sp3-dsn-draw 6.5s ease both;
    animation-delay: 0.32s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__cta {
    animation: nw-sr-sp3-dsn-draw 6.5s ease both;
    animation-delay: 0.4s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__cards {
    animation: nw-sr-sp3-dsn-fade 6.5s ease both;
    animation-delay: 0.48s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-scan {
    animation: nw-sr-sp3-dsn-scan 6.5s linear both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__hero-fill {
    animation: nw-sr-sp3-dsn-fill 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__h::after {
    animation: nw-sr-sp3-dsn-fill 6.5s ease both;
    animation-delay: 0.06s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__p::after {
    animation: nw-sr-sp3-dsn-fill 6.5s ease both;
    animation-delay: 0.12s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__card i::after {
    animation: nw-sr-sp3-dsn-fill 6.5s ease both;
    animation-delay: 0.18s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__card:nth-child(2) i::after {
    animation-delay: 0.26s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__card:nth-child(3) i::after {
    animation-delay: 0.34s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__card em::after {
    animation: nw-sr-sp3-dsn-fill 6.5s ease both;
    animation-delay: 0.3s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-site__cta::after {
    animation: nw-sr-sp3-dsn-cta 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-sp-canvas__status {
    animation: nw-sr-sp3-status-early 6.5s ease both;
  }

  /* =========================================
     BUILD — AI editor typing → preview → interaction → live
     0–0.8 editor / 0.8–3.4 code / 3.4–4.8 preview / 4.8–5.6 cart + 0 errors / 5.6–6.5 live
     ========================================= */
  .nw-sr-sp-ai {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-en);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    pointer-events: none;
  }

  .nw-sr-sp-ai::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c8e85a;
  }

  .nw-sr-sp-ide {
    position: absolute;
    left: 0;
    right: 0;
    top: 13px;
    height: auto;
    max-height: 52%;
    z-index: 2;
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 6px 8px 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    background: rgba(6, 6, 6, 0.62);
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-ide__title {
    font-family: var(--font-en);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
  }

  .nw-sr-sp-ide__line {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path, opacity;
  }

  .nw-sr-sp-ide__line--in {
    padding-left: 9px;
  }

  .nw-sr-sp-ide__line b {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.38);
  }

  .nw-sr-sp-ide__line i {
    font-style: normal;
    color: #c8e85a;
  }

  .nw-sr-sp-ide__line em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.92);
  }

  .nw-sr-sp-ide__cursor {
    display: block;
    justify-self: start;
    width: 1px;
    height: 9px;
    margin-left: 1px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
  }

  .nw-sr-sp-preview {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    width: min(60%, 140px);
    height: min(44%, 136px);
    transform: translate(-50%, 10px) scale(0.96);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: #f5f5f3;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-preview__header {
    flex: 0 0 auto;
    height: 7px;
    width: 44%;
    border-radius: 2px;
    background: rgba(20, 20, 20, 0.26);
    opacity: 0;
  }

  .nw-sr-sp-preview__card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
  }

  .nw-sr-sp-preview__media {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 3px;
    background: linear-gradient(160deg, rgba(20, 20, 20, 0.18), rgba(20, 20, 20, 0.05));
  }

  .nw-sr-sp-preview__name,
  .nw-sr-sp-preview__price {
    flex: 0 0 auto;
    height: 3px;
    border-radius: 1px;
  }

  .nw-sr-sp-preview__name {
    width: 70%;
    background: rgba(20, 20, 20, 0.32);
  }

  .nw-sr-sp-preview__price {
    width: 34%;
    background: rgba(20, 20, 20, 0.62);
  }

  .nw-sr-sp-preview__cta {
    position: relative;
    flex: 0 0 auto;
    height: 13px;
    width: 62%;
    border-radius: 99px;
    background: #131313;
    opacity: 0;
  }

  .nw-sr-sp-preview__cta::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(19, 19, 19, 0.55);
    border-radius: 99px;
    opacity: 0;
    transform: scale(0.7);
  }

  .nw-sr-sp-preview__cart {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(20, 20, 20, 0.45);
    border-radius: 3px;
    opacity: 0;
  }

  .nw-sr-sp-preview__cart i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-en);
    font-size: 7px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    color: rgba(19, 19, 19, 0.85);
  }

  .nw-sr-sp-preview__cart i:nth-child(2) {
    opacity: 0;
    transform: translateY(4px);
  }

  .nw-sr-sp-build-ok {
    position: absolute;
    left: 0;
    bottom: 4px;
    z-index: 5;
    font-family: var(--font-en);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c8e85a;
    white-space: nowrap;
    opacity: 0;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-ai {
    animation: nw-sr-sp3-bld-ai 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-ide {
    animation: nw-sr-sp3-bld-ide 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-ide__line {
    animation: nw-sr-sp3-bld-type 6.5s linear both;
    animation-delay: calc(var(--i, 0) * 0.62s);
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-ide__cursor {
    animation: nw-sr-sp3-bld-cursor 6.5s linear both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview {
    animation: nw-sr-sp3-bld-preview 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview__header {
    animation: nw-sr-sp3-bld-part 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview__card {
    animation: nw-sr-sp3-bld-part 6.5s ease both;
    animation-delay: 0.08s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview__cta {
    animation: nw-sr-sp3-bld-part 6.5s ease both;
    animation-delay: 0.16s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview__cta::after {
    animation: nw-sr-sp3-bld-click 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview__cart {
    animation: nw-sr-sp3-bld-cart 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview__cart i:nth-child(1) {
    animation: nw-sr-sp3-bld-count-out 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-preview__cart i:nth-child(2) {
    animation: nw-sr-sp3-bld-count-in 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-build-ok {
    animation: nw-sr-sp3-bld-ok 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-sp-canvas__status {
    animation: nw-sr-sp3-status 6.5s ease both;
  }

  /* =========================================
     CREATE — script → edit → publish → channels → reach
     0–1.6 script / 1.6–3.2 edit / 3.2–3.8 complete / 3.8–5.0 publish + spokes / 5.0–6.5 channels + reach
     ========================================= */
  .nw-sr-sp-canvas--create .nw-sr-sp-phase {
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    text-align: center;
  }

  .nw-sr-sp-reel {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: min(36%, 80px);
    aspect-ratio: 9 / 16;
    transform: translate(-50%, -50%) scale(0.9);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 7px;
    background: linear-gradient(165deg, #2b2b2b, #0e0e0e);
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-reel__blocks {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 12%;
    display: grid;
    gap: 4px;
    opacity: 0;
  }

  .nw-sr-sp-reel__blocks i {
    display: block;
    height: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 0;
    transform: scaleX(0.1);
    transform-origin: left center;
  }

  .nw-sr-sp-reel__blocks i:nth-child(2) { width: 74%; }
  .nw-sr-sp-reel__blocks i:nth-child(3) { width: 52%; }

  .nw-sr-sp-reel__cut {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 100%;
    opacity: 0;
    transform: translateX(-24%);
  }

  .nw-sr-sp-reel__cut::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.9);
  }

  .nw-sr-sp-reel__cap {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 26%;
    display: grid;
    gap: 3px;
    opacity: 0;
    transform: translateY(4px);
  }

  .nw-sr-sp-reel__cap i {
    display: block;
    height: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.75);
  }

  .nw-sr-sp-reel__cap i:nth-child(2) {
    width: 62%;
    background: rgba(255, 255, 255, 0.45);
  }

  .nw-sr-sp-reel__head {
    position: absolute;
    left: 0;
    bottom: 9%;
    width: 100%;
    height: 10px;
    opacity: 0;
    transform: translateX(-40%);
  }

  .nw-sr-sp-reel__head::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #c8e85a;
  }

  .nw-sr-sp-reel__play {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
    transform: translate(-40%, -50%) scale(0.6);
    opacity: 0;
  }

  .nw-sr-sp-reel__bar {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 13%;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
  }

  .nw-sr-sp-reel__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    transform: scaleX(0);
    transform-origin: left center;
  }

  .nw-sr-sp-spokes {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: min(100%, 210px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
  }

  .nw-sr-sp-spokes__line {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    opacity: 0;
  }

  .nw-sr-sp-channels {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(100%, 210px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .nw-sr-sp-ch {
    position: absolute;
    padding: 2px 5px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    background: rgba(8, 8, 8, 0.72);
    font-family: var(--font-en);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }

  .nw-sr-sp-ch[data-ch="yt"] { left: 24%; top: 24%; }
  .nw-sr-sp-ch[data-ch="tt"] { left: 76%; top: 24%; }
  .nw-sr-sp-ch[data-ch="ig"] { left: 50%; top: 84%; }

  .nw-sr-sp-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 40%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
    pointer-events: none;
  }

  .nw-sr-sp-ripple::after {
    content: "";
    position: absolute;
    inset: -22%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    opacity: 0;
  }

  .nw-sr-sp-spark-dots {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
  }

  .nw-sr-sp-spark-dots i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: scale(0.4);
  }

  .nw-sr-sp-spark-dots i:nth-child(1) { left: 16%; top: 20%; }
  .nw-sr-sp-spark-dots i:nth-child(2) { left: 32%; top: 12%; }
  .nw-sr-sp-spark-dots i:nth-child(3) { right: 18%; top: 18%; }
  .nw-sr-sp-spark-dots i:nth-child(4) { right: 30%; top: 30%; }
  .nw-sr-sp-spark-dots i:nth-child(5) { left: 40%; bottom: 12%; }
  .nw-sr-sp-spark-dots i:nth-child(6) { right: 38%; bottom: 20%; }

  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-phase--script {
    animation: nw-sr-sp3-crt-phase-script 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-phase--edit {
    animation: nw-sr-sp3-crt-phase-edit 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-phase--publish {
    animation: nw-sr-sp3-crt-phase-publish 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel {
    animation: nw-sr-sp3-crt-reel 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__blocks {
    animation: nw-sr-sp3-crt-blocks 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__blocks i {
    animation: nw-sr-sp3-crt-block-line 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__blocks i:nth-child(2) {
    animation-delay: 0.12s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__blocks i:nth-child(3) {
    animation-delay: 0.24s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__cut {
    animation: nw-sr-sp3-crt-cut 6.5s linear both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__cap {
    animation: nw-sr-sp3-crt-cap 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__head {
    animation: nw-sr-sp3-crt-head 6.5s linear both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__play {
    animation: nw-sr-sp3-crt-play 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-reel__bar::after {
    animation: nw-sr-sp3-crt-bar 6.5s linear both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spokes__line {
    animation: nw-sr-sp3-crt-spoke 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spokes__line[data-ch="tt"] {
    animation-delay: 0.08s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spokes__line[data-ch="ig"] {
    animation-delay: 0.16s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-ch {
    animation: nw-sr-sp3-crt-ch 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-ch[data-ch="tt"] {
    animation-delay: 0.07s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-ch[data-ch="ig"] {
    animation-delay: 0.14s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-ripple {
    animation: nw-sr-sp3-crt-ripple 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-ripple::after {
    animation: nw-sr-sp3-crt-ripple-2 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spark-dots {
    animation: nw-sr-sp3-crt-spark-shell 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spark-dots i {
    animation: nw-sr-sp3-crt-spark 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spark-dots i:nth-child(2) {
    animation-delay: 0.05s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spark-dots i:nth-child(3) {
    animation-delay: 0.1s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spark-dots i:nth-child(4) {
    animation-delay: 0.15s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spark-dots i:nth-child(5) {
    animation-delay: 0.2s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-spark-dots i:nth-child(6) {
    animation-delay: 0.25s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="create"].is-active .nw-sr-sp-canvas__status {
    animation: nw-sr-sp3-status 6.5s ease both;
  }

  /* Hide PC globe on SP create story */
  .nw-sr-story--create .nw-sr-globe {
    display: none !important;
  }

  /* =========================================
     OPERATE — measure → analyze → improve → result → loop
     0–1.6 measure / 1.6–3.2 analyze / 3.2–4.4 improve / 4.4–5.6 result / 5.6–6.5 loop
     ========================================= */
  .nw-sr-sp-ops {
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    bottom: 16px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
  }

  .nw-sr-sp-ops-page {
    position: relative;
    display: grid;
    gap: 5px;
    align-content: start;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    background: rgba(8, 8, 8, 0.55);
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-ops-page__h,
  .nw-sr-sp-ops-page__p {
    border-radius: 1px;
    opacity: 0;
  }

  .nw-sr-sp-ops-page__h {
    height: 4px;
    width: 62%;
    background: rgba(255, 255, 255, 0.42);
  }

  .nw-sr-sp-ops-page__p {
    height: 2.5px;
    width: 46%;
    background: rgba(255, 255, 255, 0.22);
  }

  .nw-sr-sp-ops-page__cta {
    position: relative;
    height: 13px;
    width: 46%;
    margin-top: 3px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.26);
    overflow: hidden;
    opacity: 0;
  }

  .nw-sr-sp-ops-page__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #c8e85a;
    opacity: 0;
  }

  .nw-sr-sp-ops-page__heat {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
  }

  .nw-sr-sp-ops-page__heat i {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transform: scale(0.5);
  }

  .nw-sr-sp-ops-page__heat i:nth-child(1) { left: 4%; top: 6%; }
  .nw-sr-sp-ops-page__heat i:nth-child(2) { left: 30%; top: 34%; }
  .nw-sr-sp-ops-page__heat i:nth-child(3) { left: 8%; bottom: 8%; }

  .nw-sr-sp-ops-page__issue {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 4;
    padding: 1px 4px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 2px;
    font-family: var(--font-en);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(4px);
  }

  .nw-sr-sp-ops-panel {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 8px 9px 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    background: rgba(8, 8, 8, 0.55);
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
  }

  .nw-sr-sp-ops-panel__views {
    position: relative;
    display: block;
    height: 13px;
  }

  .nw-sr-sp-ops-panel__views b {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
  }

  .nw-sr-sp-ops-panel__views b:nth-child(1) {
    color: rgba(255, 255, 255, 0.4);
  }

  .nw-sr-sp-ops-panel__views b:nth-child(2) {
    opacity: 0;
    transform: translateY(5px);
  }

  .nw-sr-sp-ops-chart {
    position: relative;
    display: block;
    height: 38px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    overflow: hidden;
  }

  .nw-sr-sp-ops-chart__v1,
  .nw-sr-sp-ops-chart__v2 {
    position: absolute;
    left: 2%;
    bottom: 5px;
    width: 92%;
    height: 1px;
    transform-origin: left bottom;
    opacity: 0;
  }

  .nw-sr-sp-ops-chart__v1 {
    background: rgba(255, 255, 255, 0.45);
    transform: rotate(-4deg) scaleX(0);
  }

  .nw-sr-sp-ops-chart__v2 {
    background: rgba(255, 255, 255, 0.9);
    transform: rotate(-19deg) scaleX(0);
  }

  .nw-sr-sp-ops-chart__dip {
    position: absolute;
    left: 56%;
    bottom: 11px;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.5);
  }

  .nw-sr-sp-ops-ctr {
    position: relative;
    display: block;
    height: 12px;
  }

  .nw-sr-sp-ops-ctr i {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.06em;
    line-height: 1.1;
  }

  .nw-sr-sp-ops-ctr i:nth-child(1) {
    color: rgba(255, 255, 255, 0.55);
  }

  .nw-sr-sp-ops-ctr i:nth-child(2) {
    color: #c8e85a;
    opacity: 0;
    transform: translateY(5px);
  }

  .nw-sr-sp-ops-gain {
    position: absolute;
    right: 9px;
    bottom: 9px;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0;
    transform: translateY(4px) scale(0.9);
  }

  .nw-sr-sp-ops-loop {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-en);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
  }

  .nw-sr-sp-ops-loop::before {
    content: "\21BB";
    font-size: 9px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.7);
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-phase--measure {
    animation: nw-sr-sp3-ops-phase-1 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-phase--analyze {
    animation: nw-sr-sp3-ops-phase-2 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-phase--improve {
    animation: nw-sr-sp3-ops-phase-3 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-phase--result {
    animation: nw-sr-sp3-ops-phase-4 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page {
    animation: nw-sr-sp3-ops-card 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-panel {
    animation: nw-sr-sp3-ops-card 6.5s ease both;
    animation-delay: 0.16s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__h {
    animation: nw-sr-sp3-ops-part 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__p {
    animation: nw-sr-sp3-ops-part 6.5s ease both;
    animation-delay: 0.07s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__cta {
    animation: nw-sr-sp3-ops-part 6.5s ease both;
    animation-delay: 0.14s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__cta::after {
    animation: nw-sr-sp3-ops-cta-fill 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__heat {
    animation: nw-sr-sp3-ops-heat 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__heat i {
    animation: nw-sr-sp3-ops-heat-dot 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__heat i:nth-child(2) {
    animation-delay: 0.08s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__heat i:nth-child(3) {
    animation-delay: 0.16s;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-page__issue {
    animation: nw-sr-sp3-ops-issue 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-panel__views b:nth-child(1) {
    animation: nw-sr-sp3-ops-num-out 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-panel__views b:nth-child(2) {
    animation: nw-sr-sp3-ops-num-in 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-chart__v1 {
    animation: nw-sr-sp3-ops-v1 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-chart__dip {
    animation: nw-sr-sp3-ops-dip 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-chart__v2 {
    animation: nw-sr-sp3-ops-v2 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-ctr i:nth-child(1) {
    animation: nw-sr-sp3-ops-ctr-out 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-ctr i:nth-child(2) {
    animation: nw-sr-sp3-ops-ctr-in 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-gain {
    animation: nw-sr-sp3-ops-gain 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-ops-loop {
    animation: nw-sr-sp3-ops-loop 6.5s ease both;
  }
  .nw-next-js .nw-showreel__scene[data-scene-key="operate"].is-active .nw-sr-sp-canvas__status {
    animation: nw-sr-sp3-status 6.5s ease both;
  }
}

/* =========================================
   Keyframes — CLARIFY (unchanged timeline)
   ========================================= */
@keyframes nw-sr-sp2-frag-1 {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  15%, 28% { opacity: 0.7; transform: translate(0, 0); }
  45%, 58% { opacity: 0.9; transform: translate(42px, 38px); }
  70%, 100% { opacity: 0; transform: translate(42px, 38px); }
}
@keyframes nw-sr-sp2-frag-2 {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  15%, 28% { opacity: 0.55; transform: translate(0, 0); }
  45%, 58% { opacity: 0.9; transform: translate(-36px, 28px); }
  70%, 100% { opacity: 0; transform: translate(-36px, 28px); }
}
@keyframes nw-sr-sp2-frag-3 {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  15%, 28% { opacity: 0.75; transform: translate(0, 0); }
  45%, 58% { opacity: 0.9; transform: translate(28px, -22px); }
  70%, 100% { opacity: 0; transform: translate(28px, -22px); }
}
@keyframes nw-sr-sp2-frag-4 {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  15%, 28% { opacity: 0.5; transform: translate(0, 0); }
  45%, 58% { opacity: 0.9; transform: translate(-30px, -30px); }
  70%, 100% { opacity: 0; transform: translate(-30px, -30px); }
}
@keyframes nw-sr-sp2-frag-5 {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  15%, 28% { opacity: 0.6; transform: translate(0, 0); }
  45%, 58% { opacity: 0.9; transform: translate(0, 8px); }
  70%, 100% { opacity: 0; transform: translate(0, 8px); }
}

@keyframes nw-sr-sp2-list {
  0%, 52% { opacity: 0; transform: translate(-50%, -46%) scale(0.98); }
  70%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes nw-sr-sp2-row {
  0%, 58% { opacity: 0; transform: translateY(6px); }
  72%, 100% { opacity: 1; transform: translateY(0); }
}

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

/* =========================================
   Keyframes — shared status reveals
   ========================================= */
@keyframes nw-sr-sp3-status-early {
  0%, 83% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

@keyframes nw-sr-sp3-status {
  0%, 86% { opacity: 0; }
  94%, 100% { opacity: 1; }
}

/* =========================================
   Keyframes — DESIGN
   ========================================= */
@keyframes nw-sr-sp3-dsn-phase-wire {
  0%, 2% { opacity: 0; transform: translateY(3px); }
  6%, 36% { opacity: 0.62; transform: translateY(0); }
  44%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes nw-sr-sp3-dsn-phase-design {
  0%, 44% { opacity: 0; transform: translateY(3px); }
  50%, 78% { opacity: 0.62; transform: translateY(0); }
  86%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes nw-sr-sp3-dsn-site {
  0%, 3% { opacity: 0; transform: translate(-50%, -50%) scale(0.955); }
  11%, 83% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  97%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.055); }
}

@keyframes nw-sr-sp3-dsn-draw {
  0%, 4% { opacity: 0; transform: scaleX(0.1); }
  30%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes nw-sr-sp3-dsn-fade {
  0%, 8% { opacity: 0; transform: translateY(4px); }
  30%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-sp3-dsn-scan {
  0%, 39% { opacity: 0; transform: translateX(-120%); }
  41% { opacity: 1; }
  47% { opacity: 1; }
  50%, 100% { opacity: 0; transform: translateX(300%); }
}

@keyframes nw-sr-sp3-dsn-fill {
  0%, 44% { opacity: 0; }
  58%, 100% { opacity: 1; }
}

@keyframes nw-sr-sp3-dsn-cta {
  0%, 50% { opacity: 0; }
  62%, 100% { opacity: 1; }
}

/* =========================================
   Keyframes — BUILD
   ========================================= */
@keyframes nw-sr-sp3-bld-ide {
  0%, 2% { opacity: 0; transform: translateY(-6px); }
  12% { opacity: 1; transform: translateY(0); }
  74% { opacity: 1; }
  88%, 100% { opacity: 0.4; }
}

@keyframes nw-sr-sp3-bld-ai {
  0%, 3% { opacity: 0; transform: translateY(-3px); }
  8%, 52% { opacity: 0.72; transform: translateY(0); }
  58%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes nw-sr-sp3-bld-type {
  0%, 12% { opacity: 0; clip-path: inset(0 100% 0 0); }
  13% { opacity: 1; }
  24%, 100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes nw-sr-sp3-bld-cursor {
  0%, 11% { opacity: 0; }
  12%, 16% { opacity: 0.9; }
  17%, 21% { opacity: 0.1; }
  22%, 26% { opacity: 0.9; }
  27%, 31% { opacity: 0.1; }
  32%, 36% { opacity: 0.9; }
  37%, 41% { opacity: 0.1; }
  42%, 46% { opacity: 0.9; }
  47%, 51% { opacity: 0.1; }
  52%, 100% { opacity: 0; }
}

@keyframes nw-sr-sp3-bld-preview {
  0%, 52% { opacity: 0; transform: translate(-50%, 10px) scale(0.96); }
  60%, 88% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
}

@keyframes nw-sr-sp3-bld-part {
  0%, 56% { opacity: 0; transform: translateY(5px); }
  66%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-sp3-bld-click {
  0%, 72% { opacity: 0; transform: scale(0.7); }
  76% { opacity: 0.8; }
  84%, 100% { opacity: 0; transform: scale(1.5); }
}

@keyframes nw-sr-sp3-bld-cart {
  0%, 62% { opacity: 0; transform: scale(0.8); }
  70%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes nw-sr-sp3-bld-count-out {
  0%, 74% { opacity: 1; transform: translateY(0); }
  79%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes nw-sr-sp3-bld-count-in {
  0%, 76% { opacity: 0; transform: translateY(4px); }
  82%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-sp3-bld-ok {
  0%, 74% { opacity: 0; transform: translateY(4px); }
  82%, 100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
   Keyframes — CREATE
   ========================================= */
@keyframes nw-sr-sp3-crt-phase-script {
  0%, 1% { opacity: 0; }
  5%, 22% { opacity: 0.72; }
  28%, 100% { opacity: 0; }
}

@keyframes nw-sr-sp3-crt-phase-edit {
  0%, 26% { opacity: 0; }
  31%, 46% { opacity: 0.72; }
  52%, 100% { opacity: 0; }
}

@keyframes nw-sr-sp3-crt-phase-publish {
  0%, 55% { opacity: 0; }
  60%, 82% { opacity: 0.78; }
  90%, 100% { opacity: 0; }
}

@keyframes nw-sr-sp3-crt-reel {
  0%, 3% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  12%, 58% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(0.62); }
}

@keyframes nw-sr-sp3-crt-blocks {
  0%, 5% { opacity: 0; }
  13%, 24% { opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes nw-sr-sp3-crt-block-line {
  0%, 6% { opacity: 0; transform: scaleX(0.1); }
  18%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes nw-sr-sp3-crt-cut {
  0%, 25% { opacity: 0; transform: translateX(-24%); }
  27%, 31% { opacity: 0.95; transform: translateX(-24%); }
  33% { opacity: 0; transform: translateX(-24%); animation-timing-function: steps(1, end); }
  37%, 40% { opacity: 0.95; transform: translateX(14%); }
  43%, 100% { opacity: 0; transform: translateX(14%); }
}

@keyframes nw-sr-sp3-crt-cap {
  0%, 32% { opacity: 0; transform: translateY(4px); }
  40%, 60% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0.65; transform: translateY(0); }
}

@keyframes nw-sr-sp3-crt-head {
  0%, 28% { opacity: 0; transform: translateX(-40%); }
  32% { opacity: 1; }
  50% { opacity: 1; transform: translateX(38%); }
  56%, 100% { opacity: 0; transform: translateX(38%); }
}

@keyframes nw-sr-sp3-crt-play {
  0%, 49% { opacity: 0; transform: translate(-40%, -50%) scale(0.6); }
  57%, 100% { opacity: 1; transform: translate(-40%, -50%) scale(1); }
}

@keyframes nw-sr-sp3-crt-bar {
  0%, 30% { transform: scaleX(0); }
  56%, 100% { transform: scaleX(1); }
}

@keyframes nw-sr-sp3-crt-spoke {
  0%, 58% { opacity: 0; stroke-dashoffset: 90; }
  62% { opacity: 1; }
  72%, 100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes nw-sr-sp3-crt-ch {
  0%, 66% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  74%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes nw-sr-sp3-crt-ripple {
  0%, 80% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  84% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes nw-sr-sp3-crt-ripple-2 {
  0%, 84% { opacity: 0; transform: scale(0.7); }
  88% { opacity: 0.4; }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes nw-sr-sp3-crt-spark-shell {
  0%, 80% { opacity: 0; }
  84%, 100% { opacity: 1; }
}

@keyframes nw-sr-sp3-crt-spark {
  0%, 82% { opacity: 0; transform: scale(0.4); }
  91% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.75); }
}

/* =========================================
   Keyframes — OPERATE
   ========================================= */
@keyframes nw-sr-sp3-ops-phase-1 {
  0%, 1% { opacity: 0; transform: translateY(3px); }
  4%, 21% { opacity: 0.68; transform: translateY(0); }
  26%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes nw-sr-sp3-ops-phase-2 {
  0%, 24% { opacity: 0; transform: translateY(3px); }
  28%, 44% { opacity: 0.68; transform: translateY(0); }
  49%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes nw-sr-sp3-ops-phase-3 {
  0%, 47% { opacity: 0; transform: translateY(3px); }
  51%, 63% { opacity: 0.68; transform: translateY(0); }
  68%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes nw-sr-sp3-ops-phase-4 {
  0%, 66% { opacity: 0; transform: translateY(3px); }
  70%, 84% { opacity: 0.68; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes nw-sr-sp3-ops-card {
  0%, 2% { opacity: 0; transform: translateY(6px); }
  12%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-sp3-ops-part {
  0%, 5% { opacity: 0; transform: translateY(4px); }
  16%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-sp3-ops-cta-fill {
  0%, 50% { opacity: 0; }
  60%, 100% { opacity: 1; }
}

@keyframes nw-sr-sp3-ops-heat {
  0%, 26% { opacity: 0; }
  33%, 49% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@keyframes nw-sr-sp3-ops-heat-dot {
  0%, 27% { opacity: 0; transform: scale(0.5); }
  36%, 100% { opacity: 0.9; transform: scale(1); }
}

@keyframes nw-sr-sp3-ops-issue {
  0%, 30% { opacity: 0; transform: translateX(4px); }
  38%, 50% { opacity: 1; transform: translateX(0); }
  57%, 100% { opacity: 0; transform: translateX(4px); }
}

@keyframes nw-sr-sp3-ops-num-out {
  0%, 14% { opacity: 1; transform: translateY(0); }
  20%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes nw-sr-sp3-ops-num-in {
  0%, 16% { opacity: 0; transform: translateY(5px); }
  23%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-sp3-ops-v1 {
  0%, 8% { opacity: 0; transform: rotate(-4deg) scaleX(0); }
  26%, 70% { opacity: 0.85; transform: rotate(-4deg) scaleX(1); }
  80%, 100% { opacity: 0.3; transform: rotate(-4deg) scaleX(1); }
}

@keyframes nw-sr-sp3-ops-dip {
  0%, 34% { opacity: 0; transform: scale(0.5); }
  42%, 52% { opacity: 1; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes nw-sr-sp3-ops-v2 {
  0%, 68% { opacity: 0; transform: rotate(-19deg) scaleX(0); }
  72% { opacity: 1; }
  82%, 100% { opacity: 1; transform: rotate(-19deg) scaleX(1); }
}

@keyframes nw-sr-sp3-ops-ctr-out {
  0%, 74% { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes nw-sr-sp3-ops-ctr-in {
  0%, 76% { opacity: 0; transform: translateY(5px); }
  83%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes nw-sr-sp3-ops-gain {
  0%, 78% { opacity: 0; transform: translateY(4px) scale(0.9); }
  86%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nw-sr-sp3-ops-loop {
  0%, 86% { opacity: 0; transform: translateX(-4px); }
  92%, 100% { opacity: 0.7; transform: translateX(0); }
}

/* =========================================
   No-JS: completed look for every scene
   ========================================= */
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--clarify .nw-sr-sp-frag {
  display: none !important;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--clarify .nw-sr-sp-list {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--clarify .nw-sr-sp-list__row {
  opacity: 1;
  transform: none;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas__status {
  opacity: 1;
}

/* Design: visual design applied */
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-phase,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-scan {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__chrome,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__nav,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__hero,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__h,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__p,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__cta,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__cards {
  opacity: 1;
  transform: none;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__hero-fill,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__h::after,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__p::after,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__cta::after,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__card i::after,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--design .nw-sr-sp-site__card em::after {
  opacity: 1;
}

/* Build: live preview with cart at 1 */
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-ai,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-ide__cursor {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-ide {
  opacity: 0.4;
  transform: none;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-ide__line {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview__header,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview__card,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview__cta,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-build-ok {
  opacity: 1;
  transform: none;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview__cta::after {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview__cart {
  opacity: 1;
  transform: scale(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview__cart i:nth-child(1) {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--build .nw-sr-sp-preview__cart i:nth-child(2) {
  opacity: 1;
  transform: none;
}

/* Create: published reel with channels reached */
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-phase,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-reel__blocks,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-reel__cut,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-reel__head,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-ripple,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-spark-dots {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-reel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.62);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-reel__cap {
  opacity: 0.65;
  transform: none;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-reel__play {
  opacity: 1;
  transform: translate(-40%, -50%) scale(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-reel__bar::after {
  transform: scaleX(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-spokes__line {
  opacity: 1;
  stroke-dashoffset: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--create .nw-sr-sp-ch {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Operate: improved result */
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-phase,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__heat,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__issue,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-chart__dip {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-panel,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__h,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__p,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__cta,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__cta::after,
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-gain {
  opacity: 1;
  transform: none;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-panel__views b:nth-child(1),
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-ctr i:nth-child(1) {
  opacity: 0;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-panel__views b:nth-child(2),
.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-ctr i:nth-child(2) {
  opacity: 1;
  transform: none;
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-chart__v1 {
  opacity: 0.3;
  transform: rotate(-4deg) scaleX(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-chart__v2 {
  opacity: 1;
  transform: rotate(-19deg) scaleX(1);
}

.nw-next:not(.nw-next-js) .nw-sr-sp-canvas--operate .nw-sr-sp-ops-loop {
  opacity: 0.7;
  transform: none;
}

/* =========================================
   Reduced motion: end states, no infinite, no blur
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 980px) {
    .nw-showreel__scene,
    .nw-showreel__scene.is-leaving {
      filter: none !important;
      transform: none !important;
    }
  }

  .nw-sr-sp-canvas *,
  .nw-sr-sp-canvas *::before,
  .nw-sr-sp-canvas *::after {
    animation: none !important;
    transition: none !important;
  }

  .nw-sr-sp-canvas__status {
    opacity: 1 !important;
  }

  /* Clarify end */
  .nw-sr-sp-canvas--clarify .nw-sr-sp-frag {
    display: none !important;
  }
  .nw-sr-sp-canvas--clarify .nw-sr-sp-list {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .nw-sr-sp-canvas--clarify .nw-sr-sp-list__row {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Design end */
  .nw-sr-sp-canvas--design .nw-sr-sp-phase,
  .nw-sr-sp-canvas--design .nw-sr-sp-scan {
    opacity: 0 !important;
  }
  .nw-sr-sp-canvas--design .nw-sr-sp-site {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .nw-sr-sp-canvas--design .nw-sr-sp-site__chrome,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__nav,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__hero,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__h,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__p,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__cta,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__cards {
    opacity: 1 !important;
    transform: none !important;
  }
  .nw-sr-sp-canvas--design .nw-sr-sp-site__hero-fill,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__h::after,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__p::after,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__cta::after,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__card i::after,
  .nw-sr-sp-canvas--design .nw-sr-sp-site__card em::after {
    opacity: 1 !important;
  }

  /* Build end */
  .nw-sr-sp-canvas--build .nw-sr-sp-ai,
  .nw-sr-sp-canvas--build .nw-sr-sp-ide__cursor,
  .nw-sr-sp-canvas--build .nw-sr-sp-preview__cta::after {
    opacity: 0 !important;
  }
  .nw-sr-sp-canvas--build .nw-sr-sp-ide {
    opacity: 0.4 !important;
    transform: none !important;
  }
  .nw-sr-sp-canvas--build .nw-sr-sp-ide__line {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
  }
  .nw-sr-sp-canvas--build .nw-sr-sp-preview {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
  }
  .nw-sr-sp-canvas--build .nw-sr-sp-preview__header,
  .nw-sr-sp-canvas--build .nw-sr-sp-preview__card,
  .nw-sr-sp-canvas--build .nw-sr-sp-preview__cta,
  .nw-sr-sp-canvas--build .nw-sr-sp-preview__cart,
  .nw-sr-sp-canvas--build .nw-sr-sp-build-ok {
    opacity: 1 !important;
    transform: none !important;
  }
  .nw-sr-sp-canvas--build .nw-sr-sp-preview__cart i:nth-child(1) {
    opacity: 0 !important;
  }
  .nw-sr-sp-canvas--build .nw-sr-sp-preview__cart i:nth-child(2) {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Create end */
  .nw-sr-sp-canvas--create .nw-sr-sp-phase,
  .nw-sr-sp-canvas--create .nw-sr-sp-reel__blocks,
  .nw-sr-sp-canvas--create .nw-sr-sp-reel__cut,
  .nw-sr-sp-canvas--create .nw-sr-sp-reel__head,
  .nw-sr-sp-canvas--create .nw-sr-sp-ripple,
  .nw-sr-sp-canvas--create .nw-sr-sp-spark-dots {
    opacity: 0 !important;
  }
  .nw-sr-sp-canvas--create .nw-sr-sp-reel {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(0.62) !important;
  }
  .nw-sr-sp-canvas--create .nw-sr-sp-reel__cap {
    opacity: 0.65 !important;
    transform: none !important;
  }
  .nw-sr-sp-canvas--create .nw-sr-sp-reel__play {
    opacity: 1 !important;
    transform: translate(-40%, -50%) scale(1) !important;
  }
  .nw-sr-sp-canvas--create .nw-sr-sp-reel__bar::after {
    transform: scaleX(1) !important;
  }
  .nw-sr-sp-canvas--create .nw-sr-sp-spokes__line {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .nw-sr-sp-canvas--create .nw-sr-sp-ch {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  /* Operate end */
  .nw-sr-sp-canvas--operate .nw-sr-sp-phase,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__heat,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__issue,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-chart__dip {
    opacity: 0 !important;
  }
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-panel,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__h,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__p,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__cta,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-page__cta::after,
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-gain {
    opacity: 1 !important;
    transform: none !important;
  }
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-panel__views b:nth-child(1),
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-ctr i:nth-child(1) {
    opacity: 0 !important;
  }
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-panel__views b:nth-child(2),
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-ctr i:nth-child(2) {
    opacity: 1 !important;
    transform: none !important;
  }
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-chart__v1 {
    opacity: 0.3 !important;
    transform: rotate(-4deg) scaleX(1) !important;
  }
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-chart__v2 {
    opacity: 1 !important;
    transform: rotate(-19deg) scaleX(1) !important;
  }
  .nw-sr-sp-canvas--operate .nw-sr-sp-ops-loop {
    opacity: 0.7 !important;
    transform: none !important;
  }
}