/* =========================================================================
   LexiCad — onepage (tema scuro, scroll-reattivo, sfondo 3D)
   Usato da: enteca_app/main/templates/default/sistema_lexicad.php
   Scena 3D: inc/lc3d_surface.php · logica scroll: js/lexicad_onepage.js
   ========================================================================= */
:root {
    --lc-bg:        #080b1a;
    --lc-bg-2:      #10152f;
    --lc-cyan:      #06b6d4;
    --lc-cyan-soft: #22d3ee;
    --lc-mint:      #84f0b5;
    --lc-violet:    #7c5cff;
    --lc-magenta:   #e054c8;
    --lc-peri:      #94a2e8;
    --lc-ink:       #e6ebff;
    --lc-muted:     #9aa7c7;
    --lc-line:      rgba(148,162,232,.16);
    --lc-panel:     rgba(16,21,47,.55);
}

body.lc-onepage {
    background: radial-gradient(120% 80% at 50% -10%, #161d3f 0%, var(--lc-bg) 55%, #05060f 100%);
    color: var(--lc-ink);
    font-family: "Comfortaa", sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.lc-onepage h1, .lc-onepage h2, .lc-onepage h3 {
    font-family: "Josefin Slab", serif;
    font-weight: 300;
    letter-spacing: .01em;
}

/* ---- Canvas 3D fisso dietro al contenuto ---- */
#lc-bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
}

/* velo che mantiene leggibili i testi sopra la scena 3D */
#lc-veil {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% 38%, transparent 0%, rgba(8,11,26,.35) 100%),
        linear-gradient(180deg, rgba(8,11,26,.10) 0%, rgba(8,11,26,.0) 30%, rgba(8,11,26,.0) 70%, rgba(8,11,26,.45) 100%);
}

/* Navbar sticky e leggermente traslucida */
.lc-onepage > .navbar-container.container-fluid {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10,14,31,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lc-line);
}

.lc-main { position: relative; z-index: 2; }

/* Barra di avanzamento scroll */
#lc-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 1100;
    background: linear-gradient(90deg, var(--lc-cyan), var(--lc-violet) 55%, var(--lc-magenta));
    box-shadow: 0 0 12px rgba(34,211,238,.6);
    transition: width .08s linear;
}

/* Navigazione a pallini laterale */
#lc-dots {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#lc-dots a {
    position: relative;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1px solid var(--lc-muted);
    background: transparent;
    transition: transform .25s, background .25s, border-color .25s;
}
#lc-dots a::after {
    content: attr(data-label);
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--lc-ink);
    background: rgba(10,14,31,.85);
    border: 1px solid var(--lc-line);
    padding: 3px 9px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
#lc-dots a:hover::after { opacity: 1; }
#lc-dots a.is-active {
    background: var(--lc-cyan);
    border-color: var(--lc-cyan-soft);
    transform: scale(1.35);
    box-shadow: 0 0 10px rgba(34,211,238,.8);
}
@media (max-width: 991px) { #lc-dots { display: none; } }

/* Sezioni */
.lc-section { position: relative; padding: clamp(4rem, 9vh, 8rem) 0; }
.lc-wrap   { width: min(1080px, 90vw); margin: 0 auto; }
.lc-narrow { width: min(760px, 90vw);  margin: 0 auto; }

.lc-kicker {
    font-family: "Comfortaa", sans-serif;
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .7rem;
    color: var(--lc-cyan-soft);
    margin-bottom: 1rem;
}
.lc-section h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1.6rem; }
.lc-section p {
    color: var(--lc-muted);
    font-size: 1.04rem;
    line-height: 1.85;
    margin-bottom: 1.1rem;
}
.lc-section p strong { color: var(--lc-ink); font-weight: 400; }
.lc-section p em { color: var(--lc-peri); font-style: italic; }
.lc-section a:not(.impl-link) { color: var(--lc-cyan-soft); text-decoration: none; border-bottom: 1px solid rgba(34,211,238,.35); }
.lc-section a:not(.impl-link):hover { color: #fff; }

/* HERO */
.lc-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.lc-hero-logo-wrap { perspective: 900px; margin-bottom: 1.5rem; }
.lc-hero-logo {
    width: min(440px, 78vw);
    height: auto;
    filter: drop-shadow(0 10px 38px rgba(34,211,238,.4));
    transform-style: preserve-3d;
    will-change: transform;
    animation: lc-float 7s ease-in-out infinite;
}
@keyframes lc-float {
    0%,100% { transform: translateY(0) rotateX(0) rotateY(0); }
    50%     { transform: translateY(-14px) rotateX(2deg) rotateY(-2deg); }
}
.lc-hero h1 {
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    font-weight: 300;
    color: var(--lc-muted);
    letter-spacing: .04em;
    margin: 0;
}
.lc-hero .lc-tag {
    color: var(--lc-mint);
    font-family: "Comfortaa", sans-serif;
    font-size: .95rem;
    margin-top: .6rem;
    letter-spacing: .02em;
}
.lc-scrollcue {
    position: absolute;
    bottom: 2.2rem; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem;
    color: var(--lc-muted);
    font-size: .68rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.lc-scrollcue .mouse {
    width: 22px; height: 36px;
    border: 1.5px solid var(--lc-muted);
    border-radius: 12px;
    position: relative;
}
.lc-scrollcue .mouse::after {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    width: 3px; height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--lc-cyan-soft);
    animation: lc-wheel 1.8s ease-in-out infinite;
}
@keyframes lc-wheel { 0%{opacity:0;transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0;transform:translateY(12px);} }

/* Reveal allo scroll */
.lc-reveal {
    opacity: 0;
    transform: translateY(46px) rotateX(9deg) scale(.985);
    transform-origin: 50% 100%;
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.lc-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lc-reveal { opacity: 1 !important; transform: none !important; }
    .lc-hero-logo { animation: none; }
    .lc-scrollcue .mouse::after { animation: none; }
}

/* Card a griglia con tilt 3D */
.lc-grid { display: grid; gap: 1.4rem; }
.lc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lc-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .lc-grid-3, .lc-grid-2 { grid-template-columns: 1fr; } }

