/* 3.1.0 — Engine HUD: broadcast key + tratto 1.5px + alone leggero (T1-FORME-HUD F1) * Linkato in index_4.html dopo style_4.css. * Spec: docs/MEMO_HUD_Forme_Note_3.1.0.md · --glow-intensity scoped su #player-wrapper (F3). * * Geometria: border 1.5px; key nera 1px + 2px (stacco telestrator). * Cromia: rect #00f2ff · circle #00ff88 · arrow #ff385c (tokens.css). * Alone: max 24px su hover/linked; regolabile da popup Luce (F3). */ #player-wrapper { --glow-intensity: 1; --tool-fill-opacity: 1; } /* F3.1 — durante drag Alone forme: niente transition filter/shadow (evita lag hover triade). */ #player-wrapper.is-shape-glow-drag .shape-rect.shape-note, #player-wrapper.is-shape-glow-drag .shape-circle.shape-note, #player-wrapper.is-shape-glow-drag .shape-rect, #player-wrapper.is-shape-glow-drag .shape-circle, #player-wrapper.is-shape-glow-drag .shape-rect.shape-preview, #player-wrapper.is-shape-glow-drag .shape-circle.shape-preview { transition: none !important; } /* ── Base + preview (disegno in corso) ─────────────────────────────── */ .shape-rect, .shape-rect.shape-preview { border-width: 1.5px; filter: drop-shadow(0 0 3px rgba(var(--tool-rect-rgb), calc(0.22 * var(--glow-intensity, 1)))); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.92), 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 6px rgba(var(--tool-rect-rgb), calc(0.2 * var(--glow-intensity, 1))), 0 0 14px rgba(var(--tool-rect-rgb), calc(0.1 * var(--glow-intensity, 1))); } .shape-circle, .shape-circle.shape-preview { border-width: 1.5px; filter: drop-shadow(0 0 3px rgba(var(--tool-circle-rgb), calc(0.22 * var(--glow-intensity, 1)))); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.92), 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 6px rgba(var(--tool-circle-rgb), calc(0.2 * var(--glow-intensity, 1))), 0 0 14px rgba(var(--tool-circle-rgb), calc(0.1 * var(--glow-intensity, 1))); } /* ── Annotazioni salvate ───────────────────────────────────────────── */ .shape-rect.shape-note { border-width: 1.5px; border-color: var(--tool-rect-solid); filter: drop-shadow(0 0 4px rgba(var(--tool-rect-rgb), calc(0.26 * var(--glow-intensity, 1)))); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.92), 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 8px rgba(var(--tool-rect-rgb), calc(0.24 * var(--glow-intensity, 1))), 0 0 18px rgba(var(--tool-rect-rgb), calc(0.11 * var(--glow-intensity, 1))); } .shape-circle.shape-note { border-width: 1.5px; border-color: var(--tool-circle-solid); filter: drop-shadow(0 0 4px rgba(var(--tool-circle-rgb), calc(0.26 * var(--glow-intensity, 1)))); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.92), 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 8px rgba(var(--tool-circle-rgb), calc(0.24 * var(--glow-intensity, 1))), 0 0 18px rgba(var(--tool-circle-rgb), calc(0.11 * var(--glow-intensity, 1))); } /* ── Hover / linked — alone un po' più morbido, senza bloom 56px legacy ─ */ .shape-rect.shape-note:hover, .shape-rect.shape-note.is-linked-hover, .shape-rect.shape-note.is-linked-pulse { border-width: 1.5px; border-color: color-mix(in srgb, var(--tool-rect-solid) 88%, #ffffff); filter: drop-shadow(0 0 5px rgba(var(--tool-rect-rgb), calc(0.38 * var(--glow-intensity, 1)))); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 0 2px rgba(0, 0, 0, 0.36), 0 0 12px rgba(var(--tool-rect-rgb), calc(0.36 * var(--glow-intensity, 1))), 0 0 24px rgba(var(--tool-rect-rgb), calc(0.15 * var(--glow-intensity, 1))); } .shape-circle.shape-note:hover, .shape-circle.shape-note.is-linked-hover, .shape-circle.shape-note.is-linked-pulse { border-width: 1.5px; border-color: color-mix(in srgb, var(--tool-circle-solid) 88%, #ffffff); filter: drop-shadow(0 0 5px rgba(var(--tool-circle-rgb), calc(0.38 * var(--glow-intensity, 1)))); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 0 2px rgba(0, 0, 0, 0.36), 0 0 12px rgba(var(--tool-circle-rgb), calc(0.36 * var(--glow-intensity, 1))), 0 0 24px rgba(var(--tool-circle-rgb), calc(0.15 * var(--glow-intensity, 1))); } @media (prefers-reduced-motion: reduce) { .shape-rect, .shape-circle, .shape-rect.shape-note, .shape-circle.shape-note, .shape-rect.shape-preview, .shape-circle.shape-preview { transition-duration: 0.01ms; filter: none; } .shape-rect.shape-note:hover, .shape-rect.shape-note.is-linked-hover, .shape-rect.shape-note.is-linked-pulse { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 0 2px rgba(0, 0, 0, 0.36), 0 0 8px rgba(var(--tool-rect-rgb), 0.2); } .shape-circle.shape-note:hover, .shape-circle.shape-note.is-linked-hover, .shape-circle.shape-note.is-linked-pulse { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 0 2px rgba(0, 0, 0, 0.36), 0 0 8px rgba(var(--tool-circle-rgb), 0.2); } } /* Playback guard — in modalità annotate (pausa) il motore non riceve click (tutti i tool). */ .player-wrapper.annotation-active .dual-slot--master .yt-api-mount, .player-wrapper.annotation-active .dual-slot--master #local-player { pointer-events: none !important; } /* Fix 1 — tool Punto: il master video non intercetta pointer (iframe YT / MP4 locale). Usa .is-point-capture già impostato da clampOverlayPointer (script_4.js). Overlay sotto video-markers (21) per non bloccare hover sulle forme salvate. */ .player-wrapper.annotation-active.is-point-capture .dual-slot--master .yt-api-mount, .player-wrapper.annotation-active.is-point-capture .dual-slot--master #local-player { pointer-events: none !important; } .player-wrapper.annotation-active.is-point-capture #annotation-overlay-master.is-active { pointer-events: all !important; z-index: 20; } /* §4.8 — feedback Salva con testo vuoto (Slice 1b) */ #annotation-popup.is-save-empty-flash { outline: 1px solid rgba(255, 180, 60, 0.85); box-shadow: 0 0 0 2px rgba(255, 140, 40, 0.35); transition: outline-color 0.15s ease, box-shadow 0.15s ease; }