/* =========================================================
   PERAZZI DESIGN SYSTEM — colors_and_type.css
   Italian-luxury shotgun heritage. Confident, restrained.
   ========================================================= */

/* ---------- FONT FACES ---------- */
/* ---------- TOKENS ---------- */
:root {
  /* Brand color — Perazzi Red.
     Sampled from the Perazzi wordmark / Gran Mondiale lockup.
     Slightly warm primary red. */
  --perazzi-red:        #D7141A;
  --perazzi-red-deep:   #A30E13;   /* press / on-light hover */
  --perazzi-red-bright: #ED2127;   /* highlight / on-dark hover */
  --perazzi-red-ink:    #6B0B0E;   /* deepest, for borders on cream */

  /* Neutrals — paper / ink / steel.
     Cream paper of the brochure, gun-bluing black, engraved steel grey. */
  --ink:                #0E0E0F;   /* near-black, body on light */
  --ink-2:              #1A1A1B;   /* card surface on dark */
  --ink-3:              #2A2A2C;   /* hairline borders on dark */
  --steel-900:          #3A3A3D;
  --steel-700:          #5C5C60;
  --steel-500:          #8A8A8E;
  --steel-300:          #BFBFC1;
  --steel-200:          #D8D6D1;
  --steel-100:          #ECEAE4;
  --paper:              #F4F1EA;   /* warm cream, brochure stock */
  --paper-bright:       #FBF8F2;
  --white:              #FFFFFF;

  /* Accent — walnut stock + brass.
     For supporting moments (engraving plates, prize tables). */
  --walnut-900:         #2E1A0F;
  --walnut-700:         #5A3522;
  --walnut-500:         #8A5232;
  --brass:              #B08A47;
  --brass-soft:         #D4B374;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:                 var(--paper);
  --bg-elevated:        var(--paper-bright);
  --bg-inverse:         var(--ink);
  --bg-product:         #000000;   /* product photography black */

  --fg:                 var(--ink);
  --fg-2:               var(--steel-700);     /* secondary */
  --fg-3:               var(--steel-500);     /* tertiary, meta */
  --fg-inverse:         var(--paper-bright);
  --fg-inverse-2:       var(--steel-300);

  --line:               var(--steel-200);
  --line-strong:        var(--ink);
  --line-inverse:       var(--ink-3);

  --accent:             var(--perazzi-red);
  --accent-fg:          var(--white);
  --accent-hover:       var(--perazzi-red-deep);

  /* Status — used very sparingly. */
  --success:            #2C7A3F;
  --warning:            #C28A2A;
  --danger:             var(--perazzi-red);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:       "Radiant Charisma", "Times New Roman", Georgia, serif;
  --font-sans:          "Aptos", "Aptos Display", "Helvetica Neue", Arial, sans-serif;
  --font-serif:         "Aptos Serif", "Times New Roman", Georgia, serif;
  --font-mono:          "Aptos Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Editorial scale, generous. Heading ladder leans on display serif. */
  --fs-display-2xl:     clamp(72px, 9vw, 144px);   /* hero wordmark */
  --fs-display-xl:      clamp(56px, 6vw, 96px);    /* H1 hero */
  --fs-display-lg:      clamp(40px, 4.4vw, 64px);  /* H1 page */
  --fs-h1:              48px;
  --fs-h2:              36px;
  --fs-h3:              24px;
  --fs-h4:              20px;
  --fs-body-lg:         18px;
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-caption:         12px;
  --fs-eyebrow:         11px;

  --lh-tight:           1.05;
  --lh-snug:            1.2;
  --lh-normal:          1.5;
  --lh-relaxed:         1.65;

  /* Letter-spacing — the brochure's signature is wide, tracked caps. */
  --ls-eyebrow:         0.32em;
  --ls-caps:            0.18em;
  --ls-caps-tight:      0.08em;
  --ls-body:            0;
  --ls-display:         -0.01em;

  /* ---------- SPACING ---------- */
  --s-0:                0;
  --s-1:                4px;
  --s-2:                8px;
  --s-3:                12px;
  --s-4:                16px;
  --s-5:                24px;
  --s-6:                32px;
  --s-7:                48px;
  --s-8:                64px;
  --s-9:                96px;
  --s-10:               128px;

  /* ---------- RADII ---------- */
  /* Perazzi is angular and editorial — radii are restrained.
     Most surfaces are sharp; only soft pills for chips. */
  --radius-none:        0;
  --radius-sm:          2px;
  --radius-md:          4px;
  --radius-lg:          8px;
  --radius-pill:        999px;

  /* ---------- BORDERS ---------- */
  --border-hair:        1px solid var(--line);
  --border-rule:        1px solid var(--line-strong);
  --border-double:      3px double var(--line-strong);   /* brochure header rule */
  --border-thick:       3px solid var(--line-strong);

  /* ---------- SHADOWS ---------- */
  /* Used VERY sparingly. Editorial layouts mostly use rules and weight,
     not elevation. Reserve for floating UI only. */
  --shadow-sm:          0 1px 2px rgba(14,14,15,.08);
  --shadow-md:          0 4px 12px rgba(14,14,15,.10);
  --shadow-lg:          0 16px 40px rgba(14,14,15,.18);
  --shadow-inset-rule:  inset 0 -1px 0 var(--line);

  /* ---------- MOTION ---------- */
  --ease-out:           cubic-bezier(.2,.7,.2,1);
  --ease-in-out:        cubic-bezier(.6,0,.4,1);
  --dur-fast:           120ms;
  --dur-base:           220ms;
  --dur-slow:           420ms;

  /* ---------- LAYOUT ---------- */
  --container:          1280px;
  --container-narrow:   880px;
  --gutter:             clamp(20px, 4vw, 64px);
}

