/* =========================================================
   COMPONENTS — header, menu, cursor, preloader, curtain,
   spinner, marquee, buttons, lists, footer
   ========================================================= */

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--gutter);
  color: var(--black);
  pointer-events: none;
  transition: transform .7s var(--ease), color .3s;
}
.header > * { pointer-events: auto; }
.header.is-hidden { transform: translateY(-130%); }
.ui-dark .header, .menu-open .header { color: var(--red); }

.logo { display: flex; align-items: center; gap: .6rem; }
.logo__star { width: 2.1rem; height: 2.1rem; transition: transform .8s var(--out); }
.logo:hover .logo__star { transform: rotate(180deg); }
.logo__txt { font-size: .78rem; font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; }

.header__actions { display: flex; align-items: center; gap: .9rem; }
.lang {
  font-size: .8rem; font-weight: 900; text-transform: uppercase;
  display: flex; gap: .35em; padding: .5rem .2rem;
}
.lang span { opacity: .45; transition: opacity .3s; }
html[lang="en"] .lang__en, html[lang="it"] .lang__it {
  opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em;
}
.lang:hover span { opacity: 1; }

.menu-btn {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1.25rem; border-radius: 99px;
  background: var(--black); color: var(--red);
  font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  transition: background .3s, color .3s, transform .5s var(--out);
}
.menu-btn:hover { transform: scale(1.06); }
.ui-dark .menu-btn, .menu-open .menu-btn { background: var(--red); color: var(--black); }
.menu-btn__icon { position: relative; width: 18px; height: 8px; }
.menu-btn__icon i {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform .5s var(--ease);
}
.menu-btn__icon i:first-child { top: 0; }
.menu-btn__icon i:last-child { bottom: 0; }
.menu-open .menu-btn__icon i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-open .menu-btn__icon i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---------- Giant menu ---------- */
.menu {
  position: fixed; left: 0; top: 0; width: 100%; z-index: 150;
  background: var(--black); color: var(--red);
  visibility: hidden; overflow: hidden; height: 0;
}
.menu__in {
  position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--gutter) * 2 + 3.4rem) var(--gutter) var(--gutter);
}
.menu__hint {
  position: absolute; top: calc(var(--gutter) * 2 + 3.4rem); left: var(--gutter);
  font-size: .8rem; font-weight: 800; text-transform: uppercase; opacity: .6;
}
.mlink { display: flex; align-items: baseline; gap: 1.1rem; transition: opacity .4s; }
.mlink__n { align-self: flex-start; margin-top: 1.4em; font-size: clamp(.75rem, 1.1vw, 1.05rem); font-weight: 900; }
.mlink__mask { display: block; overflow: hidden; padding: .03em 0; }
.mlink__t {
  display: block; font-weight: 900; font-stretch: 118%; text-transform: uppercase;
  font-size: clamp(3rem, min(14vw, 17vh), 14rem);
  line-height: .88; letter-spacing: -.045em;
  transition: transform .6s var(--out), color .3s;
}
.mlink.is-current .mlink__t { color: var(--paper); }
.mlink.is-current .mlink__n::after { content: ' •'; }
@media (hover: hover) {
  .menu__list:hover .mlink { opacity: .18; }
  .menu__list .mlink:hover { opacity: 1; }
  .mlink:hover .mlink__t { transform: translateX(.12em); }
}
.menu__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.5rem;
  margin-top: clamp(1rem, 3vh, 2rem); padding-top: 1rem;
  border-top: 2px solid currentColor;
  font-size: clamp(.72rem, .9vw, .9rem); font-weight: 800; text-transform: uppercase;
}
.menu__foot a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .mlink__t { font-stretch: 78%; font-size: min(17.5vw, 15vh); }
  .mlink { gap: .6rem; }
}

