/* single-base.css — GlitchZone · zona CONDIVISA dei due single (Step 5.1)
   ------------------------------------------------------------------------
   ~50-60% del CSS-corpo è identico fra single-gz_pollata e single-gz_rumor:
   estratto UNA volta qui. Caricato SOLO sui single (enqueue condizionale
   is_singular(['gz_pollata','gz_rumor']), dep gz-base). Gli esclusivi vanno
   in single-pollata.css (5.2) e single-rumor.css (5.3).
   Sorgenti: glitchzone-statico/articolo_v13.html (canonico per la zona
   condivisa) + rumors_v13.html (poll unificato). Mappa §2/§5/§8.

   SCELTE (vedi INNESCO Step 5.1):
   - RENAME hero-card → `.article-hero-card` (precedente techzone: il single usa
     nomi distinti dall'archivio). I nomi INTERNI restano byte-fedeli allo statico
     ma scritti come DISCENDENTI di .article-hero-card → zero collisione con
     listing.css (.article-card/.article-image-content/.article-title = card-griglia).
   - soft-glitch + .signal-stamp RI-FORNITI qui: vivono solo in listing.css
     (archive-only) → sui single non si caricherebbero. (I due file non co-esistono
     mai → nessun conflitto.)
   - POLL UNIFICATO: un solo set `.poll-option` (design del rumor, più pulito),
     N colonne via --poll-cols (pollata=3, rumor=4); il template passa --poll-cols.
   - Colori hardcoded dello statico → var(--cat-*): fedele a vista (i valori
     coincidono col colore-sezione) e per-sezione. Es. rgba(255,0,128,.1)=--cat-soft.
   - Keyframe: dichiaro i NUOVI (intermittent-glitch, fadeInUp, slideInRight,
     cursorBlink, btnPulse) + ri-fornisco soft-glitch. NON ri-dichiaro onlineBlink
     (glitch-mode.css, sempre-on) né GZ-ANIMS (animations.css, sempre-on).
   - DELTA del rumor rimandati a single-rumor.css (5.3): two-column 280px (qui 300),
     emoji-hero 4.5rem (qui 5rem), .article-header 28px (qui 32px). */

/* ════════════ WRAPPER del <main> ════════════
   Contenitore dei single (≈ `.article-container` dello statico v13). Condiviso dai due
   single → STANDARD pagine-articolo = 960px (scelta proprietario 28 giu: più raccolto e
   centrato; era 1100). Più stretto del `.container` 1200px dell'archivio. */
.article-container { max-width: 960px; margin: 0 auto; padding: 32px 24px; }

/* ════════════ HERO CARD (rinominata) ════════════ */
.article-hero-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}
/* Barra superiore spessa (colore-sezione) */
.article-hero-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--cat-color); box-shadow: 0 0 15px var(--cat-glow); z-index: 4;
}
/* Bordo perimetrale continuo */
.article-hero-card::after {
    content: ''; position: absolute; inset: 0;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    z-index: 3; pointer-events: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.article-hero-card:hover::after {
    border-color: var(--cat-color);
    box-shadow: inset 0 0 20px var(--cat-soft); /* era rgba(255,0,128,.1)=accent.1 → --cat-soft */
}
.article-hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 50px -10px rgba(0,0,0,0.6);
}

/* Immagine hero (emoji-fallback D5; height/emoji del rumor → override 5.3) */
.article-hero-card .article-image {
    height: 240px;
    background: linear-gradient(45deg, #1a1a2e, #2d1b2e);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.article-hero-card .article-image::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
    pointer-events: none; z-index: 1;
}
.article-hero-card .article-image-content {
    font-size: 5rem; z-index: 2; transition: transform 0.3s ease;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}
/* D5: copertina reale (featured image) dentro l'hero → riempie e ritaglia (l'emoji
   è il fallback). Regola assente nello statico, che aveva solo l'emoji. */
.article-hero-card .article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* soft-glitch RI-FORNITO (in listing.css ma archive-only) */
@keyframes soft-glitch {
    0%   { clip-path: inset(0 0 0 0); transform: translate(0); filter: hue-rotate(0deg); }
    20%  { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 1px); }
    40%  { clip-path: inset(60% 0 20% 0); transform: translate(2px, -1px); filter: hue-rotate(15deg); }
    60%  { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 0); }
    80%  { clip-path: inset(0 0 0 0); transform: translate(1px, 0); filter: hue-rotate(-10deg); }
    100% { clip-path: inset(0 0 0 0); transform: translate(0); filter: hue-rotate(0deg); }
}
.article-hero-card:hover .article-image-content {
    transform: scale(1.05);
    animation: soft-glitch 0.5s linear;
}