/* ---------- BASE ELEMENTS ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display serif by default. */
h1, .h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-4);
}
h3, .h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}

/* Eyebrow — tracked caps. The brochure's signature voice. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Tracked title — for hero titles like "G R A N  M O N D I A L E" */
.tracked {
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.tracked-tight {
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--s-4);
  max-width: 68ch;
}
small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--accent);
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

hr {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: var(--s-6) 0;
}

/* Selection — Perazzi red. */
::selection { background: var(--perazzi-red); color: var(--white); }

/* ============================================================
   DISPLAY SERIF RULE — Radiant Charisma is ONLY used in
   Medium Italic (500). Default heading rules below.
   Per-section selectors get their own italic+500 override
   alongside their font-family declaration.
   ============================================================ */
h1, h2, h3, .h1, .h2, .h3 {
  font-style: italic !important;
  font-weight: 500 !important;
}

/* ----- */

*, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 22px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    transition: background 240ms cubic-bezier(.2,.7,.2,1), border-color 240ms, color 240ms;
    border-bottom: 1px solid transparent;
    color: #fff;
  }
  .nav.scrolled {
    background: rgba(245,241,234,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(14,14,15,0.08);
    color: var(--ink);
  }
  .nav .brand { position: relative; display: inline-flex; align-items: center; }
  .nav .brand img { height: 26px; width: auto; display: block; transition: opacity 200ms; }
  .nav .brand .light { opacity: 1; }
  .nav .brand .dark { opacity: 0; position: absolute; left: 0; top: 0; }
  .nav.scrolled .brand .light { opacity: 0; }
  .nav.scrolled .brand .dark { opacity: 1; }

  .nav .links { display: flex; gap: 36px; }
  .nav .links a {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 120ms, color 120ms;
  }
  .nav .links a:hover { opacity: 1; color: var(--perazzi-red); }
  .nav.scrolled .links a { color: var(--ink); }
  .nav .lang {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: inherit;
  }
  .nav .lang .sep { opacity: 0.4; }
  .nav .lang .on { color: var(--perazzi-red); }
  .nav .lang .off { opacity: 0.55; cursor: pointer; }
  .nav .menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit; z-index: 60; }
  .nav .menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 200ms; }
  .nav.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  iframe.section {
    width: 100%;
    border: 0;
    display: block;
    background: var(--paper);
  }
  iframe#evento { min-height: 100vh; }

  /* Splash screen — hides FOUC until iframes + fonts ready */
  #splash {
    position: fixed; inset: 0;
    z-index: 9999;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 480ms cubic-bezier(.2,.7,.2,1);
  }
  #splash::after {
    content: "";
    width: 56px; height: 56px;
    background: url("risorse/img/img-3-d904cc6f46.png") center/contain no-repeat;
    opacity: 0.85;
    animation: splashPulse 1.4s ease-in-out infinite;
  }
  @keyframes splashPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.96); }
    50%      { opacity: 0.95; transform: scale(1.04); }
  }
  body.is-loading { overflow: hidden; }
  body.is-loaded #splash { opacity: 0; pointer-events: none; }
  body.is-loading > nav,
  body.is-loading > iframe.section,
  body.is-loading > .vertical-p-divider {
    opacity: 0;
  }
  body > nav,
  body > iframe.section,
  body > .vertical-p-divider {
    transition: opacity 420ms cubic-bezier(.2,.7,.2,1);
  }
  @media (prefers-reduced-motion: reduce) {
    #splash, body > nav, body > iframe.section, body > .vertical-p-divider { transition: none; animation: none; }
  }

  /* Vertical P decoration spanning from bottom of MR57-field down through later sections */
  .vertical-p-divider {
    position: relative;
    width: 100%;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
  }
  .vertical-p-divider img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1280px;
    width: auto;
    pointer-events: none;
    /* reveal is driven by scroll progress via --reveal (0 → 1) */
    opacity: 1;
    clip-path: inset(calc((1 - var(--reveal, 0)) * 100%) 0 0 0);
  }
  @media (prefers-reduced-motion: reduce) {
    .vertical-p-divider img { clip-path: none; }
  }
  @media (max-width: 820px) {
    .vertical-p-divider img { height: 720px; }
  }
  @media (max-width: 600px) {
    .vertical-p-divider { display: none; }
  }

  @media (max-width: 720px) {
    .nav { padding: 16px 20px; flex-wrap: wrap; row-gap: 0; }
    .nav .links, .nav .lang { display: none; }
    .nav .menu-toggle { display: block; }
    .nav .brand img { height: 22px; }

    /* Mobile menu open state — dropdown panel */
    .nav.menu-open {
      background: var(--ink);
      color: #fff;
      border-bottom-color: var(--ink-3);
    }
    .nav.menu-open .brand .light { opacity: 1; }
    .nav.menu-open .brand .dark { opacity: 0; }
    .nav.menu-open .links,
    .nav.menu-open .lang {
      display: flex;
      width: 100%;
      flex-basis: 100%;
    }
    .nav.menu-open .links {
      flex-direction: column;
      align-items: flex-start;
      gap: 22px;
      padding: 28px 0 16px;
      border-top: 1px solid var(--ink-3);
      margin-top: 16px;
    }
    .nav.menu-open .links a { color: #fff; font-size: 14px; opacity: 1; }
    .nav.menu-open .lang { padding-bottom: 8px; color: #fff; }
    .nav.menu-open .lang .off { color: rgba(255,255,255,0.6); }

    /* Tighten section spacing on mobile */
    body { -webkit-text-size-adjust: 100%; }
  }