/*
Theme Name: Mattia Personal
Theme URI: https://www.mattiagiudici.eu/
Author: Mattia Giudici
Description: Tema personale one-page progettato su misura.
Version: 1.0.0
Text Domain: mattia-personal
*/

:root {
  --ink: #f7f8fb;
  --muted: #aeb8ca;
  --night: #08111f;
  --panel: #101d31;
  --line: rgba(255,255,255,.11);
  --cyan: #58d7ff;
  --lime: #b8f34a;
  --orange: #ff8b5f;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--night); font: 400 17px/1.7 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.site-shell { overflow: hidden; }
.wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; border-bottom: 1px solid transparent; transition: .25s ease; }
.site-header.is-scrolled { background: rgba(8,17,31,.86); border-color: var(--line); backdrop-filter: blur(16px); }
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg,var(--cyan),var(--lime)); color: #07101d; font-size: 14px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 700; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; }

.hero { position: relative; min-height: 100vh; display: grid; align-items: center; padding: 140px 0 90px; }
.hero::before { content:""; position:absolute; width: 640px; height:640px; right:-220px; top:-170px; background:radial-gradient(circle,rgba(88,215,255,.17),transparent 68%); }
.hero::after { content:""; position:absolute; width:520px; height:520px; left:-240px; bottom:-260px; background:radial-gradient(circle,rgba(184,243,74,.09),transparent 68%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 70px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; }
.eyebrow::before { content:""; width: 28px; height: 2px; background: currentColor; }
h1,h2,h3,p { margin-top: 0; }
h1 { max-width: 780px; margin: 24px 0; font-size: clamp(55px,8vw,104px); line-height: .92; letter-spacing: -.065em; }
.gradient-text { background: linear-gradient(100deg,var(--cyan),var(--lime)); -webkit-background-clip: text; color: transparent; }
.hero-copy { max-width: 660px; color: var(--muted); font-size: clamp(18px,2vw,22px); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 999px; background: var(--lime); color: #07101d; text-decoration: none; font-weight: 800; }
.button.secondary { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.profile-orbit { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.orbit { position: absolute; inset: 3%; border: 1px solid var(--line); border-radius: 50%; animation: spin 22s linear infinite; }
.orbit::before,.orbit::after { content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:var(--cyan); top:12%; left:13%; box-shadow:0 0 30px var(--cyan); }
.orbit::after { background:var(--lime); top:auto; left:auto; right:7%; bottom:24%; box-shadow:0 0 30px var(--lime); }
.monogram { display:grid; place-items:center; width:68%; aspect-ratio:1; border-radius:34% 66% 57% 43%/39% 38% 62% 61%; background:linear-gradient(145deg,#172944,#0b1627); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.35); font-size:clamp(64px,10vw,140px); font-weight:900; letter-spacing:-.09em; }
@keyframes spin { to { transform: rotate(360deg); } }

.section { padding: 110px 0; }
.section-head { display:grid; grid-template-columns:.65fr 1.35fr; gap:60px; margin-bottom:55px; }
.section-kicker { color:var(--lime); font-size:13px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.section h2 { margin-bottom:20px; font-size:clamp(38px,5vw,68px); line-height:1; letter-spacing:-.045em; }
.lead { color:var(--muted); font-size:20px; max-width:760px; }

.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; }
.card { padding:34px; background:linear-gradient(145deg,rgba(20,37,61,.85),rgba(12,25,43,.85)); border:1px solid var(--line); border-radius:24px; }
.card-label { color:var(--cyan); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.facts { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.fact { min-height:135px; padding:22px; border:1px solid var(--line); border-radius:18px; }
.fact strong { display:block; font-size:24px; line-height:1.15; }
.fact span { color:var(--muted); font-size:14px; }

.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pillar { position:relative; min-height:340px; padding:34px; border-radius:24px; border:1px solid var(--line); overflow:hidden; }
.pillar::after { content:""; position:absolute; width:180px; height:180px; right:-70px; bottom:-70px; border-radius:50%; background:var(--accent); filter:blur(55px); opacity:.22; }
.pillar .number { color:var(--accent); font-size:13px; font-weight:900; }
.pillar h3 { margin:68px 0 18px; font-size:30px; line-height:1.05; }
.pillar p { color:var(--muted); }
.profile-card { min-height: 520px; display:flex; flex-direction:column; }
.profile-card .profile-tag { color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.profile-card h3 { margin-top:42px; }
.profile-card ul { padding-left:20px; color:var(--muted); font-size:15px; }
.profile-card > a { margin-top:auto; color:var(--accent); text-decoration:none; font-weight:800; }
.profile-detail { position:relative; border-top:1px solid var(--line); }
.detail-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:start; }
.detail-panel { padding:36px; border:1px solid rgba(88,215,255,.25); border-radius:24px; background:rgba(88,215,255,.05); }
.detail-panel > span { color:var(--cyan); font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.detail-panel h3 { margin:24px 0 16px; font-size:30px; line-height:1.15; }
.detail-panel p { color:var(--muted); }
.detail-panel a { color:var(--cyan); font-weight:800; text-decoration:none; }
.sports-detail .section-kicker,.sports-detail .timeline-period { color:var(--lime); }
.leisure-detail .section-kicker { color:var(--orange); }
.leisure-list { display:grid; gap:14px; }
.leisure-list div { padding:24px; border:1px solid rgba(255,139,95,.25); background:rgba(255,139,95,.04); border-radius:18px; }
.leisure-list strong { display:block; color:var(--orange); font-size:23px; }
.leisure-list span { color:var(--muted); }

.timeline { border-top:1px solid var(--line); }
.timeline-item { display:grid; grid-template-columns:.65fr 1.35fr; gap:60px; padding:34px 0; border-bottom:1px solid var(--line); }
.timeline-period { color:var(--cyan); font-weight:800; }
.timeline-item h3 { margin-bottom:8px; font-size:24px; }
.timeline-item p { color:var(--muted); margin-bottom:0; }

.cert-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.cert { display:flex; gap:15px; align-items:flex-start; padding:20px; border:1px solid var(--line); border-radius:16px; }
.cert-dot { flex:0 0 auto; width:10px; height:10px; margin-top:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 18px var(--lime); }
.cert span { color:var(--muted); font-size:14px; }

.quote { padding:80px 0; background:var(--lime); color:#08111f; }
.quote blockquote { margin:0; max-width:1000px; font-size:clamp(32px,5vw,64px); line-height:1.05; font-weight:850; letter-spacing:-.045em; }

.contact { text-align:center; padding:120px 0; }
.contact h2 { max-width:900px; margin:0 auto 22px; }
.socials { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:38px; }
.social { padding:14px 20px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-weight:800; }
.social:hover { color:var(--night); background:var(--cyan); border-color:var(--cyan); }
.site-footer { padding:25px 0; color:var(--muted); border-top:1px solid var(--line); font-size:14px; }
.footer-row { display:flex; justify-content:space-between; gap:20px; }

@media (max-width: 850px) {
  .nav-links a:not(.nav-cta) { display:none; }
  .hero-grid,.section-head,.about-grid,.timeline-item,.detail-grid { grid-template-columns:1fr; }
  .profile-orbit { max-width:420px; width:85%; margin:20px auto 0; }
  .pillars { grid-template-columns:1fr; }
  .pillar { min-height:270px; }
  .pillar h3 { margin-top:42px; }
  .section-head,.timeline-item { gap:20px; }
}
@media (max-width: 560px) {
  .wrap { width:min(calc(100% - 28px),var(--max)); }
  .hero { padding-top:120px; }
  .facts,.cert-grid { grid-template-columns:1fr; }
  .card { padding:24px; }
  .footer-row { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .orbit { animation:none; } }