/* ==========================================================================
   nx-product-3d.css — real app screenshots presented in CSS 3D
   Used by /website-dashboard, /marketing-suite, /customer-portal.
   Pure CSS 3D (no WebGL), driven by nx-product-3d.js through CSS variables:
     --p   scroll progress of a [data-p3d-progress] block (0 → 1)
     --rx / --ry   pointer tilt of a [data-p3d-tilt] element (deg)
     --gx / --gy   pointer position for the glare highlight (%)
   With no JS or with reduced motion the screens simply render flat/gently tilted.
   ========================================================================== */

/* The site sets overflow-x:hidden on html AND body, which turns <body> into a
   (non-scrolling) scroll container and silently disables position:sticky for
   everything inside it. `clip` still prevents sideways scroll but creates no
   scroll container, so the sticky scroll-reveal and tour nav work. This sheet
   only loads on the three product pages. */
/* :root / :root > body outrank the site's plain `html, body` rule, which loads later. */
/* overflow-y must be visible too: clip paired with auto on the other axis computes to hidden. */
:root, :root > body { overflow-x: clip; overflow-y: visible; }

/* The site has no global border-box; inside the 3D kit everything is border-box,
   and grid children may shrink below their content's min width (min-width:0) —
   otherwise long unbreakable text (URL bars) pushes the page wider than a phone. */
.p3d-scope, .p3d-scope *, .p3d-scope *::before, .p3d-scope *::after { box-sizing: border-box; }
.p3d-scope { max-width: 100%; }
.p3d-feat > *, .p3d-con > * { min-width: 0; }
.p3d-screen__url { min-width: 0; }

