/* ==========================================================================
   PrintManager — landing pubblica
   Colori solo da var(--lp-*), definiti in pm-tokens.css (blocco .pm-landing).
   ========================================================================== */

.pm-landing {
    --lp-font-display: "Cormorant Garamond", Georgia, serif;
    --lp-font-tech: "Orbitron", "Inter", sans-serif;
    --lp-font-body: "Inter", system-ui, -apple-system, sans-serif;
    --lp-radius: 28px;
    --lp-max: 1360px;

    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 70% -10%, color-mix(in srgb, var(--lp-accent-deep) 28%, transparent), transparent 70%),
        radial-gradient(900px 500px at 0% 40%, color-mix(in srgb, var(--lp-accent-deep) 12%, transparent), transparent 70%),
        var(--lp-bg);
    color: var(--lp-text);
    font-family: var(--lp-font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.pm-landing *, .pm-landing *::before, .pm-landing *::after { box-sizing: border-box; }
:where(.pm-landing) a { color: inherit; text-decoration: none; }
.pm-landing ::selection { background: var(--lp-accent); color: var(--lp-light); }

.lp-wrap { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 24px; }

/* --- Topbar ------------------------------------------------------------ */
.lp-top {
    position: sticky; top: 0; z-index: 30;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--lp-bg) 70%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--lp-line) 60%, transparent);
}
.lp-top__in { display: flex; align-items: center; gap: 24px; height: 72px; }

.lp-logo { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--lp-font-tech); font-size: 21px; letter-spacing: .02em; white-space: nowrap; }
.lp-logo__a { color: var(--lp-text-2); font-weight: 500; }
.lp-logo__b {
    font-weight: 800;
    background: linear-gradient(180deg, var(--lp-accent-2), var(--lp-accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lp-glow) 55%, transparent));
}

.lp-top__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lp-theme {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--lp-line-strong); background: color-mix(in srgb, var(--lp-panel) 70%, transparent);
    color: var(--lp-text); transition: border-color .2s;
}
.lp-theme:hover { border-color: var(--lp-accent); }
.lp-theme svg { grid-area: 1 / 1; }
/* in scuro si offre il sole (passa al chiaro), in chiaro la luna */
.lp-theme__moon, [data-theme="light"] .lp-theme__sun { display: none; }
[data-theme="light"] .lp-theme__moon { display: block; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding: 0 26px; border-radius: 999px;
    font: 600 16px/1 var(--lp-font-body); cursor: pointer; border: 0;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn--primary { background: var(--lp-accent-deep); color: var(--lp-light); box-shadow: 0 0 24px color-mix(in srgb, var(--lp-glow) 45%, transparent); }
.lp-btn--primary:hover { background: var(--lp-accent); }

/* --- Hero -------------------------------------------------------------- */
.lp-hero {
    position: relative; margin-top: 28px;
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    background: linear-gradient(180deg, var(--lp-bg-2), var(--lp-bg));
    overflow: hidden; min-height: 720px;
    box-shadow: 0 40px 120px color-mix(in srgb, var(--lp-accent-deep) 18%, transparent);
}

/* Griglia CSS di riserva: visibile finche' la scena WebGL non disegna */
.lp-hero__fallback {
    position: absolute; inset: 45% -30% -10% -30%;
    background-image:
        linear-gradient(var(--lp-3d-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--lp-3d-grid) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: perspective(600px) rotateX(62deg);
    transform-origin: top center;
    mask-image: linear-gradient(180deg, transparent, var(--lp-bg) 40%);
    -webkit-mask-image: linear-gradient(180deg, transparent, var(--lp-bg) 40%);
    opacity: .7; transition: opacity .8s;
}
.lp-hero.is-3d .lp-hero__fallback { opacity: 0; }

.lp-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s; }
.lp-hero.is-3d .lp-hero__canvas { opacity: 1; }

/* velo a sinistra: tiene leggibile il testo sopra la scena */
.lp-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--lp-bg) 88%, transparent) 0%, color-mix(in srgb, var(--lp-bg) 55%, transparent) 22%, transparent 36%);
}

/* il testo sta nel quarto di sinistra: i 3/4 restanti sono della scena */
.lp-hero__content { position: relative; z-index: 2; padding: 64px 0 56px 52px; width: 28%; min-width: 400px; }

