/* ============================================================
   Avrile — Team Scroll
   Section sticky : 8 portraits défilent au scroll.
   Fond raisin profond avec halos animés.
   ============================================================ */

.avr-team-scroll {
  position: relative;
  height: calc(120vh + 40vh * 8); /* 1 slot de 40vh par membre */
  background: #FFFFFF;
  color: var(--avr-fg);
  width: 100%;
}

/* ----------------------------------------------------------
   Frame sticky — ancrée pendant tout le scroll
---------------------------------------------------------- */
.avr-team-scroll__frame {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ----------------------------------------------------------
   Fond — dégradé radial + halos animés
---------------------------------------------------------- */
.avr-team-scroll__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #FFFFFF;
  overflow: hidden;
}

.avr-team-scroll__blob {
  display: none;
}

.avr-team-scroll__blob--1 {
  width: 70vw; height: 70vw;
  left: -20vw; top: -20vw;
  background: radial-gradient(circle, #FA3B05 0%, transparent 65%);
  animation: avr-team-halo-1 26s ease-in-out infinite alternate;
}

.avr-team-scroll__blob--2 {
  width: 60vw; height: 60vw;
  right: -15vw; top: 10vw;
  background: radial-gradient(circle, #F69121 0%, transparent 65%);
  animation: avr-team-halo-2 32s ease-in-out infinite alternate;
}

.avr-team-scroll__blob--3 {
  width: 55vw; height: 55vw;
  left: 20vw; bottom: -25vw;
  background: radial-gradient(circle, #3F1824 0%, transparent 60%);
  animation: avr-team-halo-3 28s ease-in-out infinite alternate;
  mix-blend-mode: normal;
  opacity: 1;
}

.avr-team-scroll__blob--4 {
  width: 50vw; height: 50vw;
  right: 5vw; bottom: -10vw;
  background: radial-gradient(circle, #FA3B05 0%, transparent 55%);
  animation: avr-team-halo-4 36s ease-in-out infinite alternate;
}

.avr-team-scroll__noise {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.32;
  mix-blend-mode: overlay;
  animation: avr-team-grain 1.6s steps(8) infinite;
}

@keyframes avr-team-halo-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, 6vw) scale(1.12); }
}
@keyframes avr-team-halo-2 {
  0%   { transform: translate(0, 0) scale(1.05); }
  100% { transform: translate(-10vw, 4vw) scale(0.95); }
}
@keyframes avr-team-halo-3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vw, -8vw) scale(1.15); }
}
@keyframes avr-team-halo-4 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-8vw, -6vw) scale(1.08); }
}
@keyframes avr-team-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ----------------------------------------------------------
   En-tête sticky — titre L + descriptif R
---------------------------------------------------------- */
.avr-team-scroll__head {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: left;
  width: min(1480px, calc(100% - 80px));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 60px;
  align-items: end;
  pointer-events: none;
}

.avr-team-scroll__head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.avr-team-scroll__label {
  margin-bottom: 20px;
  display: block;
}

.avr-team-scroll__head h2 {
  margin: 0 0 18px;
  font-family: var(--avr-font-display);
  font-style: italic;
  font-weight: var(--avr-weight-regular);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--avr-fg);
  text-wrap: balance;
}

.avr-team-scroll__head h2 em {
  color: var(--avr-fg);
  font-style: italic;
}

.avr-team-scroll__head h2 .avr-roman {
  font-style: normal;
  color: var(--avr-fg);
}

.avr-team-scroll__head-right {
  margin: 0;
  max-width: 420px;
  text-align: left;
  align-self: end;
}

/* ----------------------------------------------------------
   Stage — portraits en position absolue
---------------------------------------------------------- */
.avr-team-scroll__stage {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.avr-team-scroll__member {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  display: block;
  width: min(30vw, 40vh);
  pointer-events: none;
  will-change: transform, opacity;
  margin-left: calc(min(30vw, 40vh) / -2);
  margin-top: calc(min(30vw, 40vh) * 1.25 / -2);
}

/* ----------------------------------------------------------
   Portrait — 4:5 avec ombre
---------------------------------------------------------- */
.avr-team-scroll__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--avr-color-raisin);
  isolation: isolate;
  box-shadow:
    0 80px 120px -32px rgba(0, 0, 0, 0.7),
    0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.avr-team-scroll__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ----------------------------------------------------------
   Légende — nom + rôle
---------------------------------------------------------- */
.avr-team-scroll__member figcaption {
  margin-top: 18px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}

.avr-team-scroll__member h4 {
  margin: 0;
  font-family: var(--avr-font-body);
  font-style: normal;
  font-weight: var(--avr-weight-regular);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--avr-fg);
  text-transform: none;
}

.avr-team-scroll__role {
  margin-top: 0;
  font-family: var(--avr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--avr-muted);
  text-align: right;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media (max-width: 980px) {
  .avr-team-scroll {
    height: 520vh;
  }

  .avr-team-scroll__head {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    top: 5vh;
  }

  .avr-team-scroll__head h2 {
    font-size: clamp(34px, 8vw, 54px);
  }

  .avr-team-scroll__head-right {
    max-width: none;
  }

  .avr-team-scroll__member {
    width: 70vw;
    max-width: 320px;
  }

  .avr-team-scroll__member h4 {
    font-size: 20px;
  }
}

/* ----------------------------------------------------------
   Reduced motion — désactive les halos
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .avr-team-scroll__blob,
  .avr-team-scroll__noise {
    animation: none;
  }
}