/* Decorative materials sit behind the real interfaces, clear of the headings. */
.feature-showcase :is(.clocher-demo-toggle, .song-library-demo-toggle, .atelier-demo-toggle, .mobile-demo-toggle, .announcements-demo-toggle) {
  display: none;
}

.feature-showcase-media:has(.feature-scene-backdrop) {
  position: relative;
  isolation: isolate;
  --scene-edge: -28px;
}

.feature-scene-backdrop {
  --scene-grow-x: 0px;
  --scene-grow-y: 0px;
  position: absolute;
  z-index: -1;
  inset: calc(-36px - var(--scene-grow-y))
    calc(var(--scene-edge) - var(--scene-grow-x))
    calc(var(--scene-bottom-edge, var(--scene-edge)) - var(--scene-grow-y));
  overflow: hidden;
  border-radius: 0 0 7px 7px;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 76px);
  mask-image: linear-gradient(to bottom, transparent, #000 76px);
}

/* Match the card's inner edge, including its distinct bottom margin. */
.feature-showcase-card--announcements .feature-showcase-media { --scene-bottom-edge: -24px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature-scene-backdrop { transition: inset 800ms var(--feature-hover-ease); }
  .feature-showcase-card:is(:hover, :focus-within) .feature-scene-backdrop {
    --scene-grow-x: var(--feature-grow-x);
    --scene-grow-y: var(--feature-grow-y);
  }
}

.feature-scene-color,
.feature-scene-material {
  position: absolute;
  inset: -16px;
  transform: translate(var(--scene-shift-x, 0px), var(--scene-shift-y, 0px));
  transition: transform 1100ms cubic-bezier(.165,.84,.44,1);
}

.feature-scene-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 78%, #f5faed66);
}

