/* components/animations.css — GlitchZone · GZ-ANIMS v1 (Step 2.6)
   ------------------------------------------------------------------
   Gemello CSS del blocco JS GZ-ANIMS di glitchzone-shared.js (Step 2.5). Estratto
   byte-identico dal blocco "GZ-ANIMS v1" di index_v13 (righe 863-937; identico su
   tutte le pagine di contenuto). Tre effetti:
     1) shimmer reveal on-scroll  — .gz-shimmer / .gz-visible (sulle .article-card)
     2) hover RGB-split sull'icona prodotto — .article-card:hover ...
     3) glitch ambient sul logo   — .gz-glitching (aggiunta dal JS, GLOBALE)
   Dipendenza: gz-base. Caricato SEMPRE (l'ambient-logo è globale; shimmer/hover
   dormono finché non esistono .article-card, cioè dagli step pages). Firewall:
   zero riferimenti a techzone.
   NB: i colori dell'aberrazione cromatica (#ff0080 magenta, #00ffff ciano) restano
   hardcoded come nello statico — #00ffff non è un token di palette; effetto glitch voluto. */

/* 1) Shimmer reveal on scroll */
.gz-shimmer { opacity: 0; transform: translateY(12px); position: relative; overflow: hidden; }
.gz-shimmer.gz-visible {
    animation: gzShimmerIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.gz-shimmer.gz-visible::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.05) 40%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.05) 60%,
        transparent 100%);
    transform: translateX(-100%);
    animation: gzShimmerSweep 0.85s ease-out forwards;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes gzShimmerIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes gzShimmerSweep {
    to { transform: translateX(100%); }
}

/* 2) Hover RGB-split sull'icona prodotto */
.article-card .card-image,
.article-card .article-image,
.article-card .product-image,
.article-card .image-wrap { position: relative; }
.article-card .card-image > *,
.article-card .article-image > *,
.article-card .product-image > *,
.article-card .image-wrap > * { transition: filter 0.3s ease, transform 0.3s ease; }
.article-card:hover .card-image > .glyph,
.article-card:hover .article-image > .glyph,
.article-card:hover .product-image > .glyph,
.article-card:hover .image-wrap > .glyph,
.article-card:hover .card-emoji,
.article-card:hover .article-emoji {
    animation: gzRgbSplit 0.45s ease-out;
}
@keyframes gzRgbSplit {
    0%   { text-shadow: 0 0 0 transparent; transform: translateX(0); }
    30%  { text-shadow: -2px 0 0 #ff0080, 2px 0 0 #00ffff; transform: translateX(1px); }
    60%  { text-shadow:  2px 0 0 #ff0080, -2px 0 0 #00ffff; transform: translateX(-1px); }
    100% { text-shadow: 0 0 0 transparent; transform: translateX(0); }
}

/* 3) Glitch ambient — usato dal JS sul logo */
.gz-glitching {
    animation: gzAmbientGlitch 220ms steps(2, end);
}
@keyframes gzAmbientGlitch {
    0%, 100% { transform: translate(0); text-shadow: 0 0 0 transparent; }
    20%  { transform: translate(-2px, 1px); text-shadow: -2px 0 0 #ff0080, 2px 0 0 #00ffff; }
    45%  { transform: translate(2px, -1px); text-shadow: 2px 0 0 #ff0080, -2px 0 0 #00ffff; }
    70%  { transform: translate(-1px, 0); text-shadow: -1px 0 0 #ff0080, 1px 0 0 #00ffff; }
}

/* Disattiva tutto se l'utente preferisce ridurre il movimento */
@media (prefers-reduced-motion: reduce) {
    .gz-shimmer, .gz-shimmer.gz-visible { opacity: 1 !important; transform: none !important; animation: none !important; }
    .gz-shimmer.gz-visible::before { display: none !important; }
    .article-card:hover .card-image > .glyph,
    .article-card:hover .article-image > .glyph,
    .article-card:hover .product-image > .glyph,
    .article-card:hover .image-wrap > .glyph,
    .article-card:hover .card-emoji,
    .article-card:hover .article-emoji { animation: none !important; }
    .gz-glitching { animation: none !important; }
}