/* Premium in-game feature photography — additive override for landing cards. */

.feature-tactics {
  --feature-shot: url("../img/game/ui/tactics-lab-v1.jpg");
  --feature-position: 69% 52%;
  --feature-accent: #35cbe2;
  --feature-rgb: 53, 203, 226;
}

.feature-transfers {
  --feature-shot: url("../img/game/ui/page-contract-negotiation-v1.jpg");
  --feature-position: 54% 58%;
  --feature-accent: #7c73ff;
  --feature-rgb: 124, 115, 255;
}

.feature-facilities {
  --feature-shot: url("../img/game/ui/page-stadium-development-v1.jpg");
  --feature-position: 75% 58%;
  --feature-accent: #f1b84a;
  --feature-rgb: 241, 184, 74;
}

.feature-relationships {
  --feature-shot: url("../img/game/ui/page-team-relations-v1.jpg");
  --feature-position: 72% 50%;
  --feature-size: auto 126%;
  --feature-accent: #4b9cff;
  --feature-rgb: 75, 156, 255;
}

.feature-lifestyle {
  --feature-shot: url("../img/game/ui/page-city-life-v1.jpg");
  --feature-position: 74% 52%;
  --feature-accent: #c26cff;
  --feature-rgb: 194, 108, 255;
}

.feature-media {
  --feature-shot: url("../img/game/ui/page-media-centre-v1.jpg");
  --feature-position: 84% 51%;
  --feature-size: auto 148%;
  --feature-accent: #39d6be;
  --feature-rgb: 57, 214, 190;
}

.feature-fans {
  --feature-shot: url("../img/ui/feature-fan-engagement-v1.webp");
  --feature-position: 50% 58%;
  --feature-accent: #e45bb8;
  --feature-rgb: 228, 91, 184;
}

/* Quiet pitch/grid atmosphere behind the card rail. */
#ldFeatureBackdrop {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 596px;
  width: 1935px;
  height: 276px;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 78%, transparent 0 108px, rgba(38, 128, 167, .12) 109px 110px, transparent 111px),
    radial-gradient(ellipse at 50% 58%, rgba(46, 188, 220, .145), transparent 44%),
    radial-gradient(ellipse at 15% 64%, rgba(119, 100, 255, .12), transparent 36%),
    radial-gradient(ellipse at 87% 54%, rgba(226, 79, 171, .1), transparent 34%);
  animation: featureBackdropBreathe 7.5s ease-in-out infinite;
}

#ldFeatureBackdrop::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 16px 70px 0;
  opacity: .48;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(43, 135, 171, .15) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    repeating-linear-gradient(90deg, rgba(48, 151, 186, .055) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(48, 151, 186, .04) 0 1px, transparent 1px 54px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}

#ldFeatureBackdrop::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -34px;
  bottom: -34px;
  left: -18%;
  width: 22%;
  opacity: .62;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(129, 226, 255, .14), transparent);
  animation: featureRailSweep 9s ease-in-out infinite;
}

#ldFeatureBackdrop > i {
  position: absolute;
  display: block;
  pointer-events: none;
}

#ldFeatureBackdrop .feature-bg-stadium {
  z-index: 0;
  inset: -28px -20px -20px;
  opacity: .19;
  background:
    linear-gradient(90deg, #eef7fa 0%, transparent 13%, transparent 87%, #eef7fa 100%),
    linear-gradient(180deg, rgba(238, 247, 250, .82) 0%, transparent 24%, rgba(238, 247, 250, .3) 70%, #eef7fa 100%),
    url("../img/game/ui/match-centre-stadium-v1.jpg") center 54% / cover no-repeat;
  filter: saturate(1.12) contrast(1.08);
  transform: scale(1.035);
  animation: featureStadiumDrift 15s ease-in-out infinite alternate;
}

#ldFeatureBackdrop .feature-bg-beam {
  z-index: 1;
  top: -120px;
  width: 430px;
  height: 430px;
  opacity: .24;
  filter: blur(11px);
  mix-blend-mode: screen;
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(92, 211, 255, .22) 52%, transparent 100%);
  transform-origin: 50% 0;
  animation: featureBeamMove 8s ease-in-out infinite alternate;
}

