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

/* The hero lines here are longer than the landing page's; sized so each holds one line beside
   the scene (the column is about 47vw wide on desktop). */
.c3d-hero .l3d-h1 { font-size: clamp(2.4rem, 4.05vw, 3.75rem); line-height: 1.02; }

/* ---------- In action: five screen-and-story rows ----------
   Each screen starts slightly receded and comes flat as its row reaches the middle of the
   viewport. --p is 1 (flat) unless the script is animating it. */
.c3d-rows { margin-top: 4.5rem; display: grid; gap: clamp(5rem, 11vh, 8rem); }
.c3d-row {
    --p: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem); align-items: center; perspective: 2000px;
}
.c3d-row-shot { grid-column: span 7; --tilt: 9deg; }
.c3d-row-text { grid-column: span 5; }
.c3d-row.is-flipped .c3d-row-shot { grid-column: 8 / span 5; grid-row: 1; --tilt: -9deg; }
.c3d-row.is-flipped .c3d-row-text { grid-column: 1 / span 7; grid-row: 1; }
.c3d-row .l3d-shot {
    transform: translateZ(calc((1 - var(--p)) * -220px)) rotateY(calc((1 - var(--p)) * var(--tilt))) rotateX(calc((1 - var(--p)) * 6deg));
}
.c3d-cap { margin-top: 1rem; font-size: .875rem; line-height: 1.55; color: var(--l3d-muted); }
.c3d-em { color: var(--l3d-ink); font-weight: 500; }
.c3d-row-title { margin-top: 1rem; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.12; max-width: 24ch; }
.c3d-pts { margin-top: 1.75rem; display: grid; gap: 1rem; }
.c3d-pt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; }
.c3d-pt svg { width: 1rem; height: 1rem; margin-top: .3rem; color: var(--l3d-signal); }
.c3d-pt p { color: var(--l3d-soft); font-size: .9375rem; line-height: 1.6; }
.c3d-pt strong { color: var(--l3d-ink); font-weight: 600; }

/* ---------- Enterprise controls ----------
   The three cards stack beside the platform boundary, spaced so each holds the scene for about a
   third of the section while its control plays out at the egress port. */