.article-hero-card .article-header { padding: 32px 24px; }

/* Titolo intermittente */
@keyframes intermittent-glitch {
    0%, 95% { text-shadow: none; transform: translate(0); }
    96% { text-shadow: 2px 0 var(--primary), -2px 0 var(--accent); transform: translate(-2px, 0); }
    97% { text-shadow: -2px 0 var(--primary), 2px 0 var(--accent); transform: translate(2px, 0); }
    98%, 100% { text-shadow: none; transform: translate(0); }
}
.article-hero-card .article-title {
    font-family: 'Space Mono', monospace; font-size: 2rem; font-weight: 700;
    line-height: 1.3; margin-bottom: 16px; color: var(--text-primary);
    animation: intermittent-glitch 4s infinite;
}

/* Meta-row dell'hero (data · tempo-lettura · reazione). */
.article-hero-card .meta {
    display: flex; flex-wrap: wrap; gap: 16px;
    color: var(--text-muted); font-size: 0.85rem; font-family: 'Space Mono', monospace;
}
/* Sizing icone meta-hero (primitiva .icon-svg in base.css). Reazione =
   --cat-color; calendario/timer = colore-testo (currentColor ereditato). */
.article-hero-card .meta .icon-svg { vertical-align: -2px; margin-right: 3px; }
.article-hero-card .meta .icon-svg svg { width: 14px; height: 14px; }
/* Reazione = colore-sezione (come la card); calendario/timer = colore-testo. */
.article-hero-card .meta .meta-reaction .icon-svg { color: var(--cat-color); }

/* Cursore lampeggiante (translation/verdict) — colore-sezione */
@keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.cursor {
    color: var(--cat-color); animation: cursorBlink 1s infinite;
    margin-left: 2px; font-weight: 700; display: inline-block;
}

/* ════════════ LAYOUT A DUE COLONNE ════════════ */
.two-column-layout {
    display: grid; grid-template-columns: 1fr 300px; gap: 32px;
    margin-top: 24px; align-items: start;
}
/* Senza sidebar (es. nessun correlato) → una colonna, niente binario fantasma da 300px.
   Il template aggiunge .has-sidebar solo quando la colonna laterale c'è. */
.two-column-layout:not(.has-sidebar) { grid-template-columns: 1fr; }
.main-column { min-width: 0; }
.sidebar {
    position: sticky; top: 90px; align-self: start;
    animation: slideInRight 0.7s ease forwards 0.4s; opacity: 0;
}
.sidebar-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
}
/* Header sidebar (es. "// correlati", "// altre favole") — più bianco e leggermente più
   grosso (richiesta proprietario 25 giu); il // del commento prende il colore-sezione. */
.sidebar-title { font-family: 'Space Mono', monospace; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 18px; }
.sidebar-title .sl { color: var(--cat-color); margin-right: 6px; }
.sidebar-subtitle { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 20px; }

/* ── Correlati / "Altre Favole" — lista-terminale: righe `›  /categoria` + titolo.
   Selezione/hover = bordo cat-color che SEGUE LA FORMA (no barretta) + glow + cursore.
   Condiviso ai due single. Reduced-motion: la guard globale neutralizza cursorBlink. ── */
.correlati-list { display: flex; flex-direction: column; gap: 7px; }
.correlati-row {
    display: block; padding: 11px 13px; border-radius: var(--radius-md);
    text-decoration: none; border: 1.5px solid var(--border); /* bordo tenue a riposo: delimita le righe (hover → cat-color) */
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.correlati-row .cmd { font-family: 'Space Mono', monospace; font-size: 0.67rem; color: var(--cat-color); display: block; letter-spacing: 0.3px; }
.correlati-row .ttl { font-size: 0.85rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.32; }
.correlati-row:hover, .correlati-row:focus-visible {
    border-color: var(--cat-color); background: var(--cat-soft);
    box-shadow: 0 0 14px var(--cat-glow), inset 0 0 12px var(--cat-soft); outline: none;
}
.correlati-row:hover .ttl, .correlati-row:focus-visible .ttl { color: var(--text-primary); }
.correlati-row:hover .ttl::after, .correlati-row:focus-visible .ttl::after {
    content: ''; display: inline-block; width: 7px; height: 0.95em; margin-left: 6px;
    vertical-align: -2px; background: var(--cat-color); box-shadow: 0 0 8px var(--cat-glow);
    animation: cursorBlink 1s infinite;
}

/* ════════════ POLL (UNIFICATO — design del rumor, N opzioni via --poll-cols) ════════════ */
.poll-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px; margin: 24px 0;
    isolation: isolate;
    animation: fadeInUp 0.6s ease forwards 0.6s; opacity: 0;
}
.poll-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.poll-title { font-family: 'Space Mono', monospace; font-size: 0.85rem; color: var(--cat-color); text-shadow: 0 0 10px var(--cat-glow); font-weight: 700; }
.poll-voters { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: var(--text-muted); }
/* "?" easter-egg sui numeri finti del poll — discreto; rivela una nota su tap (mobile)
   e hover (desktop). Disclosure: .is-open via JS. margin-right:auto spinge i voti a destra
   e tiene il "?" incollato al titolo. */
