/* RENOR Motion v2 — livello di animazione per il tema Seed. Nessuna modifica alla grafica. Solo: stati iniziali, contesto per le scene pinnate, micro-interazioni al passaggio del mouse. */ /* 1) Pre-hide degli elementi above-the-fold rivelati dal motore (solo con JS + GSAP attivi). Il failsafe nel rimuove rm-js se il motore non parte entro 2,5 s. */ html.rm-js .component-1 .inner-container > *, html.rm-js .component-2 .swiper, html.rm-js #common-page-header .copy-container > *, html.rm-js #common-single-header .copy-container > *, html.rm-js #common-archive-header .copy-container > *, html.rm-js #common-category-header .copy-container > * { opacity: 0; } /* 2) Parole splittate (layout-neutro; l'HTML originale viene ripristinato a fine reveal) */ .rm-w { display: inline-block; will-change: transform, opacity; } .rm-atomic { display: inline-block; } /* 3) Scene: la hero resta fissa e la sezione successiva le scorre sopra (pin senza spaziatura) */ .renor-motion #oj-builder > section, .renor-motion #oj-builder > .pin-spacer > section { position: relative; z-index: 1; } .renor-motion #oj-builder > section:has(> .component-1), .renor-motion #oj-builder > .pin-spacer > section:has(> .component-1) { z-index: 0; } .renor-motion .component-1, .renor-motion .component-5 { position: relative; } .renor-motion .component-1 > .container, .renor-motion .component-5 > .container { position: relative; z-index: 1; } /* Spotlight sezione AI: solo blu scuro, sotto il testo bianco resta leggibile */ .rm-spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 0; background: radial-gradient(50% 55% at var(--rm-x, 30%) var(--rm-y, 50%), rgba(62, 105, 179, .34) 0%, rgba(62, 105, 179, .08) 45%, rgba(0, 0, 0, 0) 72%); } /* Media in cornice: il contenuto viene scalato/traslato dentro la cornice */ .renor-motion .component-5 .rounded-3.overflow-hidden { will-change: transform; } /* Header interni: immagine scalata/parallassata, va clippata */ .renor-motion #common-page-header .image-background, .renor-motion #common-single-header .image-background { overflow: hidden; } .renor-motion #common-page-header .image-background img { will-change: transform; } /* 4) Component-9 (elenco card con titolo a lato): il titolo resta "sticky" mentre le card scorrono. Il tema mette overflow:hidden su tutti i componenti, che annulla position:sticky → qui lo riapriamo. Le card avevano "transition: all" (interferisce con GSAP): limitiamo la transizione ai colori. */ .renor-motion .component-9 { overflow: visible; } .renor-motion .component-9 .card { transition: background-color .5s ease, border-color .5s ease; } /* 5) Micro-interazioni al passaggio del mouse. Usano la proprietà "translate" (indipendente da "transform", che è governata da GSAP) per non entrare in conflitto con le animazioni. */ @media (hover: hover) and (pointer: fine) { .renor-motion .btn { transition: translate .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), background-color .2s, color .2s, border-color .2s; } .renor-motion .btn:hover { translate: 0 -2px; box-shadow: 0 14px 30px -14px rgba(31, 31, 31, .55); } .renor-motion .component-7 .swiper-slide > div, .renor-motion .card-blog, .renor-motion .component-16 .bg-black, .renor-motion .component-11 .card-inner-container { transition: translate .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s cubic-bezier(.2, .8, .2, 1); } .renor-motion .component-7 .swiper-slide > div:hover, .renor-motion .card-blog:hover, .renor-motion .component-16 .bg-black:hover, .renor-motion .component-11 .card-inner-container:hover { translate: 0 -6px; box-shadow: 0 30px 50px -34px rgba(31, 31, 31, .45); } .renor-motion [class*="component-"] span.bg-gray-300.rounded-1 { transition: translate .5s cubic-bezier(.2, .8, .2, 1), scale .5s cubic-bezier(.2, .8, .2, 1); } .renor-motion [class*="component-"] [class*="col-"]:hover span.bg-gray-300.rounded-1, .renor-motion .card:hover span.bg-gray-300.rounded-1 { translate: 0 -4px; scale: 1.06; } } @media (prefers-reduced-motion: reduce) { .rm-spot { display: none; } }