/* SCROLL FX + section color rhythm — overlay opzionale.
   Da applicare DOPO verona.css (e dopo verona-light.css se attivo).
   Compatibile sia col tema light che dark. Per disattivare: rimuovere il <link>. */

/* === SECTION COLOR RHYTHM (più deciso) === */
/* Alternanza forte: chiaro → teal scuro → chiaro → teal scuro */
.manifesto{background:var(--accent) !important;color:#FEFCF8 !important;position:relative;overflow:hidden}
.manifesto h2,.manifesto h2 *{color:#FEFCF8 !important}
.manifesto .eyebrow,.manifesto .label-mono{color:rgba(254,252,248,.7) !important}
.manifesto-body p{color:rgba(254,252,248,.92) !important}
.manifesto-body p:first-letter{color:#FEFCF8 !important}
.manifesto h2 em.lime{color:#88D1E5 !important}

.pillars{background:var(--bg) !important}

.numbers{background:#0F2530 !important;color:#FEFCF8 !important}
.numbers h2,.numbers h2 *{color:#FEFCF8 !important}
.numbers .eyebrow,.numbers .label-mono,.numbers .stat .label{color:rgba(254,252,248,.65) !important}
.numbers .stat .num{color:#88D1E5 !important}
.numbers .stat .desc{color:rgba(254,252,248,.55) !important}
.numbers .numbers-grid,.numbers .stat{border-color:rgba(254,252,248,.10) !important}

#esperienze.section{background:var(--bg-2) !important}

#journal.journal{background:#0F2530 !important;color:#FEFCF8 !important}
#journal h2,#journal h2 *{color:#FEFCF8 !important}
#journal .eyebrow{color:rgba(254,252,248,.65) !important}
#journal .article{border-color:rgba(254,252,248,.10) !important}
#journal .article h3{color:#FEFCF8 !important}
#journal .article p{color:rgba(254,252,248,.75) !important}
#journal .article .top{color:rgba(254,252,248,.5) !important}
#journal .article:hover{background:rgba(254,252,248,.04) !important}
#journal .pill-btn{color:#FEFCF8;border-color:rgba(254,252,248,.3)}
#journal .pill-btn:hover{color:#88D1E5;border-color:#88D1E5}

.contact{background:var(--bg) !important}

/* === HERO ENHANCEMENTS === */
.hero{position:relative}
.hero::before{
  content:"";
  position:absolute; inset:-10% -5% auto -5%; height:80%;
  background:radial-gradient(ellipse at 30% 40%, rgba(0,97,114,0.06), transparent 60%);
  pointer-events:none; z-index:0;
}
.hero .wrap{position:relative;z-index:1}

/* Hero h1: parallax + scale via scroll JS */
.hero h1{will-change:transform,opacity;transition:none}

/* === REVEAL ANIMATIONS PIÙ DECISE === */
.section-anchor,.section,.numbers,.people,.journal,.pillars,.manifesto,.contact,.cross-links{
  opacity:0; transform:translateY(60px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.section-anchor.fx-in,.section.fx-in,.numbers.fx-in,.people.fx-in,.journal.fx-in,
.pillars.fx-in,.manifesto.fx-in,.contact.fx-in,.cross-links.fx-in{
  opacity:1; transform:none;
}

/* === CARD HOVER 3D TILT (sottile) === */
.pillar-row,.pillar-stretch,.exp-card,.article,.cross,.ir-item,.person{
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s !important;
}
.exp-card:hover,.article:hover,.cross:hover,.ir-item:hover,.person:hover{
  transform:translateY(-4px) !important;
}

/* === MARQUEE PIÙ VELOCE & MULTILEVEL === */
.marquee{background:var(--accent);color:#FEFCF8 !important;border-color:rgba(254,252,248,.15) !important}
.marquee em{color:#88D1E5 !important;font-style:italic}
.marquee .dot{background:#88D1E5 !important}
.marquee-track{animation-duration:28s !important}

/* === DECORATIVE SCROLL DIVIDER === */
.section-anchor::before{
  height:2px !important;
  background:linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent) !important;
  opacity:0;
  transition:opacity 1.2s, transform 1.2s;
  transform:scaleX(.3); transform-origin:center;
}
.section-anchor.fx-in::before{opacity:.8; transform:scaleX(1)}

/* === STICKY-ish PILLARS HEAD === */
.pillars-head{position:sticky; top:90px; background:var(--bg); padding:24px 0; z-index:5}
@media (max-width:980px){.pillars-head{position:static}}

/* === SECTION TRANSITION VEIL: gradiente di passaggio fra blocchi colorati === */
.manifesto::after,.numbers::after,#journal.journal::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:80px;
  background:linear-gradient(to bottom, transparent, var(--bg) 95%);
  pointer-events:none;
}

/* === ROTATING DECORATIVE NUMBER === */
.feature .num,.pillar-row .num{
  display:inline-block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.feature:hover .num,.pillar-row:hover .num,.pillar-stretch:hover .num{
  transform:rotate(-8deg) scale(1.15); color:var(--accent) !important;
}

/* === ARROWS SCROLL HINT (chevron in fondo all'hero) === */
.hero::after{
  content:"↓"; position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  font-size:24px; color:var(--ink-3); font-family:var(--serif); font-style:italic;
  animation:bouncedown 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bouncedown{
  0%,100%{transform:translateX(-50%) translateY(0); opacity:.4}
  50%{transform:translateX(-50%) translateY(8px); opacity:.9}
}

/* === SECTION EYEBROW: piccolo trattino animato che cresce === */
.eyebrow{position:relative; padding-left:0; transition:padding-left .5s}
.fx-in .eyebrow::before{
  content:""; display:inline-block; width:0; height:1px; background:var(--accent);
  vertical-align:middle; margin-right:0;
  animation:eyegrow 1s cubic-bezier(.2,.7,.2,1) .3s forwards;
}
@keyframes eyegrow{to{width:24px; margin-right:10px}}

/* === MARQUEE PAUSE ON HOVER === */
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee{cursor:default}