.p3d-scope {
    --p3d-gold: var(--sol-tint, #d6b37f);
    --p3d-ink: #0b0b12;
    --p3d-card: #15151f;
    --p3d-line: rgba(255, 255, 255, .08);
    --p3d-text: #f1ede4;
    --p3d-muted: rgba(241, 237, 228, .66);
    --p3d-ease: cubic-bezier(.2, .7, .1, 1);
}

/* ── Screen frame (browser chrome + screenshot) ─────────────────────────── */
.p3d-screen {
    position: relative; border-radius: 14px; overflow: hidden;
    background: var(--p3d-ink);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08) inset,
        0 40px 80px -24px rgba(0, 0, 0, .75),
        0 18px 40px -18px rgba(214, 179, 127, .16);
    transform-style: preserve-3d;
    cursor: zoom-in;
}
.p3d-screen__bar {
    display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
    background: linear-gradient(180deg, #1b1b26, #14141d);
    border-bottom: 1px solid var(--p3d-line);
}
.p3d-screen__bar i { width: 9px; height: 9px; border-radius: 50%; background: #2c2c3a; }
.p3d-screen__bar i:nth-child(1) { background: #ff5f57; } .p3d-screen__bar i:nth-child(2) { background: #febc2e; } .p3d-screen__bar i:nth-child(3) { background: #28c840; }
.p3d-screen__url {
    margin-left: 10px; flex: 1; max-width: 340px; height: 18px; border-radius: 6px;
    background: rgba(255, 255, 255, .05); color: rgba(241, 237, 228, .5);
    font: 500 10.5px/18px var(--nx-font-mono, ui-monospace, monospace); padding: 0 10px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.p3d-screen img { display: block; width: 100%; height: auto; }
/* glare that follows the pointer */
.p3d-screen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(60% 60% at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .14), transparent 60%);
    mix-blend-mode: soft-light; opacity: .9;
}

/* ── 1. Hero stack: three screens layered in depth ──────────────────────── */
.p3d-stack {
    position: relative; width: min(1120px, 92vw); margin: clamp(8px, 2vh, 24px) auto 0;
    perspective: 2200px; perspective-origin: 50% 0%;
}
.p3d-stack__rig {
    position: relative; transform-style: preserve-3d;
    transform: rotateX(calc(16deg * (1 - var(--p, 0)) + var(--rx, 0deg))) rotateY(var(--ry, 0deg));
    transition: transform .25s var(--p3d-ease);
}
.p3d-stack .p3d-screen--main { position: relative; z-index: 3; transform: translateZ(60px); }
.p3d-stack .p3d-screen--l,
.p3d-stack .p3d-screen--r {
    position: absolute; top: 9%; width: 58%; z-index: 1; opacity: .9;
    filter: saturate(.9) brightness(.8);
}
.p3d-stack .p3d-screen--l { left: -12%; transform: translateZ(-140px) translateX(calc(-6% * (1 - var(--p, 0)))) rotateY(16deg); }
.p3d-stack .p3d-screen--r { right: -12%; transform: translateZ(-140px) translateX(calc(6% * (1 - var(--p, 0)))) rotateY(-16deg); }
.p3d-stack__glow {
    position: absolute; inset: 8% 6% -10%; z-index: 0; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 60%, color-mix(in srgb, var(--p3d-gold) 38%, transparent), transparent 70%);
    filter: blur(40px); opacity: .55; transform: translateZ(-300px);
}
.p3d-stack__chip {
    position: absolute; z-index: 4; padding: 10px 14px; border-radius: 12px;
    background: rgba(21, 21, 31, .86); border: 1px solid rgba(214, 179, 127, .28);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--p3d-text); font: 600 13px/1.25 var(--nx-font-display, inherit);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
    transform: translateZ(140px);
}
.p3d-stack__chip small { display: block; margin-top: 2px; color: var(--p3d-gold); font: 500 10px/1.2 var(--nx-font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; }

/* ── 2. Scroll reveal: one big screen flattens toward the viewer ────────── */
.p3d-reveal { position: relative; height: 210vh; }
.p3d-reveal__sticky {
    position: sticky; top: 0; height: 100vh; display: grid; place-items: center;
    perspective: 1800px; overflow: hidden;
}
.p3d-reveal__head { position: absolute; top: clamp(84px, 13vh, 130px); left: 0; right: 0; width: 100%; max-width: 100%; text-align: center; padding: 0 20px;
    opacity: calc(1 - var(--p, 0) * 1.6); transform: translateY(calc(var(--p, 0) * -40px)); }
.p3d-reveal__frame {
    width: min(1180px, 90vw); max-width: 100%; margin-top: clamp(80px, 16vh, 160px);
    transform: rotateX(calc(38deg * (1 - var(--p, 0)))) scale(calc(.78 + .22 * var(--p, 0))) translateY(calc(70px * (1 - var(--p, 0))));
    transform-origin: 50% 100%;
}
.p3d-reveal__caption {
    position: absolute; bottom: clamp(18px, 4vh, 40px); left: 0; right: 0; width: 100%; max-width: 100%; padding: 0 20px; text-align: center;
    color: var(--p3d-muted); font: 500 12px/1.4 var(--nx-font-mono, monospace); letter-spacing: .14em; text-transform: uppercase;
    opacity: calc(var(--p, 0) * 1.4 - .3);
}

/* ── 3. Feature tour: every feature with its own 3D card ─────────────────── */
.p3d-tour { padding: clamp(72px, 11vh, 140px) clamp(20px, 5vw, 64px); }
.p3d-tour__head { max-width: 760px; margin: 0 auto clamp(40px, 6vh, 72px); text-align: center; }
.p3d-tour__nav { position: sticky; top: 86px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin: 0 auto clamp(36px, 5vh, 56px); max-width: 1100px; }
.p3d-tour__nav a {
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--p3d-line); background: rgba(11, 11, 18, .78);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--p3d-muted); font: 500 13px/1 var(--nx-font-body, inherit); text-decoration: none; transition: color .25s, border-color .25s;
}
.p3d-tour__nav a:hover, .p3d-tour__nav a.is-active { color: var(--p3d-text); border-color: color-mix(in srgb, var(--p3d-gold) 55%, transparent); }
.p3d-group { max-width: 1180px; margin: 0 auto; padding-top: clamp(28px, 4vh, 48px); scroll-margin-top: 150px; }
.p3d-group__title { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(20px, 3vh, 32px);
    color: var(--p3d-gold); font: 600 12px/1 var(--nx-font-mono, monospace); letter-spacing: .22em; text-transform: uppercase; }
.p3d-group__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--p3d-line), transparent); }

.p3d-feat {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: center;
    padding: clamp(28px, 5vh, 56px) 0;
}
.p3d-feat--flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); }
.p3d-feat--flip .p3d-feat__text { order: 2; }
.p3d-feat__num { color: var(--p3d-gold); font: 600 12px/1 var(--nx-font-mono, monospace); letter-spacing: .18em; }
.p3d-feat__title { margin: 12px 0 0; color: var(--p3d-text); font: 700 clamp(1.5rem, 2.4vw, 2.2rem)/1.08 var(--nx-font-display, inherit); letter-spacing: -.025em; }
.p3d-feat__what { margin: 14px 0 0; color: var(--p3d-muted); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.62; }
.p3d-feat__value { display: flex; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--p3d-gold) 7%, transparent); border: 1px solid color-mix(in srgb, var(--p3d-gold) 22%, transparent);
    color: var(--p3d-text); font-size: .95rem; line-height: 1.5; }
