/* ===================================================================
   Hero animations — Consorzio IN.TE.SE.
   Si appoggia a dark-styles.css per l'aspetto base dell'hero.
   Le animazioni partono solo se body.canim (aggiunto via JS quando
   prefers-reduced-motion = no-preference). Senza JS / reduced-motion
   tutto resta visibile e statico.
   =================================================================== */

.hero-block{padding:0 0 18px;}
.block-bar{display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad) 12px;max-width:1240px;margin:0 auto;}
.block-bar .tag{font-family:"Sora",sans-serif;font-weight:600;font-size:15px;color:var(--text);}
.block-bar .tag small{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;
  font-size:11px;color:var(--muted-2);letter-spacing:.04em;margin-top:3px;text-transform:uppercase;}
.replay{display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:1px solid var(--line-2);color:var(--muted);border-radius:30px;
  padding:9px 16px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;
  cursor:pointer;transition:border-color .15s,color .15s;}
.replay:hover{border-color:var(--green);color:var(--green);}
.replay svg{width:14px;height:14px;}
.stage{background:var(--bg);padding:0 var(--pad);}

/* ---- base hidden states (only when animation is enabled) ---- */
body.canim .an,
body.canim .an-photo,
body.canim .an-badge,
body.canim .an-blur{will-change:transform,opacity;}
body.canim .an{opacity:0;}
body.canim .an-photo{opacity:0;transform:scale(.93);}
body.canim .an-badge{opacity:0;transform:scale(.55) translateY(8px);}
body.canim .an-blur{opacity:0;filter:blur(14px);transform:translateY(10px);}

/* ---- triggered states (only when animation enabled via body.canim) ---- */
body.canim .hero-block.play .an{animation:anRise .72s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s);}
body.canim .hero-block.play .an-photo{animation:anPop .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s);}
body.canim .hero-block.play .an-badge{animation:anBadge .6s cubic-bezier(.18,1.5,.4,1) forwards;animation-delay:var(--d,0s);}
body.canim .hero-block.play .an-blur{animation:anBlur 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s);}

@keyframes anRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes anPop{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
@keyframes anBadge{from{opacity:0;transform:scale(.55) translateY(8px)}to{opacity:1;transform:none}}
@keyframes anBlur{from{opacity:0;filter:blur(14px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}

/* ===== Variante 2 — highlight wipe + headline rotator ===== */
.rot-mask{display:inline-block;overflow:hidden;vertical-align:top;}
.rot{display:inline-block;color:var(--on-white);will-change:transform,opacity;}
.rot.out{animation:rotOut .34s cubic-bezier(.5,0,.75,0) forwards;}
.rot.in{animation:rotIn .42s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes rotOut{to{opacity:0;transform:translateY(-90%)}}
@keyframes rotIn{from{opacity:0;transform:translateY(90%)}to{opacity:1;transform:none}}
/* highlight that paints in on the final word */
.hl-anim{background:var(--green);color:var(--ink);padding:.04em .26em;border-radius:7px;}

/* ===== Variante 3 — float + sparkle ===== */
body.canim .v3 .circle-float{animation:none;}
body.canim .hero-block.play .v3 .circle-float{animation:floaty 6.5s ease-in-out 1.1s infinite;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.v3 .spark{display:inline-block;}
body.canim .hero-block.play .v3 .spark{animation:twinkle 2.4s ease-in-out infinite;}
body.canim .hero-block.play .v3 .spark:nth-of-type(2){animation-delay:.6s;}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.45;transform:scale(.8) rotate(35deg)}}

@media (prefers-reduced-motion: reduce){
  .hero-block.play .an,.hero-block.play .an-photo,
  .hero-block.play .an-badge,.hero-block.play .an-blur,
  .hero-block.play .v3 .circle-float,.hero-block.play .v3 .spark{animation:none!important;}
  body.canim .an,body.canim .an-photo,body.canim .an-badge,body.canim .an-blur{opacity:1;transform:none;filter:none;}
}