/* Film-challenge campaign-only styles (prize grid, studio wall, leaderboard, roadmap…).
   Served as a static file and linked from FilmChallengeLayout so the rest of the site
   doesn't download it. The shared fc-* primitives stay in
   src/features/campaign/film-challenge/styles/film-challenge.css (imported in _app). */

/* --------------------------- categories section --------------------------- */

.fc-categories-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 55% 60% at 15% 15%,
      rgba(252, 94, 14, 0.06) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 60% at 85% 85%,
      rgba(200, 74, 0, 0.06) 0%,
      transparent 60%
    );
}

/* ------------------------------ poster cards ---------------------------- */
/* Height is fixed at every breakpoint: the row auto-cycles, and a card that grew
   would push its neighbours out of frame. Border and glow only. */

.fc-poster-card {
  height: 380px;
  transition:
    border-color var(--fc-dur-fast) ease,
    box-shadow var(--fc-dur-fast) ease;
}
@media (min-width: 640px) {
  .fc-poster-card {
    height: 420px;
  }
}
@media (min-width: 1024px) {
  .fc-poster-card {
    height: 460px;
  }
}

.fc-poster-bg-base,
.fc-poster-bg-hover {
  transition: opacity 0.35s ease;
}
.fc-poster-bg-hover {
  opacity: 0;
}

/* Driven by state, not :hover, so tapping the play button reveals the clip on
   touch devices too. */
.fc-poster-card.is-playing .fc-poster-bg-base {
  opacity: 0;
}
.fc-poster-card.is-playing .fc-poster-bg-hover {
  opacity: 1;
}

/* The art alone reads as a still poster, so the cards carry a play affordance
   at rest; it steps aside once the clip is actually running. */
.fc-poster-play {
  opacity: 1;
  transition:
    opacity var(--fc-dur-fast) ease,
    transform var(--fc-dur-fast) var(--fc-ease);
}
.fc-poster-card.is-playing .fc-poster-play {
  opacity: 0;
  pointer-events: none;
}
.fc-poster-play:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid rgba(252, 94, 14, 0.7);
  outline-offset: 3px;
}
/* Hover already starts the clip on pointer devices, so the button is only an
   affordance where hover cannot fire. Kept tabbable rather than removed, so a
   keyboard can still reach it. */
@media (hover: hover) and (pointer: fine) {
  .fc-poster-play {
    opacity: 0;
    pointer-events: none;
  }
  .fc-poster-play:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

.fc-poster-footer {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(0, 0, 0, 0.86) 32%,
    rgba(0, 0, 0, 0.58) 62%,
    rgba(0, 0, 0, 0) 100%
  );
}

.fc-poster-card:hover,
.fc-poster-card:focus-within,
.fc-poster-card.is-playing {
  border-color: rgba(252, 94, 14, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 52px rgba(0, 0, 0, 0.48),
    0 0 38px rgba(252, 94, 14, 0.16);
  z-index: 2;
}
/* ============================= PRIZE GRID ============================= */

.fc-prize-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  text-align: center;
}
@media (max-width: 899px) {
  .fc-prize-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================= AWARD CARD ============================= */

.fc-award-card {
  --glow: 252, 94, 14;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: clamp(26px, 3vw, 42px) clamp(18px, 2.4vw, 34px)
    clamp(26px, 3vw, 36px);
  background: var(--dv2-panel, #0b0b0b);
  border: 1px solid var(--dv2-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px rgba(0, 0, 0, 0.45);
}
@media (max-width: 639px) {
  .fc-award-card {
    border-radius: 16px;
  }
}
.fc-award-card > .fc-ambient-shader {
  border-radius: inherit;
}
.fc-award-card > *:not(.fc-ambient-shader) {
  position: relative;
  z-index: 1;
}

/* Glow — CSS bloom anchored to the card's top edge */
.fc-award-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  top: -18%;
  width: min(880px, 108%);
  aspect-ratio: 5 / 3;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 52% 56% at 50% 42%,
    rgba(var(--glow), 0.34) 0%,
    rgba(var(--glow), 0.12) 44%,
    transparent 74%
  );
  filter: blur(30px);
  animation: fcCardGlowPulse 5.5s ease-in-out infinite;
}
@keyframes fcCardGlowPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.97);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

/* Per-card hue */
.fc-card--audience {
  --glow: 252, 94, 14;
}
.fc-card--jury {
  --glow: 168, 31, 12;
}
.fc-card--special {
  --glow: 139, 117, 80;
  grid-column: 1 / -1;
}
@media (max-width: 899px) {
  .fc-card--special {
    grid-column: auto;
  }
}

/* ============================= CARD INNARDS ========================== */

.fc-award-name {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  letter-spacing: -0.015em;
  color: #fff;
}
.fc-award-how {
  margin-top: 0.45rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dv2-text-3);
}

/* ============================= TIERS ================================= */

.fc-tier {
  margin-top: 2rem;
}
.fc-tier:first-of-type {
  margin-top: 2.25rem;
}
@media (max-width: 639px) {
  .fc-tier {
    margin-top: 1.6rem;
  }
  .fc-tier:first-of-type {
    margin-top: 1.75rem;
  }
}

.fc-prize-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 15px;
  font-family: var(--font-heading, inherit);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.fc-tier--grand .fc-prize-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
}
.fc-tier--second .fc-prize-badge {
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
}
.fc-tier--special .fc-prize-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
}

/* Lockup slots — height-based sizing so tier ratio stays consistent */
.fc-lockup-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.1rem;
}
.fc-lockup-slot > picture {
  display: contents;
}
.fc-lockup-slot--grand {
  height: clamp(33px, 5.2vw, 66px);
}
.fc-lockup-slot--second {
  height: clamp(24px, 3.75vw, 47px);
}
.fc-lockup-slot--special {
  height: clamp(26px, 4.2vw, 56px);
}
@media (max-width: 899px) {
  .fc-lockup-slot--grand {
    height: clamp(30px, calc(13vw - 9px), 66px);
  }
  .fc-lockup-slot--second {
    height: clamp(21px, calc(9.23vw - 6.4px), 47px);
  }
  .fc-lockup-slot--special {
    height: clamp(16px, calc(8.4vw - 5.7px), 56px);
  }
}

