/* Mouvement de la page, au même endroit que HUDMotion dans l'app : entrée de l'accroche, l'île qui
   sort de l'encoche, lumière ambiante, révélations en cascade, survols. Tout est sur transform et
   opacity, sauf la lueur des cartes (un dégradé qui suit le pointeur). Avec le mouvement réduit,
   tout est à l'arrêt et la page reste entière. */

/* ---------- Entrée de l'accroche ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes rise-mac {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.985);
  }
}

.hero__copy > * {
  animation: rise 700ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.hero__copy > :nth-child(1) { --i: 0; }
.hero__copy > :nth-child(2) { --i: 1; }
.hero__copy > :nth-child(3) { --i: 2; }
.hero__copy > :nth-child(4) { --i: 3; }
.hero__copy > :nth-child(5) { --i: 4; }
.hero__copy > :nth-child(6) { --i: 5; }

.mac {
  animation: rise-mac 900ms var(--ease-out) 350ms both;
}

/* L'île dort dans l'encoche tant que le script ne l'a pas réveillée : elle en sort d'un ressort,
   comme dans l'app au début d'une séance. Sans script, elle est déjà là. */
html.js .island:not(.is-awake) {
  --wing: 0px;
  --extra: 0px;
  --radius: 10px;
}

html.js .island:not(.is-awake) .layer {
  opacity: 0;
}

/* ---------- Lumière ambiante ---------- */

/* Deux nappes de couleur dérivent lentement derrière l'accroche : la zone en cours et l'endurance. */
.hero {
  position: relative;
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  top: -30vmax;
  left: -20vmax;
  background: radial-gradient(circle, rgb(255 148 56 / 0.16), transparent 60%);
  animation: drift-a 28s ease-in-out infinite alternate;
}

.hero::after {
  top: 10vmax;
  right: -30vmax;
  background: radial-gradient(circle, rgb(92 158 255 / 0.12), transparent 60%);
  animation: drift-b 34s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate(10vmax, 6vmax);
  }
}

@keyframes drift-b {
  to {
    transform: translate(-8vmax, -8vmax);
  }
}

/* La lueur sous le Mac respire doucement, au rythme du halo de transition de l'app. */
.mac::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: -12%;
  height: 70%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgb(255 148 56 / 0.16), transparent 72%);
  animation: breathe 7s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes breathe {
  from {
    opacity: 0.55;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* ---------- Révélation en cascade ---------- */

/* Dans un bloc [data-stagger], le script numérote les enfants révélés : chacun arrive 70 ms après
   le précédent. */
html.js .reveal {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Survols ---------- */

/* Une lueur suit le pointeur sur les cartes (--mx, --my posés par le script). */
.panel {
  position: relative;
  overflow: hidden;
  transition:
    transform 300ms var(--ease-out),
    box-shadow 300ms ease,
    border-color 300ms ease;
}

.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgb(255 255 255 / 0.07),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.panel > * {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .panel:hover::before {
    opacity: 1;
  }

  .moment:hover,
  .need:hover,
  .workout:hover {
    transform: translateY(-2px);
    border-color: rgb(255 255 255 / 0.14);
  }

  .moment__shot img {
    transition: transform 700ms var(--ease-out);
  }

  .moment:hover .moment__shot img {
    transform: scale(1.015);
  }

  .price:hover {
    box-shadow:
      inset 0 0 0 1px rgb(255 148 56 / 0.35),
      0 24px 60px rgb(0 0 0 / 0.4);
  }

  .btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgb(255 148 56 / 0.35);
  }

  .btn--ghost:hover {
    transform: translateY(-1px);
  }
}

.btn {
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 200ms var(--ease-out),
    box-shadow 300ms ease;
}

/* L'île de l'accroche réagit au vrai pointeur, comme dans l'app. */
.island {
  cursor: default;
}

/* ---------- En-tête au défilement ---------- */

.site-header {
  transition:
    background-color 300ms ease,
    box-shadow 300ms ease;
}

.site-header.is-scrolled {
  background: rgb(11 12 16 / 0.92);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

/* ---------- FAQ : le dépliage glisse quand le navigateur sait le faire ---------- */

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .faq__item::details-content {
    opacity: 0;
    block-size: 0;
    overflow: clip;
    transition:
      content-visibility 350ms allow-discrete,
      opacity 350ms ease,
      block-size 350ms var(--ease-out);
  }

  .faq__item[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

/* ---------- Bandeau final ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vmax;
  height: 40vmax;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(255 148 56 / 0.12), transparent 60%);
  animation: breathe 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__copy > *,
  .mac,
  .mac::before,
  .film__plan.is-on,
  .hero::before,
  .hero::after,
  .cta-band::before {
    animation: none;
  }

  html.js .island:not(.is-awake) {
    --wing: 170px;
    --extra: 22px;
    --radius: 16px;
  }

  html.js .island:not(.is-awake) .layer.is-on {
    opacity: 1;
  }

  html.js .reveal {
    transition-delay: 0ms;
  }

  .panel,
  .btn,
  .moment__shot img,
  .site-header,
  .film__plan,
  .player,
  .mac__subtitle,
  .mac__subtitle span {
    transition: none;
  }
}