/* ---------- Cursor + hover preview ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.on { opacity: 1; }
.cursor__dot {
  position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: var(--black); box-shadow: 0 0 0 1.5px var(--paper);
  display: grid; place-items: center;
  transition: transform .5s var(--out), background .3s;
}
.cursor.big .cursor__dot { transform: scale(2.6); }
.cursor.label .cursor__dot { transform: scale(5.4); background: var(--black); }
.cursor__txt {
  font-size: 2.2px; font-weight: 900; text-transform: uppercase; color: var(--red);
  opacity: 0; transition: opacity .25s; white-space: nowrap; letter-spacing: .02em;
}
.cursor.label .cursor__txt { opacity: 1; }
@media (hover: none) { .cursor, .preview { display: none !important; } }

.preview {
  position: fixed; left: 0; top: 0; z-index: 160; pointer-events: none;
  width: clamp(200px, 22vw, 360px); aspect-ratio: var(--ar, 1 / 1);
}
.preview.is-wide { width: clamp(260px, 30vw, 500px); }
.preview__in { position: absolute; inset: 0; border: 3px solid var(--black); }
.menu-open .preview__in { border-color: var(--red); }

/* ---------- Preloader / curtain ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--black); color: var(--red);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--gutter);
}
.no-pre .preloader, .is-trans .preloader, html:not(.js) .preloader { display: none; }
.preloader__top { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.preloader__count {
  font-size: min(36vw, 62vh); font-weight: 900; font-stretch: 118%;
  line-height: .78; letter-spacing: -.06em; display: flex; align-items: flex-start;
}
.preloader__count small { font-size: .22em; margin-top: .3em; letter-spacing: 0; }
.preloader__star { position: absolute; right: var(--gutter); top: 50%; width: min(26vw, 280px); height: auto; transform: translateY(-50%); }

.curtain {
  position: fixed; inset: 0; z-index: 990; background: var(--black); color: var(--red);
  display: grid; place-items: center; visibility: hidden; clip-path: inset(100% 0 0 0);
}
.is-trans .curtain { visibility: visible; clip-path: inset(0); }
.curtain__mask { overflow: hidden; padding: .05em var(--gutter); max-width: 100vw; text-align: center; }
.curtain__label {
  display: block; font-weight: 900; font-stretch: 118%; text-transform: uppercase;
  font-size: clamp(2.6rem, min(10vw, 18vh), 11rem); letter-spacing: -.045em; line-height: .9;
}

/* ---------- Scroll spinner ---------- */
.spinner {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 90;
  width: clamp(72px, 8vw, 112px); aspect-ratio: 1; color: var(--black);
  pointer-events: none; transition: color .3s, opacity .4s;
}
.ui-dark .spinner { color: var(--red); }
.spinner svg { width: 100%; height: 100%; overflow: visible; }
.spinner text { font-size: 17px; font-weight: 900; text-transform: uppercase; fill: currentColor; letter-spacing: .6px; }
.menu-open .spinner { opacity: 0; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; user-select: none; }
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__group { display: inline-flex; align-items: center; flex: none; }
.marquee__group > span, .marquee__group > svg { flex: none; }
.marquee__star { width: .62em; height: .62em; margin: 0 .35em; }
.marquee--big {
  font-weight: 900; font-stretch: 118%; text-transform: uppercase;
  font-size: clamp(3.4rem, 11vw, 11rem); line-height: .95; letter-spacing: -.045em; padding: .06em 0;
}
.marquee--outline { -webkit-text-stroke: 2px var(--red); color: transparent; }
@media (max-width: 800px) { .marquee--outline { -webkit-text-stroke-width: 1.5px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.1rem 1.8rem; border-radius: 99px;
  background: var(--black); color: var(--red);
  font-size: clamp(.8rem, 1vw, 1rem); font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .5s var(--out);
}
.btn::before {
  content: ''; position: absolute; inset: 0; background: var(--paper); z-index: -1;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover { color: var(--black); transform: scale(1.04); }
.btn:hover::before { transform: none; }
.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- Index rows (services / work) ---------- */
.list { border-top: 3px solid var(--black); }
.row {
  position: relative; display: grid;
  grid-template-columns: 3.4rem minmax(0, 1.4fr) minmax(0, 1fr) 2.6rem;
  align-items: center; gap: var(--gutter);
  padding: clamp(1rem, 1.8vw, 1.8rem) var(--gutter);
  border-bottom: 3px solid var(--black);
  overflow: hidden; transition: opacity .4s;
}
.row::before {
  content: ''; position: absolute; inset: 0; background: var(--black);
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.row > * { position: relative; transition: color .3s; }
.row__n { font-size: .85rem; font-weight: 900; }
.row__t {
  font-size: clamp(1.9rem, 4.8vw, 5rem); font-weight: 900; font-stretch: 112%; hyphens: manual; overflow-wrap: break-word;
  text-transform: uppercase; letter-spacing: -.04em; line-height: .9;
}
.row__d { font-size: clamp(.85rem, 1.1vw, 1.1rem); font-weight: 700; line-height: 1.25; max-width: 30ch; }
.row__y { font-size: clamp(.85rem, 1.1vw, 1.1rem); font-weight: 800; text-transform: uppercase; }
.row__a { justify-self: end; width: 1.6rem; height: 1.6rem; transition: transform .5s var(--out), color .3s; }
@media (hover: hover) {
  .list:hover .row:not(:hover) { opacity: .28; }
  .row:hover::before { transform: none; }
  .row:hover > * { color: var(--red); }
  .row:hover .row__a { transform: rotate(45deg) scale(1.2); }
}
.row.is-active::before { transform: none; }
.row.is-active > * { color: var(--red); }
@media (max-width: 800px) {
  .spinner { width: 58px; }
  .row__t { font-size: clamp(1.9rem, 8.2vw, 3.2rem); font-stretch: 88%; }
  .footer__links { font-size: 1.15rem; }
  .row { grid-template-columns: 2rem minmax(0, 1fr) 1.6rem; row-gap: .5rem; align-items: start; }
  .row__d, .row__y { grid-column: 2; grid-row: 2; max-width: none; }
  .row__a { grid-column: 3; grid-row: 1; }
}

/* ---------- Footer (fixed behind content, revealed on scroll) ---------- */
.main { margin-bottom: 100vh; margin-bottom: 100svh; }
.footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
  height: 100vh; height: 100svh; background: var(--black); color: var(--red);
  overflow: hidden;
}
.footer__inner {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--gutter) * 2 + 3rem) var(--gutter) var(--gutter);
}
.footer__top { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gutter); align-items: start; }
.footer__hook {
  font-size: clamp(1.4rem, 3.2vw, 3.4rem); font-weight: 900; font-stretch: 108%;
  text-transform: uppercase; line-height: .95; letter-spacing: -.035em; max-width: 16ch;
}
.footer__links { display: grid; gap: .5rem; justify-items: start; font-size: clamp(1rem, 1.7vw, 1.7rem); font-weight: 800; }
.footer__links a { border-bottom: 2px solid currentColor; line-height: 1.1; }
.footer__links a:hover { color: var(--paper); }
.footer__links span { opacity: .65; font-size: .6em; text-transform: uppercase; display: block; margin-top: .7rem; }
.footer__big {
  font-weight: 900; font-stretch: 122%; text-transform: uppercase; line-height: .78;
  font-size: clamp(5rem, 24vw, 30rem); letter-spacing: -.06em; white-space: nowrap;
  display: block; margin-left: -.04em;
}
.footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 2px solid currentColor; padding-top: .9rem;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; padding-right: clamp(80px, 8vw, 120px);
}
.footer__bottom button { text-transform: uppercase; font-weight: 800; }
.footer__bottom button:hover { color: var(--paper); }
@media (max-width: 800px) {
  .footer__top { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer__big { font-stretch: 85%; font-size: 36vw; line-height: .8; white-space: normal; }
}

/* simple (flow) footer — used by contact page */
.main--flat { margin-bottom: 0; }
.footer--simple { position: relative; height: auto; z-index: 1; }
.footer--simple .footer__inner { height: auto; padding-top: var(--gutter); gap: 1.4rem; }

/* ---------- Animated film grain over everything ---------- */
body::after {
  content: ''; position: fixed; left: -50%; top: -50%; width: 200%; height: 200%;
  z-index: 800; pointer-events: none; opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.6 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain 1s steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-5%, -8%); }
  20%  { transform: translate(-12%, 4%); }
  30%  { transform: translate(7%, -14%); }
  40%  { transform: translate(-4%, 14%); }
  50%  { transform: translate(-12%, 6%); }
  60%  { transform: translate(14%, 0); }
  70%  { transform: translate(0, 12%); }
  80%  { transform: translate(3%, 15%); }
  90%  { transform: translate(-8%, 8%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ---------- Privacy note panel (small, bottom-left) ---------- */
.consent {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 300;
  width: min(330px, calc(100vw - var(--gutter) * 2));
  background: var(--black); color: var(--red);
  border: 2px solid var(--red); border-radius: 18px; padding: 1rem 1.1rem 1.1rem;
  display: grid; gap: .6rem;
}
.consent__t { font-size: .9rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
.consent__d { font-size: .78rem; font-weight: 700; line-height: 1.3; color: var(--paper); }
.consent__b { display: flex; align-items: center; gap: .9rem; margin-top: .3rem; }
.consent__ok {
  background: var(--red); color: var(--black); border-radius: 99px;
  padding: .65rem 1.1rem; font-size: .72rem; font-weight: 900; text-transform: uppercase;
  transition: transform .5s var(--out), background .3s;
}
.consent__ok:hover { transform: scale(1.06); background: var(--paper); }
.consent__more { font-size: .72rem; font-weight: 900; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: .15rem; }
@media (max-width: 800px) { .consent { width: calc(100vw - var(--gutter) * 2 - 70px); bottom: var(--gutter); } }

.footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer__legal a, .footer__legal button { text-transform: uppercase; font-weight: 800; }
.footer__legal a:hover, .footer__legal button:hover { color: var(--paper); text-decoration: underline; }