/*
 * Anteprima Wau — luigipromptdesigner.it (prova locale, v2 del 5/10/2026)
 * Bollino «✦ anteprima» sempre visibile accanto ai link interni del contenuto:
 * il link porta alla pagina, il bollino apre il portale (metà schermo, bordi irregolari
 * e trasparenti, pagina sotto visibile e scorrevole).
 */

@property --wau-r {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* ---------- Il bollino ---------- */
.wau-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin-left: 0.5em;
    padding: 0.32em 0.75em;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
    font: 700 0.72rem/1 'Inter', -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.wau-badge::before { content: ''; position: absolute; inset: -9px -5px; }   /* area di tocco ≥ 44px */
.wau-badge:hover { background: rgba(124, 58, 237, 0.16); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10); }
.wau-badge:focus-visible { outline: 3px solid #1e3a5f; outline-offset: 3px; }
.wau-badge[aria-expanded="true"] { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.wau-stella { display: inline-block; animation: wau-brilla 2.8s ease-in-out infinite; }
@keyframes wau-brilla {
    0%, 70%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    80% { transform: scale(1.45) rotate(20deg); opacity: 0.75; }
    90% { transform: scale(0.9) rotate(-8deg); opacity: 1; }
}

/* nelle schede dei servizi il bollino va sotto il link, allineato a sinistra */
.servizio > .wau-badge { align-self: flex-start; margin: 0.15rem 0 0; }

/* sui bottoni il bollino sta sull'angolo in alto */
.wau-presa { position: relative; display: inline-flex; }
.wau-presa > .wau-badge {
    position: absolute;
    top: 0;
    right: 16px;
    margin: 0;
    transform: translateY(-55%);
    background: #fff;
    box-shadow: 0 2px 10px rgba(30, 58, 95, 0.12);
}
.wau-presa > .wau-badge[aria-expanded="true"] { background: #7c3aed; }
@media (max-width: 600px) {
    .azioni > .wau-presa { width: 100%; }
    .wau-presa > .btn { width: 100%; }
}

/* ---------- Il portale ---------- */
.wau {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;   /* la pagina sotto resta scorrevole e cliccabile */
}
.wau[hidden] { display: none; }

.wau-cornice {
    --wau-w: clamp(420px, 50vw, 700px);
    --wau-h: clamp(340px, 54vh, 600px);
    position: fixed;
    left: calc(50vw - var(--wau-w) / 2);
    top: calc(50vh - var(--wau-h) / 2);
    width: var(--wau-w);
    height: var(--wau-h);
}

/* l'alone sognante intorno: viola, oro e blu che respirano */
.wau-alone {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse at 20% 25%, rgba(124, 58, 237, 0.40), transparent 60%),
        radial-gradient(ellipse at 82% 78%, rgba(244, 182, 67, 0.42), transparent 58%),
        radial-gradient(ellipse at 70% 15%, rgba(30, 58, 95, 0.22), transparent 55%);
    filter: blur(38px);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.wau.aperto .wau-alone {
    opacity: 0.9;
    transform: scale(1);
    animation: wau-respiro 6s ease-in-out 0.9s infinite alternate;
}
@keyframes wau-respiro {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1.06) rotate(2deg); }
}

/* il vetro: tela semitrasparente e sfocata, bordi irregolari (forma SVG, nuova a ogni apertura)
   + cerchio morbido che si allarga dal punto toccato */
.wau-portale {
    --wau-x: 50%;
    --wau-y: 50%;
    --wau-forma: radial-gradient(closest-side, #000 82%, transparent);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: calc(var(--wau-h) * 0.09) 10.5% calc(var(--wau-h) * 0.085);
    background: #f5f2e8;   /* pieno: la trasparenza la fa SOLO la maschera dei bordi (senza la sfocatura, che non tutti i motori applicano, un 94% lasciava leggere il testo sotto) */
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    pointer-events: auto;
    -webkit-mask:
        var(--wau-forma) center / 100% 100% no-repeat,
        radial-gradient(circle at var(--wau-x) var(--wau-y), #000 var(--wau-r), transparent calc(var(--wau-r) + 90px));
    -webkit-mask-composite: source-in;
    mask:
        var(--wau-forma) center / 100% 100% no-repeat,
        radial-gradient(circle at var(--wau-x) var(--wau-y), #000 var(--wau-r), transparent calc(var(--wau-r) + 90px));
    mask-composite: intersect;
    filter: blur(8px);
    opacity: 0;
    transform: scale(0.94);
    transition:
        --wau-r 0.8s cubic-bezier(0.22, 0.75, 0.2, 1),
        filter 0.55s ease,
        opacity 0.3s ease,
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wau.aperto .wau-portale {
    --wau-r: 130vmax;
    filter: blur(0);
    opacity: 1;
    transform: none;
}
.wau.chiude .wau-portale { transition-duration: 0.5s, 0.4s, 0.45s, 0.5s; }

.wau-testa {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(30, 58, 95, 0.12);
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}
/* la barra si afferra per spostare il pannello */
.wau-testa { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.wau.trascina .wau-testa { cursor: grabbing; }
.wau-maniglia {
    flex: none;
    margin-right: -0.2rem;
    color: rgba(30, 58, 95, 0.45);
    font-size: 1.05rem;
    line-height: 1;
}
.wau.trascina .wau-maniglia { color: #7c3aed; }
/* mentre è «in mano» si solleva: alone più largo e più acceso */
.wau.trascina .wau-alone { inset: -16%; opacity: 1; transition: opacity 0.2s ease, inset 0.25s ease; }

.wau-etichetta {
    flex: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6d28d9;
}
.wau-titolo {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e3a5f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wau-chiudi {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(30, 58, 95, 0.09);
    color: #1e3a5f;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.wau-chiudi:hover { background: rgba(124, 58, 237, 0.16); }
.wau-chiudi:focus-visible, .wau-apri:focus-visible { outline: 3px solid #1e3a5f; outline-offset: 3px; }

.wau-vetro {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    cursor: pointer;
    /* il contenuto si scioglie nel vetro in alto e in basso, come nel video */
    -webkit-mask: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 22px), transparent);
    mask: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 22px), transparent);
}
.wau-vetro:focus { outline: none; }
.wau-carico { padding: 1.5rem 0.5rem; display: grid; gap: 0.9rem; }
.wau-carico span {
    display: block;
    height: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.10), rgba(244, 182, 67, 0.24), rgba(124, 58, 237, 0.10));
    background-size: 200% 100%;
    animation: wau-luccica 1.4s linear infinite;
}
.wau-carico span:nth-child(1) { width: 65%; height: 1.6rem; }
.wau-carico span:nth-child(3) { width: 85%; }
@keyframes wau-luccica { to { background-position: -200% 0; } }

.wau-piede {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(30, 58, 95, 0.12);
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}
.wau-apri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
}
.wau-apri:hover { filter: brightness(1.08); }

/* ---------- Telefono: galleggia vicino al bollino, posizione un po' diversa ogni volta ---------- */
@media (max-width: 700px) {
    .wau-cornice {
        --wau-w: 94vw;
        --wau-h: 50dvh;
    }
    .wau-alone { inset: -7%; }
    .wau-portale {
        padding: calc(var(--wau-h) * 0.09) 9.5% calc(var(--wau-h) * 0.09);
        transform: translateY(14%) scale(0.95);
    }
    .wau-apri { flex: 1; }
}

/* Chi preferisce meno movimento: solo una dissolvenza breve */
@media (prefers-reduced-motion: reduce) {
    .wau-portale { --wau-r: 130vmax; filter: none; transform: none; transition: opacity 0.2s ease; }
    .wau.aperto .wau-alone { animation: none; }
    .wau-alone { transition: opacity 0.2s ease; transform: none; }
    .wau-carico span, .wau-stella { animation: none; }
}