/* SeaStrike: livello di animazione condiviso. Va incluso dopo Tailwind in ogni pagina. Nessuna libreria. Regole: tutto parte da IntersectionObserver (motion.js), tutto si spegne con prefers-reduced-motion, nessun effetto sul contenuto se il JS non parte. */ /* ===== comparsa progressiva ===== Lo stato nascosto è dietro .js sull'elemento : se il JS non parte, la pagina resta leggibile invece di restare bianca. */ .js .rv, .js .reveal { opacity: 0; transform: translateY(26px); } .rv.in, .reveal.in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.16,.84,.36,1), transform .5s cubic-bezier(.16,.84,.36,1); transition-delay: var(--d, 0ms); } /* varianti di ingresso, per non avere sempre lo stesso movimento */ .js .rv-left { transform: translateX(-26px); } .js .rv-right { transform: translateX(26px); } /* Su schermo stretto l'ingresso laterale sborda dalla pagina (26px oltre il bordo) e fa scivolare tutto il documento in orizzontale: sotto i 640px si entra dal basso. */ @media (max-width: 640px) { .js .rv-left, .js .rv-right { transform: translateY(26px); } } .js .rv-scale { transform: scale(.96); } .js .rv-blur { filter: blur(6px); } .rv-left.in, .rv-right.in, .rv-scale.in { transform: none; } .rv-blur.in { filter: none; transition: opacity .5s cubic-bezier(.16,.84,.36,1), transform .5s cubic-bezier(.16,.84,.36,1), filter .5s ease; } /* ===== barra di avanzamento della lettura ===== */ #progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, #4A9FE0, #EAF4FC); z-index: 60; transition: width .1s linear; } /* ===== parallasse leggera (JS scrive --py) ===== */ [data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); } /* ===== linea che si disegna: timeline e separatori ===== */ .js .mg-draw { transform: scaleY(0); transform-origin: top; } .mg-draw.in { transform: scaleY(1); transition: transform 1.1s cubic-bezier(.16,.84,.36,1); transition-delay: var(--d, 0ms); } .js .mg-draw-x { transform: scaleX(0); transform-origin: left; } .mg-draw-x.in { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.16,.84,.36,1); transition-delay: var(--d, 0ms); } /* ===== onda animata sotto l'hero ===== */ .mg-wave { display: block; width: 100%; height: 54px; } .mg-wave path { animation: mg-swell 9s ease-in-out infinite; transform-origin: center; } .mg-wave path:nth-child(2) { animation-duration: 13s; animation-direction: reverse; } @keyframes mg-swell { 0%, 100% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(-2.5%) scaleY(1.12); } } /* ===== galleggiamento lento, per badge e medaglioni ===== */ .mg-float { animation: mg-bob 6s ease-in-out infinite; } @keyframes mg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ===== indicatore di scroll nell'hero ===== */ .mg-scroll-cue span { display: block; width: 2px; height: 26px; background: currentColor; opacity: .55; transform-origin: top; animation: mg-cue 2.1s ease-in-out infinite; } @keyframes mg-cue { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: .7; } 100% { transform: scaleY(1) translateY(26px); opacity: 0; } } /* ===== alone che pulsa, per il punto "in preparazione" ===== */ .mg-pulse { position: relative; } .mg-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; border: 1px solid currentColor; animation: mg-ring 2.6s ease-out infinite; } @keyframes mg-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } } /* ===== sollevamento su hover, uniforme per le card cliccabili ===== */ .mg-lift { transition: transform .35s cubic-bezier(.16,.84,.36,1), box-shadow .35s ease; } .mg-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(13, 20, 66, .45); } /* ===== zoom lentissimo sul render dell'hero ===== */ .mg-kenburns { animation: mg-zoom 26s ease-in-out infinite alternate; } @keyframes mg-zoom { from { transform: scale(1); } to { transform: scale(1.07); } } /* ===== menu mobile ===== Il blocco dello scroll NON si fa con overflow:hidden: toglierebbe lo scorrimento al documento e l'header, che è sticky, smetterebbe di restare in alto portandosi via il menu. Se ne occupa nav.js fermando i gesti di scroll. Qui restano solo aspetto e contenimento. */ #navScrim { transition: opacity .25s ease; } /* Le voci sono tante: sotto l'header il pannello scorre da solo e lo scroll non "sfonda" sulla pagina sotto. 4rem = altezza dell'header. */ #mobileMenu { max-height: calc(100svh - 4rem); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; } @media (prefers-reduced-motion: reduce) { .rv, .reveal, .rv-blur, .mg-draw, .mg-draw-x { opacity: 1 !important; transform: none !important; filter: none !important; } .mg-wave path, .mg-float, .mg-scroll-cue span, .mg-pulse::after, .mg-kenburns { animation: none !important; } [data-parallax] { transform: none !important; } #progress { display: none; } #navScrim { transition: none; } }