/* ============================================================
   REILLY TALENT - Depth layer (September 2026)
   3D treatment of the actual content: WebGL roster portraits,
   a true 3D card fan, perspective on the scattered prints and on
   the section entrances. Loaded after lux.css.
   ============================================================ */

/* ─── Roster: WebGL portraits drawn under the track ─── */
.roster__wrapper {
  position: relative;
}

.roster3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.roster__track {
  position: relative;
  z-index: 1;
}

/* The DOM image steps aside only once its texture is on the GPU */
.roster__card-image.is-gl img {
  visibility: hidden;
}

/* CSS depth fallback when WebGL is not running: gentle perspective tilt
   driven by horizontal-scroll.js via --roster-tilt (degrees) */
.roster__card {
  perspective: 1400px;
}

.roster:not(.roster--gl) .roster__card-image {
  transform: rotateY(var(--roster-tilt, 0deg));
  transform-origin: center center;
  will-change: transform;
}

/* ─── Section entrances get perspective (GSAP sets the rotations) ─── */
.statement__heading,
.partners__grid,
.contact__panels {
  perspective: 900px;
}

.hero__heading,
.hero__tagline {
  will-change: transform;
  transform-style: preserve-3d;
}

/* ─── Phones: keep faces in frame ───
   The card is one screen tall and the copy takes most of it, so the portrait
   box is short and wide. Three fixes: start the portrait below the fixed nav
   (faces were sitting under the blurred bar), anchor the crop to the top of
   the photo, and give the box a little more height by clamping the bio. The
   WebGL layer reads the same object-position. ─── */
@media (max-width: 767px) {
  .roster__card {
    padding-top: 64px !important;              /* clear of the nav bar */
  }
  .roster__card-image {
    max-height: 60svh !important;
  }
  .roster__card-image img {
    object-position: center 0% !important;
  }
  /* Per creator: where the face sits in the photo (set by eye, 6 Sep 2026) */
  .roster__card:nth-child(1)  .roster__card-image img { object-position: center 15% !important; }  /* Tom */
  .roster__card:nth-child(2)  .roster__card-image img { object-position: center 40% !important; }  /* Jadee */
  .roster__card:nth-child(3)  .roster__card-image img { object-position: center 10% !important; }  /* Hunter (Padel photo, face high in frame) */
  .roster__card:nth-child(4)  .roster__card-image img { object-position: center 18% !important; }  /* Adam */
  .roster__card:nth-child(5)  .roster__card-image img { object-position: center 36% !important; }  /* Zaira */
  .roster__card:nth-child(6)  .roster__card-image img { object-position: center 33% !important; }  /* Lucas */
  .roster__card:nth-child(7)  .roster__card-image img { object-position: center 55% !important; }  /* Pierre */
  .roster__card:nth-child(8)  .roster__card-image img { object-position: center 10% !important; }  /* Harrison */
  .roster__card:nth-child(9)  .roster__card-image img { object-position: center 46% !important; }  /* Aaron */
  .roster__card:nth-child(10) .roster__card-image img { object-position: center 52% !important; }  /* Be The One */
  .roster__card:nth-child(11) .roster__card-image img { object-position: center 10% !important; }  /* Lachy */
  .roster__card-bio {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* counter tucked top-right, off the faces */
  .roster__header {
    left: auto !important;
    right: var(--page-gutter) !important;
    top: 4.6rem !important;
    text-align: right;
  }
  .roster__label::before { display: none; }
  .roster__progress { margin-left: auto; }
}

/* ─── Reduced motion: no tilt, no lift, no parallax ─── */
@media (prefers-reduced-motion: reduce) {
  .roster:not(.roster--gl) .roster__card-image { transform: none !important; }
  .roster3d { display: none !important; }
}