/*
|--------------------------------------------------------------------------
| Models lineup — flowing page background (reusable, greyscale)
|--------------------------------------------------------------------------
| Used by the Models menu pages: /models plus the Classic, Kronos, Metis and
| Ultra lineup pages. Apply the class to the content <main> only — the page
| header is intentionally left untouched:
|
|     <main class="main models-flow-bg"> … </main>
|
| Replaces the alternating .dark-bg / .light-bg section bands with one
| continuous neutral (black → grey → near‑black) gradient:
|   • a soft light spill at the very top echoes the header image above and
|     blends the header edge smoothly into the content,
|   • it eases through charcoal greys down to near‑black at the bottom so it
|     melts into the (dark, transparent) footer.
| Kept dark throughout so the translucent .option cards stay legible.
*/

.models-flow-bg {
  background-color: #020203;
  background-image:
    /* light spilling down from the header image — soft, neutral, no hard seam */
    radial-gradient(125% 32% at 50% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 72%),
    /* greyscale vertical flow: dark charcoal under the header → black at the footer */
    linear-gradient(180deg, #101013 0%, #0a0a0c 34%, #060607 68%, #020203 100%);
  background-repeat: no-repeat;
}

/* The flowing background now owns the page color — strip the per-section
   dark-bg / light-bg bands so the gradient reads as one continuous surface. */
.models-flow-bg .s-options {
  background: none;
  background-color: transparent;
}

/*
|--------------------------------------------------------------------------
| Option cards — glassy surface + hover lift (Models pages only)
|--------------------------------------------------------------------------
*/

/* Soft pool of light behind the card grid for depth. */
.models-flow-bg .option-wrapper {
  position: relative;
}

.models-flow-bg .option-wrapper::before {
  content: "";
  position: absolute;
  inset: -2.5rem -1.5rem;
  background: radial-gradient(
    55% 50% at 50% 26%,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0) 72%
  );
  pointer-events: none;
  z-index: 0;
}

/* Glassy card surface: subtle diagonal sheen, hairline border, soft elevation. */
.models-flow-bg .option {
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.028) 46%,
    rgba(255, 255, 255, 0.015) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

/* Only the main van render zooms — leave the corner brand badge in place. */
.models-flow-bg .option > img:not(.corner-logo) {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.models-flow-bg .option:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.045) 46%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 30px 60px rgba(0, 0, 0, 0.6);
}

.models-flow-bg .option:hover > img:not(.corner-logo) {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .models-flow-bg .option,
  .models-flow-bg .option > img:not(.corner-logo) {
    transition: none;
  }
  .models-flow-bg .option:hover {
    transform: none;
  }
  .models-flow-bg .option:hover > img:not(.corner-logo) {
    transform: none;
  }
}