.fc-prize-lockup {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(var(--glow), 0.45));
}
@media (max-width: 639px) {
  .fc-prize-lockup {
    filter: drop-shadow(0 0 18px rgba(var(--glow), 0.4));
  }
}

.fc-tier-note {
  margin-top: 0.7rem;
  font-size: 12px;
  color: var(--dv2-text-3);
}

/* ============================= SPECIAL AWARDS ======================== */

.fc-special-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.fc-special-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 16px;
  background: var(--dv2-fill);
  border: 1px solid var(--dv2-line);
  font-family: var(--font-heading, inherit);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dv2-text-1, rgba(255, 255, 255, 0.92));
  transition:
    border-color 250ms ease,
    background 250ms ease;
}
.fc-special-chip:hover {
  background: var(--dv2-fill-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--dv2-line-strong, rgba(255, 255, 255, 0.13));
}

/* ============================= PERKS ================================= */

.fc-perks {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--dv2-line);
}
.fc-perks-label {
  font-family: var(--font-heading, inherit);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dv2-text-3);
}
.fc-perks-row {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.fc-perk {
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-heading, inherit);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dv2-text-2, rgba(255, 255, 255, 0.6));
  background: var(--dv2-fill);
  border: 1px solid var(--dv2-line);
}

/* ------------------------- studio wall ------------------------------ */

.fc-vm-section {
  position: relative;
  padding: 6rem 0 4.5rem;
  background: var(--dv2-bg);
  overflow: hidden;
}
.fc-vm-head {
  margin-bottom: 2.75rem;
}
.fc-vm-wall {
  position: relative;
  height: 870px;
  overflow: hidden;
  padding-top: 22px;
}
@media (max-width: 899px) {
  .fc-vm-wall {
    height: 730px;
  }
}
.fc-vm-wall::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 7, 7, 0) 0%,
    rgba(7, 7, 7, 0.5) 42%,
    rgba(7, 7, 7, 0.9) 76%,
    var(--dv2-bg) 97%
  );
}
.fc-vm-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  grid-auto-flow: dense;
  align-content: start;
}
@media (max-width: 1023px) {
  .fc-vm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 899px) {
  .fc-vm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.fc-vm-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 1.25rem auto 0;
  height: 40px;
  padding: 0 18px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dv2-text-1, #fff);
  background: var(--dv2-fill-hover, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--dv2-line-strong, rgba(255, 255, 255, 0.13));
}
.fc-vm-toggle svg {
  width: 15px;
  height: 15px;
}
.fc-vm-section.is-expanded .fc-vm-toggle {
  position: sticky;
  top: 70px;
  z-index: 6;
}
.fc-vm-section.is-expanded .fc-vm-toggle svg {
  transform: rotate(180deg);
}
@media (max-width: 639px) {
  .fc-vm-section {
    padding: 4rem 0 3rem;
  }
  .fc-vm-wall {
    height: auto;
    overflow: visible;
    padding-top: 6px;
  }
  .fc-vm-wall::after {
    display: none;
  }
  .fc-vm-grid {
    gap: 12px;
  }
  .fc-vm-section:not(.is-expanded) .fc-vm-tile:nth-child(n + 4) {
    display: none;
  }
  .fc-vm-toggle {
    display: flex;
  }
}
.fc-vm-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--dv2-card);
  border: 1px solid var(--dv2-line);
  cursor: pointer;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  color: inherit;
  aspect-ratio: 8 / 5;
  transition:
    border-color 250ms ease,
    box-shadow 250ms ease,
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Buttons often ignore aspect-ratio when every child is absolutely
   positioned. This sizer is in normal flow so the tile always has height. */
.fc-vm-tile::before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 62.5%;
}
.fc-vm-tile.is-tall {
  grid-row: span 2;
  aspect-ratio: auto;
  height: 100%;
}
.fc-vm-tile.is-tall::before {
  padding-top: 0;
  height: 100%;
  min-height: 100%;
}
.fc-vm-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 1;
  background: #000;
}
.fc-vm-tile.is-playing video {
  display: block;
}
.fc-vm-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fc-vm-poster.has-still {
  background: #111;
}
.fc-vm-poster.has-still::after {
  display: none;
}
.fc-vm-tile:not(.is-playing) .fc-vm-poster.has-still {
  animation: none;
}
.fc-vm-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      120% 90% at calc(20% + var(--vm-i, 0) * 9%) 12%,
      rgba(252, 94, 14, 0.28),
      transparent 58%
    ),
    radial-gradient(
      100% 80% at calc(80% - var(--vm-i, 0) * 7%) 92%,
      rgba(200, 74, 0, 0.24),
      transparent 62%
    ),
    linear-gradient(
      calc(150deg + var(--vm-i, 0) * 12deg),
      var(--dv2-card),
      var(--dv2-bg) 72%
    );
}
.fc-vm-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.028) 0 2px,
    transparent 2px 5px
  );
}
.fc-vm-tile:hover,
.fc-vm-tile:focus-visible {
  border-color: rgba(255, 255, 255, 0.13);
  transform: translateY(-3px);
}
/* Deliberately quiet: four full-strength outlines at once read as an error state. */
.fc-vm-tile.is-playing {
  border-color: rgba(252, 94, 14, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(252, 94, 14, 0.16);
}
.fc-vm-tile.is-playing:hover,
.fc-vm-tile.is-playing:focus-visible {
  border-color: rgba(252, 94, 14, 0.65);
  outline: 1px solid rgba(252, 94, 14, 0.65);
  outline-offset: -1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 30px rgba(252, 94, 14, 0.28);
  transform: translateY(-3px);
}
/* The rules above draw no ring at all (or, once playing, an inset hairline that
   only thickens the border) — nothing a keyboard user can follow. `.is-playing`
   is repeated so this ties on specificity and wins on order. */
.fc-vm-tile:focus-visible,
.fc-vm-tile.is-playing:focus-visible {
  outline: 2px solid var(--dv2-accent, #fc5e0e);
  outline-offset: 2px;
}
.fc-vm-tile:not(.is-playing) .fc-vm-poster {
  animation: fcVmDrift 9s ease-in-out infinite;
  animation-delay: calc(var(--vm-i, 0) * -0.7s);
}
@keyframes fcVmDrift {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}
.fc-vm-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--dv2-line-strong, rgba(255, 255, 255, 0.13));
  color: #fff;
  opacity: 0;
  transition: opacity 250ms ease;
}
.fc-vm-tile:hover .fc-vm-play-badge,
.fc-vm-tile:focus-visible .fc-vm-play-badge {
  opacity: 1;
}
.fc-vm-tile.is-playing .fc-vm-play-badge {
  opacity: 0;
}
.fc-vm-note {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 11.5px;
  color: var(--dv2-text-3, rgba(255, 255, 255, 0.4));
}

