/* Optional gel treatment for the hero feature list. The toggle changes the
   presentation of the existing list slot, so it works in every hero layout
   without introducing a fourth composition. The list stays in normal flow;
   its parent composition may rotate as one group, but individual gels do not. */

.gel-feature-cloud {
  display: none;
}

body[data-feature-list-intro][data-gel-feature-pills] .story-copy-after {
  display: flex;
  flex-direction: column;
}

body[data-feature-list-intro][data-gel-feature-pills]
  .story-copy-after .intro-prose,
body[data-feature-list-intro][data-gel-feature-pills]
  .story-copy-after .intro-feature-list {
  display: none;
}

body[data-feature-list-intro][data-gel-feature-pills] .gel-feature-cloud {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 480px;
  height: 510px;
  margin: 0;
  padding: 14px 8px;
  gap: var(--component-gel-feature-gap);
  overflow: visible;
  list-style: none;
  isolation: isolate;
  touch-action: pan-y;
}

body[data-feature-list-intro][data-gel-feature-pills]
  .story-copy-after > .intro-feature-footnote {
  display: none;
}

.gel-feature-footnote-card {
  display: block;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgb(0 0 0 / 0.58);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: var(--body-weight);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

body.dark-mode[data-feature-list-intro][data-gel-feature-pills]
  .gel-feature-footnote-card {
  color: rgb(255 255 255 / 0.58);
}

.gel-feature-item {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  transform: none;
}

/* Figma's outer Frame 115 is essentially transparent; Rectangle 39 supplies
   the colour and Rectangle 38 supplies the top highlight. The high
   specificity also wins over Mini colour inheritance without making the
   pills interactive controls. */
body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item .sprout-btn.is-gel.gel-feature {
  --gel-foreground: #fff;
  --gel-shadow-colour: color-mix(in srgb, var(--gel-fill) 54%, #000);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 66px;
  padding: 16px 24px 18px;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 200px;
  background: rgb(255 255 255 / 0.01) !important;
  background-color: rgb(255 255 255 / 0.01) !important;
  background-image: none !important;
  box-shadow: 0 20px 20px color-mix(
    in srgb,
    var(--gel-shadow-colour, var(--gel-fill)) 30%,
    transparent
  );
  backdrop-filter: blur(28.55px);
  -webkit-backdrop-filter: blur(28.55px);
  color: var(--gel-foreground);
  font-family: var(--aqua-gel-font-family);
  font-size: var(--aqua-gel-font-size);
  font-style: var(--aqua-gel-font-style);
  font-weight: var(--aqua-gel-font-weight);
  font-synthesis: none;
  line-height: 111%;
  letter-spacing: var(--aqua-gel-letter-spacing);
  white-space: nowrap;
  cursor: default;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature::before,
body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature::after {
  content: "";
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature::before {
  inset: 2px;
  z-index: 0;
  border-radius: 200px;
  background:
    linear-gradient(
      180deg,
      #666 1.44%,
      #666 17.79%,
      #fff 100%
    ),
    var(--gel-fill);
  background-blend-mode: overlay, normal;
  filter: blur(2.5px);
  opacity: 1;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature::after {
  top: 6.25px;
  right: 11px;
  bottom: 27.75px;
  left: 11px;
  z-index: 2;
  height: auto;
  border-radius: 90px 90px 50px 50px;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.82) 0%,
    rgb(255 255 255 / 0) 100%
  );
}

/* A soft, oversized field of overlapping lenses approximates Figma's water
   caustics without adding a canvas or a second renderer. It is intentionally
   low contrast and ambient rather than responding to hover or collisions. */
body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature > .gel-feature-caustics {
  position: absolute !important;
  z-index: 1 !important;
  inset: 2px !important;
  display: block;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: inherit;
  -webkit-clip-path: inset(0 round 200px);
  clip-path: inset(0 round 200px);
  background:
    radial-gradient(
      ellipse 24% 52% at 14% 74%,
      rgb(255 255 255 / 0.5) 0%,
      rgb(255 255 255 / 0.08) 42%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 19% 44% at 37% 92%,
      rgb(0 0 0 / 0.3) 0%,
      rgb(255 255 255 / 0.18) 46%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 28% 58% at 63% 76%,
      rgb(255 255 255 / 0.36) 0%,
      rgb(0 0 0 / 0.12) 52%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 18% 46% at 88% 86%,
      rgb(0 0 0 / 0.27) 0%,
      rgb(255 255 255 / 0.2) 48%,
      transparent 74%
    );
  background-blend-mode: overlay, soft-light, overlay, soft-light;
  background-repeat: no-repeat;
  background-size: 116% 126%, 122% 118%, 114% 132%, 120% 124%;
  background-position: -4% 8%, 34% -2%, 66% 12%, 102% 2%;
  mix-blend-mode: soft-light;
  filter: blur(3px) contrast(1.32);
  opacity: 0.34;
  animation: gel-caustics-drift 8.6s ease-in-out infinite alternate;
  animation-delay: var(--gel-caustics-delay, 0s);
  pointer-events: none;
  will-change: background-position, opacity;
}

@keyframes gel-caustics-drift {
  0% {
    background-position: -4% 8%, 34% -2%, 66% 12%, 102% 2%;
  }

  55% {
    background-position: 2% 2%, 40% 8%, 60% 4%, 96% 12%;
  }

  100% {
    background-position: 5% -2%, 30% 4%, 70% 8%, 92% 5%;
  }
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature > .gel-feature-label {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 31px;
  padding: 1px 0 0;
  gap: 10px;
  text-shadow: none;
  mix-blend-mode: normal;
}

/* Keep the white label untouched. The shadow is a separate sibling stacking
   layer, so its overlay blend sees the highlight, caustics, and gel colour as
   its backdrop instead of being isolated inside the label's stacking context. */
body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature > .gel-feature-shadow {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
  height: auto !important;
  min-height: 31px;
  margin: 0;
  padding-top: 1px;
  color: transparent !important;
  font: inherit;
  line-height: inherit;
  text-shadow: 0 10px 10px #000 !important;
  mix-blend-mode: overlay;
  opacity: 0.72;
  pointer-events: none;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .sprout-btn.is-gel.gel-feature > .gel-feature-shadow::before {
  content: attr(data-gel-shadow);
}

.gel-feature-bluetooth {
  --gel-caustics-delay: -1.4s;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item.gel-feature-bluetooth .sprout-btn.is-gel.gel-feature {
  --gel-fill: var(--site-gel-bluetooth-key, #5171ff);
}

.gel-feature-wifi {
  --gel-caustics-delay: -5.1s;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item.gel-feature-wifi .sprout-btn.is-gel.gel-feature {
  --gel-fill: var(--site-gel-wifi-key, #ff6d05);
}

.gel-feature-dac {
  --gel-caustics-delay: -3.2s;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item.gel-feature-dac .sprout-btn.is-gel.gel-feature {
  --gel-fill: var(--site-gel-dac-key, #019133);
}

.gel-feature-storage {
  --gel-caustics-delay: -6.8s;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item.gel-feature-storage .sprout-btn.is-gel.gel-feature {
  --gel-fill: var(--site-gel-songs-key, #ff3a3d);
}

.gel-feature-usb {
  --gel-caustics-delay: -2.3s;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item.gel-feature-usb .sprout-btn.is-gel.gel-feature {
  --gel-fill: var(--site-gel-usb-key, #7a15ed);
}

.gel-feature-apps {
  --gel-caustics-delay: -7.5s;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item.gel-feature-apps .sprout-btn.is-gel.gel-feature {
  --gel-fill: var(--site-gel-apps-key, #ff40f2);
}

.gel-feature-spotify {
  --gel-caustics-delay: -4.6s;
}

body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
  .gel-feature-item.gel-feature-spotify .sprout-btn.is-gel.gel-feature {
  --gel-fill: var(--site-gel-apps-key, #ff40f2);
}

@media (min-width: 840px) {
  /* In the two-column reveals the board stays above this copy while it moves
     under the iPod. Let the gel surface grow behind that passing board, so
     each pill is uncovered at the same time as the space it occupies. The
     scale belongs to the pill while the copy column owns the group angle. */
  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])[data-gel-feature-pills]
    .story-copy-after
    .sprout-btn.is-gel.gel-feature {
    transform: scale(0.5);
    transform-origin: center;
    transition: transform var(--connection-duration) var(--connection-ease);
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])[data-gel-feature-pills]
    .story.is-connecting .story-copy-after {
    opacity: 1;
  }

  body:is([data-site-concept="board-reveal"], [data-site-concept="scroll-reveal"])[data-gel-feature-pills]
    .story.is-connecting .story-copy-after
    .sprout-btn.is-gel.gel-feature {
    transform: scale(1);
  }

  body[data-site-concept="board-reveal"][data-feature-list-intro][data-gel-feature-pills]
    .story-copy-after {
    align-self: stretch;
    justify-content: center;
    margin-top: 0;
  }

  body[data-site-concept="board-reveal"][data-feature-list-intro][data-gel-feature-pills]
    .gel-feature-cloud {
    justify-content: center;
    height: min(522px, calc(var(--device-height) - 48px));
    margin-inline: 0;
    transform: translateX(calc(24px - var(--hardware-gap) - 6px));
  }

  /* Match the flat list: the six gel rows own the centred stack and the
     asterisk note is pinned independently at the foot of the cloud. */
  body[data-site-concept="board-reveal"][data-feature-list-intro][data-gel-feature-pills]
    .gel-feature-footnote-item {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  body[data-site-concept="scroll-reveal"][data-feature-list-intro][data-gel-feature-pills]
    .gel-feature-cloud {
    height: 348px;
    margin: 12px 0 0;
    padding-block: 4px;
    gap: min(var(--component-gel-feature-gap), 8px);
    transform: translateX(calc(24px - var(--hardware-gap) - 6px));
  }

  body[data-site-concept="scroll-reveal"][data-gel-feature-pills]
  .story-sticky .gel-feature-cloud
    .gel-feature-item .sprout-btn.is-gel.gel-feature {
    min-height: 46px;
    padding: 6px 18px 7px;
  }

  body[data-site-concept="scroll-reveal"][data-gel-feature-pills]
    .story-sticky .gel-feature-cloud
    .sprout-btn.is-gel.gel-feature::after {
    top: 4px;
    right: 9px;
    bottom: 21px;
    left: 9px;
  }

  body[data-site-concept="scroll-reveal"][data-feature-list-intro][data-gel-feature-pills]
    .scroll-reveal-cta {
    margin-top: 18px;
  }
}

@media (max-width: 640px) {
  body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
    .sprout-btn.is-gel.gel-feature
    > .gel-feature-shadow-storage::before {
    content: attr(data-gel-shadow-compact);
  }
}

@media (max-width: 839px) {
  body[data-feature-list-intro][data-gel-feature-pills]
    .story-copy-after {
    margin-top: calc(
      var(--component-feature-intro-gap) + var(--model-intro-extra-gap)
    );
    padding-inline: 0;
  }

  body[data-feature-list-intro][data-gel-feature-pills]
    :is(.gel-feature-cloud, .intro-feature-footnote) {
    width: calc(100% - 2 * var(--section-gutter));
    max-width: 480px;
    margin-inline: 0;
  }

  body[data-feature-list-intro][data-gel-feature-pills]
    .gel-feature-cloud {
    height: 510px;
    padding-inline: 4px;
    gap: var(--component-gel-feature-gap);
  }
}

@media (max-width: 440px) {
  body[data-feature-list-intro][data-gel-feature-pills]
    .gel-feature-cloud {
    height: 480px;
  }

  body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
    .gel-feature-item .sprout-btn.is-gel.gel-feature {
    min-height: 60px;
    padding: 13px 18px 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
    .sprout-btn.is-gel.gel-feature {
    transform: scale(1);
    transition: none;
  }

  body[data-gel-feature-pills] .story-sticky .gel-feature-cloud
    .sprout-btn.is-gel.gel-feature > .gel-feature-caustics {
    animation: none;
  }

}