/*
 * Our Team page animations — loaded by `app/(legacy)/about/our-team/page.tsx`.
 *
 *   cardFlip (hover) — lib/animations.ts → cardFlip
 *   teamCardReveal (scroll, per-row stagger) — lib/animations.ts → swoopUp.fadeUp
 *
 * Scroll reveal: `OurTeamReveal` arms `.team-reveal-armed` and adds
 * `.is-in-view` per grid row on first viewport entry. Stagger uses
 * `data-team-col` (0–3) set at runtime from the live column count.
 */

@property --team-float-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --team-float-rotation {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --team-float-counter-rotation {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/*
 * Uniform tilted pill grid. Fixed card proportions let the rotated bounds sit
 * close together without overlapping at any breakpoint.
 */
.wf-body .team-hero-section .team-grid.overflow-hidden {
  grid-template-columns: minmax(0, 270px);
  grid-auto-rows: auto;
  grid-column-gap: 0;
  grid-row-gap: 80px;
  justify-content: center;
  padding: 46px 0;
  overflow: visible;
}

.wf-body .team-hero-section .team-grid > .w-dyn-list,
.wf-body .team-hero-section .team-grid > .move-one-thrity-five {
  width: min(68vw, 270px);
  margin: 0;
}

.wf-body .team-hero-section .team {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 285 / 465;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.wf-body .team-hero-section .team-card-swoop {
  width: 100%;
  height: 100%;
}

.wf-body .team-hero-section .team-card-float {
  width: 100%;
  height: 100%;
  /*
   * Do not put `filter` here. A filter on an ancestor flattens
   * `preserve-3d` in WebKit, which can leave the front-face photo blank
   * while the flipped back still paints. Shadow lives on
   * `.our-member-details` instead.
   */
  transform: translateY(var(--team-float-y)) rotateZ(var(--team-float-rotation));
  transform-origin: center;
  animation: wf-team-card-float 4s ease-in-out infinite;
  will-change: transform;
}

.wf-body .team-hero-section .team-grid > .w-dyn-list:nth-child(6n + 2) .team-card-float {
  animation-delay: -0.65s;
}

.wf-body .team-hero-section .team-grid > .w-dyn-list:nth-child(6n + 3) .team-card-float {
  animation-delay: -1.3s;
}

.wf-body .team-hero-section .team-grid > .w-dyn-list:nth-child(6n + 4) .team-card-float {
  animation-delay: -1.95s;
}

.wf-body .team-hero-section .team-grid > .w-dyn-list:nth-child(6n + 5) .team-card-float {
  animation-delay: -2.6s;
}

.wf-body .team-hero-section .team-grid > .w-dyn-list:nth-child(6n + 6) .team-card-float {
  animation-delay: -3.25s;
}

.wf-body .team-hero-section .our-member-details {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  /* Capsule shadow — box-shadow (not filter) so preserve-3d stays intact. */
  box-shadow: 0 18px 20px rgb(26 27 102 / 22%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateZ(15deg) rotateY(0deg);
  transform-origin: center;
  transition: transform 360ms ease-in-out;
}

.wf-body .team-hero-section .member-image,
.wf-body .team-hero-section .team-member-info-wrapper {
  border-radius: 9999px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.wf-body .team-hero-section .member-image {
  transform: rotateY(0deg) translateZ(1px);
}

.wf-body .team-hero-section .member-image .fit-cover.border-radius-three-hundred {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 9999px;
  object-fit: cover;
  /* Counter-rotation needs >= 1.18 to keep the capsule covered at 15deg + float. */
  transform: rotate(calc(-15deg + var(--team-float-counter-rotation))) scale(1.22);
  transform-origin: center;
}

/*
 * Per-photo framing for tightly cropped source headshots. The image is upright
 * on screen, so a translate after the rotate reads as screen-vertical and only
 * spends the capsule's long-axis slack: at scale 1.22 that allows +/-9.6%.
 * Sideways framing uses object-position, which costs no coverage at all.
 */
.wf-body
  .team-hero-section
  .member-image
  .fit-cover.border-radius-three-hundred[src*="mishack-segooa"] {
  object-position: 43% center;
  transform: rotate(calc(-15deg + var(--team-float-counter-rotation))) scale(1.22)
    translateY(9%);
}

.wf-body
  .team-hero-section
  .member-image
  .fit-cover.border-radius-three-hundred[src*="amy-leigh-braaf"] {
  transform: rotate(calc(-15deg + var(--team-float-counter-rotation))) scale(1.22)
    translateY(7%);
}

.wf-body
  .team-hero-section
  .member-image
  .fit-cover.border-radius-three-hundred[src*="xirimbi-baloyi"] {
  object-position: 43% center;
  transform: rotate(calc(-15deg + var(--team-float-counter-rotation))) scale(1.20);
}

.wf-body .team-hero-section .team-member-info-wrapper {
  background: var(--color-background-4);
  color: var(--color-body-white);
  transform: rotateY(180deg) translateZ(1px);
}

.wf-body .team-hero-section .team-member-info-wrapper > .flex-center {
  width: 100%;
  padding: 32px 22px;
}

.wf-body .team-hero-section .team-member-info-wrapper .heading-four {
  color: var(--color-heading-white);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
}

.wf-body .team-hero-section .team-member-info-wrapper .body-font {
  color: var(--color-fuschia-80);
  font-family: var(--font-button);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.wf-body .team-hero-section .team-card-bio {
  margin-top: 16px;
  color: var(--color-body-white);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.wf-body .team-hero-section .team-member-social {
  background-color: var(--color-ads-pink);
}

.wf-body .team-hero-section .team-member-info-wrapper .view-more-text {
  color: var(--color-heading-white);
}

.wf-body .team-hero-section .team-member-info-wrapper .bottom-line {
  background-color: var(--color-heading-white);
}

.wf-body .team-hero-section .team-member-info-wrapper .arrow-icon {
  filter: brightness(0) invert(1);
}

.wf-body .team-hero-section .team:focus {
  outline: none;
}

.wf-body .team-hero-section .team:focus-visible .our-member-details {
  box-shadow: 0 0 0 4px var(--color-ads-blue);
}

.wf-body .team-hero-section .team:hover .our-member-details,
.wf-body .team-hero-section .team:focus .our-member-details,
.wf-body .team-hero-section .team:focus-within .our-member-details {
  transform: rotateZ(var(--team-float-counter-rotation)) rotateY(180deg);
}

.wf-body .team-hero-section .team:hover .team-card-float,
.wf-body .team-hero-section .team:focus .team-card-float,
.wf-body .team-hero-section .team:focus-within .team-card-float {
  animation-play-state: paused;
}

@media screen and (min-width: 768px) {
  .wf-body .team-hero-section .team-grid.overflow-hidden {
    grid-template-columns: repeat(2, 250px);
    grid-column-gap: 106px;
    grid-row-gap: 76px;
  }

  .wf-body .team-hero-section .team-grid > .w-dyn-list,
  .wf-body .team-hero-section .team-grid > .move-one-thrity-five {
    width: 250px;
  }
}

@media screen and (min-width: 992px) {
  .wf-body .team-hero-section .team-grid.overflow-hidden {
    grid-template-columns: repeat(3, 250px);
  }
}

@media screen and (min-width: 1280px) {
  .wf-body .team-hero-section .team-grid.overflow-hidden {
    grid-template-columns: repeat(4, 230px);
    grid-column-gap: 96px;
    grid-row-gap: 72px;
  }

  .wf-body .team-hero-section .team-grid > .w-dyn-list,
  .wf-body .team-hero-section .team-grid > .move-one-thrity-five {
    width: 230px;
  }
}

@keyframes wf-team-card-float {
  0%,
  100% {
    --team-float-y: 0px;
    --team-float-rotation: -0.8deg;
    --team-float-counter-rotation: 0.8deg;
  }
  50% {
    --team-float-y: -12px;
    --team-float-rotation: 0.8deg;
    --team-float-counter-rotation: -0.8deg;
  }
}

@keyframes wf-team-card-swoop-up {
  from {
    opacity: 0;
    margin-top: 28px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wf-body .team-hero-section.team-reveal-armed .team-grid > .w-dyn-list .team-card-swoop {
    animation: wf-team-card-swoop-up 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-play-state: paused;
  }

  .wf-body
    .team-hero-section.team-reveal-armed
    .team-grid
    > .w-dyn-list.is-in-view
    .team-card-swoop {
    animation-play-state: running;
  }

  .wf-body
    .team-hero-section.team-reveal-armed
    .team-grid
    > .w-dyn-list.is-in-view[data-team-col="0"]
    .team-card-swoop {
    animation-delay: 0ms;
  }

  .wf-body
    .team-hero-section.team-reveal-armed
    .team-grid
    > .w-dyn-list.is-in-view[data-team-col="1"]
    .team-card-swoop {
    animation-delay: 120ms;
  }

  .wf-body
    .team-hero-section.team-reveal-armed
    .team-grid
    > .w-dyn-list.is-in-view[data-team-col="2"]
    .team-card-swoop {
    animation-delay: 240ms;
  }

  .wf-body
    .team-hero-section.team-reveal-armed
    .team-grid
    > .w-dyn-list.is-in-view[data-team-col="3"]
    .team-card-swoop {
    animation-delay: 360ms;
  }

}

@media (prefers-reduced-motion: reduce) {
  .wf-body .team-hero-section.team-reveal-armed .team-grid > .w-dyn-list .team-card-swoop {
    animation: none;
    opacity: 1;
    margin-top: 0;
  }

  .wf-body .team-hero-section .our-member-details {
    transition: none;
  }
}