#ldFeatureBackdrop .feature-bg-beam-left {
  left: 120px;
  transform: rotate(-16deg);
}

#ldFeatureBackdrop .feature-bg-beam-right {
  right: 90px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(190, 112, 255, .2) 52%, transparent 100%);
  transform: rotate(17deg);
  animation-delay: -3.8s;
}

#ldFeatureBackdrop .feature-bg-sparks {
  z-index: 2;
  inset: 24px 22px 30px;
  opacity: .62;
  background:
    radial-gradient(circle at 4% 55%, rgba(57, 203, 232, .95) 0 1px, transparent 2px),
    radial-gradient(circle at 9% 27%, rgba(255, 255, 255, .85) 0 1px, transparent 2.2px),
    radial-gradient(circle at 17% 78%, rgba(137, 114, 255, .8) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 27% 38%, rgba(255, 255, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 37% 70%, rgba(53, 203, 226, .86) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 47% 24%, rgba(255, 255, 255, .8) 0 1px, transparent 2.2px),
    radial-gradient(circle at 57% 76%, rgba(228, 91, 184, .7) 0 1px, transparent 2.2px),
    radial-gradient(circle at 66% 34%, rgba(255, 255, 255, .9) 0 1.1px, transparent 2.3px),
    radial-gradient(circle at 76% 68%, rgba(57, 214, 190, .9) 0 1px, transparent 2.2px),
    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .76) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 73%, rgba(228, 91, 184, .8) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 98% 42%, rgba(53, 203, 226, .9) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 5px rgba(53, 203, 226, .7));
  animation: featureSparkTwinkle 4.8s ease-in-out infinite alternate;
}

.ld-card[class*="feature-"] {
  transform-origin: 50% 88%;
  transition:
    transform .42s cubic-bezier(.2, .75, .25, 1),
    border-color .35s ease,
    box-shadow .42s ease !important;
}

.ld-card[class*="feature-"] header .ic,
.ld-card[class*="feature-"] header img,
#mob .m-fcard[class*="feature-"] header img {
  color: var(--feature-accent) !important;
  stroke: var(--feature-accent) !important;
  filter: drop-shadow(0 0 5px rgba(var(--feature-rgb), .28));
  transition: filter .35s ease, transform .35s ease;
}

.ld-card[class*="feature-"] header::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: auto;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--feature-accent);
  box-shadow: 0 0 0 3px rgba(var(--feature-rgb), .1), 0 0 9px rgba(var(--feature-rgb), .44);
}

.ld-card[class*="feature-"] p::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin: -2px auto 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--feature-accent), transparent);
  opacity: .48;
  transition: width .35s ease, opacity .35s ease;
}

.ld-card[class*="feature-"] .ldc-art,
#mob .m-fcard[class*="feature-"] .ldc-art {
  isolation: isolate;
  background: #061326 !important;
  border: 1px solid rgba(var(--feature-rgb), .42) !important;
  box-shadow:
    0 7px 16px rgba(8, 28, 55, .18),
    0 0 14px rgba(var(--feature-rgb), .08),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 -22px 30px rgba(2, 10, 24, .24);
  transition: border-color .35s ease, box-shadow .42s ease;
}

.ld-card[class*="feature-"] .ldc-art > *,
#mob .m-fcard[class*="feature-"] .ldc-art > * {
  visibility: hidden !important;
  opacity: 0 !important;
}

.ld-card[class*="feature-"] .ldc-art::before,
#mob .m-fcard[class*="feature-"] .ldc-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -3px;
  background-image: var(--feature-shot);
  background-repeat: no-repeat;
  background-position: var(--feature-position, 50% 50%);
  background-size: var(--feature-size, cover);
  filter: saturate(1.08) contrast(1.06) brightness(1.03);
  transform: scale(1.025);
  transform-origin: var(--feature-position, 50% 50%);
  transition: transform .7s cubic-bezier(.2, .72, .2, 1), filter .7s ease;
}