.p3d-feat__value::before { content: "✦"; color: var(--p3d-gold); }
.p3d-feat__visual { perspective: 1600px; }
.p3d-feat__visual .p3d-screen {
    transform: rotateY(calc(var(--side, -1) * 14deg * (1 - var(--p, 1)) + var(--ry, 0deg))) rotateX(calc(8deg * (1 - var(--p, 1)) + var(--rx, 0deg)))
               translateZ(calc(-60px * (1 - var(--p, 1))));
    transition: transform .3s var(--p3d-ease);
}
.p3d-feat--flip .p3d-feat__visual { --side: 1; }

/* features that have no screen of their own: compact cards */
.p3d-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 8px 0 clamp(24px, 4vh, 40px); }
.p3d-mini__item { padding: 18px; border-radius: 14px; background: var(--p3d-card); border: 1px solid var(--p3d-line); }
.p3d-mini__item h4 { margin: 0; color: var(--p3d-text); font: 650 1.02rem/1.25 var(--nx-font-display, inherit); }
.p3d-mini__item p { margin: 8px 0 0; color: var(--p3d-muted); font-size: .92rem; line-height: 1.55; }

/* ── 4. Carousel ring of every screen ───────────────────────────────────── */
.p3d-ring { position: relative; height: clamp(380px, 46vw, 560px); perspective: 1600px; perspective-origin: 50% 30%; overflow: hidden; margin-top: clamp(16px, 3vh, 32px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.p3d-ring__spin {
    position: absolute; left: 50%; top: 50%; width: var(--w, 360px); height: calc(var(--w, 360px) * .625);
    margin: calc(var(--w, 360px) * -.3125) 0 0 calc(var(--w, 360px) * -.5);
    transform-style: preserve-3d; transform: translateZ(calc(var(--r, 900px) * -1)) rotateY(var(--a, 0deg));
}
.p3d-ring__item {
    position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden;
    transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--r, 900px));
    border: 1px solid rgba(255, 255, 255, .12); background: var(--p3d-ink); cursor: zoom-in;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8);
}
.p3d-ring__item img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

/* ── 5. Lightbox (click any screen to read it full size) ─────────────────── */
.p3d-lightbox {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 4vh 3vw;
    background: rgba(5, 5, 9, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity .3s;
}
.p3d-lightbox.is-open { opacity: 1; pointer-events: auto; }
.p3d-lightbox img { max-width: 100%; max-height: 84vh; border-radius: 12px; box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
    transform: scale(.96); transition: transform .35s var(--p3d-ease); }
.p3d-lightbox.is-open img { transform: none; }
.p3d-lightbox__cap { margin-top: 14px; color: var(--p3d-muted); text-align: center; font-size: .95rem; }
.p3d-lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--p3d-line); background: rgba(21, 21, 31, .9); color: var(--p3d-text); font-size: 22px; cursor: pointer; }


/* ── 6. Feature console: every other feature in one section ─────────────
   Chips (grouped) on one side, one big 3D screen on the other. Selecting a
   chip flips the screen to that feature (real screenshot, or a text panel for
   features with no screen); idle, it cycles through them on its own. */
.p3d-console { padding: clamp(64px, 10vh, 120px) clamp(20px, 5vw, 64px); }
.p3d-console__head { max-width: 760px; margin: 0 auto clamp(28px, 4vh, 48px); text-align: center; }
.p3d-con {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px);
    max-width: 1240px; margin: 0 auto; align-items: start;
}
.p3d-con__list { display: flex; flex-direction: column; gap: 18px; max-height: 640px; overflow: auto; padding-right: 6px;
    scrollbar-width: thin; scrollbar-color: rgba(214,179,127,.35) transparent; }
.p3d-con__grp { margin: 0 0 8px; color: var(--p3d-gold); font: 600 11px/1 var(--nx-font-mono, monospace); letter-spacing: .2em; text-transform: uppercase; }
.p3d-con__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.p3d-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--p3d-line); background: rgba(21, 21, 31, .7); color: var(--p3d-muted);
    font: 500 13.5px/1.2 var(--nx-font-body, inherit); text-align: left; transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.p3d-chip:hover { color: var(--p3d-text); border-color: color-mix(in srgb, var(--p3d-gold) 45%, transparent); transform: translateY(-1px); }
