/* ==========================================================
   it-alien.de — Un sito dell'altro mondo
   ========================================================== */

:root {
  --ink: #14100d;
  --night: #0d0a08;
  --cream: #f3e9d2;
  --paper: #fbf6ea;
  --rosso: #c8102e;
  --pomodoro: #e2341f;
  --verde: #0b4f33;
  --basil: #2f7d3a;
  --giallo: #ffd84a;
  --pad: clamp(1.1rem, 4vw, 3.5rem);

  --f-display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --f-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Courier Prime', 'Courier New', monospace;
  --f-billing: 'Six Caps', 'Anton', Impact, sans-serif;
  --f-poster: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-script: 'Yellowtail', 'Brush Script MT', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }

/* Filmkorn */
.grain {
  position: fixed; inset: -60px; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .1;
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); }
  40% { transform: translate(18px, -26px); } 60% { transform: translate(-12px, -18px); }
  80% { transform: translate(26px, 20px); } 100% { transform: translate(0, 0); }
}

/* ---------- Bausteine ---------- */
.slate {
  font: 400 .8rem/1.4 var(--f-mono);
  letter-spacing: .14em; text-transform: uppercase; opacity: .72;
}
.slate::before { content: '\25B6\FE0E'; font-size: .7em; margin-right: .9em; color: var(--pomodoro); }

h2 {
  font: italic 900 clamp(3.2rem, 9.5vw, 9.5rem)/.86 var(--f-display);
  letter-spacing: -.025em; margin: .18em 0 0; text-wrap: balance;
}
h2 > [lang] { display: block; margin-bottom: .2em; }
h2 > .sub { display: block; }
.sub {
  font: italic 500 clamp(1.05rem, 1.55vw, 1.4rem)/1.4 var(--f-text);
  color: var(--giallo); max-width: 36em; letter-spacing: 0; text-wrap: pretty;
  text-shadow: 0 1px 0 #000, 0 0 2px #000, 0 0 14px rgba(0,0,0,.7);
}

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: 800 .92rem/1 var(--f-text); letter-spacing: .17em; text-transform: uppercase;
  padding: 1.15rem 1.8rem; color: var(--cream); background: var(--rosso);
  border: 2px solid var(--rosso); box-shadow: 6px 6px 0 #000;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #000; }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #000; }
.btn--ink { background: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 var(--rosso); }
.btn--ink:hover { box-shadow: 9px 9px 0 var(--rosso); }
.btn--cream { background: var(--cream); border-color: var(--cream); color: var(--rosso); box-shadow: 6px 6px 0 var(--ink); }
.btn--cream:hover { box-shadow: 9px 9px 0 var(--ink); }
.link {
  font: 700 .85rem/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding-bottom: .35em; border-bottom: 1px solid currentColor;
}
.link:hover { color: var(--giallo); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.2rem; margin-top: 2.2rem; }

/* ==========================================================
   HERO
   ========================================================== */
.cinema { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; background: #000; }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem var(--pad); background: #000;
  font: 600 .74rem/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(243,233,210,.75);
}
.bar a { text-decoration: none; }
.bar a:hover { color: var(--giallo); }
.bar ul { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav-cta { color: var(--cream); border: 1px solid rgba(243,233,210,.5); padding: .7em 1.1em; }
.nav-cta:hover { border-color: var(--giallo); }

.logo { display: inline-flex; align-items: baseline; color: var(--cream); font: 800 1.05rem/1 var(--f-text); font-stretch: 125%; letter-spacing: .1em; }
.logo__dash { display: inline-block; overflow: hidden; max-width: .7em; color: var(--pomodoro); animation: dash 7s ease-in-out infinite; }
.logo__tld { color: rgba(243,233,210,.66); font-weight: 500; }
.logo small { margin-left: 1em; font: italic 400 .72rem/1 var(--f-display); letter-spacing: .04em; text-transform: none; color: var(--giallo); }
@keyframes dash { 0%, 38% { max-width: .7em; opacity: 1; } 50%, 88% { max-width: 0; opacity: 0; } 100% { max-width: .7em; opacity: 1; } }

.screen { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; isolation: isolate; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; animation: projector 7s infinite; }
@keyframes projector { 0%, 100% { filter: brightness(1); } 47% { filter: brightness(1); } 48% { filter: brightness(1.07); } 50% { filter: brightness(.97); } 52% { filter: brightness(1); } }
.screen__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(4,5,14,.88) 0, rgba(4,5,14,.55) 36%, transparent 58%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
}

.ufo-hover { animation: hover 6s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.ufo-lights circle { animation: blink 1.4s steps(2, jump-none) infinite; }
.ufo-lights circle:nth-child(even) { animation-delay: .7s; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: .25; } }
.float { animation: levitate 5s ease-in-out infinite; }
.f2 { animation-delay: -1.6s; } .f3 { animation-delay: -3.1s; }
@keyframes levitate { 0%, 100% { transform: translateY(18px); } 50% { transform: translateY(-22px); } }

