/* Motion layer stile Apple per la home — attivo solo con .rm-motion su <html> (aggiunto da motion.js) */

/* barra di avanzamento della lettura */
.rm-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--rm-read,0));background:linear-gradient(90deg,var(--copper),var(--gold))}

/* hero: titolo che entra parola per parola */
.rm-motion .hero h1 .rm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
/* il titolo non parte mai da opacità 0, così resta l'elemento di riferimento per la velocità di Google */
.rm-motion .hero h1 .rm-w>span{display:inline-block;transform:translateY(105%);animation:rmWordUp 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.12s + var(--i) * 55ms)}
@keyframes rmWordUp{to{transform:none}}
.rm-motion .hero .overline,.rm-motion .hero .sub,.rm-motion .hero .hero-actions,.rm-motion .hero .hero-note{opacity:.01;transform:translateY(24px);animation:rmFadeUp 1s cubic-bezier(.16,1,.3,1) forwards}
.rm-motion .hero .overline{animation-delay:.05s}
.rm-motion .hero .sub{animation-delay:.75s}
.rm-motion .hero .hero-actions{animation-delay:.9s}
.rm-motion .hero .hero-note{animation-delay:1.05s}
@keyframes rmFadeUp{to{opacity:1;transform:none}}

/* hero: il testo si allontana e la foto si scurisce mentre scorri */
.rm-motion .hero .hero-grid{transform:translate3d(0,calc(var(--rm-hp,0) * -90px),0) scale(calc(1 - var(--rm-hp,0) * .06));opacity:calc(1 - var(--rm-hp,0) * 1.3);will-change:transform,opacity}
.rm-motion .hero .proof-strip>div{opacity:0;transform:translateY(30px);animation:rmFadeUp 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(1.1s + var(--i) * 90ms)}
.rm-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--ink);opacity:calc(var(--rm-hp,0) * .55)}

/* titoli di sezione che si "accendono" parola per parola mentre scorri */
.rm-motion .rm-lit .rm-lw{opacity:calc(.16 + .84 * var(--on,0));transition:opacity .25s linear}

/* gruppi di card che entrano in sequenza */
.rm-motion .rm-stagger>*{opacity:0;transform:translate3d(0,48px,0) scale(.965);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 90ms)}
.rm-motion .rm-stagger.rm-in>*{opacity:1;transform:none}
.rm-motion .rm-stagger[data-r]{opacity:1;transform:none}

/* immagini con leggera profondità durante lo scroll */
.rm-motion .rm-depth{transform:scale(calc(1.14 - var(--rm-p,0) * .14));transition:transform .1s linear;will-change:transform}
.rm-motion .area .aimg{overflow:hidden}

/* metodo: linea che si riempie collegando le quattro fasi */
.rm-motion .steps{position:relative}
.rm-motion .steps::before{content:"";position:absolute;left:0;right:0;top:-22px;height:2px;border-radius:2px;background:rgba(245,163,59,.18)}
.rm-motion .steps::after{content:"";position:absolute;left:0;right:0;top:-22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--copper),var(--gold));transform-origin:0 50%;transform:scaleX(var(--rm-p,0));box-shadow:0 0 18px rgba(245,163,59,.6)}

/* card che reagiscono al puntatore (solo mouse) */
@media (hover:hover) and (pointer:fine){
  .rm-motion .rm-tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
  .rm-motion .rm-tilt:hover{box-shadow:0 30px 70px rgba(35,23,9,.28)}
  .rm-motion .rm-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,217,143,.18),transparent 45%)}
  .rm-motion .rm-tilt:hover::after{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .rm-progress{display:none}
}