/* ============================================================
   Top Picks — Cinematic Motion V2 (PREVIEW ONLY — not deployed)
   Stronger float / glow / sweep. Same artwork & layout.
   Load after fch-toppicks-final.css (do not load V1 with this).
   ============================================================ */

#fchTopPicksFinal.tp-codex .tp-top3 {
  isolation: isolate;
}

#fchTopPicksFinal.tp-codex .tp-slot {
  --tp-enter-y: 0px;
  --tp-base-scale: 1;
  --tp-float: 5px;
  will-change: transform, opacity;
}

#fchTopPicksFinal.tp-codex .place-1 {
  --tp-enter-y: -12px;
  --tp-base-scale: 1;
  --tp-float: 6px;
}
#fchTopPicksFinal.tp-codex .place-2,
#fchTopPicksFinal.tp-codex .place-3 {
  --tp-enter-y: 6px;
  --tp-base-scale: 0.92;
  --tp-float: 4px;
}

#fchTopPicksFinal.tp-codex .tp-slot::before,
#fchTopPicksFinal.tp-codex .tp-slot::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

#fchTopPicksFinal.tp-codex .tp-slot .tp-art {
  position: relative;
  z-index: 1;
  transform-origin: bottom center;
  backface-visibility: hidden;
  will-change: transform;
}

/* ---------- Spotlight / pulsing glow (behind art) ---------- */
#fchTopPicksFinal.tp-codex .place-1::before {
  left: 4%;
  right: 4%;
  bottom: 2%;
  height: 68%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 220, 110, 0.78) 0%,
      rgba(255, 190, 60, 0.42) 36%,
      rgba(240, 160, 40, 0.16) 58%,
      transparent 74%
    );
  filter: blur(16px);
  opacity: 0.7;
  transform-origin: center bottom;
  animation: tpv2-gold-glow 3.4s ease-in-out infinite;
}

#fchTopPicksFinal.tp-codex .place-2::before {
  left: 8%;
  right: 8%;
  bottom: 6%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 220, 255, 0.62) 0%,
    rgba(150, 180, 230, 0.28) 42%,
    transparent 72%
  );
  filter: blur(13px);
  opacity: 0.55;
  animation: tpv2-silver-glow 3.8s ease-in-out 0.6s infinite;
}

#fchTopPicksFinal.tp-codex .place-3::before {
  left: 8%;
  right: 8%;
  bottom: 6%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 180, 100, 0.58) 0%,
    rgba(190, 120, 55, 0.26) 42%,
    transparent 72%
  );
  filter: blur(13px);
  opacity: 0.52;
  animation: tpv2-bronze-glow 3.8s ease-in-out 1.5s infinite;
}

/* ---------- Diagonal sweep + sparkles ---------- */
#fchTopPicksFinal.tp-codex .place-1::after {
  inset: 2% 10% 16% 10%;
  border-radius: 18px;
  background:
    radial-gradient(circle at 46% 8%, rgba(255, 245, 190, 1) 0 1.8px, transparent 3px),
    radial-gradient(circle at 58% 14%, rgba(255, 230, 140, 0.95) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 38% 12%, rgba(255, 250, 210, 0.9) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 52% 22%, rgba(255, 220, 120, 0.75) 0 1px, transparent 2.2px),
    radial-gradient(circle at 62% 10%, rgba(255, 240, 180, 0.7) 0 0.9px, transparent 2px),
    linear-gradient(
      118deg,
      transparent 34%,
      rgba(255, 236, 160, 0.22) 46%,
      rgba(255, 252, 220, 0.55) 50%,
      rgba(255, 236, 160, 0.2) 54%,
      transparent 66%
    );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-42%);
  animation: tpv2-gold-sweep 4.6s ease-in-out infinite;
}