/* The anchor sits at the column's left edge so the checkpoint and the provider fit to its right. */
.c3d-controls .l3d-sticky-anchor { --a: clamp(12rem, 17vw, 15rem); margin-inline: 0 auto; }
/* The labels over the guard checkpoint take their card's accent. */
.c3d-tag-pii { color: var(--l3d-violet); border-color: color-mix(in srgb, var(--l3d-violet) 55%, transparent); }
.c3d-tag-secret { color: #FB7185; border-color: color-mix(in srgb, #FB7185 55%, transparent); }
html.light .c3d-tag-pii { color: var(--l3d-indigo); }
html.light .c3d-tag-secret { color: #E11D48; border-color: color-mix(in srgb, #E11D48 45%, transparent); }
.c3d-guards { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .c3d-guards { gap: 26vh; padding-bottom: 12vh; } }
.c3d-guard {
    --accent: var(--l3d-ion);
    position: relative; padding: 1.75rem 1.75rem 1.5rem; border-radius: 1rem;
    border: 1px solid var(--l3d-rule); background: var(--l3d-panel);
}
.c3d-guard::before {
    content: ""; position: absolute; top: -1px; left: 1.5rem; right: 1.5rem; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.c3d-guard.is-pii { --accent: var(--l3d-violet); }
.c3d-guard.is-secret { --accent: #FB7185; }
/* Deeper accents on the light surface, where the dark-theme ones fall under 3:1. */
html.light .c3d-guard { --accent: var(--l3d-signal-deep); }
html.light .c3d-guard.is-pii { --accent: var(--l3d-indigo); }
html.light .c3d-guard.is-secret { --accent: #E11D48; }
.c3d-guard-head { display: flex; align-items: center; gap: .85rem; }
.c3d-guard-ic {
    flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .75rem;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.c3d-guard-ic svg { width: 1.3rem; height: 1.3rem; }
.c3d-guard .l3d-link { color: var(--accent); }

/* What actually crosses to the provider. The "before" line shows only while the script waits
   for the card to be seen (html.l3d-ui is added by that same script), so without it the card
   simply shows the result. */
.c3d-wire {
    margin-top: 1.25rem; padding: .8rem .95rem; border-radius: .75rem;
    border: 1px solid var(--l3d-rule); background: color-mix(in srgb, var(--surface-base) 70%, transparent);
}
.c3d-wire-lbl { display: block; font-size: .75rem; font-weight: 600; color: var(--l3d-muted); }
.c3d-line { position: relative; margin-top: .5rem; min-height: 2.2rem; }
.c3d-was, .c3d-now {
    position: absolute; inset: 0; display: flex; align-items: center; gap: .5rem;
    font-family: var(--l3d-mono); font-size: .8rem; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c3d-was { color: var(--l3d-soft); opacity: 0; filter: blur(3px); transition: opacity .45s ease 1.1s, filter .45s ease 1.1s; }
.c3d-now { color: var(--accent); transition: opacity .45s ease 1.25s, transform .45s ease 1.25s; }
html.l3d-ui .c3d-guard:not(.is-in) .c3d-was { opacity: 1; filter: none; }
html.l3d-ui .c3d-guard:not(.is-in) .c3d-now { opacity: 0; transform: translateY(5px); }
.c3d-now em { font-style: normal; color: var(--l3d-muted); }
.c3d-stamp {
    flex: none; padding: .1rem .5rem; border-radius: .3rem;
    font-family: var(--l3d-text); font-size: .72rem; font-weight: 700; color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.c3d-pair { margin-top: .6rem; display: flex; align-items: center; gap: .85rem; }
.c3d-qr { flex: none; width: 2.5rem; height: 2.5rem; color: var(--accent); }
.c3d-qr rect { fill: currentColor; }
/* The finder squares are outlines; without this the CSS fill beats their fill="none". */
.c3d-qr rect[stroke] { fill: none; }
.c3d-pair span { font-family: var(--l3d-mono); font-size: .8rem; line-height: 1.45; color: var(--l3d-soft); }
.c3d-pair b { display: block; font-weight: 600; color: var(--accent); }

/* ---------- Why AETHER Coder: nine points, hairline grid ---------- */
.c3d-why { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
.c3d-why-item { padding-block: 1.75rem; border-top: 1px solid var(--l3d-rule); }
.c3d-why-item svg { width: 1.35rem; height: 1.35rem; color: var(--l3d-signal); }
.c3d-why-item .l3d-h3 { margin-top: .9rem; font-size: 1.125rem; }
.c3d-why-item .l3d-copy { font-size: .9375rem; }

/* ---------- Install ---------- */
.c3d-install { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.c3d-install-panel {
    padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 1rem;
    border: 1px solid var(--l3d-rule); background: var(--l3d-panel);
}
.c3d-install-panel .l3d-h3 { font-size: 1.125rem; }
.c3d-install-panel ol { margin-top: 1rem; padding-left: 1.25rem; list-style: decimal; display: grid; gap: .75rem; color: var(--l3d-soft); line-height: 1.6; }
.c3d-install-panel strong { color: var(--l3d-ink); font-weight: 600; }
.c3d-note { margin-top: 1.25rem; font-size: .875rem; line-height: 1.6; color: var(--l3d-muted); }
.c3d-note a { color: var(--l3d-link); text-decoration: underline; text-underline-offset: 3px; }
.c3d-code {
    margin-top: .5rem; padding: .85rem 1rem; border-radius: .7rem; overflow-x: auto; white-space: nowrap;
    font-family: var(--l3d-mono); font-size: .85rem; color: var(--l3d-ink);
    background: var(--surface-2); border: 1px solid var(--l3d-rule);
}

@media (prefers-reduced-motion: reduce) {
    .c3d-was, .c3d-now { transition: none; }
}

@media (max-width: 1023px) {
    .c3d-row, .c3d-row.is-flipped { grid-template-columns: minmax(0, 1fr); }
    .c3d-row .c3d-row-shot, .c3d-row .c3d-row-text,
    .c3d-row.is-flipped .c3d-row-shot, .c3d-row.is-flipped .c3d-row-text { grid-column: 1; grid-row: auto; --tilt: 0deg; }
    .c3d-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c3d-install { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .c3d-why { grid-template-columns: minmax(0, 1fr); }
}