/* ------------------------- post mockups ----------------------------- */

.fc-mp-section {
  position: relative;
  padding: 4.5rem 0 4rem;
  background: var(--dv2-bg);
  overflow: hidden;
}
.fc-mp-head {
  margin-bottom: 0;
}
.fc-mp-wall {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  max-width: 880px;
  margin-top: 2.75rem;
  margin-inline: auto;
  /* Float travels ±7px. Padding holds the upswing so cards never cover copy. */
  padding-top: 14px;
}
@media (max-width: 899px) {
  .fc-mp-wall {
    grid-template-columns: minmax(0, 1fr);
    max-width: 400px;
    gap: 16px;
  }
}
.fc-mp-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.fc-mp-float {
  min-width: 0;
  animation: fcMpLevitate var(--mp-dur, 6.6s) ease-in-out infinite;
  animation-delay: calc(var(--mp-i, 0) * -2.1s);
}
.fc-mp-wall > .fc-mp-float {
  --mp-dur: 6.6s;
}
.fc-mp-col > .fc-mp-float:first-child {
  --mp-dur: 7.4s;
}
.fc-mp-col > .fc-mp-float:last-child {
  --mp-dur: 5.9s;
}
@keyframes fcMpLevitate {
  0%,
  100% {
    transform: translateY(-7px);
  }
  50% {
    transform: translateY(7px);
  }
}
.fc-mp-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 16px;
  background: var(--dv2-card);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.4);
  text-align: left;
  transition:
    border-color 250ms ease,
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.fc-mp-card:hover {
  border-color: rgba(252, 94, 14, 0.35);
}
.fc-mp-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
}
.fc-mp-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--dv2-line-strong, rgba(255, 255, 255, 0.13));
}
.fc-mp-handle {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-mp-more {
  flex-shrink: 0;
  display: flex;
  color: var(--dv2-text-3, rgba(255, 255, 255, 0.4));
}
.fc-mp-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  /* Set per card from the post's `ratio`; released on desktop for the tall
     card, which sizes from the column height instead. */
  aspect-ratio: var(--mp-ratio, 16 / 9);
  background: var(--dv2-bg);
  border-top: 1px solid var(--dv2-line);
  border-bottom: 1px solid var(--dv2-line);
}
.fc-mp-media-poster {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      110% 80% at calc(24% + var(--mp-i, 0) * 16%) 16%,
      rgba(252, 94, 14, 0.3),
      transparent 58%
    ),
    radial-gradient(
      100% 80% at calc(80% - var(--mp-i, 0) * 14%) 88%,
      rgba(200, 74, 0, 0.26),
      transparent 62%
    ),
    linear-gradient(
      calc(152deg + var(--mp-i, 0) * 16deg),
      var(--dv2-card),
      var(--dv2-bg) 74%
    );
  animation: fcVmDrift 11s ease-in-out infinite;
  animation-delay: calc(var(--mp-i, 0) * -1.4s);
}
.fc-mp-media-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.03) 0 2px,
    transparent 2px 6px
  );
}
.fc-mp-media-label {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  border-radius: 999px;
  padding: 3px 9px;
  font-family: var(--dv2-font-heading, inherit);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dv2-text-3, rgba(255, 255, 255, 0.4));
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--dv2-line);
  backdrop-filter: blur(6px);
}
.fc-mp-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 1;
}
.fc-mp-media.has-video {
  cursor: pointer;
}
.fc-mp-media.has-video video {
  display: block;
}
.fc-mp-media-still {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fc-mp-media.is-playing .fc-mp-media-still {
  display: none;
}
.fc-mp-media.has-video .fc-mp-media-poster,
.fc-mp-media.has-video .fc-mp-media-label {
  display: none;
}
.fc-mp-media.is-playing .fc-mp-play {
  opacity: 0;
  pointer-events: none;
}
.fc-mp-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.fc-mp-body {
  padding: 10px 12px 12px;
}
.fc-mp-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.fc-mp-action {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--dv2-text-3, rgba(255, 255, 255, 0.4));
  font-size: 11.5px;
  font-weight: 600;
}
.fc-mp-action svg {
  width: 18px;
  height: 18px;
}
.fc-mp-action-save {
  margin-left: auto;
}
.fc-mp-caption {
  font-size: 12.5px;
  line-height: 1.5;
}
.fc-mp-caption b {
  font-weight: 700;
}
.fc-mp-tags {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dv2-accent-text);
}
.fc-mp-time {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--dv2-text-3, rgba(255, 255, 255, 0.4));
}
.fc-mp-card--lg .fc-mp-card-head {
  padding: 12px 14px;
}
.fc-mp-card--lg .fc-mp-avatar {
  width: 34px;
  height: 34px;
}
.fc-mp-card--lg .fc-mp-body {
  padding: 12px 14px 14px;
}

/* Two columns up, the tall card's 9:16 media would otherwise run well past the
   pair of 16:9 cards beside it. Narrow it slightly, then let its media take
   whatever height is left over so both columns end on the same line. The still
   and the video are both `object-fit: cover`, so the crop follows. Only from
   900px, where the wall actually has two columns; below that each card stands
   alone and keeps its own ratio. */