#fchTopPicksFinal.tp-codex .place-2::after {
  inset: 6% 12% 18% 12%;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 10%, rgba(240, 248, 255, 0.95) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 40% 16%, rgba(200, 220, 255, 0.8) 0 1px, transparent 2.2px),
    radial-gradient(circle at 60% 14%, rgba(220, 235, 255, 0.7) 0 0.9px, transparent 2px),
    linear-gradient(
      118deg,
      transparent 34%,
      rgba(210, 225, 255, 0.2) 46%,
      rgba(245, 250, 255, 0.48) 50%,
      rgba(210, 225, 255, 0.18) 54%,
      transparent 66%
    );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-42%);
  animation: tpv2-silver-sweep 5.4s ease-in-out 0.9s infinite;
}

#fchTopPicksFinal.tp-codex .place-3::after {
  inset: 6% 12% 18% 12%;
  border-radius: 16px;
  background:
    radial-gradient(circle at 48% 12%, rgba(255, 220, 160, 0.9) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 56% 18%, rgba(255, 190, 120, 0.75) 0 1px, transparent 2.2px),
    linear-gradient(
      118deg,
      transparent 34%,
      rgba(255, 200, 130, 0.2) 46%,
      rgba(255, 235, 190, 0.45) 50%,
      rgba(255, 200, 130, 0.18) 54%,
      transparent 66%
    );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-42%);
  animation: tpv2-bronze-sweep 5.4s ease-in-out 2.4s infinite;
}

/* Scale breathing on artwork (amplifies motion without fighting slot float) */
#fchTopPicksFinal.tp-codex .place-1 .tp-art {
  animation: tpv2-scale-champ 3.6s ease-in-out infinite;
}
#fchTopPicksFinal.tp-codex .place-2 .tp-art {
  animation: tpv2-scale-side 4.2s ease-in-out 0.5s infinite;
}
#fchTopPicksFinal.tp-codex .place-3 .tp-art {
  animation: tpv2-scale-side 4.2s ease-in-out 1.3s infinite;
}

/* Ambient particles around podium */
#fchTopPicksFinal.tp-codex .tp-top3::before {
  content: "";
  position: absolute;
  inset: 2% -3% 4% -3%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 5% 30%, rgba(255, 220, 120, 0.8) 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 95% 26%, rgba(255, 230, 150, 0.65) 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 10% 62%, rgba(255, 210, 110, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 64%, rgba(255, 225, 140, 0.45) 0 1.1px, transparent 2.2px),
    radial-gradient(circle at 48% 3%, rgba(255, 240, 180, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 6%, rgba(255, 215, 120, 0.35) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 74% 8%, rgba(255, 230, 150, 0.32) 0 0.8px, transparent 1.7px);
  opacity: 0.62;
  animation: tpv2-particles 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

#fchTopPicksFinal.tp-codex .tp-top3::after {
  content: "";
  position: absolute;
  inset: 0 8% 55% 8%;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 235, 160, 0.85) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 36% 55%, rgba(255, 220, 130, 0.55) 0 1px, transparent 2.2px),
    radial-gradient(circle at 64% 50%, rgba(255, 240, 180, 0.5) 0 1.1px, transparent 2.3px);
  opacity: 0;
  animation: tpv2-crown-sparkles 3.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* ---------- Entrance ---------- */
html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3:not(.tp-cinematic-in) .tp-slot {
  opacity: 0;
  transform: translateY(calc(var(--tp-enter-y) + 22px)) scale(calc(var(--tp-base-scale) * 0.97));
}

html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-in:not(.tp-cinematic-done) .place-1 {
  animation: tpv2-enter-champ 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}
