/* techzone-promo.css — banner-a-comparsa cross-promo GZ → Tech-Zone (layout 26 giu).
   ------------------------------------------------------------------------------------
   Mirror della promo TZ→GZ (techzone/css/components/glitchzone.css — si COPIA, non si linka):
   banner FISSO basso-sx, nascosto (opacity:0 + pointer-events:none), rivelato dal JS via
   .visible con un glitch-reveal (clip-path/skew). Tech-Zone in GZ = verde (--primary), come la
   techzone-banner. Caricato su is_singular('gz_pollata'). */
.tz-promo {
    position: fixed; bottom: 88px; left: 24px; z-index: 90;  /* bottom 88 = sopra il footer-compact (65px): a 24 lo copriva (come capitò a TZ) */
    opacity: 0; pointer-events: none;
    padding: 8px 8px 0 0;                 /* riserva l'angolo per la × (come TZ) */
}
.tz-promo.visible {
    pointer-events: auto;
    animation: tzPromoAppear 0.8s steps(1) forwards;
}
/* COLORE = BLU brand di Tech-Zone (#3b82f6), NON la palette GZ: è il colore dell'ALTRO sito
   (su GZ il blu non esiste) → la card stacca dal dark e dice "sito serio", non è anonima. */
.tz-promo-link {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 18px;
    background: color-mix(in srgb, #3b82f6 8%, var(--background));   /* tinta blu per staccare dal dark */
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: var(--radius-md); text-decoration: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(59, 130, 246, 0.22);  /* alone blu → pop */
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.tz-promo-link:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
}
.tz-promo-logo {
    font-family: 'Space Mono', monospace; font-size: 0.95rem; font-weight: 700;
    color: #5b9bf8; line-height: 1; text-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}
.tz-promo-link:hover .tz-promo-logo { animation: tzPromoGlitch 0.3s steps(2) 1; }
.tz-promo-accent { color: var(--text-primary); }   /* "-Zone" neutro (due-tono leggibile) */
.tz-promo-text {
    font-family: 'Space Mono', monospace; font-size: 0.68rem; color: var(--text-muted); font-weight: 500;
}
.tz-promo-close {
    position: absolute; top: 0; right: 0; width: 22px; height: 22px;
    border-radius: 50%; background: var(--surface-light); color: var(--text-secondary);
    border: 2px solid var(--background); font-size: 13px; line-height: 1;
    cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease;
    z-index: 1;
}
.tz-promo-close:hover { background: var(--border); color: var(--text-primary); }

@keyframes tzPromoAppear {
    0%   { opacity: 1; clip-path: inset(40% 0 60% 0); transform: translate(-3px, 2px) skewX(-2deg); }
    8%   { opacity: 0; clip-path: inset(0); transform: translate(0); }
    15%  { opacity: 1; clip-path: inset(10% 0 85% 0); transform: translate(4px, -1px) skewX(3deg); }
    22%  { opacity: 0; }
    30%  { opacity: 1; clip-path: inset(60% 0 5% 0); transform: translate(-2px, 3px) skewX(-1deg); }
    38%  { opacity: 0; }
    50%  { opacity: 1; clip-path: inset(20% 0 30% 0); transform: translate(2px, -2px); }
    58%  { opacity: 0; }
    68%  { opacity: 1; clip-path: inset(5% 0 5% 0); transform: translate(-1px, 1px); }
    75%  { opacity: 0.6; clip-path: inset(0); transform: translate(1px, 0); }
    85%  { opacity: 1; clip-path: inset(0); transform: translate(0); }
    100% { opacity: 1; clip-path: inset(0); transform: translate(0); }
}
@keyframes tzPromoGlitch {
    0%   { text-shadow: 2px 0 var(--accent), -2px 0 #00ffff; }
    50%  { text-shadow: 1px -1px var(--accent), -1px 1px #00ffff; }
    100% { text-shadow: 0 0 12px rgba(59, 130, 246, 0.6); }
}
/* reduced-motion: niente glitch-reveal, comparsa pulita */
@media (prefers-reduced-motion: reduce) {
    .tz-promo.visible { animation: none; opacity: 1; }
    .tz-promo-link:hover .tz-promo-logo { animation: none; }
}
/* Mobile */
@media (max-width: 768px) {
    .tz-promo { bottom: 120px; left: 16px; }  /* il footer-compact su mobile impila più alto (stima, da tarare a vista) */
    .tz-promo-link { padding: 11px 14px; }
}