/* ==========================================================================
FERMENTO — Trattamento «spettacolo» v1
Tutto quello che si può fare senza JavaScript sta qui.
Si disattiva togliendo questo e quello di js/spettacolo.js.
Palette e token: NON si inventano, arrivano da variables.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. LE BOTANICHE SI DISEGNANO — il gesto forte dell'hero. 0 KB di JS.
I tracciati hanno pathLength="1": tutte le lunghezze sono normalizzate,
quindi un solo valore di dasharray governa rami, foglie e agrumi.
-------------------------------------------------------------------------- */
.hero-ed__branch > * {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: disegna 2.6s cubic-bezier(.65, 0, .35, 1) forwards;
animation-delay: calc(0.35s + var(--ritardo, 0) * 0.13s);
}
@keyframes disegna { to { stroke-dashoffset: 0; } }
/* Le foglie e i frutti si riempiono appena finita la linea */
.hero-ed__branch > *:nth-child(n + 6) {
fill: currentColor;
fill-opacity: 0;
animation:
disegna 2.6s cubic-bezier(.65, 0, .35, 1) forwards,
riempi 1.4s ease-out forwards;
animation-delay:
calc(0.35s + var(--ritardo, 0) * 0.13s),
calc(1.5s + var(--ritardo, 0) * 0.13s);
}
@keyframes riempi { to { fill-opacity: .05; } }
/* --------------------------------------------------------------------------
2. IL TITOLO SI COMPONE PAROLA PER PAROLA
Le parole le avvolge spettacolo.js; se il JS non gira, il titolo
resta visibile e fermo — mai un h1 invisibile.
-------------------------------------------------------------------------- */
.parola { display: inline-block; overflow: hidden; vertical-align: top; }
.parola > * {
display: inline-block;
transform: translateY(105%);
opacity: 0;
animation: sali .95s cubic-bezier(.22, 1, .36, 1) forwards;
animation-delay: calc(var(--i, 0) * 85ms);
}
@keyframes sali { to { transform: translateY(0); opacity: 1; } }
/* --------------------------------------------------------------------------
3. GRANA DA PELLICOLA sulle sezioni scure — toglie il «fatto col computer»
-------------------------------------------------------------------------- */
.section--primary,
.section--made-in-italy,
.cta-finale-cinematic { position: relative; isolation: isolate; }
.section--primary::after,
.section--made-in-italy::after,
.cta-finale-cinematic::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: .16;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.section--primary > *,
.section--made-in-italy > *,
.cta-finale-cinematic > * { position: relative; z-index: 2; }
/* --------------------------------------------------------------------------
4. LUCE LENTA sulla chiusura — un alone caldo che deriva, 0 KB
-------------------------------------------------------------------------- */
.cta-finale-cinematic::before {
content: "";
position: absolute;
inset: -30%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(38% 46% at 28% 32%, rgba(196, 162, 101, .20), transparent 68%),
radial-gradient(34% 40% at 76% 66%, rgba(139, 58, 90, .28), transparent 70%);
animation: deriva 26s ease-in-out infinite alternate;
}
@keyframes deriva {
from { transform: translate3d(-3%, -2%, 0) scale(1); }
to { transform: translate3d(4%, 3%, 0) scale(1.09); }
}
/* --------------------------------------------------------------------------
5. FILO D'ORO SOTTO I LINK — micro-movimento, ovunque
-------------------------------------------------------------------------- */
.navbar__link,
.footer__link { position: relative; }
.navbar__link::after,
.footer__link::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.navbar__link:hover::after,
.navbar__link:focus-visible::after,
.footer__link:hover::after,
.footer__link:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
/* --------------------------------------------------------------------------
6. LE CARD SI SOLLEVANO — ombra calda, non grigia
-------------------------------------------------------------------------- */
.case-card,
.editions-item {
transition: transform .5s cubic-bezier(.22, 1, .36, 1),
box-shadow .5s cubic-bezier(.22, 1, .36, 1);
will-change: transform;
}
.case-card:hover,
.editions-item:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(107, 33, 63, .16);
}
/* la foto della case card respira dentro la sua cornice */
.case-card__bg { transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.case-card:hover .case-card__bg { transform: scale(1.06); }
/* --------------------------------------------------------------------------
7. GLI ASTERISCHI D'ORO RESPIRANO — il segno del marchio, vivo
-------------------------------------------------------------------------- */
.hero-ed__note-title > span {
display: inline-block;
animation: respira 7s ease-in-out infinite;
transform-origin: center;
}
.hero-ed__note--2 .hero-ed__note-title > span { animation-delay: -1.7s; }
.hero-ed__note--3 .hero-ed__note-title > span { animation-delay: -3.4s; }
.hero-ed__note--4 .hero-ed__note-title > span { animation-delay: -5.1s; }
@keyframes respira {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.14) rotate(22deg); }
}
/* --------------------------------------------------------------------------
8. REVEAL A CASCATA — l'indice --i lo scrive spettacolo.js
Il meccanismo .reveal/.is-visible resta quello di main.js: qui si aggiunge
solo il ritardo progressivo fra elementi vicini.
-------------------------------------------------------------------------- */
.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
/* --------------------------------------------------------------------------
9. RETE DI SICUREZZA — movimento ridotto.
Ogni cosa che parte da invisibile deve finire visibile.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.hero-ed__branch > * {
animation: none !important;
stroke-dashoffset: 0 !important;
}
.hero-ed__branch > *:nth-child(n + 6) { fill-opacity: .05 !important; }
.parola > * {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.cta-finale-cinematic::before,
.hero-ed__note-title > span { animation: none !important; }
.reveal { transition-delay: 0ms !important; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* --------------------------------------------------------------------------
10. CORREZIONE DI UN DIFETTO PREESISTENTE — sbordo orizzontale a 320 px
Trovato il 16/09/2026 verificando a 320: la pagina chiedeva 389 px.
Causa: gli elementi di una griglia nascono con min-width:auto e non
scendono sotto la propria larghezza minima di contenuto. Il teaser del
Firm Builder pretendeva 374 px dentro una colonna da 288.
Non c'entra col trattamento visivo: c'era già, ma un sito che scorre di
lato sul telefono non si può chiamare spettacolare.
-------------------------------------------------------------------------- */
.grid > *,
.firms-blocks > *,
.audience-grid > *,
.editions-grid > * { min-width: 0; }
/* contenimento del testo — standard di casa, CLAUDE.md */
.grid > *, .grid p, .grid li, .grid h2, .grid h3,
.editions-item, .case-card__content {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Secondo colpevole dello sbordo a 320: i bottoni grandi hanno
white-space:nowrap (components.css:25) e con l'etichetta lunga più il
padding da 32px per lato pretendono 374 px. Sotto i 420 px vanno a capo. */
@media (max-width: 420px) {
.btn {
max-width: 100%;
white-space: normal;
text-align: center;
}
.btn--lg {
padding-left: var(--space-5);
padding-right: var(--space-5);
font-size: var(--text-base);
}
}