html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-in:not(.tp-cinematic-done) .place-2 {
  animation: tpv2-enter-side 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-in:not(.tp-cinematic-done) .place-3 {
  animation: tpv2-enter-side 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both;
}

/* Entrance bloom on Top 1 glow */
html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-in:not(.tp-cinematic-done) .place-1::before {
  animation: tpv2-enter-bloom 0.9s ease-out 0.04s both, tpv2-gold-glow 3.4s ease-in-out 0.95s infinite;
}

/* Continuous float after entrance — starts at rest = no jump */
html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-done .place-1 {
  animation: tpv2-float-champ 3.5s ease-in-out infinite;
}
html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-done .place-2 {
  animation: tpv2-float-side 4s ease-in-out 0.55s infinite;
}
html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-done .place-3 {
  animation: tpv2-float-side 4.3s ease-in-out 1.4s infinite;
}

@keyframes tpv2-enter-champ {
  from {
    opacity: 0;
    transform: translateY(calc(var(--tp-enter-y) + 22px)) scale(calc(var(--tp-base-scale) * 0.97));
    filter: brightness(1.15);
  }
  60% { filter: brightness(1.08); }
  to {
    opacity: 1;
    transform: translateY(var(--tp-enter-y)) scale(var(--tp-base-scale));
    filter: brightness(1);
  }
}
@keyframes tpv2-enter-side {
  from {
    opacity: 0;
    transform: translateY(calc(var(--tp-enter-y) + 20px)) scale(calc(var(--tp-base-scale) * 0.97));
  }
  to {
    opacity: 1;
    transform: translateY(var(--tp-enter-y)) scale(var(--tp-base-scale));
  }
}
@keyframes tpv2-enter-bloom {
  from { opacity: 0.25; transform: scale(0.85); }
  45% { opacity: 0.95; transform: scale(1.12); }
  to { opacity: 0.72; transform: scale(1); }
}

@keyframes tpv2-float-champ {
  0%, 100% { transform: translateY(var(--tp-enter-y)) scale(var(--tp-base-scale)); }
  50% { transform: translateY(calc(var(--tp-enter-y) - var(--tp-float))) scale(var(--tp-base-scale)); }
}
@keyframes tpv2-float-side {
  0%, 100% { transform: translateY(var(--tp-enter-y)) scale(var(--tp-base-scale)); }
  50% { transform: translateY(calc(var(--tp-enter-y) - var(--tp-float))) scale(var(--tp-base-scale)); }
}

@keyframes tpv2-scale-champ {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes tpv2-scale-side {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@keyframes tpv2-gold-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 0.95; transform: scale(1.08); }
}
@keyframes tpv2-silver-glow {
  0%, 100% { opacity: 0.4; transform: scale(0.96); }
  50% { opacity: 0.78; transform: scale(1.05); }
}
@keyframes tpv2-bronze-glow {
  0%, 100% { opacity: 0.38; transform: scale(0.96); }
  50% { opacity: 0.74; transform: scale(1.05); }
}

@keyframes tpv2-gold-sweep {
  0%, 6% { opacity: 0; transform: translateX(-45%); filter: brightness(1); }
  14% { opacity: 0.45; filter: brightness(1.1); }
  22% { opacity: 0.85; filter: brightness(1.3); }
  34% { opacity: 0.35; transform: translateX(42%); filter: brightness(1.1); }
  42%, 100% { opacity: 0; transform: translateX(48%); filter: brightness(1); }
}
@keyframes tpv2-silver-sweep {
  0%, 8% { opacity: 0; transform: translateX(-45%); }
  18% { opacity: 0.55; }
  30% { opacity: 0.75; }
  42% { opacity: 0.28; transform: translateX(42%); }
  52%, 100% { opacity: 0; transform: translateX(48%); }
}
@keyframes tpv2-bronze-sweep {
  0%, 8% { opacity: 0; transform: translateX(-45%); }
  18% { opacity: 0.5; }
  30% { opacity: 0.7; }
  42% { opacity: 0.26; transform: translateX(42%); }
  52%, 100% { opacity: 0; transform: translateX(48%); }
}

@keyframes tpv2-particles {
  from { transform: translate3d(0, 4px, 0); opacity: 0.4; }
  to { transform: translate3d(0, -7px, 0); opacity: 0.78; }
}
@keyframes tpv2-crown-sparkles {
  0%, 100% { opacity: 0; }
  18% { opacity: 0.15; }
  28% { opacity: 0.7; }
  38% { opacity: 0.2; }
  55% { opacity: 0; }
  70% { opacity: 0.55; }
  82% { opacity: 0.1; }
}

/* ---------- Mobile: lighter but still visible ---------- */
@media (max-width: 720px) {
  #fchTopPicksFinal.tp-codex .place-1 {
    --tp-enter-y: -4px;
    --tp-base-scale: 1;
    --tp-float: 4px;
  }
  #fchTopPicksFinal.tp-codex .place-2,
  #fchTopPicksFinal.tp-codex .place-3 {
    --tp-enter-y: 2px;
    --tp-base-scale: 1;
    --tp-float: 3px;
  }

  #fchTopPicksFinal.tp-codex .place-1::before,
  #fchTopPicksFinal.tp-codex .place-2::before,
  #fchTopPicksFinal.tp-codex .place-3::before {
    filter: blur(10px);
  }
  #fchTopPicksFinal.tp-codex .place-1::after {
    animation: tpv2-gold-sweep 5.5s ease-in-out infinite;
  }
  #fchTopPicksFinal.tp-codex .place-2::after {
    animation: tpv2-silver-sweep 6.5s ease-in-out 1s infinite;
  }
  #fchTopPicksFinal.tp-codex .place-3::after {
    animation: tpv2-bronze-sweep 6.5s ease-in-out 2.6s infinite;
  }
  #fchTopPicksFinal.tp-codex .place-1 .tp-art {
    animation: tpv2-scale-champ 4.2s ease-in-out infinite;
  }
  #fchTopPicksFinal.tp-codex .tp-top3::before {
    opacity: 0.4;
    animation-duration: 12s;
  }
  #fchTopPicksFinal.tp-codex .tp-top3::after {
    animation-duration: 5s;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3:not(.tp-cinematic-in) .tp-slot,
  html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-in .place-1,
  html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-in .place-2,
  html.tp-cine-boot #fchTopPicksFinal.tp-codex .tp-top3.tp-cinematic-in .place-3,
  #fchTopPicksFinal.tp-codex .place-1::before,
  #fchTopPicksFinal.tp-codex .place-2::before,
  #fchTopPicksFinal.tp-codex .place-3::before,
  #fchTopPicksFinal.tp-codex .place-1::after,
  #fchTopPicksFinal.tp-codex .place-2::after,
  #fchTopPicksFinal.tp-codex .place-3::after,
  #fchTopPicksFinal.tp-codex .place-1 .tp-art,
  #fchTopPicksFinal.tp-codex .place-2 .tp-art,
  #fchTopPicksFinal.tp-codex .place-3 .tp-art,
  #fchTopPicksFinal.tp-codex .tp-top3::before,
  #fchTopPicksFinal.tp-codex .tp-top3::after {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #fchTopPicksFinal.tp-codex .place-1::before,
  #fchTopPicksFinal.tp-codex .place-2::before,
  #fchTopPicksFinal.tp-codex .place-3::before {
    opacity: 0.4 !important;
    transform: none;
  }
  #fchTopPicksFinal.tp-codex .place-1::after,
  #fchTopPicksFinal.tp-codex .place-2::after,
  #fchTopPicksFinal.tp-codex .place-3::after,
  #fchTopPicksFinal.tp-codex .tp-top3::before,
  #fchTopPicksFinal.tp-codex .tp-top3::after {
    opacity: 0 !important;
  }
  #fchTopPicksFinal.tp-codex .place-1 {
    transform: translateY(-12px);
  }
  #fchTopPicksFinal.tp-codex .place-2,
  #fchTopPicksFinal.tp-codex .place-3 {
    transform: translateY(6px) scale(0.92);
  }
  @media (max-width: 720px) {
    #fchTopPicksFinal.tp-codex .place-1 { transform: translateY(-4px); }
    #fchTopPicksFinal.tp-codex .place-2,
    #fchTopPicksFinal.tp-codex .place-3 { transform: translateY(2px); }
  }
}