/* =====================================================================
   3d.css — containers, fallbacks and hooks for the Yakclick 3D scenes.
   Owned by the 3D/motion assets. Designer: style *around* these, and use
   the hooks below; do not depend on the canvas existing (it often won't).

   EMBEDDING (Razor)
   -----------------
     @await Html.PartialAsync("_Hero3D")
     @await Html.PartialAsync("_Scene3DProducts", null, new ViewDataDictionary(ViewData) {
         ["Yk3dModules"] = new Dictionary<string,string> {
             ["hospital"] = "Hospital", ["school"] = "School", ["accounting"] = "ManagePaisa",
             ["inventory"] = "Karyaal", ["custom"] = "Custom" } })
     @await Html.PartialAsync("_Scene3DIndustries", null, new ViewDataDictionary(ViewData) {
         ["Yk3dIndustries"] = new Dictionary<string,string> {
             ["hospital"] = "Hospitals", ["school"] = "Schools", ["factory"] = "Factories",
             ["shop"] = "Retail", ["ngo"] = "NGOs" } })

   Each partial carries its own <link> to this file and the module <script>;
   browsers dedupe both, so including several partials on one page is fine.
   If you prefer, move the <link> into the layout <head> — it is identical.

   Optional ViewData on every partial:
     "Yk3dClass"   extra classes on the container (e.g. "my-hero-art")
     "Yk3dStatic"  true → never start WebGL for this instance (fallback art only)

   HOOKS
   -----
     .yk3d                     the container. Reserves its box with aspect-ratio → no CLS.
     .yk3d--hero / --products / --industries
     .yk3d.is-live             a WebGL scene is running (fallback image faded out)
     .yk3d.is-fallback         scene was declined; data-yk3d-reason says why
                               (disabled | no-webgl | static | error)
     html.yk3d-on / .yk3d-off  page-level: whether WebGL scenes are allowed at all
     .yk3d[data-active="key"]  PRODUCTS: highlight the module with that key
                               (set it from your tabs: el.dataset.active = "hospital")
     .yk3d__label.is-active    PRODUCTS: label of the active module (JS toggles it)
     .yk3d-tilt                INDUSTRIES: a tilt card; .is-tilting while JS drives it
     --yk3d-accent / --yk3d-accent-2   colours the SVG icons and labels use
     --yk3d-hero-ratio / --yk3d-products-ratio   override the reserved aspect ratio

   Everything here is theme-aware through the brand tokens and [data-theme].
   ===================================================================== */

.yk3d {
    --yk3d-accent: var(--yc-blue, #2870E8);
    --yk3d-accent-2: var(--yc-success, #1F8A5B);
    --yk3d-hero-ratio: 16 / 10;
    --yk3d-products-ratio: 4 / 3;
    position: relative;
    width: 100%;
    contain: layout paint;
    color: var(--yc-text, #111014);
}

.yk3d--hero { aspect-ratio: var(--yk3d-hero-ratio); }
.yk3d--products { aspect-ratio: var(--yk3d-products-ratio); }

.yk3d__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;   /* three sets inline w/h from the box; keep CSS in charge */
    height: 100% !important;
    opacity: 0;
    transition: opacity .7s var(--yc-ease, ease);
}
.yk3d.is-live .yk3d__canvas { opacity: 1; }

/* ---- static fallback art: light + dark variants, one visible at a time ---- */
.yk3d__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transition: opacity .7s var(--yc-ease, ease);
}
.yk3d.is-live .yk3d__fallback { opacity: 0; }

.yk3d__fallback--dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .yk3d__fallback--light { display: none; }
    :root:not([data-theme="light"]) .yk3d__fallback--dark { display: block; }
}
:root[data-theme="dark"] .yk3d__fallback--light { display: none; }
:root[data-theme="dark"] .yk3d__fallback--dark { display: block; }

/* ---- PRODUCTS: HTML labels positioned by the scene ---- */
.yk3d__labels {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.yk3d__label {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(0, -50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem .35rem .55rem;
    border-radius: 999px;
    font: 600 var(--yc-fs-sm, .9375rem)/1.2 var(--yc-font-sans, system-ui, sans-serif);
    color: var(--yc-text-soft, #4B4A52);
    background: color-mix(in srgb, var(--yc-surface, #fff) 82%, transparent);
    border: 1px solid var(--yc-line, #E6E6EA);
    backdrop-filter: blur(6px);
    white-space: nowrap;
    pointer-events: auto;
    transition: color .3s, border-color .3s, box-shadow .3s, opacity .3s;
    will-change: left, top;
}
.yk3d__label::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--yk3d-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yk3d-accent) 22%, transparent);
    flex: none;
}
.yk3d__label.is-active {
    color: var(--yc-text, #111014);
    border-color: var(--yk3d-accent);
    box-shadow: var(--yc-shadow, 0 2px 10px rgba(17,16,20,.06));
}
.yk3d[data-active] .yk3d__label:not(.is-active) { opacity: .55; }
[dir="rtl"] .yk3d__label { transform: translate(-100%, -50%); }

/* Fallback / not-yet-live: labels sit in a tidy row under the art instead of floating. */
.yk3d--products:not(.is-live) .yk3d__labels {
    position: absolute;
    inset: auto 0 .75rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    padding: 0 .75rem;
}
.yk3d--products:not(.is-live) .yk3d__label { position: static; transform: none; }

/* ---- INDUSTRIES: SVG icon cards with CSS-3D tilt ---- */
.yk3d--industries { aspect-ratio: auto; contain: none; }
.yk3d-ind {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.yk3d-tilt {
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1rem 1.25rem;
    border-radius: var(--yc-radius-lg, 16px);
    background: var(--yc-grad-card, var(--yc-surface, #fff));
    border: 1px solid var(--yc-line, #E6E6EA);
    box-shadow: var(--yc-shadow-sm, 0 1px 2px rgba(17,16,20,.04));
    transform-style: preserve-3d;
    transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: box-shadow .35s var(--yc-ease, ease), border-color .35s;
    overflow: hidden;
}
.yk3d-tilt:hover { border-color: color-mix(in srgb, var(--yk3d-accent) 45%, var(--yc-line, #E6E6EA)); box-shadow: var(--yc-shadow-lg, 0 24px 60px rgba(17,16,20,.1)); }
.yk3d-tilt__glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), transparent 60%);
    transition: opacity .35s;
}
:root[data-theme="dark"] .yk3d-tilt__glare { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(140,180,255,.22), transparent 60%); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .yk3d-tilt__glare { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(140,180,255,.22), transparent 60%); }
}
.yk3d-tilt.is-tilting:hover .yk3d-tilt__glare { opacity: 1; }
.yk3d-ind__icon {
    width: 5.5rem;
    height: 5.5rem;
    color: var(--yc-text, #111014);
    transform: translateZ(24px);
    transition: transform .35s var(--yc-ease, ease);
    filter: drop-shadow(0 6px 10px rgba(17,16,20,.08));
}
.yk3d-tilt:hover .yk3d-ind__icon { transform: translateZ(36px) scale(1.06); }
.yk3d-ind__label {
    font: 600 var(--yc-fs-sm, .9375rem)/1.3 var(--yc-font-sans, system-ui, sans-serif);
    color: var(--yc-text, #111014);
    text-align: center;
    transform: translateZ(12px);
}

/* Static everywhere motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
    .yk3d__canvas, .yk3d__fallback, .yk3d__label, .yk3d-tilt, .yk3d-ind__icon { transition: none; }
    .yk3d-tilt { transform: none; }
}
