/* ═══════════════════════════════════════════════════════════════
   BASE.CSS — Design tokens, reset, utilità globali
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Frankfurter';src:url('../assets/fonts/Frankfurter.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}

:root{
  --yellow:#F5C800;--yellow-h:#FFD740;
  --black:#111;--dark:#141414;--card:#1E1E1E;--grey:#777;--white:#fff;
  --ff:'Frankfurter','Inter',sans-serif;
  --fb:'Inter',sans-serif;
  --fh:'Nunito',sans-serif;
  --r:20px;--rs:12px;--rb:999px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--white);font-family:var(--fb);overflow-x:hidden}

/* ────────── UTILITÀ ────────── */
.wrap{max-width:1200px;margin:0 auto;padding:96px 60px}
.s-title{font-family:var(--fh);font-size:clamp(32px,4.5vw,64px);font-weight:900;line-height:1.05;margin-bottom:16px;color:var(--white)}
.s-title .y{color:var(--yellow);font-family:var(--ff);letter-spacing:1px}
.s-sub{font-family:var(--fb);font-size:17px;color:rgba(255,255,255,.43);font-weight:400;max-width:500px;line-height:1.75}

/* Bottoni */
.btn-p{background:var(--yellow);color:var(--black);font-family:var(--fb);font-size:14px;font-weight:700;padding:14px 30px;border-radius:var(--rb);text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(245,200,0,.22);transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.btn-p:hover{background:var(--yellow-h);transform:translateY(-4px) scale(1.03);box-shadow:0 14px 32px rgba(245,200,0,.4)}
.btn-s{border:2px solid rgba(255,255,255,.16);color:var(--white);font-family:var(--fb);font-size:14px;font-weight:600;padding:14px 30px;border-radius:var(--rb);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .3s}
.btn-s:hover{border-color:var(--yellow);color:var(--yellow)}

/* Reveal (scroll animation) */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:.10s}.d2{transition-delay:.20s}.d3{transition-delay:.30s}

/* ────────── INTRO ────────── */
#intro{position:fixed;inset:0;z-index:9999;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .5s,visibility .5s}
#intro.out{opacity:0;visibility:hidden;pointer-events:none}
#introLogo{width:clamp(160px,28vw,280px);height:auto;opacity:0;transform:scale(.9);animation:logoIn .5s var(--ease) .1s forwards;filter:drop-shadow(0 0 40px rgba(245,200,0,.3))}
@keyframes logoIn{to{opacity:1;transform:scale(1)}}
.intro-bar-track{width:clamp(160px,28vw,280px);height:3px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.intro-bar-fill{height:100%;width:0;background:var(--yellow);border-radius:99px;animation:barFill 1.2s cubic-bezier(.4,0,.6,1) .2s forwards}
@keyframes barFill{to{width:100%}}

/* ────────── RESPONSIVE BASE ────────── */
@media(max-width:1024px){
  .wrap{padding:80px 28px}
}
@media(max-width:768px){
  .wrap{padding:56px 20px}
}