/* ================================================= */
/* ===== VIRALPICS — SECTION VIDÉOS =============== */
/* ===== Carrousel en ligne → anneau de Saturne === */
/* ================================================= */

.video-scroll-gallery {
  --video-scroll-distance: 1200px;
  position: relative;
  z-index: 3;
  height: calc(100svh + var(--video-scroll-distance));
  min-height: 1200px;
  margin-top: -100svh;
  isolation: isolate;
  overscroll-behavior-x: none;
  background: transparent;
}

.video-scroll-gallery__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  background: transparent;
}

.video-scroll-gallery__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ============================== */
/* ===== HALO « SATURNE » ======= */
/* ============================== */
/*
 * Deux ellipses concentriques, aplaties et inclinées comme les anneaux
 * d'une planète. Elles partagent exactement le centre, le rayon et
 * l'inclinaison de l'anneau de cartes (variables écrites par videos.js).
 * `opacity` est piloté par --ring-halo-opacity.
 */
.video-ring-halo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: var(--ring-halo-opacity, 0);
  pointer-events: none;
  will-change: opacity;
}

.video-ring-halo__disc,
.video-ring-halo__core {
  position: absolute;
  top: var(--ring-cy, 50%);
  left: var(--ring-cx, 50%);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--ring-tilt, -14deg));
}

.video-ring-halo__disc {
  width: calc(var(--ring-rx, 280px) * 2.16);
  height: calc(var(--ring-ry, 90px) * 2.16);
  border: 1px solid rgba(150, 190, 255, .16);
  box-shadow:
  0 0 60px rgba(64, 118, 255, .1),
  inset 0 0 40px rgba(122, 78, 255, .08);
}

.video-ring-halo__disc--outer {
  width: calc(var(--ring-rx, 280px) * 2.52);
  height: calc(var(--ring-ry, 90px) * 2.52);
  border-color: rgba(220, 120, 255, .1);
  box-shadow: none;
}

/*
 * Le « corps » de la planète : une lueur centrale douce. Volontairement
 * très diffuse pour ne jamais concurrencer les vidéos.
 */
.video-ring-halo__core {
  width: calc(var(--ring-rx, 280px) * 0.92);
  height: calc(var(--ring-rx, 280px) * 0.92);
  background: radial-gradient(circle, rgba(78, 116, 255, .13), rgba(178, 60, 255, .06) 52%, transparent 72%);
  filter: blur(26px);
}

/* ============================== */
/* ===== CARTES VIDÉO =========== */
/* ============================== */
/*
 * `filter` retiré de `will-change` : le flou d'entrée est quantifié dans le
 * JS et vaut `none` la plupart du temps. Le déclarer ici forcerait une
 * couche de filtre permanente pour les 8 vidéos.
 */
.video-scroll-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(44vw, 650px);
  height: min(72svh, 650px);
  margin: 0;
  opacity: 0;
  overflow: hidden;
  touch-action: pan-y;
  cursor: pointer;
  border: 1px solid rgba(225, 238, 255, .22);
  border-radius: clamp(24px, 2vw, 34px);
  outline: 0;
  background: rgba(5, 11, 36, .7);
  box-shadow:
  0 30px 72px rgba(0, 0, 28, .35),
  0 8px 28px rgba(61, 79, 255, .12),
  inset 0 0 0 1px rgba(255, 255, 255, .06);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity;
  transition:
  border-color .45s ease,
  box-shadow .45s ease;
}

.video-scroll-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #070b22;
}

.video-scroll-card__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
  linear-gradient(180deg, rgba(2, 7, 25, .03), transparent 55%, rgba(2, 7, 25, .16)),
  radial-gradient(circle at 50% 50%, transparent 40%, rgba(3, 7, 26, .08));
}

.video-scroll-card:focus-visible {
  border-color: rgba(177, 213, 255, .8);
  box-shadow:
  0 30px 72px rgba(0, 0, 28, .38),
  0 0 0 3px rgba(76, 157, 255, .28),
  0 0 42px rgba(220, 47, 231, .18);
}

@media (hover: hover) and (pointer: fine) {
  .video-scroll-card:hover {
    border-color: rgba(230, 239, 255, .42);
    box-shadow:
    0 36px 84px rgba(0, 0, 30, .42),
    0 10px 34px rgba(89, 82, 255, .2),
    0 0 44px rgba(225, 43, 213, .1);
  }
}

/* ============================== */
/* ===== TEXTE DE L'ANNEAU ====== */
/* ============================== */
.video-ring-copy {
  position: absolute;
  z-index: 20;
  top: 50%;
  right: 6%;
  width: min(430px, 40%);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, calc(-50% + 34px), 0);
  will-change: opacity, transform;
}

.video-ring-copy h2 {
  margin: 0;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: clamp(40px, 3.6vw, 62px);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -.052em;
  text-wrap: balance;
  text-shadow: 0 12px 42px rgba(0, 0, 24, .28);
}

.video-ring-copy p {
  margin: clamp(24px, 3.4vh, 40px) 0 0;
  color: rgba(231, 236, 252, .82);
  font-size: clamp(16px, 1.28vw, 21px);
  font-weight: 550;
  line-height: 1.32;
  letter-spacing: -.025em;
}

/* ============================== */
/* ===== RESPONSIVE ============= */
/* ============================== */
@media (max-width: 768px) {
  .video-ring-copy {
    right: 4%;
    width: 45%;
  }
}

/*
 * MOBILE — le texte occupe le milieu-haut, aligné à droite. L'anneau est
 * décalé vers le bas-gauche (centre calculé dans videos.js : 0.40 × largeur,
 * 0.68 × hauteur). Les deux zones ne se recouvrent donc pas.
 *
 * `--video-scroll-distance` est recalculé par le JS, mais on garde un
 * plancher élevé ici : plus la distance est grande, plus il faut scroller
 * pour avancer dans l'animation — c'est le réglage de sensibilité.
 */
@media (max-width: 600px) {
  .video-scroll-gallery {
    --video-scroll-distance: 1700px;
    min-height: 1700px;
  }

  .video-scroll-gallery__sticky {
    height: 100svh;
    min-height: 450px;
  }

  .video-scroll-card {
    width: min(72vw, 340px);
    height: min(72vw, 340px);
    border-radius: 20px;
  }

  .video-ring-copy {
    top: 19%;
    right: 5%;
    left: auto;
    bottom: auto;
    width: 74%;
    text-align: right;
    transform: translate3d(0, 34px, 0);
  }

  .video-ring-copy h2 {
    font-size: clamp(28px, 7.6vw, 42px);
  }

  .video-ring-copy p {
    margin-top: 14px;
    font-size: 14px;
  }

  .video-ring-halo__disc {
    border-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-ring-halo {
    opacity: 0 !important;
  }
}