.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font: 500 12px/1 var(--lp-font-tech); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
    color: var(--lp-text-2);
}
.lp-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-accent); box-shadow: 0 0 10px var(--lp-glow); }

.lp-h1 {
    margin: 26px 0 0;
    font: 500 clamp(40px, 3.5vw, 54px)/1.05 var(--lp-font-display);
    letter-spacing: -.01em;
}
.lp-h1 em {
    font-style: italic; color: var(--lp-accent-2);
    text-shadow: 0 0 28px color-mix(in srgb, var(--lp-glow) 55%, transparent);
}
.lp-lead { margin: 22px 0 0; font-size: 16px; line-height: 1.6; color: var(--lp-text-2); max-width: 560px; }

.lp-ask { margin-top: 34px; }
.lp-ask__label { font: 500 11px/1 var(--lp-font-tech); letter-spacing: .14em; white-space: nowrap; text-transform: uppercase; color: var(--lp-text-3); }
.lp-ask__box {
    margin-top: 12px; display: flex; align-items: center; gap: 12px;
    padding: 7px 7px 7px 22px; border-radius: 999px;
    border: 1px solid var(--lp-line-strong);
    background: color-mix(in srgb, var(--lp-panel) 80%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-accent-deep) 10%, transparent), 0 0 40px color-mix(in srgb, var(--lp-glow) 16%, transparent);
    max-width: 100%;
}
.lp-ask__icon { color: var(--lp-accent-2); flex: none; }
.lp-ask__text { flex: 1; min-width: 0; font-size: 16px; color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ask__text::after { content: "▍"; color: var(--lp-accent); animation: lp-blink 1s steps(1) infinite; margin-left: 1px; }
@keyframes lp-blink { 50% { opacity: 0; } }

/* --- Sezioni ----------------------------------------------------------- */
.lp-section { padding: 70px 0 0; }
.lp-kicker { font: 600 13px/1 var(--lp-font-tech); letter-spacing: .22em; text-transform: uppercase; color: var(--lp-text-2); margin: 0 0 18px 4px; }

.lp-panel {
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    background: linear-gradient(180deg, var(--lp-panel), color-mix(in srgb, var(--lp-panel) 60%, var(--lp-bg)));
}

/* il flusso */
.lp-flow { padding: 38px 30px; overflow-x: auto; }
.lp-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(104px, 1fr)); position: relative; min-width: 1040px; }
.lp-flow ol::before { content: ""; position: absolute; top: 24px; left: 5%; right: 5%; height: 1px; background: var(--lp-line-strong); }
.lp-flow ol::after {
    content: ""; position: absolute; top: 20px; left: 5%; width: 9px; height: 9px; border-radius: 50%;
    background: var(--lp-accent-2); box-shadow: 0 0 14px 3px var(--lp-glow);
    animation: lp-travel 12s linear infinite;
}
@keyframes lp-travel { from { left: 5%; } to { left: 95%; } }
.lp-flow li { text-align: center; position: relative; }
.lp-flow__n {
    position: relative; z-index: 1; width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; font: 600 13px/1 var(--lp-font-tech);
    border: 1px solid var(--lp-line-strong); background: var(--lp-bg-2); color: var(--lp-text-2);
}
.lp-flow li span:last-child { font-size: 15px; font-weight: 500; line-height: 1.3; display: block; padding: 0 6px; }

.lp-foot { padding: 40px 0 50px; color: var(--lp-text-3); font-size: 14px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* comparsa allo scroll */
.lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.lp-reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 720px) {
    .lp-theme { width: 40px; height: 40px; }
    .lp-wrap { padding: 0 16px; }
    .lp-hero { min-height: 0; }
    .lp-hero__content { padding: 44px 24px 300px; width: auto; min-width: 0; }
    .lp-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--lp-bg) 85%, transparent) 0%, color-mix(in srgb, var(--lp-bg) 70%, transparent) 60%, transparent 85%); }
    .lp-lead { font-size: 17px; }
    .lp-top .lp-btn { height: 40px; padding: 0 18px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-landing *, .pm-landing *::before, .pm-landing *::after { animation: none !important; transition: none !important; }
    .lp-reveal { opacity: 1; transform: none; }
}