@media (min-width: 900px) {
  .fc-mp-wall {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .fc-mp-wall > .fc-mp-float {
    display: flex;
  }
  .fc-mp-card--lg {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .fc-mp-card--lg .fc-mp-media {
    flex: 1 1 auto;
    aspect-ratio: auto;
    /* Guards the crop if the caption ever runs long enough to squeeze it. */
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fc-ambient-shader {
    transition: none;
  }
  .fc-award-card::before {
    animation: none;
    opacity: 0.85;
    transform: translateX(-50%);
  }

  .fc-vm-tile:not(.is-playing) .fc-vm-poster {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .fc-vm-tile.is-playing,
  .fc-vm-tile:hover,
  .fc-vm-tile:focus-visible {
    transform: none;
  }
  .fc-mp-media-poster {
    animation: none;
  }
  .fc-mp-float {
    animation: none;
  }
  .fc-podium__avatar {
    transition: none;
  }
}

/* ---------------------------- leaderboard podium ------------------------ */

/* The stage is a flat export of the Figma podium art, so a seat is placed as a
   fraction of that art's own box rather than the viewport: cqw keeps every
   avatar standing on its own pedestal at any width. Text sizes floor out with
   max() so they stay legible once the stage shrinks past the design width. */
.fc-podium {
  container-type: inline-size;
  position: relative;
  width: 100%;
  /* Near the 356px the mobile art was drawn at — past that the seats scale up
     faster than the panel and the stage starts to read as an oversized toy. */
  max-width: 24rem;
  margin-inline: auto;
  aspect-ratio: 356 / 251;
  border-radius: var(--dv2-radius-lg, 16px);
  background: url('/assets/campaign/film-challenge/leaderboard-podium-mobile.webp')
    center / cover no-repeat;
}

/* Base metrics are the 2nd/3rd-place seat; the winner overrides what differs. */
.fc-podium__seat {
  --fc-seat-w: 27cqw;
  --fc-seat-ring: 12.36cqw;
  --fc-seat-stroke: max(1.5px, 0.843cqw);
  --fc-seat-crown: 5.846cqw;
  --fc-seat-overlap: 1.335cqw;
  --fc-seat-badge: 4.677cqw;
  --fc-seat-badge-font: max(0.5rem, 2.672cqw);
  --fc-seat-initials: max(0.625rem, 2.672cqw);
  --fc-seat-gap: 4.775cqw;
  --fc-seat-name: max(0.6875rem, 3.652cqw);
  --fc-seat-votes: max(0.625rem, 3.371cqw);

  position: absolute;
  z-index: 1;
  display: flex;
  width: var(--fc-seat-w);
  flex-direction: column;
  align-items: center;
  translate: -50% 0;
  border-radius: var(--dv2-radius-md, 12px);
  font-family: var(--font-body);
  text-align: center;
  cursor: pointer;
}

/* --fc-seat-tint is the designed medal tint per rank, and the one place this
   campaign carries a non-orange hue; it reads only as the base of a ring. */
.fc-podium__seat--1 {
  --fc-seat-w: 30.9cqw;
  --fc-seat-ring: 16.292cqw;
  --fc-seat-crown: 11.055cqw;
  --fc-seat-overlap: 1.359cqw;
  --fc-seat-badge: 5.43cqw;
  --fc-seat-badge-font: max(0.5rem, 3.104cqw);
  --fc-seat-initials: max(0.6875rem, 4.655cqw);
  --fc-seat-gap: 3.371cqw;
  --fc-seat-name: max(0.6875rem, 3.933cqw);
  --fc-seat-votes: max(0.625rem, 3.652cqw);
  --fc-seat-tint: #622404;
  --fc-seat-crown-src: url('/assets/campaign/film-challenge/leaderboard-crown-1st.svg');

  left: 50%;
  top: 9.16%;
}

.fc-podium__seat--2 {
  --fc-seat-tint: #625c04;
  --fc-seat-crown-src: url('/assets/campaign/film-challenge/leaderboard-crown-2nd.svg');

  left: 19.52%;
  top: 27.89%;
}

.fc-podium__seat--3 {
  --fc-seat-tint: #410462;
  --fc-seat-crown-src: url('/assets/campaign/film-challenge/leaderboard-crown-3rd.svg');

  left: 81.04%;
  top: 26.29%;
}

/* Sits before the ring in the flow so the ring covers the crown's base. */
.fc-podium__crown {
  width: var(--fc-seat-crown);
  aspect-ratio: 1;
  margin-bottom: calc(-1 * var(--fc-seat-overlap));
  background: var(--fc-seat-crown-src) center / contain no-repeat;
}

.fc-podium__avatar {
  position: relative;
  display: grid;
  width: var(--fc-seat-ring);
  aspect-ratio: 1;
  place-items: center;
  border: var(--fc-seat-stroke) solid var(--dv2-accent, #fc5e0e);
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    var(--dv2-bg, #070707) 0%,
    var(--fc-seat-tint) 100%
  );
  transition: box-shadow var(--fc-dur-quick) var(--fc-ease);
}

.fc-podium__initials {
  font-family: var(--font-heading);
  font-size: var(--fc-seat-initials);
  font-weight: 700;
  line-height: 1;
  color: var(--dv2-text-1);
}

.fc-podium__rank {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: grid;
  width: var(--fc-seat-badge);
  aspect-ratio: 1;
  place-items: center;
  translate: -50% 50%;
  border-radius: 50%;
  /* Ember Deep, not Ember Orange: this is a fill sitting under white text. */
  background: linear-gradient(
    180deg,
    var(--dv2-accent-strong) 0%,
    var(--dv2-accent-strong-deep) 100%
  );
  font-family: var(--font-display);
  font-size: var(--fc-seat-badge-font);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 0.8em rgba(0, 0, 0, 0.25);
}

/* Both labels sit directly on the artwork, which is brightest right behind the
   winner — the shadow is what keeps them off the ember bloom, not decoration. */
.fc-podium__name,
.fc-podium__votes {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.fc-podium__name {
  margin-top: var(--fc-seat-gap);
  font-size: var(--fc-seat-name);
  font-weight: 600;
  line-height: 1.5;
  color: var(--dv2-text-1);
}

.fc-podium__votes {
  font-size: var(--fc-seat-votes);
  line-height: 1.5;
  color: var(--dv2-text-2);
}

.fc-podium__seat:hover .fc-podium__avatar,
.fc-podium__seat:focus-visible .fc-podium__avatar {
  box-shadow: 0 0 0 0.2em rgba(252, 94, 14, 0.3);
}

.fc-podium__seat:focus-visible {
  outline: 2px solid var(--dv2-accent, #fc5e0e);
  outline-offset: 4px;
}

@media (min-width: 1024px) {
  .fc-podium {
    max-width: none;
    aspect-ratio: 1287 / 357;
    border-radius: 0;
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.08));
    background-image: url('/assets/campaign/film-challenge/leaderboard-podium.webp');
  }

  .fc-podium__seat {
    --fc-seat-w: 8.547cqw;
    --fc-seat-ring: 5.75cqw;
    --fc-seat-stroke: max(1.5px, 0.233cqw);
    --fc-seat-crown: 2.719cqw;
    --fc-seat-overlap: 0.622cqw;
    --fc-seat-badge: 2.176cqw;
    --fc-seat-badge-font: max(0.5rem, 1.243cqw);
    --fc-seat-initials: max(0.625rem, 1.243cqw);
    --fc-seat-gap: 1.321cqw;
    --fc-seat-name: max(0.6875rem, 1.119cqw);
    --fc-seat-votes: max(0.625rem, 1.01cqw);
  }

  .fc-podium__seat--1 {
    --fc-seat-w: 8.547cqw;
    --fc-seat-ring: 6.527cqw;
    --fc-seat-crown: 4.429cqw;
    --fc-seat-overlap: 0.544cqw;
    --fc-seat-badge: 2.176cqw;
    --fc-seat-badge-font: max(0.5rem, 1.243cqw);
    --fc-seat-initials: max(0.75rem, 1.865cqw);
    --fc-seat-gap: 0.932cqw;
    --fc-seat-name: max(0.6875rem, 1.119cqw);
    --fc-seat-votes: max(0.625rem, 1.01cqw);

    left: 50.04%;
    top: 5.32%;
  }

  .fc-podium__seat--2 {
    left: 25.41%;
    top: 21.85%;
  }

  .fc-podium__seat--3 {
    left: 75.14%;
    top: 25.49%;
  }
}

/* ------------------------ unlock / free generations ---------------------- */
/* Drop-in port of the approved "Free generations" preview. Zero JS: the line
   draw, the number chips and the pills all key off the same .fc-in-view the
   scroll-reveal hook already sets. Icon treatment mirrors .fc-rm3-pin so the
   roadmap and this section read as one family. */

/* Drifting sparks rather than another blurred blob. Sixteen hand-placed dots,
   each with its own column, size, opacity, drift and duration set inline, so
   nothing repeats visibly. Deliberately sparse: at any moment about half are
   mid-fade. */
.fc-ug-embers {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fc-ug-ember {
  position: absolute;
  bottom: -12px;
  left: var(--x);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 999px;
  background: var(--dv2-accent);
  box-shadow: 0 0 6px 1px rgba(252, 94, 14, 0.45);
  opacity: 0;
  animation: fcUgRise var(--d, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.fc-ug-ember--soft {
  background: var(--dv2-accent-text-soft);
  box-shadow: 0 0 7px 1px rgba(255, 180, 137, 0.35);
}

@keyframes fcUgRise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: var(--o, 0.5);
  }
  72% {
    opacity: var(--o, 0.5);
  }
  100% {
    transform: translate3d(var(--dx, 12px), calc(var(--rise, 300px) * -1), 0)
      scale(1);
    opacity: 0;
  }
}

.fc-ug-steps {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .fc-ug-steps {
    flex-direction: row;
  }
}

/* Card surface: a warm bloom sitting just under the icon, fading to the panel
   colour at the edges, so the card has a light source instead of being a flat
   black rectangle. Three stacked layers, all low alpha — this has to stay
   quieter than the icon and the pill. */
.fc-ug-step {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  border: 0;
  border-radius: 16px;
  padding: 35px 27px 31px;
  text-align: center;
  background:
    radial-gradient(
      115% 82% at 50% 0%,
      rgba(252, 94, 14, 0.11),
      rgba(252, 94, 14, 0) 60%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.012) 42%,
      rgba(255, 255, 255, 0) 72%
    ),
    var(--dv2-panel, #0b0b0b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--fc-dur-fast) var(--fc-ease),
    box-shadow var(--fc-dur-fast) ease;
}

/* Gradient border painted as a 1px ring rather than a border-image: the
   gradient fills the pseudo-element, then a two-layer mask punches out
   everything inside the padding box, leaving only the edge. This is the one
   approach that follows a border-radius exactly. */
.fc-ug-step::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(252, 94, 14, 0.5) 34%,
    rgba(255, 255, 255, 0.05) 58%,
    rgba(252, 94, 14, 0.26) 82%,
    rgba(255, 255, 255, 0.12) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.75;
  transition: opacity var(--fc-dur-fast) ease;
}

.fc-ug-step:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 48px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(252, 94, 14, 0.14);
}

.fc-ug-step:hover::before {
  opacity: 1;
}

/* Ambient glow, always running and independent of hover/scroll. A soft radial
   bloom sits behind the icon and text and breathes slowly in place; this is
   what keeps the card alive at rest. */
.fc-ug-step::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    60% 55% at 50% 28%,
    rgba(252, 94, 14, 0.2),
    rgba(252, 94, 14, 0) 70%
  );
  opacity: 0.35;
  animation: fcUgCardGlow 7s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes fcUgCardGlow {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(1);
  }
  50% {
    opacity: 0.68;
    transform: scale(1.05);
  }
}

/* Slight stagger so the three cards do not breathe in unison. */
.fc-ug-step--1::after {
  animation-delay: 0s;
}

.fc-ug-step--2::after {
  animation-delay: -2.3s;
}

.fc-ug-step--3::after {
  animation-delay: -4.6s;
}

/* Step 2 is the one action being asked for, so its card carries a warmer bloom
   and a hotter ring. Same recipe, one notch up. */
.fc-ug-step--2 {
  background:
    radial-gradient(
      118% 86% at 50% 0%,
      rgba(252, 94, 14, 0.17),
      rgba(252, 94, 14, 0) 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.015) 42%,
      rgba(255, 255, 255, 0) 72%
    ),
    var(--dv2-panel, #0b0b0b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(252, 94, 14, 0.07);
}

.fc-ug-step--2::before {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(252, 94, 14, 0.7) 34%,
    rgba(255, 255, 255, 0.07) 58%,
    rgba(252, 94, 14, 0.4) 82%,
    rgba(255, 255, 255, 0.16) 100%
  );
  opacity: 0.9;
}

.fc-ug-step--2:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 48px rgba(0, 0, 0, 0.42),
    0 0 40px rgba(252, 94, 14, 0.18);
}

