`). * - Opzionale: `class="… ie-internal-canvas-page"` sul `` per hook / documentazione. * * Colori, blur, opacità e timing: token `--ie-internal-*` e brand in site-tokens.css. */ .ie-internal-canvas.ie-internal-canvas--fixed{ position:fixed; inset:0; z-index:var(--ie-internal-canvas-z-base); display:flex; align-items:center; justify-content:center; pointer-events:none; overflow:hidden; } .ie-internal-canvas-blob{ position:absolute; border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; will-change:transform, border-radius; } /* Luce oro principale */ .ie-internal-canvas-blob--1{ top:0; left:-10%; width:45vw; height:45vw; background:var(--brand-gold); filter:blur(var(--ie-internal-blur-lg)); opacity:var(--ie-internal-blob-opacity-gold-primary); animation:ie-internal-roam-1 var(--ie-internal-dur-roam-1) var(--ease-keyword-ease-in-out) infinite; } /* Surface diffusa */ .ie-internal-canvas-blob--2{ bottom:-5%; right:-10%; width:55vw; height:55vw; background:var(--brand-surface-strong); filter:blur(var(--ie-internal-blur-xl)); opacity:var(--ie-internal-blob-opacity-surface); animation:ie-internal-roam-2 var(--ie-internal-dur-roam-2) var(--ease-keyword-ease-in-out) var(--ie-internal-delay-roam-2) infinite; } /* Oro secondaria */ .ie-internal-canvas-blob--3{ top:20%; left:25%; width:40vw; height:40vw; background:var(--brand-gold); filter:blur(var(--ie-internal-blur-md)); opacity:var(--ie-internal-blob-opacity-gold-secondary); animation:ie-internal-roam-3 var(--ie-internal-dur-roam-3) var(--ease-keyword-ease-in-out) var(--ie-internal-delay-roam-3) infinite; } /* Oro focalizzata */ .ie-internal-canvas-blob--4{ top:40%; left:40%; width:20vw; height:20vw; background:var(--brand-gold); filter:blur(var(--ie-internal-blur-sm)); opacity:var(--ie-internal-blob-opacity-gold-focal); animation:ie-internal-roam-5 var(--ie-internal-dur-roam-5) var(--ease-keyword-ease-in-out) var(--ie-internal-delay-roam-5) infinite; } /* Surface focalizzata (reverse, durata dedicata) */ .ie-internal-canvas-blob--5{ bottom:30%; right:30%; width:15vw; height:15vw; background:var(--brand-surface-strong); filter:blur(var(--ie-internal-blur-xs)); opacity:var(--ie-internal-blob-opacity-surface); animation:ie-internal-roam-5 var(--ie-internal-dur-roam-5-alt) var(--ease-keyword-ease-in-out) infinite reverse; } /* Tricolore IT — quasi invisibili */ .ie-internal-canvas-blob--6{ top:-20%; right:10%; width:30vw; height:30vw; background:var(--it-green); filter:blur(var(--ie-internal-blur-xl)); opacity:var(--ie-internal-blob-opacity-it); animation:ie-internal-roam-4 var(--ie-internal-dur-roam-4) var(--ease-keyword-ease-in-out) var(--ie-internal-delay-roam-4) infinite; } .ie-internal-canvas-blob--7{ bottom:-20%; left:10%; width:30vw; height:30vw; background:var(--it-red); filter:blur(var(--ie-internal-blur-xl)); opacity:var(--ie-internal-blob-opacity-it); animation:ie-internal-roam-4 var(--ie-internal-dur-roam-4) var(--ease-keyword-ease-in-out) infinite alternate-reverse; } .ie-internal-canvas-grain.ie-internal-canvas-grain--fixed{ position:fixed; inset:0; z-index:var(--ie-internal-canvas-z-grain); pointer-events:none; opacity:var(--ie-internal-grain-opacity); mix-blend-mode:overlay; filter:url(#ieAmbientNoiseFilter); } @keyframes ie-internal-roam-1{ 0%, 100%{ border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; transform:scale(1) translate(0, 0); } 25%{ border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; transform:scale(1.1) translate(15vw, 10vh); } 50%{ border-radius:70% 30% 50% 50% / 70% 50% 50% 30%; transform:scale(0.9) translate(25vw, -5vh); } 75%{ border-radius:40% 60% 30% 70% / 40% 60% 70% 30%; transform:scale(1.05) translate(10vw, -15vh); } } @keyframes ie-internal-roam-2{ 0%, 100%{ border-radius:50% 50% 30% 70% / 60% 40% 60% 40%; transform:scale(1) translate(0, 0); } 33%{ border-radius:70% 30% 50% 50% / 30% 70% 50% 50%; transform:scale(1.05) translate(-20vw, -15vh); } 66%{ border-radius:30% 70% 70% 30% / 70% 30% 30% 70%; transform:scale(0.95) translate(-30vw, 10vh); } } @keyframes ie-internal-roam-3{ 0%, 100%{ border-radius:40% 60% 70% 30% / 40% 50% 60% 50%; transform:scale(1) translate(0, 0); } 33%{ border-radius:60% 40% 30% 70% / 50% 60% 30% 60%; transform:scale(0.95) translate(-15vw, 20vh); } 66%{ border-radius:50% 50% 60% 40% / 60% 40% 70% 30%; transform:scale(1.05) translate(15vw, 15vh); } } @keyframes ie-internal-roam-4{ 0%, 100%{transform:translate(0, 0);} 50%{transform:translate(10vw, -10vh);} } @keyframes ie-internal-roam-5{ 0%, 100%{transform:scale(1) translate(0, 0);} 33%{transform:scale(1.1) translate(20vw, -20vh);} 66%{transform:scale(0.9) translate(-15vw, 15vh);} } /* * Narrow viewports: default token opacities (0.05–0.15) + heavy blur read as flat mud. * Slightly lower blur + higher opacity + stronger grain so the canvas matches desktop intent. */ @media (max-width:1023px){ .ie-internal-canvas-page{ --ie-internal-grain-opacity:0.09; --ie-internal-blur-xs:72px; --ie-internal-blur-sm:88px; --ie-internal-blur-md:108px; --ie-internal-blur-lg:120px; --ie-internal-blur-xl:138px; --ie-internal-blob-opacity-gold-primary:0.14; --ie-internal-blob-opacity-gold-secondary:0.11; --ie-internal-blob-opacity-gold-focal:0.17; --ie-internal-blob-opacity-surface:0.26; --ie-internal-blob-opacity-it:0.045; } } @media (max-width:480px){ .ie-internal-canvas-page{ --ie-internal-grain-opacity:0.1; --ie-internal-blob-opacity-gold-primary:0.16; --ie-internal-blob-opacity-gold-secondary:0.13; --ie-internal-blob-opacity-gold-focal:0.19; --ie-internal-blob-opacity-surface:0.28; } } @media (prefers-reduced-motion:reduce){ .ie-internal-canvas-blob{ animation:none !important; } .ie-internal-canvas-blob--1, .ie-internal-canvas-blob--2, .ie-internal-canvas-blob--3, .ie-internal-canvas-blob--4, .ie-internal-canvas-blob--5, .ie-internal-canvas-blob--6, .ie-internal-canvas-blob--7{ border-radius:50%; transform:none; } }