.poll-faq { position: relative; display: inline-flex; margin-left: 8px; margin-right: auto; }
/* Poll SENZA titolo (es. le news): il "?" è il primo elemento dell'header → azzero il margine
   pensato per staccarlo dal titolo, così torna a filo con la domanda sotto (fix 9 lug). */
.poll-faq:first-child { margin-left: 0; }
.poll-faq-btn {
    position: relative;              /* per l'area-target ::before */
    width: 16px; height: 16px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: transparent; color: var(--text-muted);
    font-family: 'Space Mono', monospace; font-size: 0.62rem; line-height: 1; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Area cliccabile/tappabile ≥24px (WCAG 2.5.8 Target Size) tenendo il cerchio visibile a 16px. */
.poll-faq-btn::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 24px; height: 24px; transform: translate(-50%, -50%);
}
.poll-faq-btn:hover, .poll-faq-btn:focus-visible, .poll-faq.is-open .poll-faq-btn {
    color: var(--cat-color); border-color: var(--cat-color); box-shadow: 0 0 8px var(--cat-glow);
}
.poll-faq-pop {
    position: absolute; bottom: calc(100% + 8px); left: 0;
    width: max-content; max-width: min(240px, 70vw);
    background: var(--background); border: 1px solid var(--cat-color); border-radius: var(--radius-md);
    padding: 10px 12px; font-family: 'Space Mono', monospace; font-size: 0.72rem; line-height: 1.45;
    color: var(--text-secondary); text-align: left; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease; z-index: 5;
}
.poll-faq:hover .poll-faq-pop, .poll-faq.is-open .poll-faq-pop {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.poll-question { color: var(--text-primary); margin-bottom: 20px; font-size: 1.05rem; font-weight: 500; }

.poll-options { display: grid; grid-template-columns: repeat(var(--poll-cols, 3), 1fr); gap: 10px; margin-bottom: 16px; }
.poll-option {
    background: transparent; border: 2px solid var(--border); padding: 14px 8px;
    border-radius: var(--radius-md); cursor: pointer; text-align: center;
    transition: all 0.3s ease; display: flex; flex-direction: column;
    align-items: center; gap: 6px; font-family: 'Space Mono', monospace;
    position: relative; overflow: hidden;
}
.poll-option::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}
.poll-option:hover::before { left: 100%; }
.poll-option:hover { border-color: var(--cat-color); background: var(--cat-soft); }
.poll-option.voted {
    border-color: var(--cat-color); background: var(--cat-color);
    color: var(--background); box-shadow: 0 0 15px var(--cat-glow);
}
.poll-option.voted .poll-label { color: var(--background); }
.poll-emoji { font-size: 1.6rem; transition: transform 0.3s ease; }
.poll-option:hover .poll-emoji { transform: scale(1.1); }
.poll-label { font-size: 0.65rem; color: var(--text-secondary); font-weight: 500; }
.poll-percent { font-family: 'Space Mono', monospace; color: var(--cat-color); font-weight: 700; font-size: 0.85rem; opacity: 0; transition: opacity 0.3s; }
.poll-box.revealed .poll-percent { opacity: 1; }
.poll-option.voted .poll-percent { color: var(--background); }
.poll-result-bar { height: 6px; background: var(--surface-light); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.poll-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cat-color), var(--primary)); width: 0; transition: width 0.8s ease; }
/* Leva 2 — la barra "trucca": al voto SFORA oltre il risultato e poi si assesta
   (pollo-metro rigged), con un guizzo glitch (aberrazione RGB sul contenitore). La
   larghezza-verità resta l'inline width (robusto se l'anim è throttlata in tab nascosta);
   l'animazione è solo flourish. Reduced-motion: niente .rigging (gestito dal JS). */