.fc-ug-step--2::after {
  background: radial-gradient(
    64% 58% at 50% 28%,
    rgba(252, 94, 14, 0.28),
    rgba(252, 94, 14, 0) 70%
  );
  animation-name: fcUgCardGlowHero;
}

@keyframes fcUgCardGlowHero {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(1);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.06);
  }
}

/* Icon + step number. Same construction as .fc-rm3-pin: glow blob behind, an
   ember-tinted disc, a number chip in the corner, and a solid fill on hover. */
.fc-ug-icon-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}

.fc-ug-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(252, 94, 14, 0.4),
    rgba(252, 94, 14, 0) 72%
  );
  opacity: 0.4;
  filter: blur(4px);
  transition:
    opacity var(--fc-dur-fast) ease,
    filter var(--fc-dur-fast) ease;
}

.fc-ug-step:hover .fc-ug-icon-wrap::before {
  opacity: 1;
  filter: blur(7px);
}

.fc-ug-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: radial-gradient(
    120% 120% at 30% 20%,
    rgba(252, 94, 14, 0.24),
    rgba(252, 94, 14, 0.08)
  );
  border: 1px solid rgba(252, 94, 14, 0.28);
  color: var(--dv2-accent-text, #ffa378);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background var(--fc-dur-fast) ease,
    border-color var(--fc-dur-fast) ease,
    box-shadow var(--fc-dur-fast) ease,
    color var(--fc-dur-fast) ease;
}

