/* ============================================
   DOCRAG APPLIANCE — Landing scrollytelling
   Costruita SOPRA il design system del sito:
   stessi token, ASCII hero, accento caldo, .reveal, glass.
   Aggiunge: box 3D allo scroll, grafo SVG, chat, config.
   ============================================ */

/* ── Lenis smooth scroll (richiesto dalla lib) ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Elementi condivisi (linguaggio del sito) ── */
.apl-kicker {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-bright);
    margin-bottom: clamp(20px, 3vh, 36px);
}

.apl-h2 {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    line-height: 1.15;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    margin-bottom: clamp(20px, 3vh, 32px);
}

.apl-lead {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 620px;
}

/* Riuso l'accento caldo del sito anche su parole chiave */
.apl-h2 .accent,
.apl-claim span {
    background: linear-gradient(90deg, #C8388F 0%, #E8565A 25%, #F7B731 50%, #E8565A 75%, #C8388F 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 5s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   BOX 3D — mini-PC stilizzato NEUTRO (no vendor)
   drawFrame(progress) in JS ruota --box-rot;
   architettura pronta a ricevere una sequenza WebP.
   ════════════════════════════════════════════ */



/* Il coperchio prende la luce + una sottile riga accento */
/* Facce laterali/retro più scure: il contrasto tra facce fa leggere il volume 3D */

/* Facciata: griglia di aerazione + LED + marchio neutro "n" */
@keyframes aplLed {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px 2px rgba(247,183,49,0.75); }
    50%      { opacity: 0.5; box-shadow: 0 0 6px 1px rgba(247,183,49,0.4); }
}

/* Float leggero nell'hero */
@keyframes aplFloat {
    0%, 100% { transform: rotateX(-26deg) rotateY(-30deg) translateY(0); }
    50%      { transform: rotateX(-26deg) rotateY(-38deg) translateY(-14px); }
}

/* ════════════════════════════════════════════
   1 · HERO — riusa .hero-typo (ASCII + accento)
   ════════════════════════════════════════════ */
.apl-hero > .container { position: relative; z-index: 2; }
.apl-hero__title { max-width: 15ch; }
.apl-hero__sub { max-width: 46ch; }

.apl-hero__box-wrap {
    position: absolute;
    top: 50%;
    right: clamp(-40px, 4vw, 80px);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}
.apl-hero__box-wrap::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 460px; height: 320px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(99,102,241,0.30), transparent 68%);
    filter: blur(24px);
    z-index: -1;
    pointer-events: none;
}

.apl-scrollhint {
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 4vh, 44px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
}
.apl-scrollhint__word {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}
.apl-scrollhint__line {
    width: 1px; height: 42px;
    background: linear-gradient(180deg, var(--color-accent-bright), transparent);
    animation: aplHint 2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes aplHint {
    0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
    50%      { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 900px) {
    .apl-hero__box-wrap {
        position: relative; top: auto; right: auto;
        transform: none;
        margin: clamp(40px, 8vh, 72px) auto 0;
        display: flex; justify-content: center;
    }
    .apl-hero__title, .apl-hero__sub { max-width: none; }
}

/* ════════════════════════════════════════════
   2 · LA SCATOLA — pin + scrub
   ════════════════════════════════════════════ */
/* Tre affermazioni affiancate. Prima erano una alla volta, sincronizzate con
   la rotazione di una scatola disegnata in CSS: la scatola non si capiva, le
   frasi si', quindi restano le frasi. */
.apl-box__claims {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    text-align: center;
}
.apl-claim {
    font-family: var(--font-headline);
    font-size: clamp(1.35rem, 2.6vw, 2.15rem);
    line-height: 1.2;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}
@media (max-width: 780px) {
    .apl-box__claims { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ════════════════════════════════════════════
   3 · NIENTE ESCE — particelle nel perimetro
   ════════════════════════════════════════════ */
/* Il testo sta DENTRO il perimetro: le particelle gli girano intorno
   senza mai uscire, che e' esattamente la cosa che la frase afferma. */
.apl-seal__perimeter {
    position: relative;
    width: 100%;
    min-height: clamp(340px, 46vw, 520px);
    display: grid;
    place-items: center;
    padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 96px);
    border: 1.5px dashed rgba(165,180,252,0.5);
    border-radius: var(--radius-xl);
    background: radial-gradient(ellipse at center, rgba(99,102,241,0.10), transparent 70%);
    overflow: hidden;
}
.apl-seal__perimeter canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.apl-seal__copy {
    position: relative;   /* sopra le particelle */
    z-index: 1;
    max-width: 640px;
    text-align: center;
}
.apl-seal__copy .apl-lead { margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
    .apl-seal__perimeter { min-height: 300px; }
}

/* ════════════════════════════════════════════
   4 · IL GRAFO — pin + DrawSVG scrub
   ════════════════════════════════════════════ */
.apl-graph { position: relative; height: 260vh; }
.apl-graph__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: clamp(80px, 12vh, 120px) 0 clamp(20px, 4vh, 48px);
}
.apl-graph__head { text-align: center; margin-bottom: clamp(12px, 2vh, 28px); }
.apl-graph__head .apl-lead { margin: 0 auto; }
.apl-graph__svg {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
}
.apl-graph__edges line { opacity: 0.55; }
.apl-node circle {
    fill: var(--color-bg-elevated);
    stroke: var(--color-accent-bright);
    stroke-width: 2;
}
.apl-node--doc circle { stroke: var(--color-accent-secondary); }
.apl-node--hub circle {
    fill: var(--color-accent-dim);
    stroke: #F7B731;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 10px rgba(247,183,49,0.5));
}
.apl-node text {
    fill: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 15px;
    text-anchor: middle;
    letter-spacing: 0.02em;
}
.apl-node--hub text { fill: var(--color-text-primary); font-size: 17px; }

/* ════════════════════════════════════════════
   5 · LA CHAT — bolle + typing (SplitText)
   ════════════════════════════════════════════ */
.apl-chat__thread {
    margin-top: clamp(32px, 6vh, 64px);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 680px;
}
.apl-bubble {
    align-self: flex-start;
    max-width: 90%;
    padding: 16px 22px;
    border-radius: 18px 18px 18px 4px;
    background: var(--color-surface-glass);
    border: 1px solid var(--color-border-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--font-headline);
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
    line-height: 1.35;
    color: var(--color-text-primary);
}
.apl-bubble--answer {
    align-self: flex-end;
    border-radius: 18px 18px 4px 18px;
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(139,92,246,0.14));
    border-color: var(--color-border-accent);
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--color-text-secondary);
}
.apl-bubble__cursor {
    color: var(--color-accent-secondary);
    animation: aplBlink 1s step-end infinite;
}
@keyframes aplBlink { 50% { opacity: 0; } }

