/* ============================================================
   AD TENNIS LAB — design system "Biblioteca / Guide"
   Derivato 1:1 dal sito adtennislab.com (neri caldi + oro-luce)
   ============================================================ */
:root {
  --bg-deep: #100D0A;
  --bg-base: #171310;
  --bg-raised: #1F1A15;
  --espresso: #2C1810;
  --cream: #F5F0E4;
  --gold: #C9A84C;
  --gold-hi: #E8CF8E;
  --gold-lo: #9A7B35;
  --gold-soft: rgba(201,168,76,.35);
  --gold-faint: rgba(201,168,76,.12);
  --border: rgba(201,168,76,.14);
  --ivory: #EAE6DC;
  --muted: #C2B6A3;
  --display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --exo: cubic-bezier(0.16, 1, 0.3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--bg-deep); }

/* grana pellicola calda */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi));
  z-index: 100;
}

/* ---------- nav (identica al sito) ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4vw;
  background: rgba(16,13,10,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  transition: transform .45s var(--exo);
}
nav.hid { transform: translateY(-100%); }
nav .logo img { height: 44px; display: block; }
nav .links { display: flex; gap: 30px; align-items: center; }
nav .links > a {
  color: var(--muted); text-decoration: none; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase;
  position: relative; overflow: hidden; display: inline-block; line-height: 1.4;
}
nav .links > a:not(.cta) span { display: inline-block; transition: transform .4s var(--exo); }
nav .links > a:not(.cta) span::after {
  content: attr(data-t); position: absolute; left: 0; top: 100%; color: var(--gold);
}
nav .links > a:not(.cta):hover span { transform: translateY(-100%); }
nav .cta { border: 1px solid var(--gold-soft); color: var(--gold) !important; padding: 9px 20px; border-radius: 2px; transition: all .3s; }
nav .cta:hover { color: var(--bg-deep) !important; background: var(--gold); }
@media (max-width: 860px) { nav .links > a:not(.cta) { display: none; } }

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--gold);
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.eyebrow::after {
  content: ""; width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--exo) .2s;
}
.reveal.in .eyebrow::after, body.ready .hero .eyebrow::after { transform: scaleX(1); }

/* ---------- tipografia ---------- */
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.7rem, 1.3rem + 5.6vw, 6.4rem);
  line-height: 1.02; letter-spacing: -0.035em;
  color: #F4EFE3;
}
h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
h1 .w > span { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--exo); }
body.ready h1 .w > span { transform: none; }
h1 .gold > span {
  background: linear-gradient(180deg, #F5E3AC 0%, #E0BE6A 55%, #C9A84C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
h2 {
  font-family: var(--display); font-weight: 650;
  font-size: clamp(2rem, 1rem + 3.6vw, 4rem);
  line-height: 1.06; letter-spacing: -0.03em; color: var(--ivory);
  max-width: 24ch;
  clip-path: inset(0 0 102% 0);
  transition: clip-path 1s var(--exo) .1s;
}
.reveal.in h2 { clip-path: inset(0 0 -10% 0); }
h2 em { font-style: italic; font-weight: 470; color: var(--gold); }
.lead { color: #CFC5B2; max-width: 60ch; margin-top: 22px; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }

/* reveal generico */
.reveal .fx { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--exo), transform .9s var(--exo); }
.reveal.in .fx { opacity: 1; transform: none; }
.reveal.in .fx:nth-of-type(2) { transition-delay: .1s; }
.reveal.in .fx:nth-of-type(3) { transition-delay: .2s; }

/* ---------- sezioni ---------- */
section { padding: clamp(96px, 12vw, 170px) 6vw; position: relative; z-index: 2; }
.light { background: var(--cream); color: var(--espresso); }
.light h2 { color: var(--espresso); }
.light h2 em { color: var(--gold-lo); }
.light .lead { color: #6b5a45; }
.light .eyebrow { color: var(--gold-lo); }

/* ---------- bottoni ---------- */
.btn {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding: 17px 36px; border-radius: 2px;
  position: relative; overflow: hidden; display: inline-block;
  transition: color .3s, border-color .3s, box-shadow .3s;
  font-family: var(--sans); cursor: pointer;
}
.btn-gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  color: var(--bg-deep); font-weight: 500; border: none;
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-110%); transition: transform .55s var(--exo);
}
.btn-gold:hover::after { transform: translateX(110%); }
.btn-gold:hover { box-shadow: 0 14px 44px -12px rgba(201,168,76,.55); }
.btn-ghost { border: 1px solid var(--gold-soft); color: var(--gold); background: transparent; }
.btn-ghost:hover { background: var(--gold-faint); border-color: var(--gold); }
.light .btn-ghost { border-color: rgba(154,123,53,.5); color: var(--gold-lo); }
.light .btn-ghost:hover { background: rgba(201,168,76,.14); border-color: var(--gold-lo); }

/* ---------- righe editoriali ---------- */
.rows { margin-top: 64px; border-top: 1px solid var(--border); }
.row {
  display: grid; grid-template-columns: 70px 1fr 1.2fr; gap: 30px; align-items: baseline;
  padding: 38px 10px; border-bottom: 1px solid var(--border);
  transition: opacity .4s var(--exo), background .4s var(--exo), padding .4s var(--exo);
}
.rows:hover .row:not(:hover) { opacity: .35; }
.row:hover { background: linear-gradient(90deg, var(--gold-faint), transparent 70%); padding-left: 26px; }
.row .n { font-family: var(--mono); font-size: .8rem; color: var(--gold); }
.row h3 {
  font-family: var(--display); font-weight: 650; letter-spacing: -0.02em;
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.1rem); color: var(--ivory); line-height: 1.1;
}
.row p { color: #CDC2AF; font-size: .95rem; }
@media (max-width: 760px) { .row { grid-template-columns: 44px 1fr; } .row p { grid-column: 2; } }

/* ---------- stats su crema ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 50px 30px; margin-top: 70px; }
.stat .val {
  font-family: var(--display); font-weight: 750;
  font-size: clamp(3.6rem, 1.6rem + 7.5vw, 8rem); line-height: 1; color: var(--espresso);
  letter-spacing: -0.045em;
}
.stat .val small { font-size: .38em; color: var(--gold-lo); }
.stat .cap {
  margin-top: 14px; font-family: var(--mono); color: #6b5a45; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; position: relative; padding-top: 16px;
  max-width: 30ch; margin-left: auto; margin-right: auto;
}
.stat .cap::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0);
  width: 40px; height: 1px; background: var(--gold-lo); transition: transform 1s var(--exo) .5s;
}
.reveal.in .stat .cap::before { transform: translateX(-50%) scaleX(1); }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; white-space: nowrap; padding: 46px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-base); position: relative; z-index: 2;
}
.marquee .track { display: inline-block; animation: mq 44s linear infinite; }
.marquee span {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,.45);
  padding-right: 56px;
}
.marquee span.solid { color: rgba(201,168,76,.8); -webkit-text-stroke: 0; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- footer ---------- */
footer.site {
  padding: 46px 6vw; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 12.5px; position: relative; z-index: 2; background: var(--bg-deep);
}
footer.site .soc { display: flex; gap: 26px; }
footer.site a { color: var(--muted); text-decoration: none; position: relative; }
footer.site a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--exo);
}
footer.site a:hover { color: var(--gold); }
footer.site a:hover::after { transform: scaleX(1); transform-origin: left; }

/* calm mode (?calm=1) — tutto visibile senza animazioni, per test/screenshot */
body.calm .reveal .fx, body.calm .hero .sub, body.calm .hero-meta, body.calm .hero-cta { opacity: 1 !important; transform: none !important; }
body.calm h1 .w > span { transform: none !important; }
body.calm h2, body.calm .big-cta { clip-path: none !important; }
body.calm .mask-in { clip-path: none !important; }
body.calm .eyebrow::after { transform: scaleX(1) !important; }
body.calm .marquee .track { animation: none !important; }
body.calm .hero { min-height: 0 !important; }
body.calm { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}