/* ========================================================================== KALEJ — Effetti aggiuntivi (MengTo Agent Skills) File ADDITIVO: non modifica style.css. Ogni blocco è indipendente e lo stato finale è sempre quello leggibile: gli stati iniziali "armati" vengono applicati SOLO da skills-fx.js (classe .sfx-on sul ). Skill applicate: scroll-progress-timeline, scroll-scrubbed-word-reveal, progressive-blur, reveal-hover-effect, gsap-scrolltrigger-storytelling, cinematic-scroll-storytelling. ========================================================================== */ /* -------------------------------------------------------------------------- 1) scroll-progress-timeline — barra di avanzamento + rail sezioni -------------------------------------------------------------------------- */ .sfx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9998; pointer-events: none; background: rgba(128, 128, 128, 0.16); } .sfx-progress__fill { height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #FF5C00, #F4C430); will-change: transform; } /* Rail laterale con un dot per sezione. Nascosto sotto i 1100px: su mobile ruberebbe spazio e si sovrappone al contenuto. */ .sfx-rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 9997; display: flex; flex-direction: column; gap: 14px; } .sfx-rail__dot { width: 9px; height: 9px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: currentColor; opacity: 0.35; cursor: pointer; transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.35s ease; } .sfx-rail__dot:hover, .sfx-rail__dot:focus-visible { opacity: 0.8; } .sfx-rail__dot[aria-current="step"] { opacity: 1; background: #FF5C00; border-color: #FF5C00; transform: scale(1.35); } @media (max-width: 1100px) { .sfx-rail { display: none; } } /* -------------------------------------------------------------------------- 2) scroll-scrubbed-word-reveal — sezione #problema I token .sfx-word esistono solo dopo lo split JS; senza JS resta il testo originale intatto. -------------------------------------------------------------------------- */ .sfx-word { display: inline-block; white-space: pre-wrap; /* --word-progress: 0 = nascosto, 1 = pieno. Impostato da JS. */ opacity: calc(0.18 + 0.82 * var(--word-progress, 1)); filter: blur(calc((1 - var(--word-progress, 1)) * 6px)); transform: translateY(calc((1 - var(--word-progress, 1)) * 0.16em)); will-change: opacity, filter, transform; } /* -------------------------------------------------------------------------- 3) progressive-blur — bordo inferiore del mosaico lifestyle Adattato dalla skill: absolute (non fixed) e 5 layer invece di 8, perché backdrop-filter impilato è costoso e qui copre un'area grande. -------------------------------------------------------------------------- */ .lifestyle-mosaic { position: relative; } .sfx-blur { position: absolute; inset: auto 0 0 0; height: 38%; z-index: 3; pointer-events: none; } .sfx-blur > div { position: absolute; inset: 0; } .sfx-blur > div:nth-of-type(1) { z-index: 1; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 60%); mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 60%); } .sfx-blur > div:nth-of-type(2) { z-index: 2; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 80%); mask: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 80%); } .sfx-blur > div:nth-of-type(3) { z-index: 3; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); mask: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); } .sfx-blur > div:nth-of-type(4) { z-index: 4; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%); mask: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%); } .sfx-blur > div:nth-of-type(5) { z-index: 5; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%); mask: linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%); } /* Il backdrop-filter impilato è pesante: lo togliamo su mobile. */ @media (max-width: 767px) { .sfx-blur { display: none; } } /* -------------------------------------------------------------------------- 4) reveal-hover-effect — card prodotto WooCommerce Adattamento: non esistono due asset distinti per prodotto, quindi la stessa immagine viene usata due volte — base desaturata, overlay a colori pieni. Effetto "hover-to-color" previsto dalla skill. -------------------------------------------------------------------------- */ .sfx-reveal { --reveal-x: 50%; --reveal-y: 50%; --reveal-radius: 0px; position: relative; overflow: clip; isolation: isolate; margin: 0; contain: paint; } .sfx-reveal__base { display: block; width: 100%; height: auto; position: relative; z-index: 0; filter: grayscale(1) contrast(0.92) brightness(1.04); transition: filter 0.5s ease; } .sfx-reveal__overlay { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; -webkit-mask-image: radial-gradient( circle var(--reveal-radius) at var(--reveal-x) var(--reveal-y), rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 1) 40%, rgb(0 0 0 / 0.75) 60%, rgb(0 0 0 / 0.4) 75%, rgb(0 0 0 / 0.12) 88%, transparent 100% ); mask-image: radial-gradient( circle var(--reveal-radius) at var(--reveal-x) var(--reveal-y), rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 1) 40%, rgb(0 0 0 / 0.75) 60%, rgb(0 0 0 / 0.4) 75%, rgb(0 0 0 / 0.12) 88%, transparent 100% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; will-change: -webkit-mask-image, mask-image; } /* Touch / no-hover: nessuno spotlight, immagine a colori piena. */ @media (hover: none), (pointer: coarse) { .sfx-reveal__overlay { display: none; } .sfx-reveal__base { filter: none; } } /* -------------------------------------------------------------------------- 5+6) storytelling socialproof + CTA Stati iniziali applicati solo con JS attivo (html.sfx-on) e solo se l'utente non ha chiesto reduced-motion. -------------------------------------------------------------------------- */ html.sfx-on .sfx-story-item { opacity: 0; will-change: transform, opacity; } html.sfx-on .sfx-cta-stage { will-change: transform, filter; } /* -------------------------------------------------------------------------- 7) Frutta: PNG reali al posto delle emoji Le regole di style.css (.flavor-fruit / .hero-bottle-fruit) continuano a valere per posizione, drop-shadow e animazione float: qui aggiungiamo solo le dimensioni, che sulle emoji erano font-size e su un non servono. Dimensioni volutamente maggiori delle emoji originali (4rem / 3.4rem): sono immagini vere e devono avere presenza. -------------------------------------------------------------------------- */ img.kalej-fruit { display: block; object-fit: contain; /* Il PNG può avere proporzioni qualsiasi: contain evita deformazioni. */ height: auto; pointer-events: none; user-select: none; } /* Carosello gusti — era font-size: 4rem (~64px) */ img.flavor-fruit { width: 150px; max-width: 26vw; } /* Hero, frutto principale — era 3.4rem (~54px) */ img.hero-bottle-fruit { width: 120px; max-width: 20vw; } /* Hero, frutto secondario — era 2.4rem (~38px) */ img.hero-bottle-fruit-2 { width: 88px; max-width: 15vw; } @media (max-width: 1024px) { img.flavor-fruit { width: 110px; } } @media (max-width: 767px) { img.flavor-fruit { width: 88px; } img.hero-bottle-fruit { width: 82px; } img.hero-bottle-fruit-2 { width: 62px; } } @media (prefers-reduced-motion: reduce) { html.sfx-on .sfx-story-item { opacity: 1; } .sfx-word { opacity: 1; filter: none; transform: none; } .sfx-progress__fill { transition: none; } }