/* ════════════════════════════════════════════
   6 · I MODULI — glass card (riuso)
   ════════════════════════════════════════════ */
.apl-modules__grid {
    margin-top: clamp(40px, 7vh, 72px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
}
.apl-module { position: relative; }
.apl-module__idx {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-accent-bright);
    letter-spacing: 0.06em;
}
.apl-module__name {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin: var(--space-3) 0 var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-glass);
}
.apl-module__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.7;
}
.apl-module--more {
    background: linear-gradient(135deg, rgba(247,183,49,0.10), rgba(232,86,90,0.05));
    border-color: rgba(247,183,49,0.28);
}
.apl-module--more .apl-module__idx { color: #F7B731; }

/* ════════════════════════════════════════════
   7 · LA PROVA — counter (riuso stile numeri)
   ════════════════════════════════════════════ */
.apl-proof { text-align: center; }
.apl-proof__inner { display: flex; flex-direction: column; align-items: center; }
.apl-proof__stat { margin: 0; }
.apl-proof__num {
    font-family: var(--font-headline);
    font-size: clamp(5rem, 18vw, 14rem);
    line-height: 0.9;
    color: #F7B731;
    letter-spacing: -0.03em;
    text-shadow: 0 0 60px rgba(247,183,49,0.25);
}
.apl-proof__label {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-top: var(--space-6);
    max-width: 30ch;
}
.apl-proof__label strong { color: var(--color-text-primary); }
.apl-proof__foot {
    margin-top: clamp(32px, 5vh, 56px);
    padding-top: clamp(24px, 4vh, 40px);
    border-top: 1px solid var(--color-border-glass);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-dim);
}
.apl-proof__count { color: #F7B731; font-weight: 700; }

/* ════════════════════════════════════════════
   8 · LE CONFIGURAZIONI — tabella sobria
   ════════════════════════════════════════════ */
.apl-config__table {
    margin-top: clamp(40px, 6vh, 64px);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.apl-config__row {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1.4fr 1fr;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border-glass);
    align-items: center;
}
.apl-config__row:last-child { border-bottom: none; }
.apl-config__row--head {
    background: rgba(255,255,255,0.03);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-dim);
}
.apl-config__row span { font-size: var(--text-base); color: var(--color-text-secondary); }
.apl-config__row strong { color: var(--color-text-primary); font-family: var(--font-headline); font-size: var(--text-lg); }

.apl-config__note {
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 66ch;
}
.apl-config__note strong { color: var(--color-accent-bright); font-family: var(--font-mono); letter-spacing: 0.04em; }

/* Spazio riservato partner (vuoto per design finché gate non passa) */
.apl-config__partner { min-height: 0; }

@media (max-width: 760px) {
    .apl-config__row--head { display: none; }
    .apl-config__row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-5);
    }
    .apl-config__row span { display: flex; justify-content: space-between; gap: var(--space-4); }
    .apl-config__row span::before {
        content: attr(data-th);
        font-family: var(--font-mono);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-dim);
        align-self: center;
    }
    .apl-config__row span:first-child::before { content: ''; }
}

/* ════════════════════════════════════════════
   9 · CTA finale
   ════════════════════════════════════════════ */
.apl-cta {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(80px, 14vh, 200px) var(--space-6);
    border-top: 1px solid var(--color-border-glass);
    background:
        radial-gradient(ellipse 60% 60% at 50% 40%, rgba(99,102,241,0.18), transparent 70%);
}
.apl-cta__inner { max-width: 720px; }
.apl-cta__title {
    font-family: var(--font-headline);
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.1;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-5);
}
.apl-cta__sub {
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: clamp(32px, 5vh, 56px);
}
.apl-cta__btn { font-size: var(--text-base); padding: 20px 44px; }

/* ════════════════════════════════════════════
   REDUCED MOTION — pagina statica dignitosa
   (il JS non inizializza Lenis/GSAP; qui garantiamo
    che tutto sia visibile e i box in posa fissa)
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .apl-graph { height: auto; }
    .apl-graph__stage { position: relative; height: auto; min-height: auto; padding: clamp(60px,10vh,120px) 0; }
    .apl-graph__edges line, .apl-node { opacity: 1 !important; }
    .apl-scrollhint { display: none; }
    .apl-h2 .accent, .apl-claim span { animation: none; }
}