.gino {
  position: absolute; z-index: -1; right: 1.5%; bottom: -1%;
  height: 94%; max-height: 900px; aspect-ratio: 600 / 850; width: auto; overflow: visible;
  filter: drop-shadow(-30px 20px 40px rgba(0,0,0,.55));
  animation: ginoIn 1.6s cubic-bezier(.2,.8,.2,1) .5s both;
}
@keyframes ginoIn { from { transform: translateY(14%); opacity: 0; } to { transform: none; opacity: 1; } }
.mano { transform-box: fill-box; transform-origin: 50% 100%; animation: mano 1.1s ease-in-out infinite; }
@keyframes mano { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-10px); } }

.title { padding: clamp(1.6rem, 4vh, 3.5rem) var(--pad) clamp(5.5rem, 13vh, 8rem); max-width: min(64%, 1000px); }
.title > * { animation: fadeUp 1.3s cubic-bezier(.2,.7,.2,1) both; }
.title > :nth-child(2) { animation-delay: .25s; } .title > :nth-child(3) { animation-delay: .7s; } .title > :nth-child(4) { animation-delay: 1s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.presenta { font: 600 .82rem/1 var(--f-text); letter-spacing: .42em; text-transform: uppercase; color: rgba(243,233,210,.85); }
.presenta em { font: italic 400 1.25em var(--f-display); letter-spacing: .08em; text-transform: none; color: var(--giallo); }
h1 { margin: 0; }
.h1__it {
  display: block;
  font: italic 900 clamp(3.4rem, min(9.6vw, 15.5vh), 11rem)/.84 var(--f-display);
  letter-spacing: -.03em; margin: .2em 0 .22em; color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 60px rgba(0,0,0,.5);
}
.h1__it span { color: #ff4a30; }
.h1__kw {
  display: block; margin-bottom: .5rem;
  font: italic 800 clamp(1.2rem, 1.9vw, 1.75rem)/1.25 var(--f-text); color: var(--giallo);
  text-shadow: 0 1px 0 #000, 0 0 2px #000, 0 0 14px rgba(0,0,0,.7);
}

.billing {
  position: absolute; left: calc(var(--pad) + 3.4rem); right: 38%; bottom: 1.1rem;
  font: 400 clamp(.8rem, 1.15vw, 1.25rem)/1.15 var(--f-billing);
  letter-spacing: .16em; text-transform: lowercase; color: rgba(243,233,210,.7);
}
.billing i { font-style: normal; font-size: 1.55em; text-transform: uppercase; color: rgba(243,233,210,.82); margin: 0 .12em; }
.bar--bottom a { color: var(--cream); }

/* Laufband */
.ticker { overflow: hidden; background: var(--rosso); border-top: 7px solid var(--verde); box-shadow: inset 0 7px 0 var(--cream); padding: 1.35rem 0 .9rem; }
.ticker__track { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: ticker 44s linear infinite; font: italic 900 clamp(1.7rem, 3.6vw, 3.2rem)/1 var(--f-display); color: var(--cream); white-space: nowrap; }
.ticker__track b { font: 400 .5em var(--f-text); color: var(--giallo); }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ==========================================================
   SEKTIONEN
   ========================================================== */
.sec { position: relative; padding: clamp(5rem, 10vw, 10rem) var(--pad); }
.sec__head { max-width: 1500px; margin: 0 auto clamp(3rem, 6vw, 5.5rem); }

.sec--design { background: radial-gradient(ellipse 90% 45% at 50% 0, #2a1d14 0, #120e0b 70%); }

.wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.4rem, 3.4vw, 3.6rem) clamp(1.2rem, 2.2vw, 2.4rem); max-width: 1500px; margin: 0 auto; }
.card { grid-column: span var(--span, 4); min-width: 0; }
.card figcaption { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .9rem; margin-top: 1.1rem; }
.card figcaption span { font: 400 .78rem var(--f-mono); letter-spacing: .12em; color: #ff6a50; }
.card figcaption strong { font: italic 700 1.5rem/1.1 var(--f-display); }
.card figcaption p { grid-column: 1 / -1; margin-top: .4rem; font-size: .92rem; line-height: 1.5; color: rgba(243,233,210,.6); max-width: 46em; }

.mock {
  position: relative; display: block; overflow: hidden; container-type: size;
  height: clamp(330px, 33vw, 500px);
  box-shadow: 0 0 0 1px rgba(243,233,210,.16), 0 40px 70px -30px #000;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
}
.card:hover .mock { transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 0 0 1px rgba(243,233,210,.4), 0 60px 90px -30px #000; }
.card:nth-child(even):hover .mock { transform: translateY(-8px) rotate(.5deg); }
.mock :where(b, i, em, u, small, strong) { font: inherit; text-decoration: none; }
.mock :where(p, ol, hr) { margin: 0; padding: 0; }
.m-nav { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 5cqmin; padding: 2.4cqmin; font: 600 2.3cqmin/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; }

/* 01 Trattoria */
.m-trattoria { background: linear-gradient(90deg, rgba(190,25,35,.62) 50%, transparent 0), linear-gradient(rgba(190,25,35,.62) 50%, transparent 0), #f7f0e1; background-size: 9cqmin 9cqmin; color: #1a1410; }
.m-trattoria .m-nav { background: #f7f0e1; border-bottom: .5cqmin solid #1a1410; }
.m-trattoria .label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: min(74cqw, 96cqh); background: #f7f0e1; border: .7cqmin solid #1a1410; box-shadow: 0 0 0 1.2cqmin #f7f0e1, 0 0 0 1.7cqmin #1a1410, 0 4cqmin 7cqmin rgba(0,0,0,.4); padding: 3.5cqmin 3cqmin 5cqmin; text-align: center; display: grid; gap: .6cqmin; }
.m-trattoria .label i { font: 400 10cqmin/1 var(--f-script); color: var(--rosso); transform: rotate(-4deg); }
.m-trattoria .label b { font: 900 11.5cqmin/1 var(--f-display); letter-spacing: .01em; }
.m-trattoria .label span { font: 700 2.2cqmin var(--f-text); letter-spacing: .3em; text-transform: uppercase; color: var(--verde); margin-top: 1cqmin; }
.lavagna { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 2.5cqmin; white-space: nowrap; background: #23302a; border-top: 1.4cqmin solid #6b4a2b; color: #f2efe6; font: 700 5.2cqmin/1.2 'Caveat', cursive; padding: 1.4cqmin 4cqmin 1.8cqmin; }
.lavagna u { color: var(--giallo); text-decoration: underline wavy; text-underline-offset: .15em; }
.lavagna em { margin-left: auto; color: #ffb3a7; }

/* 02 Dolce Vita */
.m-dolce { background: radial-gradient(ellipse 55% 85% at 74% 46%, #7a7a7a 0, #2c2c2c 45%, #090909 100%); color: #f2f2f2; }
.m-dolce::before, .m-dolce::after { content: ''; position: absolute; left: 0; right: 0; height: 11cqh; background: #000; z-index: 2; }
.m-dolce::before { top: 0; } .m-dolce::after { bottom: 0; }
.m-dolce .m-nav { justify-content: flex-end; align-items: center; height: 11cqh; padding: 0 4cqw; color: #cfcfcf; }
.m-dolce .pill { background: var(--rosso); color: #fff; padding: 1cqmin 2.2cqmin; }
.scratches { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 23%, rgba(255,255,255,.14) 23% 23.12%, transparent 23.12% 61%, rgba(255,255,255,.09) 61% 61.08%, transparent 61.08% 88%, rgba(255,255,255,.1) 88% 88.1%, transparent 88.1%); animation: scratch 1.3s steps(3) infinite; }
@keyframes scratch { 0% { transform: translateX(0); } 50% { transform: translateX(3%); } 100% { transform: translateX(-2%); } }
.dolce__title { position: absolute; left: 7cqw; top: 50%; transform: translateY(-54%); display: grid; gap: 1.6cqh; }
.dolce__title small { font: 600 2.5cqh var(--f-text); letter-spacing: .55em; text-transform: uppercase; color: #bdbdbd; }
.dolce__title b { font: italic 400 min(23cqh, 11.5cqw)/.9 var(--f-display); letter-spacing: -.025em; text-shadow: 0 0 5cqh rgba(255,255,255,.3); }
.dolce__title span { font: 500 2.3cqh var(--f-text); letter-spacing: .4em; text-transform: uppercase; color: #9a9a9a; }
.dolce__sub { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14.5cqh; text-align: center; font: italic 500 3.5cqh var(--f-text); color: var(--giallo); text-shadow: 0 1px 0 #000, 0 0 3px #000; }

/* 03 Milano */
.m-milano { background: #f4f1ea linear-gradient(90deg, rgba(0,0,0,.09) 1px, transparent 1px) 0 0 / 12.5% 100%; color: #111; }
.milano__strip { position: absolute; z-index: 2; top: 0; left: 0; right: 0; background: #111; color: #fff; font: 700 2.2cqmin var(--f-text); letter-spacing: .22em; text-transform: uppercase; padding: 2cqmin 3cqmin; }
.milano__red { position: absolute; right: 0; top: 13cqh; width: min(50cqw, 56cqh); aspect-ratio: 1; background: #e2231a; }
.m-milano ol { position: absolute; left: 4cqw; top: 17cqh; counter-reset: m; display: grid; gap: 1.2cqmin; font: 700 3.3cqmin var(--f-text); }
.m-milano li { counter-increment: m; }
.m-milano li::before { content: '0' counter(m); margin-right: 1.4em; font-weight: 400; color: #e2231a; }
.m-milano p { position: absolute; z-index: 2; right: 3.5cqw; top: 17cqh; text-align: right; color: #fff; font: 600 3.2cqmin/1.25 var(--f-text); }
.m-milano b { position: absolute; left: 1cqw; bottom: -5cqh; font: 900 min(54cqh, 50cqw)/.8 var(--f-text); font-stretch: 125%; letter-spacing: -.07em; mix-blend-mode: multiply; }

/* 04 Amalfi */
.m-amalfi { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23fdfaf0'/><g fill='%231f4e9c'><circle r='27'/><circle cx='80' r='27'/><circle cy='80' r='27'/><circle cx='80' cy='80' r='27'/></g><g fill='%23fdfaf0'><circle r='17'/><circle cx='80' r='17'/><circle cy='80' r='17'/><circle cx='80' cy='80' r='17'/></g><g fill='%23f2c230'><circle r='9'/><circle cx='80' r='9'/><circle cy='80' r='9'/><circle cx='80' cy='80' r='9'/></g><path d='M40 12L68 40 40 68 12 40z' fill='none' stroke='%231f4e9c' stroke-width='4'/><path d='M40 25l15 15-15 15-15-15z' fill='%23f2c230'/><circle cx='40' cy='40' r='5' fill='%231f4e9c'/></svg>") 0 0 / 17cqmin 17cqmin; color: #1f4e9c; }
.arch { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(60cqw, 78cqh); height: 86cqh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqmin; padding-top: 6cqh; background: #fdfaf0; border: 1cqmin solid #1f4e9c; border-bottom: 0; border-radius: 999px 999px 0 0; box-shadow: 0 0 0 1.1cqmin #fdfaf0, 0 0 0 1.8cqmin #f2c230, 0 0 8cqmin rgba(0,0,0,.35); }
.lemon { width: 27cqmin; }
.arch b { font: 700 9cqmin/1 var(--f-display); letter-spacing: .22em; margin-right: -.22em; }
.arch span { font: italic 500 3.2cqmin var(--f-display); }
.arch em { margin-top: 2.4cqmin; background: #1f4e9c; color: #fff; font: 700 2.1cqmin var(--f-text); letter-spacing: .22em; text-transform: uppercase; padding: 1.7cqmin 3cqmin; }

/* 05 Futurismo */
.m-futuro { background: #efe4cc; color: #111; }
.rays { position: absolute; inset: 0; background: repeating-conic-gradient(from 180deg at 100% 0, #111 0 3.5deg, transparent 3.5deg 11deg); clip-path: circle(62cqmin at 100% 0); }
.sun { position: absolute; right: 5cqw; top: 7cqh; width: 25cqmin; aspect-ratio: 1; border-radius: 50%; background: #f2b705; box-shadow: 0 0 0 1.4cqmin #efe4cc; }
.tri { position: absolute; inset: 0; background: #d2281e; clip-path: polygon(0 100%, 0 52%, 100% 80%, 100% 100%); }
.m-futuro b { position: absolute; left: 5cqw; top: 19cqh; font: 400 24cqmin/.9 var(--f-poster); transform: skewY(-9deg); text-shadow: 1cqmin 1cqmin 0 #d2281e; }
.band { position: absolute; left: -6cqw; right: -6cqw; bottom: 15cqh; transform: rotate(-9deg); background: #111; color: #f2b705; font: 400 5cqmin var(--f-poster); letter-spacing: .14em; text-transform: uppercase; padding: 1.5cqmin 12cqw; white-space: nowrap; }
.m-futuro > span { position: absolute; right: 4cqw; bottom: 4cqh; font: 800 2.5cqmin var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: #efe4cc; }

/* 06 Giallo */
.m-giallo { background: #f4c400 radial-gradient(rgba(0,0,0,.16) 17%, transparent 19%) 0 0 / 1.7cqmin 1.7cqmin; color: #0d0d0d; }
.drips { position: absolute; top: 0; left: 0; width: 100%; height: 27cqh; }
.eye { position: absolute; right: 7cqw; top: 31cqh; width: 32cqmin; height: 17cqmin; display: grid; place-items: center; background: #fff; border: 1.3cqmin solid #0d0d0d; border-radius: 50%; overflow: hidden; }
.eye i { width: 14cqmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #0d0d0d 0 32%, #b3121d 33% 100%); animation: look 5s ease-in-out infinite; }
@keyframes look { 0%, 40%, 100% { transform: translateX(0); } 50%, 70% { transform: translateX(-5cqmin); } 80%, 90% { transform: translateX(4cqmin); } }
.m-giallo b { position: absolute; left: 5cqw; bottom: 25cqh; font: 400 min(25cqh, 13cqw)/.88 var(--f-poster); transform: rotate(-3deg); transform-origin: left bottom; }
.m-giallo em { position: absolute; left: 5.5cqw; bottom: 13.5cqh; font: italic 700 4.4cqmin var(--f-display); }
.giallo__foot { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; white-space: nowrap; background: #0d0d0d; color: #f4c400; font: 700 2.2cqmin var(--f-text); letter-spacing: .24em; text-transform: uppercase; padding: 2.2cqmin 5cqw; }

/* 07 Neon */
.m-neon { background-color: #140b13; background-image: radial-gradient(ellipse at 50% 42%, rgba(255,60,120,.24), transparent 62%), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 100% 100%, 9cqmin 9cqmin, 9cqmin 9cqmin; display: grid; place-content: center; justify-items: center; text-align: center; color: #fff; }
.slice { width: 15cqmin; margin-bottom: -1cqmin; filter: drop-shadow(0 0 1.2cqmin #ff9a3c); }
.m-neon b { font: 400 30cqmin/1 var(--f-script); color: #ffe3ec; text-shadow: 0 0 1cqmin #ff4d8d, 0 0 3cqmin #ff2a6d, 0 0 8cqmin #ff2a6d; animation: neon 5s infinite; }
.m-neon i { font: 400 12cqmin/1 var(--f-script); margin-top: -2.5cqmin; color: #d9fff2; text-shadow: 0 0 1cqmin #2affb0, 0 0 4cqmin #12d88e; }
.aperto { margin-top: 4.5cqmin; font: 800 3.8cqmin var(--f-text); letter-spacing: .42em; padding: 1.3cqmin 1.6cqmin 1.3cqmin 3.2cqmin; border: .5cqmin solid #7ad7ff; border-radius: 1cqmin; color: #d9f3ff; text-shadow: 0 0 1.5cqmin #38bdf8; box-shadow: 0 0 2.2cqmin #38bdf8, inset 0 0 2.2cqmin rgba(56,189,248,.55); }
.m-neon small { margin-top: 3cqmin; font: 500 2.3cqmin var(--f-text); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.55); }
@keyframes neon { 0%, 91%, 94%, 97%, 100% { opacity: 1; } 92%, 96% { opacity: .35; } }

/* 08 Alta cucina */
.m-alta { background: #0e0d0b; color: #c6a664; display: grid; place-content: center; justify-items: center; text-align: center; }
.m-alta::before { content: ''; position: absolute; inset: 3cqmin; border: 1px solid rgba(198,166,100,.5); }
.m-alta .m-nav { top: 5cqmin; font-weight: 400; font-size: 1.9cqmin; letter-spacing: .38em; color: rgba(198,166,100,.85); }
.plate { position: relative; width: 28cqmin; aspect-ratio: 1; margin-bottom: 5cqmin; border-radius: 50%; border: 1px solid #c6a664; }
.plate::after { content: ''; position: absolute; inset: 5cqmin; border-radius: 50%; border: 1px solid rgba(198,166,100,.4); }
.plate i { position: absolute; left: 50%; top: 50%; width: 2.4cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--rosso); transform: translate(-70%, -40%); }
.plate u { position: absolute; left: 50%; top: 50%; width: 3cqmin; height: 1.4cqmin; border-radius: 100% 0; background: #3a9447; transform: translate(0, -130%) rotate(-20deg); }
.m-alta b { font: 400 12cqmin/1 'Italiana', var(--f-display); letter-spacing: .42em; margin-right: -.42em; color: #e9d6a6; }
.m-alta > span { margin-top: 2.6cqmin; font: 400 2.3cqmin var(--f-text); letter-spacing: .5em; text-transform: uppercase; }
.m-alta small { position: absolute; left: 0; right: 0; bottom: 7.5cqmin; font: italic 400 2.9cqmin var(--f-display); color: rgba(233,214,166,.7); }

/* 09 Scontrino */
.m-scontrino { background: radial-gradient(ellipse at 50% 30%, #12744b 0, #093d28 100%); display: grid; place-items: center; }
.receipt { font: 400 min(4.7cqw, 3.05cqh)/1.4 var(--f-mono); width: 17.5em; display: grid; gap: .12em; text-align: center; background: #fbfaf6; color: #1b1b1b; padding: 1.5em 1.2em 2.3em; transform: rotate(-2.5deg); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 1.2em 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 1.2em 100%; }
.receipt b { font-weight: 700; font-size: 1.15em; }
.receipt p { display: flex; justify-content: space-between; }
.receipt hr { width: 100%; border: 0; border-top: 1px dashed #1b1b1b; margin: .45em 0; }
.receipt .tot { font-weight: 700; font-size: 1.15em; }
.receipt em { display: block; margin: .7em 0 .5em; padding: .55em; background: #1b1b1b; color: #fff; font-weight: 700; letter-spacing: .22em; }
.barcode { height: 2.3em; margin: .2em 1em; background: repeating-linear-gradient(90deg, #1b1b1b 0 2px, transparent 2px 3px, #1b1b1b 3px 4px, transparent 4px 7px, #1b1b1b 7px 10px, transparent 10px 12px); }

/* 10 Gelateria */
.m-gelato { background: #d5e8c8; display: grid; justify-items: center; align-content: end; padding-bottom: 7cqh; text-align: center; }
.awning { position: absolute; top: 0; left: 0; right: 0; height: 15cqh; background: repeating-linear-gradient(90deg, #f497ad 0 8cqw, #fff6ea 8cqw 16cqw); }
.awning::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 4cqw; background: radial-gradient(circle at 4cqw 0, #f497ad 3.95cqw, transparent 4cqw) 0 0 / 16cqw 100%, radial-gradient(circle at 12cqw 0, #fff6ea 3.95cqw, transparent 4cqw) 0 0 / 16cqw 100%; filter: drop-shadow(0 .8cqmin 0 rgba(0,0,0,.1)); }
.cono { position: relative; width: 22cqmin; height: 40cqmin; margin-bottom: 2cqmin; }
.cono i { position: absolute; width: 13cqmin; aspect-ratio: 1; border-radius: 50%; top: 9cqmin; box-shadow: inset -1.2cqmin -1.2cqmin 0 rgba(0,0,0,.08); }
.cono i:nth-child(1) { left: 0; background: #f497ad; }
.cono i:nth-child(2) { right: 0; background: #fff0c9; }
.cono i:nth-child(3) { left: 50%; top: 0; transform: translateX(-50%); background: #a9cf8a; }
.cono u { position: absolute; left: 50%; top: 19cqmin; width: 17cqmin; height: 21cqmin; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); background: repeating-linear-gradient(45deg, #c98a3f 0 .5cqmin, transparent .5cqmin 2.4cqmin), repeating-linear-gradient(-45deg, #c98a3f 0 .5cqmin, transparent .5cqmin 2.4cqmin), #e9b76a; }
.m-gelato b { font: 400 12cqmin/1 var(--f-script); color: #6b2f1a; }
.m-gelato > span { margin-top: 1.6cqmin; font: 700 2.3cqmin var(--f-text); letter-spacing: .32em; text-transform: uppercase; color: #b0486a; }

/* 11 Western */
.m-western { background: radial-gradient(ellipse at center, #e6c892 0, #c9a066 68%, #8a6436 100%); color: #2a1a0c; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.8cqmin; }
.nail { position: absolute; width: 1.8cqmin; aspect-ratio: 1; border-radius: 50%; background: #2a1a0c; box-shadow: .3cqmin .3cqmin 0 rgba(0,0,0,.3); }
.nail:nth-of-type(1) { top: 3cqmin; left: 3cqmin; } .nail:nth-of-type(2) { top: 3cqmin; right: 3cqmin; }
.nail:nth-of-type(3) { bottom: 3cqmin; left: 3cqmin; } .nail:nth-of-type(4) { bottom: 3cqmin; right: 3cqmin; }
.m-western small { font: 700 2.8cqmin var(--f-text); letter-spacing: .36em; text-transform: uppercase; border-block: .4cqmin solid #2a1a0c; padding: .9cqmin 2cqmin; }
.m-western b { font: 400 11.5cqmin/.96 var(--f-poster); letter-spacing: .03em; }
.m-western b span { display: inline-block; margin-top: 1.2cqmin; font: italic 900 14cqmin/1 var(--f-display); letter-spacing: -.01em; color: #8a1c12; }
.m-western em { font: italic 600 4cqmin var(--f-display); }
.western__foot { font: 700 2.3cqmin var(--f-text); letter-spacing: .3em; text-transform: uppercase; }

/* 12 Gazzetta */
.m-gazzetta { background: #f6c7c1; color: #1a1410; padding: 4cqmin 5cqmin; display: flex; flex-direction: column; gap: 3cqmin; }
.gaz__mast { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqmin; border-block: .45cqmin solid #1a1410; padding-block: 1.6cqmin; }
.gaz__mast b { font: italic 900 min(9cqh, 5.2cqw)/1 var(--f-display); letter-spacing: -.015em; white-space: nowrap; }
.gaz__mast span { font: 700 2cqmin var(--f-text); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.gaz__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.7fr 1fr; gap: 4cqmin; }
.gaz__lead b { display: block; margin-bottom: 3cqmin; font: 400 min(11.5cqh, 6.4cqw)/.98 var(--f-poster); text-transform: uppercase; }
.m-gazzetta i { display: block; height: 1.1cqmin; margin-bottom: 1.6cqmin; background: rgba(26,20,16,.32); }
.m-gazzetta i:last-of-type { width: 62%; }
.gaz__side { display: flex; flex-direction: column; gap: 1.6cqmin; border-left: .3cqmin solid #1a1410; padding-left: 3.5cqmin; }
.gaz__side u { align-self: flex-start; background: #1a1410; color: #f6c7c1; font: 800 2cqmin var(--f-text); letter-spacing: .25em; text-transform: uppercase; padding: .7cqmin 1.3cqmin; }
.gaz__side strong { font: italic 700 4.4cqmin/1.05 var(--f-display); margin-bottom: 1cqmin; }

/* 13 Su misura */
.m-tuo { display: grid; place-content: center; justify-items: center; gap: 2.4cqmin; text-align: center; text-decoration: none; color: var(--cream); box-shadow: none; border: 2px dashed rgba(243,233,210,.4); }
.card:hover .m-tuo { box-shadow: none; border-color: var(--giallo); }
.m-tuo svg { width: 36cqmin; height: 18cqmin; animation: hover 5s ease-in-out infinite; }
.m-tuo b { font: italic 900 12cqmin/.9 var(--f-display); }
.m-tuo span { font: italic 500 3.1cqmin var(--f-text); color: var(--giallo); }
@media (min-width: 701px) {
  .card.card--wide { grid-column: 1 / -1; }
  .card--wide .mock { height: clamp(260px, 22vw, 340px); grid-auto-flow: column; grid-template-rows: auto auto; gap: 3cqmin 5cqw; text-align: left; justify-items: start; }
  .card--wide .m-tuo svg { width: 64cqmin; height: 32cqmin; grid-row: 1 / 3; align-self: center; }
  .card--wide .m-tuo b { font-size: 19cqmin; align-self: end; }
  .card--wide .m-tuo b br { display: none; }
  .card--wide .m-tuo span { font-size: 6cqmin; align-self: start; }
}

/* ==========================================================
   RICETTA
   ========================================================== */
.sec--ricetta { background: var(--verde); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4.5rem); max-width: 1500px; margin: 0 auto; }
.steps li { border-top: 2px solid var(--cream); padding-top: 1.4rem; }
.steps b { display: block; font: italic 900 clamp(5rem, 9vw, 9rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--cream); margin-bottom: 1.2rem; }
.steps h3 { font: italic 700 clamp(2rem, 3.4vw, 3.2rem)/1 var(--f-display); }
.steps em { display: block; margin: .4rem 0 1rem; font: italic 500 1.05rem var(--f-text); color: var(--giallo); }
.steps p { color: rgba(243,233,210,.85); max-width: 30em; }

/* ==========================================================
   PREZZO
   ========================================================== */
.sec--prezzo { background: var(--cream); color: var(--ink); }
.listino { position: relative; max-width: 1040px; margin: 0 auto; text-align: center; background: var(--paper); border: 3px solid var(--rosso); outline: 1px solid var(--rosso); outline-offset: -13px; padding: clamp(2.6rem, 7vw, 6rem) clamp(1.6rem, 6vw, 6rem); box-shadow: 0 40px 80px -40px rgba(60,20,0,.45); }
.listino .slate::before { color: var(--rosso); }
.sec--prezzo h2 { color: var(--rosso); }
.sec--prezzo .sub { display: inline; color: var(--ink); text-shadow: none; background: linear-gradient(transparent 62%, var(--giallo) 0); }
.corsi { margin: clamp(2.4rem, 5vw, 4rem) 0 0; text-align: left; display: grid; gap: 1.15rem; }
.corsi li { display: flex; align-items: baseline; gap: .8rem; font-size: 1.08rem; }
.corsi b { font: italic 700 1.4rem var(--f-display); color: var(--rosso); margin-right: .5rem; }
.corsi i { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted rgba(20,16,13,.45); transform: translateY(-.25em); }
.corsi em { font: italic 500 1.05rem var(--f-display); color: var(--verde); }

.totale { position: relative; margin: clamp(2.5rem, 5vw, 4rem) 0 1.4rem; }
.prezzo { all: unset; cursor: pointer; display: inline-block; font: 900 clamp(5.5rem, 17vw, 14rem)/.9 var(--f-display); letter-spacing: -.035em; color: var(--rosso); perspective: 800px; }
.prezzo:focus-visible { outline: 3px solid var(--verde); outline-offset: 8px; }
.prezzo__val { display: inline-block; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.prezzo.flip .prezzo__val { transform: rotateX(90deg); }
.prezzo .cur { font: 800 .5em/1 var(--f-text); letter-spacing: 0; margin-left: .18em; vertical-align: .62em; }
.prezzo[data-state="lire"] { font-size: clamp(2.7rem, 9.4vw, 8rem); color: var(--verde); font-variation-settings: 'opsz' 8; letter-spacing: -.02em; }
.prezzo[data-state="lire"] ~ .stamp { opacity: 0; }
.stamp { transition: opacity .3s; }
.stamp { position: absolute; right: -.6rem; top: -3.6rem; transform: rotate(11deg); display: grid; gap: .1rem; padding: .7rem 1.1rem; color: var(--verde); border: 4px double var(--verde); border-radius: 8px; mix-blend-mode: multiply; opacity: .88; font: 700 .68rem var(--f-text); letter-spacing: .2em; text-transform: uppercase; }
.stamp b { font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.1 var(--f-poster); letter-spacing: .04em; }
.lire-note { max-width: 40em; margin: 0 auto 2.4rem; color: rgba(20,16,13,.78); }

/* ==========================================================
   NONNA
   ========================================================== */
.sec--nonna { background: var(--rosso); overflow: hidden; }
.nonna { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
.nonna__text > p:not(.slate):not(.sub) { max-width: 34em; margin: 1.6rem 0 2.4rem; font-size: 1.15rem; }
.sec--nonna .slate::before { color: var(--giallo); }
.sec--nonna .slate { opacity: 1; }
.sec--nonna .sub { color: #fff3b0; }
.clipping { position: relative; justify-self: center; display: grid; gap: .8rem; width: min(100%, 440px); padding: 2.2rem 2rem 2.6rem; background: #f2ead8; color: var(--ink); text-decoration: none; transform: rotate(3.5deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transition: transform .5s cubic-bezier(.2,.8,.2,1); clip-path: polygon(0 1.2%, 6% 0, 14% 1%, 30% 0, 52% 1.4%, 70% .2%, 88% 1.2%, 100% 0, 99% 30%, 100% 62%, 99.2% 100%, 80% 99%, 60% 100%, 38% 98.8%, 18% 100%, 0 99%, .8% 60%, 0 30%); }
.clipping:hover { transform: rotate(1deg) scale(1.03); }
.clipping__mast { font: italic 900 3.1rem/1 var(--f-display); letter-spacing: -.02em; text-align: center; }
.clipping__mast .hy { font: 800 .7em var(--f-text); margin: 0 .04em; vertical-align: .08em; }
.clipping__claim { font: 700 .66rem var(--f-text); letter-spacing: .24em; text-transform: uppercase; text-align: center; border-block: 2px solid var(--ink); padding: .5rem 0; }
.clipping__head { margin-top: .6rem; font: 400 2rem/1.02 var(--f-poster); text-transform: uppercase; }
.clipping__lines { display: grid; gap: .55rem; margin-top: .4rem; }
.clipping__lines i { height: 5px; background: rgba(20,16,13,.3); }
.clipping__lines i:last-child { width: 55%; }
.clipping__stamp { position: absolute; right: 1.2rem; bottom: 1.6rem; transform: rotate(-14deg); padding: .2rem .9rem; border: 4px solid var(--rosso); color: var(--rosso); font: 400 2.2rem/1.2 var(--f-poster); text-transform: uppercase; letter-spacing: .04em; mix-blend-mode: multiply; }

/* ==========================================================
   FINALE
   ========================================================== */
.sec--fine { overflow: hidden; min-height: 92svh; display: flex; align-items: center; background: linear-gradient(#0d0a08 30%, #2b1414 72%, #6e2d1c 100%); isolation: isolate; }
.fine__text { position: relative; max-width: min(58%, 820px); margin-left: max(0px, calc((100% - 1500px) / 2)); }
.fine__text > p:not(.slate):not(.sub) { max-width: 32em; margin-top: 1.6rem; font-size: 1.15rem; color: rgba(243,233,210,.85); }
.sec--fine h2 { font-size: clamp(4.5rem, 15vw, 15rem); }
.gino--fine { right: 3%; bottom: -2%; height: 86%; animation: none; z-index: -1; }
.fine { position: absolute; z-index: -2; right: 34%; bottom: -.18em; font: italic 900 clamp(7rem, 24vw, 26rem)/1 var(--f-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(243,233,210,.16); pointer-events: none; }

.credits { background: #000; text-align: center; padding: 4.5rem var(--pad) 3rem; }
.credits__roll { font: 400 clamp(1.6rem, 3vw, 2.6rem)/1.3 var(--f-billing); letter-spacing: .2em; text-transform: uppercase; color: rgba(243,233,210,.9); }
.credits__roll i { font: italic 400 .42em var(--f-text); letter-spacing: .12em; text-transform: lowercase; color: rgba(243,233,210,.68); margin: 0 .5em; vertical-align: middle; }
.credits__roll a { text-decoration: none; border-bottom: 1px solid rgba(243,233,210,.35); }
.credits__roll a:hover, .credits__legal a:hover { color: var(--giallo); }
.credits__legal { margin-top: 2.4rem; font-size: .85rem; letter-spacing: .04em; color: rgba(243,233,210,.72); }

/* Einblenden beim Scrollen */
.js .reveal { opacity: 0; translate: 0 34px; transition: opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .card { grid-column: span 6; }
  .mock { height: clamp(320px, 46vw, 480px); }
  .bar ul li:not(.keep) { display: none; }
}
@media (max-width: 820px) {
  .screen { align-items: flex-start; min-height: 640px; }
  .title { max-width: 100%; padding-top: 2.4rem; padding-bottom: 46%; }
  .gino { height: 50%; right: -4%; }
  .abduction { transform-origin: 1300px 260px; transform: translate(-265px, 470px) scale(.3); }
  .halo { display: none; }
  .screen__shade { background: linear-gradient(rgba(4,5,14,.86) 0, rgba(4,5,14,.5) 48%, transparent 70%); }
  .billing { display: none; }
  .bar--bottom span { display: none; }
  .bar--bottom { justify-content: center; }
  .logo small { display: none; }
  .steps, .nonna { grid-template-columns: 1fr; }
  .stamp { position: static; display: inline-grid; margin-top: 1rem; transform: rotate(-4deg); }
  .corsi li { flex-wrap: wrap; }
  .corsi i { display: none; }
  .corsi em { margin-left: auto; }
  .fine__text { max-width: 100%; padding-bottom: 78%; }
  .sec--fine { align-items: flex-start; }
  .gino--fine { height: 40%; right: 0; }
  .fine { right: auto; left: var(--pad); }
}
@media (max-width: 700px) {
  .card { grid-column: 1 / -1; }
  .mock { height: auto; aspect-ratio: 5 / 4; }
  .m-scontrino { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: 0 0; }
}