.fc-ug-icon svg {
  width: 21px;
  height: 21px;
}

.fc-ug-step:hover .fc-ug-icon {
  background: linear-gradient(135deg, #c84a00, #fc5e0e);
  border-color: rgba(252, 94, 14, 0.7);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 18px rgba(252, 94, 14, 0.5);
}

.fc-ug-num {
  position: absolute;
  right: -7px;
  bottom: -7px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dv2-accent-text, #ffa378);
  background: var(--dv2-bg, #070707);
  border: 1px solid rgba(252, 94, 14, 0.4);
  transition:
    color var(--fc-dur-fast) ease,
    border-color var(--fc-dur-fast) ease,
    background var(--fc-dur-fast) ease,
    box-shadow var(--fc-dur-fast) ease;
}

.fc-ug-step:hover .fc-ug-num {
  color: #fff;
  border-color: rgba(252, 94, 14, 0.6);
  background: linear-gradient(135deg, #c84a00, #fc5e0e);
  box-shadow: 0 0 10px rgba(252, 94, 14, 0.5);
}

.fc-ug-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.fc-ug-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dv2-text-2, rgba(255, 255, 255, 0.6));
}

/* Three meanings, three treatments. FREE is a given, so it stays quiet. ENTRY
   is the action the section is asking for, so it takes the primary ember fill.
   UNLOCKED is the payoff, so it glows. */
.fc-ug-pill {
  margin-top: 0.15rem;
  border-radius: 999px;
  padding: 5px 15px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.fc-ug-pill--free {
  color: var(--dv2-text-2, rgba(255, 255, 255, 0.6));
  background: var(--dv2-fill-hover);
  border: 1px solid var(--dv2-line);
}

.fc-ug-pill--entry {
  color: #fff;
  background: linear-gradient(180deg, #c84a00 0%, #c04300 100%);
  border: 1px solid rgba(252, 94, 14, 0.55);
  box-shadow:
    0 6px 16px rgba(252, 94, 14, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.fc-ug-pill--unlocked {
  color: var(--dv2-accent-text-soft);
  background: rgba(255, 180, 137, 0.1);
  border: 1px solid rgba(255, 180, 137, 0.42);
  animation: fcUgGlow 3.2s ease-in-out infinite;
}

@keyframes fcUgGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 180, 137, 0),
      inset 0 0 0 0 rgba(255, 180, 137, 0);
  }
  50% {
    box-shadow:
      0 0 16px 1px rgba(255, 180, 137, 0.3),
      inset 0 0 10px rgba(255, 180, 137, 0.1);
  }
}

/* Self-drawing progress line: a dim static track underneath, the accent stroke
   drawing over it left to right, segment one before segment two. The vertical
   variant takes over once the cards stack. */
.fc-ug-conn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .fc-ug-conn {
    display: flex;
    width: 52px;
  }
}

/* Sized per variant rather than through a shared `.fc-ug-conn svg` rule — that
   rule would out-specify .fc-ug-conn-v and stretch the vertical line back into
   a horizontal one once the cards stack. */
.fc-ug-conn-h {
  display: block;
  width: 100%;
  height: 2px;
  overflow: visible;
}

.fc-ug-conn-v {
  display: none;
  width: 2px;
  height: 26px;
  overflow: visible;
}

.fc-ug-track {
  fill: none;
  stroke: var(--dv2-line-strong);
  stroke-width: 2;
  stroke-linecap: round;
}

.fc-ug-draw {
  fill: none;
  stroke: var(--dv2-accent);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(252, 94, 14, 0.55));
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.fc-in-view .fc-ug-draw {
  animation: fcUgDraw 700ms var(--fc-ease) forwards;
}

.fc-in-view .fc-ug-conn--1 .fc-ug-draw {
  animation-delay: 340ms;
}

.fc-in-view .fc-ug-conn--2 .fc-ug-draw {
  animation-delay: 700ms;
}

@keyframes fcUgDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 639px) {
  .fc-ug-conn {
    display: flex;
    width: 100%;
    height: 26px;
  }
  .fc-ug-conn-h {
    display: none;
  }
  .fc-ug-conn-v {
    display: block;
  }
}

/* Number chips and pills arrive in step order rather than together, keyed off
   the same .fc-in-view the connector uses, so the line reaching a card and the
   card's own chips landing stay in sync. */
.fc-ug-num,
.fc-ug-pill {
  opacity: 0;
}

.fc-in-view .fc-ug-num,
.fc-in-view .fc-ug-pill {
  animation: fcUgPop 420ms var(--fc-ease) forwards;
}

.fc-in-view .fc-ug-step--1 .fc-ug-num {
  animation-delay: 120ms;
}

.fc-in-view .fc-ug-step--1 .fc-ug-pill {
  animation-delay: 220ms;
}