.p3d-chip.is-on { color: #14110b; background: var(--p3d-gold); border-color: var(--p3d-gold); }
.p3d-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.p3d-chip.has-shot i { background: var(--p3d-gold); opacity: 1; }
.p3d-chip.is-on.has-shot i { background: #14110b; }

.p3d-con__stage { position: sticky; top: 110px; perspective: 1800px; }
.p3d-con__card { transform-style: preserve-3d; transition: transform .55s var(--p3d-ease);
    transform: rotateX(calc(4deg + var(--rx, 0deg))) rotateY(calc(-8deg + var(--ry, 0deg))); }
.p3d-con__card.is-flip { transform: rotateX(4deg) rotateY(-98deg); transition-duration: .28s; }
.p3d-con__card .p3d-screen { cursor: zoom-in; }
.p3d-con__shot { position: relative; aspect-ratio: 16 / 10; background: var(--p3d-ink); }
.p3d-con__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.p3d-con__panel { position: absolute; inset: 0; display: none; place-content: center; padding: 8%;
    background: radial-gradient(70% 70% at 30% 20%, color-mix(in srgb, var(--p3d-gold) 16%, transparent), transparent 70%), #101018; }
.p3d-con__shot.is-text img { display: none; }
.p3d-con__shot.is-text .p3d-con__panel { display: grid; }
.p3d-con__panel b { color: var(--p3d-gold); font: 600 11px/1 var(--nx-font-mono, monospace); letter-spacing: .22em; text-transform: uppercase; }
.p3d-con__panel strong { display: block; margin-top: 14px; color: var(--p3d-text); font: 700 clamp(1.4rem, 2.6vw, 2.3rem)/1.1 var(--nx-font-display, inherit); letter-spacing: -.02em; }
.p3d-con__info { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--p3d-card); border: 1px solid var(--p3d-line); }
.p3d-con__info h3 { margin: 0; color: var(--p3d-text); font: 700 1.2rem/1.25 var(--nx-font-display, inherit); }
.p3d-con__info p { margin: 8px 0 0; color: var(--p3d-muted); font-size: .97rem; line-height: 1.6; }
.p3d-con__info .p3d-feat__value { margin-top: 12px; }
.p3d-con__progress { height: 2px; margin-top: 14px; border-radius: 2px; background: var(--p3d-line); overflow: hidden; }
.p3d-con__progress span { display: block; height: 100%; width: 0; background: var(--p3d-gold); }
.p3d-con.is-auto .p3d-con__progress span { animation: p3dCon var(--dur, 4800ms) linear forwards; }
@keyframes p3dCon { to { width: 100%; } }

@media (max-width: 900px) {
    .p3d-con { grid-template-columns: minmax(0, 1fr); }
    .p3d-con__stage { position: relative; top: 0; order: -1; }
    .p3d-con__list { max-height: none; overflow: visible; padding-right: 0; }
    .p3d-con__card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .p3d-con__card, .p3d-con__card.is-flip { transform: none; transition: none; }
    .p3d-con.is-auto .p3d-con__progress span { animation: none; }
}

/* ── Responsive + reduced motion ────────────────────────────────────────── */
@media (max-width: 900px) {
    .p3d-feat, .p3d-feat--flip { grid-template-columns: minmax(0, 1fr); }
    .p3d-feat--flip .p3d-feat__text { order: 0; }
    .p3d-stack .p3d-screen--l, .p3d-stack .p3d-screen--r { display: none; }
    .p3d-stack__chip { display: none; }
    .p3d-reveal { height: auto; }
    .p3d-reveal__sticky { position: relative; height: auto; padding: 72px 0 40px; }
    .p3d-reveal__head { position: relative; top: 0; opacity: 1; transform: none; }
    .p3d-reveal__frame { margin-top: 28px; transform: none; }
    .p3d-reveal__caption { position: relative; bottom: 0; margin-top: 16px; opacity: 1; }
    .p3d-tour__nav { position: relative; top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .p3d-stack__rig, .p3d-reveal__frame, .p3d-feat__visual .p3d-screen { transition: none; }
    .p3d-reveal { height: auto; }
    .p3d-reveal__sticky { position: relative; height: auto; padding: 72px 0 40px; }
    .p3d-reveal__head { position: relative; top: 0; opacity: 1; transform: none; }
    .p3d-reveal__frame { margin-top: 28px; transform: rotateX(6deg); }
    .p3d-reveal__caption { position: relative; bottom: 0; margin-top: 16px; opacity: 1; }
}