/* ============================================================
   3D landing page (Views/Home/Landing3D.cshtml), loaded after
   scene-base.css, which holds everything the 3D pages share.
   ============================================================ */

/* Providers: a spec-sheet grid, not a logo carousel. */
.l3d-provider-grid {
    margin-top: 2.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--l3d-rule); border-left: 1px solid var(--l3d-rule);
}
.l3d-provider {
    display: flex; align-items: center; gap: .75rem; min-width: 0;
    padding: 1.25rem 1.1rem;
    border-right: 1px solid var(--l3d-rule); border-bottom: 1px solid var(--l3d-rule);
    font-size: .9375rem; font-weight: 600; color: var(--l3d-muted);
    transition: color .3s ease, background-color .3s ease;
}
.l3d-provider:hover { color: var(--l3d-ink); background: color-mix(in srgb, var(--surface-1) 55%, transparent); }
.l3d-provider-logo { width: 1.6rem; height: 1.6rem; flex: none; }
.l3d-provider span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l3d-providers .l3d-copy { margin-top: 1.75rem; }

/* Product: three screens that start fanned in depth and settle flat as they scroll in.
   --p is 1 (flat) unless the script is animating it. */
.l3d-shots { --p: 1; margin-top: 4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); perspective: 1800px; }
.l3d-shot-item:nth-child(1) { --fan-y: 26deg; --fan-origin: right center; }
.l3d-shot-item:nth-child(2) { --fan-x: 14deg; --fan-origin: center bottom; }
.l3d-shot-item:nth-child(3) { --fan-y: -26deg; --fan-origin: left center; }
.l3d-shots .l3d-shot {
    transform-origin: var(--fan-origin, center);
    transform: translateZ(calc((1 - var(--p)) * -160px)) rotateY(calc((1 - var(--p)) * var(--fan-y, 0deg))) rotateX(calc((1 - var(--p)) * var(--fan-x, 0deg)));
}
.l3d-shots .l3d-shot img { aspect-ratio: 1440 / 900; object-fit: cover; object-position: top center; }
.l3d-shot-item .l3d-h3 { margin-top: 1.5rem; }
.l3d-shot-item .l3d-copy { font-size: .9375rem; }

/* Scroll length for the flight through the Development, QA and Release gates. */
@media (min-width: 1024px) { .l3d-lifecycle .l3d-point { min-height: 34vh; padding-block: 2.5rem 0; } }

/* Trust: the lead claim, then the rest in pairs. */
.l3d-lead { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--l3d-rule-strong); }
.l3d-lead .l3d-h3 { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); max-width: 24ch; }
.l3d-chips { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.l3d-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px;
    font-size: .8125rem; font-weight: 600; color: var(--l3d-soft); border: 1px solid var(--l3d-rule-strong);
}
.l3d-chip svg { width: .9rem; height: .9rem; color: var(--l3d-signal); }
.l3d-pair { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }

/* Channels: three panels either side of the core, which beams out to each. */
.l3d-beam-grid {
    margin-top: 4rem; display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) clamp(11rem, 20vw, 18rem) minmax(0, 1fr);
}
.l3d-beam-col { display: grid; gap: 1.25rem; }
.l3d-beam-hub { width: 100%; aspect-ratio: 1; }
.l3d-panel {
    position: relative; padding: 1.5rem 1.5rem 1.6rem; border-radius: 1rem;
    border: 1px solid var(--l3d-rule); background: var(--l3d-panel);
    transition: border-color .35s ease;
}
.l3d-panel:hover { border-color: color-mix(in srgb, var(--l3d-signal) 55%, transparent); }
.l3d-panel-head { display: flex; align-items: center; gap: .75rem; }
.l3d-panel-head svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--l3d-signal); }
.l3d-panel .l3d-h3 { font-size: 1.125rem; }
.l3d-panel .l3d-copy { font-size: .9375rem; }

@media (max-width: 1023px) {
    .l3d-beam-hub { display: none; }
    .l3d-beam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .l3d-beam-col { display: contents; }
    .l3d-shots { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
    .l3d-shot-item:nth-child(n) { --fan-y: 0deg; --fan-x: 12deg; --fan-origin: center bottom; }
}
@media (max-width: 767px) {
    .l3d-pair, .l3d-beam-grid { grid-template-columns: minmax(0, 1fr); }
    .l3d-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}