.poll-bar-fill.rigging { animation: pollBarRig 0.9s ease forwards; }
@keyframes pollBarRig {
    0%   { width: 0; }
    55%  { width: var(--rig-overshoot, 100%); }
    78%  { width: var(--rig-target, 100%); }
    87%  { width: calc(var(--rig-target, 100%) * 0.94); }
    100% { width: var(--rig-target, 100%); }
}
.poll-result-bar.rigging { animation: pollBarGlitch 0.5s ease 1; }
@keyframes pollBarGlitch {
    0%, 100% { transform: translateX(0); box-shadow: none; }
    25%      { transform: translateX(-2px); box-shadow: -3px 0 0 rgba(255, 0, 128, 0.7), 3px 0 0 rgba(0, 255, 255, 0.7); }
    55%      { transform: translateX(2px);  box-shadow: 3px 0 0 rgba(255, 0, 128, 0.7), -3px 0 0 rgba(0, 255, 255, 0.7); }
    80%      { transform: translateX(-1px); box-shadow: none; }
}
.poll-verdict {
    font-family: 'Space Mono', monospace; font-size: 0.8rem; color: var(--primary);
    text-align: center; min-height: 1.2em; text-shadow: 0 0 10px var(--primary-glow);
}
/* Cursore lampeggiante del verdetto-poll (typewriter, JS 5.4) — verde, su ENTRAMBI i single
   (il poll è condiviso → vive qui, non in single-rumor.css). cursorBlink è già qui sopra. */
.verdict-cursor { color: var(--primary); animation: cursorBlink 1s infinite; font-weight: 700; }

/* ════════════ ANTI-POLLO BOX (giallo, isolato dal noise) ════════════ */
@keyframes btnPulse {
    0%   { box-shadow: 0 0 0 0 var(--yellow-glow); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.anti-pollo-box {
    background: linear-gradient(135deg, rgba(255,204,0,0.1) 0%, rgba(20,20,20,0) 100%);
    border: 1px solid var(--yellow); border-radius: var(--radius-lg);
    padding: 32px; margin: 32px 0; text-align: center;
    box-shadow: 0 0 30px var(--yellow-glow); transition: transform 0.3s ease;
    position: relative; isolation: isolate; background-color: var(--background);
}
.anti-pollo-box::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,204,0,0.1) 0%, rgba(20,20,20,0) 100%);
    border-radius: var(--radius-lg); z-index: -1;
}
.anti-pollo-box:hover { transform: translateY(-2px); }
.anti-pollo-icon { font-size: 3rem; margin-bottom: 16px; display: block; }
.anti-pollo-title { font-family: 'Space Mono', monospace; font-size: 1.2rem; color: var(--yellow); margin-bottom: 12px; text-shadow: 0 0 15px var(--yellow-glow); }
.anti-pollo-box p { color: white; margin-bottom: 24px; font-size: 1rem; }
.anti-pollo-cta {
    display: inline-block; background: var(--yellow); color: var(--background);
    padding: 12px 24px; border-radius: var(--radius-sm); text-decoration: none;
    font-family: 'Space Mono', monospace; font-weight: 700; transition: all 0.3s ease;
    position: relative; overflow: hidden; animation: btnPulse 2s infinite;
}
.anti-pollo-cta::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}
.anti-pollo-cta:hover::before { left: 100%; }
.anti-pollo-cta:hover { background: #ffdb4d; box-shadow: 0 0 25px var(--yellow-glow); transform: translateY(-2px); animation: none; }
/* Bottone SPENTO (span, label senza cta_url): stesso vestito, niente inviti al click. */
.anti-pollo-cta--off { cursor: default; animation: none; }
.anti-pollo-cta--off:hover { background: var(--yellow); box-shadow: none; transform: none; }
.anti-pollo-cta--off:hover::before { left: -100%; }
/* Dicitura di trasparenza affiliazione — sempre appaiata al bottone (3 lug). */
.anti-pollo-disclosure { display: block; margin-top: 10px; font-size: 0.75rem; color: var(--text-secondary); opacity: 0.8; }

/* ════════════ KEYFRAME D'INGRESSO (condivisi) ════════════ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* ════════════ RESPONSIVE (condiviso) ════════════ */
@media (max-width: 900px) {
    .two-column-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; margin-top: 32px; }
}
@media (max-width: 768px) {
    .article-hero-card .article-title { font-size: 1.6rem; }
    .poll-options { grid-template-columns: repeat(2, 1fr); }
}