/* Scoped to the French download page; display controls are reused unchanged. */
html:has(.download-page) { scrollbar-color: #514264 #08070b; }
.download-page .download-main { width: 100%; padding-bottom: 0; }
.download-page .site-footer { padding-block: 1.25rem 4.25rem; }
.download-story .download-intro {
  width: min(calc(100% - 2rem), 60rem);
  margin: 0 auto;
}
.download-story .download-intro > p:last-of-type { margin-inline: auto; }
.download-story .download-intro h1 { position: relative; isolation: isolate; }
.download-title-light {
  position: absolute;
  z-index: -1;
  inset: -7rem 0;
  overflow: clip;
  pointer-events: none;
}
.download-title-light::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 38% 48%, rgb(128 72 233 / 23%), transparent 55%),
    radial-gradient(ellipse at 65% 56%, rgb(94 52 196 / 18%), transparent 60%);
  content: "";
}

/* Frontal 16:10 Air composition. The original capture is never cropped. */
.download-device {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 2rem), 80rem);
  margin: 1rem auto 4rem;
}
.download-device::before {
  position: absolute;
  z-index: -1;
  inset: -8% 0 -10%;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, rgb(124 66 222 / 32%) 40%, transparent 82%),
    radial-gradient(ellipse 48% 30% at 50% 85%, rgb(155 92 246 / 26%), transparent 82%);
  content: "";
  pointer-events: none;
}
.download-device-screen {
  position: relative;
  width: 88%;
  margin-inline: auto;
  padding: clamp(0.65rem, 1.4vw, 1.15rem) clamp(0.3rem, 0.8vw, 0.65rem) clamp(0.6rem, 1.2vw, 1rem);
  border: 1px solid #56545d;
  border-radius: clamp(0.6rem, 1.5vw, 1.25rem) clamp(0.6rem, 1.5vw, 1.25rem) 0.35rem 0.35rem;
  background: linear-gradient(135deg, #24232a, #09090d 35%, #18171e);
  box-shadow: inset 0 0 0 2px #15141b, 0 1rem 3rem rgb(0 0 0 / 28%);
}
.download-device-screen::before {
  position: absolute;
  top: clamp(0.2rem, 0.5vw, 0.4rem);
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border: 1px solid #252637;
  border-radius: 50%;
  background: #080b13;
  content: "";
}
.download-device-screen img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #07070a;
  border-radius: 0.15rem;
}
.download-device-mark {
  position: absolute;
  bottom: 0.15rem;
  left: 0;
  width: 100%;
  color: #77747f;
  font-size: clamp(4px, 0.6vw, 8px);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}
.download-device-base {
  position: relative;
  height: clamp(0.65rem, 1.7vw, 1.6rem);
  margin-top: -1px;
  border-top: 1px solid #91909a;
  border-radius: 0.12rem 0.12rem 40% 40%;
  background: linear-gradient(180deg, #888791 0%, #aeacb5 10%, #57555f 32%, #34323b 75%, #17161d 100%);
  clip-path: polygon(1% 0, 99% 0, 100% 24%, 98.5% 82%, 96% 100%, 4% 100%, 1.5% 82%, 0 24%);
}
.download-device-base::before {
  position: absolute;
  top: -1px;
  left: 43%;
  width: 14%;
  height: 36%;
  border-radius: 0 0 0.4rem 0.4rem;
  background: linear-gradient(#38363e, #74717d);
  content: "";
}
.download-story .download-availability {
  width: min(calc(100% - 2rem), 46rem);
  margin: 4rem auto 6rem;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .download-story-active {
    height: 300svh;
    view-timeline-name: --download-story;
    view-timeline-axis: block;
  }
  .download-story-active .download-story-stage {
    position: sticky;
    top: 0;
    display: grid;
    height: 100svh;
    align-items: center;
    justify-items: center;
    isolation: isolate;
  }
  .download-story-active [data-download-motion] {
    grid-area: 1 / 1;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .download-story-active .download-intro {
    padding: 2rem 0 10rem;
    animation-name: download-story-intro;
  }
  .download-story-active .download-title-light::before {
    animation: download-story-light 9s ease-in-out infinite alternate;
  }
  .download-story-paused .download-title-light::before { animation-play-state: paused; }
  .download-story-active .download-device {
    width: min(calc(100% - 2rem), 80rem, calc((100svh - 9rem) * 1.8));
    margin: 0;
    animation-name: download-story-device;
  }
  .download-story-active .download-availability {
    margin: 0;
    animation-name: download-story-availability;
  }
  @supports (animation-timeline: view()) and (animation-range: contain 10% contain 20%) {
    .download-story-native [data-download-motion] {
      animation-play-state: running;
      animation-timeline: --download-story;
      animation-range: contain 0% contain 100%;
    }
  }
  @media (max-width: 700px) {
    .download-story-active { height: 260svh; }
    .download-story-active .download-intro { padding-bottom: 12rem; }
  }
}

/* Complete panel lifetimes, with no overlap between adjacent scenes. */
@keyframes download-story-intro {
  0%, 6% { opacity: 1; visibility: visible; transform: translateY(0); }
  22%, 100% { opacity: 0; visibility: hidden; transform: translateY(-1rem); }
}
@keyframes download-story-device {
  0%, 24% { opacity: 0; visibility: hidden; transform: translateY(2rem) scale(0.94); }
  40%, 62% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  76%, 100% { opacity: 0; visibility: hidden; transform: translateY(-1rem) scale(0.98); }
}
@keyframes download-story-availability {
  0%, 78% { opacity: 0; visibility: hidden; transform: translateY(1rem); }
  90%, 100% { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes download-story-light {
  from { transform: translate(-3%, -2%) rotate(-8deg) scale(0.96); }
  to { transform: translate(3%, 2%) rotate(8deg) scale(1.06); }
}
@media (forced-colors: active) {
  .download-title-light { display: none; }
  .download-device::before { display: none; }
  .download-device-screen, .download-device-base { border: 1px solid CanvasText; }
}