/* ════════════════════════════════════════════════════════════════════ ig-hint.css — Hover hint system per le card .ig-card del libro ──────────────────────────────────────────────────────────────────── Wash accent del capitolo (α 80%) + SVG hint bianco animato che simula il GESTO principale dell'utente sulla pagina interattiva. Carica una volta sola (es. dal della pagina capitoli e delle pagine interattive). Funziona insieme a ig-hint.js che inietta i template SVG nel DOM e gestisce hover → animazione. ════════════════════════════════════════════════════════════════════ */ /* ── Token RGB del colore-capitolo (necessari per rgba wash) ── Affianca i tuoi --accent del capitolo. Aggiusta i selettori ai tuoi (.section.green ecc.). */ .section.green, [data-chapter="acoustics"] { --accent-rgb: 39,174,96; } .section.orange, [data-chapter="electroacoustic"]{ --accent-rgb: 230,126,34; } .section.red, [data-chapter="processing"] { --accent-rgb: 231,76,60; } .section.teal, [data-chapter="synthesis"] { --accent-rgb: 26,188,156; } .section.navy, [data-chapter="history"] { --accent-rgb: 44,62,80; } /* ── Wash + hint base, scopati a .ig-card .preview ── */ .ig-card .preview { position: relative; } .ig-card .preview .wash{ position: absolute; inset: 0; background: rgba(var(--accent-rgb, 39,174,96), 1); opacity: 0; transition: opacity .12s ease; pointer-events: none; z-index: 1; } .ig-card .preview .hint{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s ease; pointer-events: none; z-index: 2; /* Token bianchi dell'hint (override del nero default delle path SVG) */ --hint-stroke: #fff; --hint-fill: #fff; --hint-soft: #fff; --hint-track: rgba(255,255,255,0.55); } .ig-card .preview .hint svg{ display: block; overflow: visible; width: 88%; height: 84%; } /* Attivazione hover SOLO su device con vero hover (no mobile touch) */ @media (hover: hover) and (pointer: fine) { .ig-card:hover .preview .wash { opacity: 1; } .ig-card:hover .preview .hint { opacity: 1; } /* Disabilita lo zoom immagine quando appare l'hint, altrimenti competono */ .ig-card:hover .preview img { transform: none !important; } } /* ════════════════════════════════════════════════════════════════════ PER-TOPIC ANIMATIONS Le keyframes sono attivate dalla classe .play-on (aggiunta da ig-hint.js al div .hint quando il mouse entra sulla card). ════════════════════════════════════════════════════════════════════ */ /* ─── 1. SOUNDWAVE ─── */ .hint-soundwave .wave{ fill:none;stroke:var(--hint-fill);stroke-width:2.2;stroke-linecap:round; stroke-dasharray:240;stroke-dashoffset:240; } .play-on .hint-soundwave .wave{animation:sw-draw 2.6s ease-in-out infinite;} @keyframes sw-draw{ 0%{stroke-dashoffset:240;} 60%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;opacity:0;} } /* ─── 2. WAVELENGTH — bracket λ pulsa + onda cambia densità ─── */ .hint-wavelength .wave-a, .hint-wavelength .wave-b{ fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round; } .hint-wavelength .wave-b{opacity:0;} .hint-wavelength .bracket{stroke:var(--hint-soft);stroke-width:1.4;fill:none;stroke-linecap:round;} .hint-wavelength .lambda{ font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;fill:var(--hint-fill); } .hint-wavelength .bracket-a, .hint-wavelength .lambda-a{transform-origin:center;} .hint-wavelength .bracket-b, .hint-wavelength .lambda-b{opacity:0;} .play-on .hint-wavelength .wave-a, .play-on .hint-wavelength .bracket-a, .play-on .hint-wavelength .lambda-a{animation:wl-fade-a 1.8s infinite;} .play-on .hint-wavelength .wave-b, .play-on .hint-wavelength .bracket-b, .play-on .hint-wavelength .lambda-b{animation:wl-fade-b 1.8s infinite;} @keyframes wl-fade-a{0%,28%{opacity:1;}36%,72%{opacity:0;}80%,100%{opacity:1;}} @keyframes wl-fade-b{0%,28%{opacity:0;}36%,72%{opacity:1;}80%,100%{opacity:0;}} /* ─── 3. PITCH — slider su/giù, onda cambia densità ─── */ .hint-pitch .wave-low, .hint-pitch .wave-high{ fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round; } .hint-pitch .wave-high{opacity:0;} .hint-pitch .track{stroke:var(--hint-track);stroke-width:1.4;stroke-linecap:round;} .hint-pitch .knob{fill:var(--hint-fill);} .play-on .hint-pitch .knob{animation:pt-knob 2.4s ease-in-out infinite;} .play-on .hint-pitch .wave-low{animation:pt-low 2.4s ease-in-out infinite;} .play-on .hint-pitch .wave-high{animation:pt-high 2.4s ease-in-out infinite;} @keyframes pt-knob{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}} @keyframes pt-low {0%,100%{opacity:1;}50%{opacity:0;}} @keyframes pt-high{0%,100%{opacity:0;}50%{opacity:1;}} /* ─── 4. PHASE — due onde sovrapposte, una scorre orizzontalmente ─── */ .hint-soundwave_phase .wave-top, .hint-soundwave_phase .wave-bot{ fill:none;stroke:var(--hint-fill);stroke-width:1.8;stroke-linecap:round; } .hint-soundwave_phase .wave-bot{opacity:0.55;} .play-on .hint-soundwave_phase .wave-bot{animation:ph-shift 3s ease-in-out infinite;} @keyframes ph-shift{0%,100%{transform:translateX(0);}50%{transform:translateX(14px);}} /* ─── 5. BEATS — numero ↑ + onda più densa ─── */ .hint-beats .lbl{font-family:'Montserrat',sans-serif;font-weight:900;font-size:18px;fill:var(--hint-fill);} .hint-beats .unit{font-family:'Montserrat',sans-serif;font-weight:700;font-size:9px;fill:var(--hint-soft);opacity:0.7;letter-spacing:0.06em;} .hint-beats .arrow{fill:var(--hint-fill);transform-origin:center;transform-box:fill-box;} .hint-beats .wave{fill:none;stroke:var(--hint-fill);stroke-width:1.6;stroke-linecap:round;} .hint-beats .num8,.hint-beats .num9,.hint-beats .wave-8,.hint-beats .wave-9{opacity:0;} .play-on .hint-beats .arrow{animation:bt-arrow 1.5s ease-in-out infinite;} .play-on .hint-beats .num7,.play-on .hint-beats .wave-7{animation:bt-n7 4.5s steps(1,end) infinite;} .play-on .hint-beats .num8,.play-on .hint-beats .wave-8{animation:bt-n8 4.5s steps(1,end) infinite;} .play-on .hint-beats .num9,.play-on .hint-beats .wave-9{animation:bt-n9 4.5s steps(1,end) infinite;} @keyframes bt-arrow{0%,100%{transform:translateY(0);opacity:0.45;}35%{transform:translateY(-3px);opacity:1;}50%{transform:translateY(0);opacity:1;}} @keyframes bt-n7{0%,33%{opacity:1;}33.01%,100%{opacity:0;}} @keyframes bt-n8{0%,33%{opacity:0;}33.01%,66%{opacity:1;}66.01%,100%{opacity:0;}} @keyframes bt-n9{0%,66%{opacity:0;}66.01%,100%{opacity:1;}} /* ─── 6. SPECTRUM — barre FFT pulsanti ─── */ .hint-spectrum .bar{fill:var(--hint-fill);transform-origin:center bottom;transform-box:fill-box;} .play-on .hint-spectrum .bar{animation:sp-bar 1.4s ease-in-out infinite;} .play-on .hint-spectrum .b1{animation-delay:0.00s;} .play-on .hint-spectrum .b2{animation-delay:0.08s;} .play-on .hint-spectrum .b3{animation-delay:0.16s;} .play-on .hint-spectrum .b4{animation-delay:0.24s;} .play-on .hint-spectrum .b5{animation-delay:0.32s;} .play-on .hint-spectrum .b6{animation-delay:0.20s;} .play-on .hint-spectrum .b7{animation-delay:0.40s;} .play-on .hint-spectrum .b8{animation-delay:0.12s;} .play-on .hint-spectrum .b9{animation-delay:0.28s;} .play-on .hint-spectrum .b10{animation-delay:0.04s;} @keyframes sp-bar{0%,100%{transform:scaleY(0.30);}50%{transform:scaleY(1);}} /* ─── 7. FLETCHER-MUNSON — curve isofoniche, una scorre ─── */ .hint-fletcher-munson .curve {fill:none;stroke:var(--hint-soft);stroke-width:1.4;opacity:0.35;} .hint-fletcher-munson .curve-hi{fill:none;stroke:var(--hint-fill);stroke-width:2;opacity:1;} .hint-fletcher-munson .axis{stroke:var(--hint-track);stroke-width:1;opacity:0.4;} .play-on .hint-fletcher-munson .curve-hi{animation:fm-cycle 3.2s ease-in-out infinite;} @keyframes fm-cycle{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}} /* ─── 8. ADSR — tasto pigia + envelope si disegna ─── */ .hint-adsr .axis{stroke:var(--hint-track);stroke-width:1;opacity:0.45;} .hint-adsr .env{ fill:none;stroke:var(--hint-fill);stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:160;stroke-dashoffset:160; } .hint-adsr .key{fill:var(--hint-soft);opacity:0.18;} .hint-adsr .key-press{fill:var(--hint-fill);opacity:0;} .play-on .hint-adsr .env{animation:adsr-env 2.6s ease-in-out infinite;} .play-on .hint-adsr .key-press{animation:adsr-kp 2.6s ease-in-out infinite;} @keyframes adsr-env{ 0%{stroke-dashoffset:160;} 8%{stroke-dashoffset:125;} 24%{stroke-dashoffset:100;} 30%{stroke-dashoffset:85;} 62%{stroke-dashoffset:55;} 82%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} } @keyframes adsr-kp{0%,6%{opacity:0;}8%{opacity:1;}62%{opacity:1;}66%{opacity:0;}100%{opacity:0;}} /* ─── 9. POLAR PATTERN — cardioide vera, mic al cusp ─── */ .hint-polarpattern .axis{stroke:var(--hint-track);stroke-width:1;opacity:0.35;} .hint-polarpattern .lobe{fill:var(--hint-fill);opacity:0.18;stroke:var(--hint-fill);stroke-width:1.6;stroke-linejoin:round;} .hint-polarpattern .mic-body{fill:var(--hint-soft);} .hint-polarpattern .src-grp{transform-origin:40px 40px;transform-box:view-box;} .hint-polarpattern .src{fill:var(--hint-fill);} .hint-polarpattern .ray{stroke:var(--hint-fill);stroke-width:1.2;stroke-dasharray:2 3;opacity:0.6;} .play-on .hint-polarpattern .src-grp{animation:pol-orbit 4.5s linear infinite;} .play-on .hint-polarpattern .src {animation:pol-pulse 4.5s ease-in-out infinite;} @keyframes pol-orbit{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}} @keyframes pol-pulse{ 0%,100%{r:4.6;} /* davanti al mic → max */ 25%{r:2.2;} /* lato → metà */ 50%{r:0.6;} /* dietro → null */ 75%{r:2.2;} } /* ─── 10. SAMPLING — onda + stem verticali sequenziali ─── */ .hint-sampling .wave{fill:none;stroke:var(--hint-soft);stroke-width:1.6;opacity:0.55;} .hint-sampling .stem{stroke:var(--hint-fill);stroke-width:1.6;opacity:0;} .hint-sampling .dot {fill:var(--hint-fill);opacity:0;} .play-on .hint-sampling .stem, .play-on .hint-sampling .dot{animation:sa-pop 1.6s ease-out infinite;} .play-on .hint-sampling .s1, .play-on .hint-sampling .d1{animation-delay:0.00s;} .play-on .hint-sampling .s2, .play-on .hint-sampling .d2{animation-delay:0.08s;} .play-on .hint-sampling .s3, .play-on .hint-sampling .d3{animation-delay:0.16s;} .play-on .hint-sampling .s4, .play-on .hint-sampling .d4{animation-delay:0.24s;} .play-on .hint-sampling .s5, .play-on .hint-sampling .d5{animation-delay:0.32s;} .play-on .hint-sampling .s6, .play-on .hint-sampling .d6{animation-delay:0.40s;} .play-on .hint-sampling .s7, .play-on .hint-sampling .d7{animation-delay:0.48s;} .play-on .hint-sampling .s8, .play-on .hint-sampling .d8{animation-delay:0.56s;} @keyframes sa-pop{0%{opacity:0;}10%{opacity:1;}82%{opacity:1;}100%{opacity:0;}} /* ─── 11. QUANTIZATION — onda smooth + staircase quantizzata ─── */ .hint-quantization .wave{fill:none;stroke:var(--hint-soft);stroke-width:1.4;opacity:0.45;} .hint-quantization .step{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linejoin:miter;stroke-linecap:square;} .hint-quantization .grid{stroke:var(--hint-track);stroke-width:1;opacity:0.3;stroke-dasharray:1 2;} .play-on .hint-quantization .step, .play-on .hint-quantization .wave{animation:qz-shift 2.6s ease-in-out infinite;} @keyframes qz-shift{0%,100%{transform:translateX(0);}50%{transform:translateX(-22px);}} /* ─── 12. MP3 — slider bitrate, barre acute cadono ─── */ .hint-mp3 .bar{fill:var(--hint-fill);transform-origin:center bottom;transform-box:fill-box;} .hint-mp3 .track{stroke:var(--hint-track);stroke-width:1.4;} .hint-mp3 .knob{fill:var(--hint-fill);} .play-on .hint-mp3 .knob{animation:mp-knob 3s ease-in-out infinite;} .play-on .hint-mp3 .bar-cut.h1{animation:mp-cut 3s ease-in-out infinite;animation-delay:0.00s;} .play-on .hint-mp3 .bar-cut.h2{animation:mp-cut 3s ease-in-out infinite;animation-delay:0.08s;} .play-on .hint-mp3 .bar-cut.h3{animation:mp-cut 3s ease-in-out infinite;animation-delay:0.16s;} .play-on .hint-mp3 .bar-cut.h4{animation:mp-cut 3s ease-in-out infinite;animation-delay:0.24s;} @keyframes mp-knob{0%,100%{transform:translateX(0);}50%{transform:translateX(-32px);}} @keyframes mp-cut {0%,100%{transform:scaleY(1);}50%{transform:scaleY(0.10);}} /* ─── 13. FILTERS — knob cutoff, barre destre cadono ─── */ .hint-filters .bar{fill:var(--hint-soft);opacity:0.30;} .hint-filters .bar-cut{transform-origin:center bottom;transform-box:fill-box;} .hint-filters .track{stroke:var(--hint-track);stroke-width:1.4;stroke-linecap:round;} .hint-filters .knob{fill:var(--hint-fill);} .play-on .hint-filters .knob-cut {animation:flt-knob 2.6s ease-in-out infinite;} .play-on .hint-filters .bar-cut.b4 {animation:flt-bar 2.6s ease-in-out infinite;animation-delay:0.05s;} .play-on .hint-filters .bar-cut.b5 {animation:flt-bar 2.6s ease-in-out infinite;animation-delay:0.10s;} .play-on .hint-filters .bar-cut.b6 {animation:flt-bar 2.6s ease-in-out infinite;animation-delay:0.15s;} .play-on .hint-filters .bar-cut.b7 {animation:flt-bar 2.6s ease-in-out infinite;animation-delay:0.20s;} @keyframes flt-knob{0%,100%{transform:translateX(0);}45%,55%{transform:translateX(-32px);}} @keyframes flt-bar {0%,100%{transform:scaleY(1);}45%,55%{transform:scaleY(0.15);}} /* ─── 14. ENVELOPE FOLLOWER — peaks + envelope smooth ─── */ .hint-envelopefollower .peaks{fill:none;stroke:var(--hint-soft);stroke-width:1.4;opacity:0.55;stroke-linecap:round;} .hint-envelopefollower .env{ fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round; stroke-dasharray:160;stroke-dashoffset:160; } .play-on .hint-envelopefollower .env{animation:ef-trace 2.6s ease-in-out infinite;} @keyframes ef-trace{0%{stroke-dashoffset:160;}70%{stroke-dashoffset:0;}100%{stroke-dashoffset:0;opacity:0.4;}} /* ─── 15. GATE — soglia + segnale che si abbassa a zero ─── */ .hint-gate .thresh{stroke:var(--hint-soft);stroke-width:1.2;stroke-dasharray:3 3;opacity:0.6;} .hint-gate .sig-on {fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;} .hint-gate .sig-off{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;opacity:0;} .play-on .hint-gate .sig-on {animation:gt-fade-on 1.6s infinite;} .play-on .hint-gate .sig-off{animation:gt-fade-off 1.6s infinite;} @keyframes gt-fade-on {0%,28%{opacity:1;}36%,72%{opacity:0;}80%,100%{opacity:1;}} @keyframes gt-fade-off{0%,28%{opacity:0;}36%,72%{opacity:1;}80%,100%{opacity:0;}} /* ─── 16. DELAY+FB — impulso + echi decrescenti ─── */ .hint-delay_fb .pulse{fill:var(--hint-fill);} .hint-delay_fb .e1,.hint-delay_fb .e2,.hint-delay_fb .e3,.hint-delay_fb .e4{opacity:0;} .play-on .hint-delay_fb .p0{animation:dl-trig 2.2s ease-out infinite;} .play-on .hint-delay_fb .e1{animation:dl-echo 2.2s ease-out infinite;animation-delay:0.20s;} .play-on .hint-delay_fb .e2{animation:dl-echo 2.2s ease-out infinite;animation-delay:0.55s;} .play-on .hint-delay_fb .e3{animation:dl-echo 2.2s ease-out infinite;animation-delay:0.90s;} .play-on .hint-delay_fb .e4{animation:dl-echo 2.2s ease-out infinite;animation-delay:1.25s;} @keyframes dl-trig{0%{opacity:0;}5%{opacity:1;}45%{opacity:1;}100%{opacity:0;}} @keyframes dl-echo{0%{opacity:0;}10%{opacity:0.7;}50%{opacity:0.7;}100%{opacity:0;}} /* ─── 17. DISTORTION — sine → square (clip) ─── */ .hint-distortion .sine{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;opacity:0;} .hint-distortion .clip{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linejoin:miter;stroke-linecap:square;opacity:0;} .hint-distortion .ceiling{stroke:var(--hint-soft);stroke-width:1;stroke-dasharray:3 3;opacity:0.5;} .play-on .hint-distortion .sine{animation:dt-sine 1.6s infinite;} .play-on .hint-distortion .clip{animation:dt-clip 1.6s infinite;} @keyframes dt-sine{0%,28%{opacity:1;}36%,72%{opacity:0;}80%,100%{opacity:1;}} @keyframes dt-clip{0%,28%{opacity:0;}36%,72%{opacity:1;}80%,100%{opacity:0;}} /* ─── 18. WAVESHAPING — input → curva sigmoide ─── */ .hint-waveshaping .ax{stroke:var(--hint-track);stroke-width:1;opacity:0.35;} .hint-waveshaping .curve-a, .hint-waveshaping .curve-b{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;} .hint-waveshaping .curve-b{opacity:0;} .play-on .hint-waveshaping .curve-a{animation:ws-fade-a 1.6s infinite;} .play-on .hint-waveshaping .curve-b{animation:ws-fade-b 1.6s infinite;} @keyframes ws-fade-a{0%,28%{opacity:1;}36%,72%{opacity:0;}80%,100%{opacity:1;}} @keyframes ws-fade-b{0%,28%{opacity:0;}36%,72%{opacity:1;}80%,100%{opacity:0;}} /* ─── 19. LFO — sine + cursore scrub + target che si modula ─── */ .hint-lfo .sine{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;} .hint-lfo .target{fill:var(--hint-fill);transform-origin:center;transform-box:fill-box;} .hint-lfo .cursor-dot{fill:#fff;stroke:var(--hint-stroke);stroke-width:1.4;} .play-on .hint-lfo .cursor-dot{animation:lf-scrub 2.2s ease-in-out infinite;} .play-on .hint-lfo .target {animation:lf-mod 2.2s ease-in-out infinite;} @keyframes lf-scrub{ 0% {transform:translate(0,0);} 25% {transform:translate(30px,-14px);} 50% {transform:translate(60px,0);} 75% {transform:translate(90px,14px);} 100%{transform:translate(120px,0);} } @keyframes lf-mod{0%,100%{transform:scale(0.6);}25%{transform:scale(1.2);}50%{transform:scale(0.6);}75%{transform:scale(0.2);}} /* ─── 20. SUBTRACTIVE — sawtooth + filter cutoff ─── */ .hint-subtractive .saw{fill:none;stroke:var(--hint-soft);stroke-width:1.4;opacity:0.55;} .hint-subtractive .out{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;} .hint-subtractive .cutoff{stroke:var(--hint-soft);stroke-width:1.2;stroke-dasharray:3 3;opacity:0.6;} .play-on .hint-subtractive .cutoff{animation:sb-cut 3s ease-in-out infinite;} @keyframes sb-cut{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}} /* ─── 21. RM/AM — carrier con inviluppo tremolo ─── */ .hint-rm-am .carrier{fill:none;stroke:var(--hint-fill);stroke-width:1.8;stroke-linecap:round; transform-origin:center;transform-box:fill-box;} .hint-rm-am .env-top,.hint-rm-am .env-bot{fill:none;stroke:var(--hint-soft);stroke-width:1;opacity:0.5;stroke-dasharray:2 2;} .play-on .hint-rm-am .carrier{animation:rm-puls 2s ease-in-out infinite;} @keyframes rm-puls{0%,100%{transform:scaleY(1);}25%{transform:scaleY(0.25);}50%{transform:scaleY(1);}75%{transform:scaleY(0.25);}} /* ─── 22. FM — vibrato continuo (scaleX) ─── */ .hint-fm .vib{ fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round; transform-origin:center;transform-box:fill-box; } .play-on .hint-fm .vib{animation:fm-vib 1.4s ease-in-out infinite;} @keyframes fm-vib{0%,100%{transform:scaleX(1);}50%{transform:scaleX(0.55);}} /* ─── 23. KARPLUS-STRONG — pluck → decay (scaleY) ─── */ .hint-karplus-strong .osc{ fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round; transform-origin:center;transform-box:fill-box; } .play-on .hint-karplus-strong .osc{animation:ks-decay 1.9s ease-out infinite;} @keyframes ks-decay{ 0%,3% {transform:scaleY(1);} 92%,100%{transform:scaleY(0.04);} } /* ─── 24. PHASE DISTORTION — cursore scorre a velocità variabile ─── */ .hint-phasedistortion .cycle{fill:none;stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;} .hint-phasedistortion .ax{stroke:var(--hint-track);stroke-width:1;opacity:0.35;} .hint-phasedistortion .cur{fill:var(--hint-fill);} .play-on .hint-phasedistortion .cur{animation:pd-cur 2.4s cubic-bezier(0.3,0,0.7,1) infinite;} @keyframes pd-cur{ 0% {transform:translateX(0);} 30% {transform:translateX(48px);} 70% {transform:translateX(72px);} 100%{transform:translateX(120px);} } /* ─── 25. THEREMIN — mano si muove, wave cambia densità ─── */ .hint-theremin .antenna{stroke:var(--hint-fill);stroke-width:2;stroke-linecap:round;} .hint-theremin .ant-cap{fill:var(--hint-fill);} .hint-theremin .hand{fill:#fff;stroke:var(--hint-stroke);stroke-width:1.4;stroke-linejoin:round;} .hint-theremin .wave-a,.hint-theremin .wave-b{fill:none;stroke:var(--hint-fill);stroke-width:1.6;stroke-linecap:round;} .hint-theremin .wave-b{opacity:0;} .play-on .hint-theremin .hand {animation:th-hand 2.8s ease-in-out infinite;} .play-on .hint-theremin .wave-a{animation:th-a 2.8s steps(1,end) infinite;} .play-on .hint-theremin .wave-b{animation:th-b 2.8s steps(1,end) infinite;} @keyframes th-hand{0%,100%{transform:translateX(0);}50%{transform:translateX(-20px);}} @keyframes th-a{0%,49%{opacity:1;}50%,100%{opacity:0;}} @keyframes th-b{0%,49%{opacity:0;}50%,100%{opacity:1;}}