/* A broad satin fold: a highlight, a shaded edge, then a softer second fold. */
[data-animation-slot="01"] .feature-scene-color {
  background: radial-gradient(ellipse at 80% 32%, #e0e8bc80, transparent 62%),
    linear-gradient(135deg, #fff 9%, #eff8ec 35%, #a4c7a5 72%, #739b81);
}
[data-animation-slot="01"] .feature-scene-material {
  inset: 5% -20% -40%;
  border-radius: 48% 45% 0 0;
  background: linear-gradient(167deg, #ffffff00 14%, #f3ffea 32%, #c1dcc0 37%, #6f9c82 42%, #d4e7c6 49%, #f8f4d9 54%, #bdd5ba 62%, #91b99c 82%);
  box-shadow: 0 -1px 1px #fff9, 0 -24px 65px #b5c8ab38;
  transform: translate(var(--scene-shift-x, 0px), var(--scene-shift-y, 0px)) rotate(-14deg);
}

/* Layered light keeps the continuous catalogue scroll as the single subject. */
[data-animation-slot="02"] .feature-scene-color {
  background: radial-gradient(ellipse at 94% 75%, #a9cca0 0%, #c1dbb48c 35%, transparent 66%),
    radial-gradient(ellipse at 4% 95%, #ddc58f 0%, #f1e8cbb3 35%, transparent 63%),
    radial-gradient(ellipse at 42% 42%, #fcfff8 20%, #e9f5e9 66%);
}
[data-animation-slot="02"] .feature-scene-material {
  background: repeating-linear-gradient(105deg, #ffffff40 0 1px, transparent 1px 19px);
  -webkit-mask-image: linear-gradient(transparent 12%, #0008 100%);
  mask-image: linear-gradient(transparent 12%, #0008 100%);
}

/* Ivory paper planes, rather than another screen-shaped frame. */
[data-animation-slot="03"] .feature-scene-color {
  background: radial-gradient(ellipse at 17% 68%, #f4e3bca6, transparent 65%),
    linear-gradient(140deg, #fff 10%, #f2f1dd 53%, #cbd9bc 100%);
}
[data-animation-slot="03"] .feature-scene-material {
  inset: 20% -70% -25% -25%;
  background: repeating-linear-gradient(155deg, #ffffff00 0 52px, #eef0dc 53px, #fffef2 55px, #c2cbb447 57px, #ffffff00 88px);
  transform: translate(var(--scene-shift-x, 0px), var(--scene-shift-y, 0px)) rotate(-8deg);
}

/* A large translucent lens gives the S25 room to breathe. */
[data-animation-slot="04"] .feature-scene-color {
  background: radial-gradient(ellipse at 65% 80%, #8bb79b85, transparent 70%),
    radial-gradient(ellipse at 2% 20%, #f7f2d0a8, transparent 57%),
    linear-gradient(150deg, #f9fcf8 10%, #d6e8d9 90%);
}
[data-animation-slot="04"] .feature-scene-material {
  inset: 7% -32% 2%;
  border-radius: 50%;
  border: 1px solid #ffffffc7;
  background: linear-gradient(118deg, #ffffff85, #ffffff00 28%, #719e8124 68%, #ffffff6b);
  box-shadow: inset 14px 2px 24px #ffffff57, inset -8px -8px 22px #8daf8c1c,
    13px 10px 0 -1px #dfeade40, 13px 10px 0 0 #ffffff6b,
    30px 25px 0 -1px #e7efd433, 30px 25px 0 0 #ffffff6b;
  transform: translate(var(--scene-shift-x, 0px), var(--scene-shift-y, 0px)) rotate(-24deg);
}
.mobile-demo-stage::before { display: none; }

/* A soft fan of paper accompanies the songbook selection and editor. */
[data-animation-slot="05"] .feature-scene-color {
  background: radial-gradient(ellipse at 18% 84%, #ecdcaf8c, transparent 64%),
    linear-gradient(145deg, #fff 10%, #e9f3df 52%, #b4d0b8);
}
[data-animation-slot="05"] .feature-scene-material {
  inset: 24% -42% -24%;
  background: repeating-linear-gradient(158deg, transparent 0 43px, #ffffffb3 44px, #f8faed 46px, #acc7ae4d 48px, transparent 78px);
  transform: translate(var(--scene-shift-x, 0px), var(--scene-shift-y, 0px)) rotate(12deg);
}

/* Fine diagonal rays accompany the announcement's path to both formats. */
[data-animation-slot="06"] .feature-scene-color {
  background: radial-gradient(ellipse at 30% 100%, #d6be8661, transparent 50%),
    radial-gradient(ellipse at 86% 54%, #a6ccac99, transparent 56%),
    linear-gradient(145deg, #fff 12%, #ecf6e6 58%, #c7deca);
}
[data-animation-slot="06"] .feature-scene-material {
  background: repeating-linear-gradient(122deg, transparent 0 17px, #ffffff9c 17px 18px, #8db1921c 18px 19px, transparent 19px 36px);
  -webkit-mask-image: linear-gradient(110deg, transparent 10%, #000 90%);
  mask-image: linear-gradient(110deg, transparent 10%, #000 90%);
}

/* Two shadow scales separate the screen edge from its ambient cast shadow. */
.clocher-demo-window,
.song-library-demo-screen,
.atelier-demo-screen,
.songbook-demo-screen,
.announcements-demo-admin {
  border-color: #b9ccbc;
  box-shadow: 0 1px 2px #173c2414, 0 8px 14px -9px #173c2454,
    0 28px 42px -24px #22493066;
}
.announcements-demo-book {
  box-shadow: 0 1px 0 #c7d3c5, 0 3px 0 #fdfdf6, 0 4px 0 #bdccbb,
    0 8px 12px -9px #284f3b57, 0 25px 30px -17px #284f3b66;
}
.clocher-demo-caption,
.song-library-demo-caption,
.atelier-demo-caption,
.songbook-demo-caption,
.mobile-demo-caption,
.announcements-demo-caption {
  position: relative;
  color: #35573e;
  text-shadow: 0 1px 6px #fff;
}
.clocher-demo-steps { color: #43654b; }
.announcements-demo-label, .announcements-demo-print-note { color: #46604b; }

@media (max-width: 680px) {
  .feature-showcase-media:has(.feature-scene-backdrop) { --scene-edge: -22px; }
  .feature-showcase-card--announcements .feature-showcase-media { --scene-bottom-edge: -22px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .feature-scene-backdrop { --scene-shift-x: 0px; --scene-shift-y: 0px; }
  .feature-scene-color, .feature-scene-material { transition: none; }
}