.lc-card {
    position: relative;
    background: var(--lc-panel);
    border: 1px solid var(--lc-line);
    border-radius: 16px;
    padding: 1.9rem 1.7rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform-style: preserve-3d;
    transition: transform .18s ease, border-color .3s, box-shadow .3s;
    will-change: transform;
    overflow: hidden;
}
.lc-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(34,211,238,.14), transparent 45%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.lc-card:hover { border-color: rgba(34,211,238,.45); box-shadow: 0 20px 50px -20px rgba(6,182,212,.4); }
.lc-card:hover::before { opacity: 1; }
.lc-card h3 { font-size: 1.3rem; margin: 0 0 .7rem; color: var(--lc-ink); }
.lc-card p { font-size: .94rem; line-height: 1.7; margin: 0; }

.lc-num {
    font-family: "Josefin Slab", serif;
    font-size: 2.9rem;
    font-weight: 300;
    line-height: 1;
    background: linear-gradient(135deg, var(--lc-cyan-soft), var(--lc-violet));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: .9rem;
}
.lc-feat-ico { color: var(--lc-cyan-soft); margin-bottom: 1rem; }

/* Risultati / sigle */
.lc-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.6rem; }
.lc-chip {
    font-family: "Comfortaa", sans-serif;
    font-size: .78rem;
    padding: .35rem .8rem;
    border: 1px solid var(--lc-line);
    border-radius: 999px;
    color: var(--lc-peri);
    background: rgba(148,162,232,.06);
}

/* Implementazioni */
.impl-card {
    display: flex; flex-direction: column;
    background: var(--lc-panel);
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .25s, border-color .3s, box-shadow .3s;
    height: 100%;
    overflow: hidden;
}
.impl-card:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.4); box-shadow: 0 22px 50px -24px rgba(124,92,255,.55); }
.impl-body { padding: 1.5rem 1.5rem 1rem; flex: 1; }
.impl-sigla {
    font-family: "Josefin Slab", serif;
    font-size: 1.9rem; font-weight: 400; line-height: 1;
    background: linear-gradient(120deg, var(--lc-cyan-soft), var(--lc-magenta));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: .5rem;
}
.impl-titolo { font-family:"Comfortaa",sans-serif; font-size:.86rem; font-weight:600; color: var(--lc-ink); line-height:1.35; margin-bottom:.35rem; }
.impl-ist { font-family:"Comfortaa",sans-serif; font-size:.76rem; color: var(--lc-muted); margin-bottom:.9rem; }
.impl-desc { font-family:"Comfortaa",sans-serif; font-size:.84rem; color: var(--lc-muted); line-height:1.6; }
.impl-desc a { color: var(--lc-cyan-soft); }
.impl-foot { padding:.85rem 1.5rem; border-top:1px solid var(--lc-line); }
.impl-link { font-family:"Comfortaa",sans-serif; font-size:.8rem; color: var(--lc-cyan-soft); text-decoration:none; word-break: break-all; }
.impl-link:hover { text-decoration: underline; }

/* Note credito */
.lc-credits { text-align: center; }
.lc-credits .lc-narrow p { font-size: .92rem; color: var(--lc-muted); }
.lc-divline {
    width: 80px; height: 2px; margin: 0 auto 1.8rem;
    background: linear-gradient(90deg, transparent, var(--lc-cyan), transparent);
}

.lc-counter {
    font-family: "Josefin Slab", serif;
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 300; line-height: 1;
    background: linear-gradient(120deg, var(--lc-cyan-soft), var(--lc-violet), var(--lc-magenta));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}