/**
 * Home Next Showreel — PC-only DESIGN / BUILD color & build progression
 * Scoped to min-width: 981px. SP canvas / timelines are untouched.
 */

@media (min-width: 981px) {
  /* ——— DESIGN: progressive brand colorization ——— */
  .nw-sr-anno--comp {
    left: 10%;
    top: 44%;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.45);
  }

  .nw-sr-story--design .nw-sr-swatches i[data-swatch="ink"] { background: #1a1a1a; }
  .nw-sr-story--design .nw-sr-swatches i[data-swatch="sage"] { background: #aeb9a2; }
  .nw-sr-story--design .nw-sr-swatches i[data-swatch="lime"] { background: #c8e85a; }
  .nw-sr-story--design .nw-sr-swatches i[data-swatch="ivory"] { background: #f7f7f3; }

  .nw-next-js .nw-sr-story--design .nw-sr-swatches i {
    opacity: 0.35;
    filter: grayscale(1);
    transform: scale(0.92);
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__media,
  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-media {
    position: relative;
    overflow: hidden;
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__media::before,
  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: none;
    background:
      radial-gradient(ellipse 55% 70% at 62% 58%, rgba(174, 185, 162, 0.95) 0%, rgba(174, 185, 162, 0.2) 42%, transparent 68%),
      radial-gradient(ellipse 40% 35% at 28% 30%, rgba(247, 247, 243, 0.85), transparent 70%),
      linear-gradient(160deg, #e8ebe3 0%, #c9d0c2 45%, #b7c0b0 100%);
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card:nth-child(2) .nw-sr-ec__card-media::before {
    background:
      radial-gradient(ellipse 50% 55% at 48% 62%, rgba(200, 232, 90, 0.35), transparent 60%),
      radial-gradient(ellipse 45% 40% at 70% 28%, rgba(255, 255, 255, 0.55), transparent 65%),
      linear-gradient(145deg, #f3f1ea, #d8d4c8 55%, #c5c0b4);
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card:nth-child(3) .nw-sr-ec__card-media::before {
    background:
      radial-gradient(ellipse 48% 60% at 40% 55%, rgba(120, 110, 95, 0.45), transparent 62%),
      linear-gradient(155deg, #efeae2, #d2c8b8 50%, #bfb3a2);
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__media::after {
    opacity: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 45%),
      linear-gradient(120deg, transparent 40%, rgba(26, 26, 26, 0.08));
  }

  /* Redefine PC DESIGN grow — SP uses nw-sr-design-grow-sp */
  @keyframes nw-sr-design-grow {
    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);
    }
    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);
    }
    32%, 50% {
      --ec-page-bg: #fafafa;
      --ec-border: rgba(20, 20, 20, 0.2);
      --ec-media: #e4e4e0;
      --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);
    }
    /* Layout locked — still mostly mono */
    52%, 72% {
      --ec-page-bg: #f7f7f3;
      --ec-border: rgba(20, 20, 20, 0.14);
      --ec-media: #d8d8d2;
      --ec-media-glow: transparent;
      --ec-ink: rgba(17, 17, 17, 0.78);
      --ec-cta-bg: #d0d0c8;
      --ec-cta-border: #c4c4bc;
      --ec-card-bg: #fff;
      --ec-card-radius: 8px;
      --ec-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      --ec-gap: 10px;
      --ec-hero-cols: 1.15fr 0.85fr;
      --ec-lift: 0px;
      --ec-chrome: #f3f3f1;
      background: #f4f4f0;
      border-color: rgba(255, 255, 255, 0.4);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    }
    /* Color + photo enter */
    75%, 90% {
      --ec-page-bg: #ffffff;
      --ec-border: rgba(20, 20, 20, 0.1);
      --ec-media: linear-gradient(160deg, #e8ebe3, #c9d0c2 55%, #b7c0b0);
      --ec-media-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%);
      --ec-ink: #1a1a1a;
      --ec-cta-bg: #c8e85a;
      --ec-cta-border: #c8e85a;
      --ec-card-bg: #fff;
      --ec-card-radius: 8px;
      --ec-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
      --ec-gap: 10px;
      --ec-hero-cols: 1.15fr 0.85fr;
      --ec-lift: 0px;
      --ec-chrome: #f7f7f3;
      background: #ffffff;
      border-color: rgba(255, 255, 255, 0.42);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    }
    /* DESIGN READY hold */
    92%, 100% {
      --ec-page-bg: #ffffff;
      --ec-border: rgba(20, 20, 20, 0.1);
      --ec-media: linear-gradient(160deg, #e8ebe3, #c9d0c2 55%, #b7c0b0);
      --ec-media-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 48%);
      --ec-ink: #111111;
      --ec-cta-bg: #c8e85a;
      --ec-cta-border: #c8e85a;
      --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: #f7f7f3;
      background: #ffffff;
      border-color: rgba(255, 255, 255, 0.45);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    }
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__media::before {
    animation: nw-sr-pc-photo-in 5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__media::after {
    animation: nw-sr-pc-photo-glow 5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__card:nth-child(1) .nw-sr-ec__card-media::before {
    animation: nw-sr-pc-photo-in 5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.08s;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__card:nth-child(2) .nw-sr-ec__card-media::before {
    animation: nw-sr-pc-photo-in 5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.16s;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__card:nth-child(3) .nw-sr-ec__card-media::before {
    animation: nw-sr-pc-photo-in 5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.24s;
  }

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

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__card:nth-child(2) {
    animation: nw-sr-pc-design-card-lift 5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__nav i.is-active {
    animation: nw-sr-pc-design-nav 5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-swatches i {
    animation: nw-sr-pc-swatch-on 5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-swatches i:nth-child(1) { animation-delay: 0s; }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-swatches i:nth-child(2) { animation-delay: 0.08s; }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-swatches i:nth-child(3) { animation-delay: 0.16s; }
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-swatches i:nth-child(4) { animation-delay: 0.24s; }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-anno--select {
    animation: nw-sr-pc-guide-out 5s ease both;
  }

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

  @keyframes nw-sr-pc-photo-in {
    0%, 72% { opacity: 0; transform: scale(1.02); }
    78%, 100% { opacity: 1; transform: scale(1); }
  }

  @keyframes nw-sr-pc-photo-glow {
    0%, 74% { opacity: 0; }
    82%, 100% { opacity: 1; }
  }

  @keyframes nw-sr-pc-design-cta {
    0%, 78% { transform: scale(1); box-shadow: none; }
    86% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(200, 232, 90, 0.28); }
    92%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
  }

  @keyframes nw-sr-pc-design-card-lift {
    0%, 84% { transform: translateY(0); }
    90%, 100% { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
  }

  @keyframes nw-sr-pc-design-nav {
    0%, 80% { box-shadow: none; }
    88%, 100% { box-shadow: 0 2px 0 0 #c8e85a; background: #111; }
  }

  @keyframes nw-sr-pc-swatch-on {
    0%, 70% { opacity: 0.35; filter: grayscale(1); transform: scale(0.92); }
    78%, 100% { opacity: 1; filter: none; transform: scale(1); }
  }

  @keyframes nw-sr-pc-guide-out {
    0%, 70% { opacity: 0; }
    78%, 86% { opacity: 0.85; }
    94%, 100% { opacity: 0.15; }
  }

  @keyframes nw-sr-pc-grid-fade {
    0%, 30% { opacity: 0; }
    34%, 70% { opacity: 0.5; }
    86%, 100% { opacity: 0.12; }
  }

  /* Anno timing: show mid, fade at ready */
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-anno--typo,
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-anno--space,
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-anno--comp {
    animation: nw-sr-pc-anno-cycle 5s ease both;
  }

  @keyframes nw-sr-pc-anno-cycle {
    0%, 48% { opacity: 0; }
    55%, 78% { opacity: 1; }
    90%, 100% { opacity: 0.2; }
  }

  /* Primary CTA only → lime; card buttons stay charcoal */
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-ec--design .nw-sr-ec__card-btn {
    animation: nw-sr-pc-design-card-btn 5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes nw-sr-pc-design-card-btn {
    0%, 50% { background: transparent; border-color: rgba(20, 20, 20, 0.35); }
    55%, 72% { background: #d0d0c8; border-color: #c4c4bc; }
    78%, 100% { background: #1a1a1a; border-color: #1a1a1a; }
  }

  /* DESIGN → BUILD handoff: slight shrink at ready */
  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active .nw-sr-artboard {
    animation: nw-sr-pc-design-handoff 5s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: 50% 45%;
    will-change: transform;
  }

  @keyframes nw-sr-pc-design-handoff {
    0%, 88% { transform: scale(1); }
    94%, 100% { transform: scale(0.96); }
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="design"].is-active.is-leaving .nw-sr-artboard,
  .nw-next-js .nw-showreel__scene[data-scene-key="design"]:not(.is-active) .nw-sr-artboard {
    will-change: auto;
  }

  /* ——— BUILD: syntax + colored preview ——— */
  .nw-sr-story--build .nw-sr-editor__line {
    color: rgba(255, 255, 255, 0.28);
    font-size: 10px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
  }

  .nw-sr-story--build .nw-sr-editor__line b {
    color: inherit;
    font-weight: 700;
  }

  .nw-sr-story--build .nw-sr-editor__line i {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: inherit;
    font-style: normal;
  }

  .nw-sr-story--build .nw-sr-editor__line em {
    font-style: normal;
    color: inherit;
  }

  .nw-sr-story--build .nw-sr-editor__fn {
    color: inherit;
  }

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

  @keyframes nw-sr-pc-line-syntax {
    0% {
      opacity: 0;
      color: rgba(255, 255, 255, 0.22);
      background: transparent;
      max-width: 0;
    }
    10% {
      opacity: 1;
      max-width: 100%;
      color: rgba(255, 255, 255, 0.55);
      background: rgba(255, 255, 255, 0.06);
    }
    28% {
      opacity: 1;
      max-width: 100%;
      background: transparent;
    }
    45%, 100% {
      opacity: 1;
      max-width: 100%;
      background: transparent;
      color: #fff;
    }
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-editor__line b {
    animation: nw-sr-pc-tok-tag 5s ease both;
    animation-delay: calc(0.12s + var(--i) * 0.12s);
  }

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

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-editor__line em {
    animation: nw-sr-pc-tok-str 5s ease both;
    animation-delay: calc(0.12s + var(--i) * 0.12s);
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-editor__fn {
    animation: nw-sr-pc-tok-fn 5s ease both;
    animation-delay: calc(0.12s + var(--i) * 0.12s);
  }

  @keyframes nw-sr-pc-tok-tag {
    0%, 35% { color: rgba(255, 255, 255, 0.45); }
    50%, 100% { color: #d7ef8a; }
  }

  @keyframes nw-sr-pc-tok-attr {
    0%, 40% { color: rgba(255, 255, 255, 0.4); }
    55%, 100% { color: #aeb9a2; }
  }

  @keyframes nw-sr-pc-tok-str {
    0%, 42% { color: rgba(255, 255, 255, 0.35); }
    58%, 100% { color: #e8dfc8; }
  }

  @keyframes nw-sr-pc-tok-fn {
    0%, 40% { color: rgba(255, 255, 255, 0.45); }
    55%, 100% { color: #fff; }
  }

  .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 {
    position: relative;
    overflow: hidden;
  }

  .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__media::before,
  .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
      radial-gradient(ellipse 55% 70% at 62% 58%, rgba(174, 185, 162, 0.95) 0%, rgba(174, 185, 162, 0.2) 42%, transparent 68%),
      linear-gradient(160deg, #e8ebe3 0%, #c9d0c2 45%, #b7c0b0 100%);
  }

  .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card:nth-child(2) .nw-sr-ec__card-media::before {
    background:
      radial-gradient(ellipse 50% 55% at 48% 62%, rgba(200, 232, 90, 0.32), transparent 60%),
      linear-gradient(145deg, #f3f1ea, #d8d4c8 55%, #c5c0b4);
  }

  .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card:nth-child(3) .nw-sr-ec__card-media::before {
    background:
      radial-gradient(ellipse 48% 60% at 40% 55%, rgba(120, 110, 95, 0.4), transparent 62%),
      linear-gradient(155deg, #efeae2, #d2c8b8 50%, #bfb3a2);
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__media::before,
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__card-media::before {
    animation: nw-sr-pc-build-photo 5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__card:nth-child(1) .nw-sr-ec__card-media::before {
    animation-delay: 0.1s;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__card:nth-child(2) .nw-sr-ec__card-media::before {
    animation-delay: 0.18s;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__card:nth-child(3) .nw-sr-ec__card-media::before {
    animation-delay: 0.26s;
  }

  @keyframes nw-sr-pc-build-photo {
    0%, 48% { opacity: 0; }
    58%, 100% { opacity: 1; }
  }

  /* Receive DESIGN handoff: same layout, settle from slight shrink */
  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-build-preview {
    animation: nw-sr-pc-build-receive 5s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: 50% 45%;
  }

  @keyframes nw-sr-pc-build-receive {
    0%, 8% { transform: scale(0.96); }
    18%, 100% { transform: scale(1); }
  }

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

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__hero {
    animation: nw-sr-pc-build-part 5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.12s;
  }

  .nw-next-js .nw-showreel__scene[data-scene-key="build"].is-active .nw-sr-ec--build .nw-sr-ec__grid {
    animation: nw-sr-pc-build-part 5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.22s;
  }

  @keyframes nw-sr-pc-build-part {
    0%, 12% { opacity: 1; transform: translateY(0); }
    14%, 22% { opacity: 0.55; transform: translateY(6px); }
    32%, 100% { opacity: 1; transform: translateY(0); }
  }

  /* Override CTA / nav / card interactions with brand color */
  @keyframes nw-sr-cta-live {
    0%, 42% { transform: scale(1); background: #111; box-shadow: none; }
    52% { transform: scale(1.05); background: #c8e85a; box-shadow: 0 0 0 4px rgba(200, 232, 90, 0.3); }
    62%, 100% { transform: scale(1); background: #c8e85a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
  }

  @keyframes nw-sr-nav-live {
    0%, 35% { background: rgba(20, 20, 20, 0.75); box-shadow: none; }
    45%, 100% { background: #111; box-shadow: 0 2px 0 0 #c8e85a; }
  }

  @keyframes nw-sr-card-select {
    0%, 48% { border-color: rgba(0, 0, 0, 0.1); transform: translateY(0); }
    56%, 100% {
      border-color: rgba(174, 185, 162, 0.85);
      transform: translateY(-3px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }
  }

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

  @keyframes nw-sr-pc-build-btns {
    0%, 50% { background: #111; }
    62%, 100% { background: #c8e85a; }
  }

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

  @keyframes nw-sr-pc-cart-badge {
    0%, 60% { box-shadow: none; }
    70%, 100% { box-shadow: 3px -3px 0 0 #c8e85a; }
  }

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

  @keyframes nw-sr-pc-live {
    0%, 70% { opacity: 0; transform: translateY(-4px); background: #111; color: #fff; }
    80%, 100% { opacity: 1; transform: translateY(0); background: #c8e85a; color: #111; }
  }

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

  @keyframes nw-sr-pc-admin-on {
    0%, 40% { background: rgba(255, 255, 255, 0.55); }
    55%, 100% { background: #c8e85a; }
  }

  .nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design {
    --ec-cta-bg: #c8e85a;
    --ec-cta-border: #c8e85a;
    --ec-media: linear-gradient(160deg, #e8ebe3, #c9d0c2 55%, #b7c0b0);
    --ec-ink: #111;
  }

  .nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__media::before,
  .nw-next:not(.nw-next-js) .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-media::before {
    opacity: 1;
  }

  .nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__cta,
  .nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-btn {
    background: #c8e85a;
  }

  .nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__media::before,
  .nw-next:not(.nw-next-js) .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-media::before {
    opacity: 1;
  }
}

@media (min-width: 981px) and (prefers-reduced-motion: reduce) {
  .nw-sr-story--design .nw-sr-ec--design {
    --ec-page-bg: #ffffff;
    --ec-border: rgba(20, 20, 20, 0.1);
    --ec-media: linear-gradient(160deg, #e8ebe3, #c9d0c2 55%, #b7c0b0);
    --ec-media-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 48%);
    --ec-ink: #111111;
    --ec-cta-bg: #c8e85a;
    --ec-cta-border: #c8e85a;
    --ec-card-bg: #fff;
    --ec-chrome: #f7f7f3;
    background: #ffffff;
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__media::before,
  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-media::before,
  .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__media::before,
  .nw-sr-story--build .nw-sr-ec--build .nw-sr-ec__card-media::before {
    opacity: 1 !important;
  }

  .nw-sr-story--design .nw-sr-swatches i {
    opacity: 1 !important;
    filter: none !important;
  }

  .nw-sr-story--design .nw-sr-ec--design .nw-sr-ec__card-btn {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
  }

  .nw-sr-story--design .nw-sr-artboard,
  .nw-sr-story--build .nw-sr-build-preview {
    transform: none !important;
  }

  .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: #c8e85a !important;
  }

  .nw-sr-story--build .nw-sr-live-badge {
    background: #c8e85a !important;
    color: #111 !important;
    opacity: 1 !important;
  }

  .nw-sr-story--build .nw-sr-editor__line b { color: #d7ef8a !important; }
  .nw-sr-story--build .nw-sr-editor__line i { color: #aeb9a2 !important; }
  .nw-sr-story--build .nw-sr-editor__line em { color: #e8dfc8 !important; }
}