.ld-card[class*="feature-"] .ldc-art::after,
#mob .m-fcard[class*="feature-"] .ldc-art::after {
  content: attr(data-feature-hud);
  position: absolute;
  z-index: 1;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 0 7px 6px;
  pointer-events: none;
  color: #eefbff;
  font: 800 6.5px/1 'Saira Semi Condensed', sans-serif;
  letter-spacing: .9px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(var(--feature-rgb), .5);
  background:
    linear-gradient(180deg, rgba(6, 25, 50, .01) 32%, rgba(1, 9, 24, .72) 100%),
    linear-gradient(105deg, transparent 18%, rgba(142, 229, 255, .16) 43%, transparent 62%),
    linear-gradient(90deg, rgba(var(--feature-rgb), .18), transparent 22%, transparent 78%, rgba(155, 92, 246, .13));
  background-size: 100% 100%, 240% 100%, 100% 100%;
  background-position: 0 0, 125% 0, 0 0;
  box-shadow: inset 0 0 18px rgba(4, 14, 36, .22);
  animation: featureShotSheen 7.2s ease-in-out infinite;
}

.ld-card[class*="feature-"]:hover .ldc-art::before {
  transform: scale(1.095);
  filter: saturate(1.16) contrast(1.07) brightness(1.06);
}

.ld-card[class*="feature-"]:hover {
  z-index: 7;
  transform: translateY(-6px) scale(1.012);
  border-color: rgba(var(--feature-rgb), .5) !important;
  box-shadow:
    0 8px 16px rgba(23, 48, 94, .08),
    0 22px 40px rgba(23, 48, 94, .17),
    0 0 0 3px rgba(var(--feature-rgb), .08),
    0 0 28px rgba(var(--feature-rgb), .1) !important;
}

.ld-card[class*="feature-"]:hover header .ic,
.ld-card[class*="feature-"]:hover header img {
  filter: drop-shadow(0 0 8px rgba(var(--feature-rgb), .56));
  transform: scale(1.08);
}

.ld-card[class*="feature-"]:hover p::before {
  width: 42px;
  opacity: .88;
}

.ld-card[class*="feature-"]:hover .ldc-art {
  border-color: rgba(var(--feature-rgb), .72) !important;
  box-shadow:
    0 9px 22px rgba(8, 37, 67, .24),
    0 0 18px rgba(var(--feature-rgb), .18),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}

@keyframes featureShotSheen {
  0%, 58% { background-position: 0 0, 125% 0, 0 0; }
  82%, 100% { background-position: 0 0, -110% 0, 0 0; }
}

@keyframes featureRailSweep {
  0%, 62% { left: -18%; opacity: 0; }
  69% { opacity: .48; }
  90%, 100% { left: 112%; opacity: 0; }
}

@keyframes featureBackdropBreathe {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.18); }
}

@keyframes featureStadiumDrift {
  0% { transform: scale(1.035) translate3d(-5px, 0, 0); opacity: .17; }
  100% { transform: scale(1.075) translate3d(7px, -2px, 0); opacity: .23; }
}

@keyframes featureBeamMove {
  0% { opacity: .15; margin-left: -20px; }
  100% { opacity: .31; margin-left: 34px; }
}

@keyframes featureSparkTwinkle {
  0% { opacity: .36; filter: drop-shadow(0 0 3px rgba(53, 203, 226, .45)); }
  100% { opacity: .76; filter: drop-shadow(0 0 7px rgba(53, 203, 226, .8)); }
}

@media (prefers-reduced-motion: reduce) {
  .ld-card[class*="feature-"] .ldc-art::before,
  #mob .m-fcard[class*="feature-"] .ldc-art::before {
    transition: none;
  }

  .ld-card[class*="feature-"] .ldc-art::after,
  #mob .m-fcard[class*="feature-"] .ldc-art::after {
    animation: none;
  }

  #ldFeatureBackdrop::after {
    animation: none;
  }

  #ldFeatureBackdrop,
  #ldFeatureBackdrop .feature-bg-stadium,
  #ldFeatureBackdrop .feature-bg-beam,
  #ldFeatureBackdrop .feature-bg-sparks {
    animation: none;
  }
}