.fc-in-view .fc-ug-step--2 .fc-ug-num {
  animation-delay: 480ms;
}

.fc-in-view .fc-ug-step--2 .fc-ug-pill {
  animation-delay: 580ms;
}

.fc-in-view .fc-ug-step--3 .fc-ug-num {
  animation-delay: 840ms;
}

.fc-in-view .fc-ug-step--3 .fc-ug-pill {
  animation-delay: 940ms;
}

@keyframes fcUgPop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.82);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Everything that moves is removed rather than shortened: the embers stop and
   hide, the line is simply drawn, the chips are simply present. */
@media (prefers-reduced-motion: reduce) {
  .fc-ug-embers {
    display: none;
  }
  .fc-ug-step:hover {
    transform: none;
  }
  .fc-ug-step::after {
    animation: none;
    opacity: 0.4;
    transform: none;
  }
  .fc-ug-pill--unlocked {
    animation: none;
    box-shadow: 0 0 14px 1px rgba(255, 180, 137, 0.22);
  }
  .fc-ug-num,
  .fc-ug-pill {
    opacity: 1;
  }
  .fc-in-view .fc-ug-num,
  .fc-in-view .fc-ug-pill {
    animation: none;
  }
  .fc-ug-draw {
    stroke-dashoffset: 0;
  }
  .fc-in-view .fc-ug-draw {
    animation: none;
  }
}

/* ------------------------------- roadmap ------------------------------- */
/* Extruded road with a pin per milestone. The whole sequence — the travelling
   progress stroke, the pin pulses and the mobile segment dots — runs off one
   shared 10s CSS timeline, so there is no JS driving step state. */

.fc-rm3-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-rm3-pin-circle {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--dv2-card, #111111);
  border: 1px solid var(--dv2-line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 12px 20px rgba(0, 0, 0, 0.6),
    0 4px 10px rgba(252, 94, 14, 0.18);
  transform-origin: center center;
  will-change: transform;
}

/* The art fills the pin edge to edge, cropped like a profile picture. Every
   source file is centre-cropped square with its subject centred, so a plain
   centre cover crop keeps all five intact. */
.fc-rm3-pin-face {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform-origin: center center;
  backface-visibility: hidden;
}

.fc-rm3-pin-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.fc-rm3-pin-tail {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 1;
  width: 0;
  height: 0;
  transform: translate(-50%, -4px);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 20px solid var(--dv2-accent-strong-deep, #c04300);
}

.fc-rm3-pin-num {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dv2-text-1, rgba(255, 255, 255, 0.92));
  background: var(--dv2-bg, #070707);
  border: 1px solid var(--dv2-line-strong);
}

.fc-rm3-pin--sm .fc-rm3-pin-circle {
  width: 78px;
  height: 78px;
}

.fc-rm3-pin--sm .fc-rm3-pin-tail {
  border-left-width: 10px;
  border-right-width: 10px;
  border-top-width: 16px;
}

.fc-rm3-pin--sm .fc-rm3-pin-num {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.fc-rm3-ground {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 72%
  );
}

.fc-rm3-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--dv2-text-1, rgba(255, 255, 255, 0.92));
}

.fc-rm3-date {
  margin-top: 4px;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dv2-accent-text, #ffa378);
}

.fc-rm3-desc {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dv2-text-3, rgba(255, 255, 255, 0.48));
}

.fc-rm3-desktop {
  display: none;
  margin-top: 4rem;
}

@media (min-width: 1024px) {
  .fc-rm3-desktop {
    display: block;
  }
}

.fc-rm3-road-box {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 1200 / 520;
  transform: perspective(1500px) rotateX(7deg);
  transform-origin: 50% 40%;
}

