/* Alessandro Varini · livello di motion design (va insieme a js/motion.js) */

/* barra d'oro di avanzamento */
.progress {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--va-right-bottom), var(--accent), var(--va-shared-top));
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  box-shadow: 0 0 12px rgba(222, 189, 128, .5);
}

/* polvere d'oro dietro il logo */
.dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* entrata del logo più teatrale: i nastri arrivano da lontano, sfocati */
.motion .hero__mark .va-r { animation: ribbon-l 1.4s var(--ease) .2s both; }
.motion .hero__mark .va-l { animation: ribbon-r 1.4s var(--ease) .35s both; }
.motion .hero__mark .va-s { animation: ribbon-s 1.5s var(--ease) .8s both; }
@keyframes ribbon-l { from { opacity: 0; transform: translate(-60px, 50px) rotate(-8deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ribbon-r { from { opacity: 0; transform: translate(60px, -50px) rotate(8deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ribbon-s { from { opacity: 0; transform: translateY(-40px) scaleY(.4); } to { opacity: 1; transform: none; } }

/* titoli che salgono parola per parola */
.split .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split .wd__in { display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease); }
.split.on .wd__in { transform: none; }

/* etichette: una lineetta d'oro che si disegna prima del testo */
.motion .eyebrow { position: relative; }
.motion .eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 1px; margin-right: 12px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .1s;
}
.motion .eyebrow.on::before { transform: scaleX(1); }
.motion .contact .eyebrow::before, .motion .manifesto .eyebrow::before { display: none; }

/* nastro di testo che scorre */
.marquee {
  overflow: hidden; padding-block: clamp(30px, 6vw, 70px);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; }
.marquee span {
  font-family: var(--font-mark); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(34px, 7vw, 96px); letter-spacing: .04em; line-height: 1.15; padding: 0 .35em;
  color: transparent; -webkit-text-stroke: 1px rgba(236, 238, 242, .28);
}
.marquee__track--alt span { color: var(--fg); -webkit-text-stroke: 0; }
.marquee__track--alt span:nth-of-type(3n+2) { color: var(--accent); }
.marquee i { width: .5em; height: .5em; flex: none; font-size: clamp(34px, 7vw, 96px); background: var(--accent); transform: rotate(45deg) scale(.35); }

/* schede: inclinazione 3D e luce che segue il mouse */
.tilt { position: relative; isolation: isolate; transform-style: preserve-3d; }
.js .reveal.in.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), opacity 1s var(--ease); }
.tilt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(222, 189, 128, .14), transparent 70%);
  opacity: 0; transition: opacity .4s;
}
.tilt:hover::before { opacity: 1; }
.service.tilt { border-radius: 18px; }

/* servizi: comparsa a cascata */
.services__list .service.reveal:nth-child(2) { transition-delay: .12s; }
.services__list .service.reveal:nth-child(3) { transition-delay: .24s; }
.services__list { position: relative; }
.motion .services__list { border-top-color: transparent; }
.services__list::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--line) 60%);
  transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease);
}
.services__list.on::before { transform: scaleX(1); }

/* metodo: linea d'oro che si riempie scorrendo, numeri che si accendono */
.steps { position: relative; padding-top: 34px !important; }
.steps::before, .steps::after { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 1px; }
.steps::before { background: var(--line); }
.steps::after { background: linear-gradient(90deg, var(--va-right-bottom), var(--accent)); transform: scaleX(var(--fill, 0)); transform-origin: left; box-shadow: 0 0 10px rgba(222, 189, 128, .6); }
.step { position: relative; }
.step::after {
  content: ""; position: absolute; top: -30px; left: 24px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--dim); transition: background .5s, border-color .5s, box-shadow .5s;
}
.steps.on .step:nth-child(1)::after { transition-delay: .2s; }
.steps.on .step::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.steps .step.reveal:nth-child(2) { transition-delay: .1s; }
.steps .step.reveal:nth-child(3) { transition-delay: .2s; }
.steps .step.reveal:nth-child(4) { transition-delay: .3s; }

/* foto: si apre come un sipario e scorre dentro la cornice */
.motion .about__photo.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 28px); transition: clip-path 1.4s var(--ease); }
.motion .about.on .about__photo.reveal { clip-path: inset(0 0 0 0 round 28px); }
.about__photo img { will-change: transform; transform: scale(1.12); }

/* pulsanti magnetici */
.magnet { transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s; will-change: transform; }

/* luce dei contatti che segue il mouse */
.contact__glow { transform: translate(calc(-50% + var(--gx, 0px)), var(--gy, 0px)); transition: transform 1.2s var(--ease); }

@media (max-width: 900px) {
  .steps::before, .steps::after, .step::after { display: none; }
  .steps { padding-top: 0 !important; }
}