.fc-rm3-road-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fc-rm3-road-wall {
  fill: url(#fcRm3WallGrad);
}

.fc-rm3-road-top {
  fill: var(--dv2-card, #111111);
}

.fc-rm3-road-sheen {
  fill: url(#fcRm3TopSheen);
}

.fc-rm3-road-seam {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.fc-rm3-road-line {
  fill: none;
  stroke: var(--dv2-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 16 16;
  opacity: 0.9;
}

.fc-rm3-road-progress {
  fill: none;
  stroke: #ff7330;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 22 400;
  stroke-dashoffset: 22;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(252, 94, 14, 0.7));
  animation: fcRm3Draw 10s linear infinite;
}

@keyframes fcRm3Draw {
  0% {
    stroke-dashoffset: 22;
    opacity: 0;
  }
  3% {
    opacity: 0.95;
  }
  90% {
    stroke-dashoffset: -78;
    opacity: 0.95;
  }
  95% {
    stroke-dashoffset: -78;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 22;
    opacity: 0;
  }
}

.fc-rm3-stop {
  position: absolute;
  width: 0;
  height: 0;
}

.fc-rm3-stop > .fc-rm3-ground {
  left: 0;
  top: 0;
  z-index: 1;
  width: 104px;
  height: 28px;
  transform: translate(-50%, 16px);
}

/* The pins and captions counter-rotate the box's tilt so they stay upright on
   a road that is lying back in perspective. */
.fc-rm3-stop .fc-rm3-pin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transform: translate(-50%, -50%) perspective(1500px) rotateX(-7deg);
}

.fc-rm3-stop-text {
  position: absolute;
  left: 0;
  z-index: 3;
  width: 200px;
  transform: translateX(-50%) perspective(1500px) rotateX(-7deg);
  text-align: center;
}

.fc-rm3-stop-text--above {
  bottom: 76px;
}

.fc-rm3-stop-text--below {
  top: 84px;
}

/* One-way pin pulse, each keyed to the moment the progress stroke reaches it. */
.fc-rm3-s1 .fc-rm3-pin-circle,
.fc-rm3-m1 .fc-rm3-pin-circle {
  animation: fcRm3Pulse1 10s ease-in-out infinite;
}

.fc-rm3-s2 .fc-rm3-pin-circle,
.fc-rm3-m2 .fc-rm3-pin-circle {
  animation: fcRm3Pulse2 10s ease-in-out infinite;
}

.fc-rm3-s3 .fc-rm3-pin-circle,
.fc-rm3-m3 .fc-rm3-pin-circle {
  animation: fcRm3Pulse3 10s ease-in-out infinite;
}

.fc-rm3-s4 .fc-rm3-pin-circle,
.fc-rm3-m4 .fc-rm3-pin-circle {
  animation: fcRm3Pulse4 10s ease-in-out infinite;
}

.fc-rm3-s5 .fc-rm3-pin-circle,
.fc-rm3-m5 .fc-rm3-pin-circle {
  animation: fcRm3Pulse5 10s ease-in-out infinite;
}

@keyframes fcRm3Pulse1 {
  0% {
    transform: scale(1.16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 0 0 5px rgba(252, 94, 14, 0.18),
      0 6px 22px rgba(252, 94, 14, 0.5);
  }
  4%,
  96% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
  100% {
    transform: scale(1.16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 0 0 5px rgba(252, 94, 14, 0.18),
      0 6px 22px rgba(252, 94, 14, 0.5);
  }
}

@keyframes fcRm3Pulse2 {
  0%,
  18.5% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
  22.5% {
    transform: scale(1.16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 0 0 5px rgba(252, 94, 14, 0.18),
      0 6px 22px rgba(252, 94, 14, 0.5);
  }
  26.5%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
}

@keyframes fcRm3Pulse3 {
  0%,
  41% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
  45% {
    transform: scale(1.16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 0 0 5px rgba(252, 94, 14, 0.18),
      0 6px 22px rgba(252, 94, 14, 0.5);
  }
  49%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
}

@keyframes fcRm3Pulse4 {
  0%,
  63.5% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
  67.5% {
    transform: scale(1.16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 0 0 5px rgba(252, 94, 14, 0.18),
      0 6px 22px rgba(252, 94, 14, 0.5);
  }
  71.5%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
}

@keyframes fcRm3Pulse5 {
  0%,
  86% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
  90% {
    transform: scale(1.16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 0 0 5px rgba(252, 94, 14, 0.18),
      0 6px 22px rgba(252, 94, 14, 0.5);
  }
  94%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18);
  }
}

/* The flip sits on the face, not the circle: the circle already animates
   `transform` for the pulse and the two would overwrite each other. Hover-only,
   so touch devices (where :hover sticks after a tap) skip it. */
@media (hover: hover) and (pointer: fine) {
  .fc-rm3-pin:hover .fc-rm3-pin-face,
  .fc-rm3-mobile-item:hover .fc-rm3-pin-face {
    animation: fcRm3Flip 700ms cubic-bezier(0.45, 0, 0.2, 1);
  }
}

@keyframes fcRm3Flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.fc-rm3-mobile {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .fc-rm3-mobile {
    display: none;
  }
}

.fc-rm3-mobile-item {
  position: relative;
  display: flex;
  gap: 22px;
  padding-bottom: 48px;
}

.fc-rm3-mobile-item:last-child {
  padding-bottom: 0;
}

.fc-rm3-mobile-road {
  position: absolute;
  left: 33px;
  top: 84px;
  bottom: 2px;
  width: 26px;
}

.fc-rm3-mobile-item:last-child .fc-rm3-mobile-road {
  display: none;
}

.fc-rm3-mobile-road-wall {
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: -4px;
  width: 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.85);
}

.fc-rm3-mobile-road-base {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  border-radius: 6px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.02) 55%
    ),
    var(--dv2-card, #111111);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.4);
}

.fc-rm3-mobile-road-line {
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    180deg,
    var(--dv2-accent) 0 8px,
    transparent 8px 16px
  );
  opacity: 0.9;
}

.fc-rm3-mobile-road-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0%;
  width: 6px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: #ff7330;
  box-shadow: 0 0 9px 2px rgba(252, 94, 14, 0.65);
  opacity: 0;
  pointer-events: none;
}

.fc-rm3-m1 .fc-rm3-mobile-road-line::after {
  animation: fcRm3MobSeg1 10s linear infinite;
}

.fc-rm3-m2 .fc-rm3-mobile-road-line::after {
  animation: fcRm3MobSeg2 10s linear infinite;
}

.fc-rm3-m3 .fc-rm3-mobile-road-line::after {
  animation: fcRm3MobSeg3 10s linear infinite;
}

.fc-rm3-m4 .fc-rm3-mobile-road-line::after {
  animation: fcRm3MobSeg4 10s linear infinite;
}

@keyframes fcRm3MobSeg1 {
  0% {
    top: 0%;
    opacity: 0;
  }
  1% {
    top: 0%;
    opacity: 1;
  }
  22.5% {
    top: 100%;
    opacity: 1;
  }
  23.5% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes fcRm3MobSeg2 {
  0%,
  21.5% {
    top: 0%;
    opacity: 0;
  }
  22.5% {
    top: 0%;
    opacity: 1;
  }
  45% {
    top: 100%;
    opacity: 1;
  }
  46% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes fcRm3MobSeg3 {
  0%,
  44% {
    top: 0%;
    opacity: 0;
  }
  45% {
    top: 0%;
    opacity: 1;
  }
  67.5% {
    top: 100%;
    opacity: 1;
  }
  68.5% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes fcRm3MobSeg4 {
  0%,
  66.5% {
    top: 0%;
    opacity: 0;
  }
  67.5% {
    top: 0%;
    opacity: 1;
  }
  90% {
    top: 100%;
    opacity: 1;
  }
  91% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.fc-rm3-mobile-text {
  padding-top: 14px;
}

.fc-rm3-mobile-item .fc-rm3-pin {
  align-self: flex-start;
}

.fc-rm3-mobile-item .fc-rm3-pin .fc-rm3-ground {
  left: 50%;
  top: 100%;
  z-index: 0;
  width: 74px;
  height: 20px;
  transform: translate(-50%, 4px);
}

@media (prefers-reduced-motion: reduce) {
  .fc-rm3-road-progress {
    animation: none;
    opacity: 0;
  }
  .fc-rm3-pin-circle {
    animation: none !important;
    transform: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -2px 4px rgba(0, 0, 0, 0.5),
      0 12px 20px rgba(0, 0, 0, 0.6),
      0 4px 10px rgba(252, 94, 14, 0.18) !important;
  }
  .fc-rm3-mobile-road-line::after {
    animation: none;
    opacity: 0;
  }
  .fc-rm3-pin-face {
    animation: none !important;
    transform: none !important;
  }
}