/* ============================================================
   ITALY AT BSX 2026 — National Pavilion
   Off-black · tricolore-gold trim · Bodoni Moda + Inter
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:        #07080a;
  --bg-2:      #0a0c0f;
  --bg-3:      #0e1116;
  --ink:       #f4f1e9;      /* warm white */
  --ink-soft:  #b9b6ad;
  --muted:     #7d7c77;
  --line:      rgba(244,241,233,.10);
  --line-2:    rgba(244,241,233,.06);

  /* Italian palette — replaces the former gold accents.
     --gold* names kept so every existing reference re-colours at once:
     --gold = Italian red (primary UI accent), --gold-lt = warm white
     (display emphasis), --gold-dp = deep red (gradient end). */
  --gold:      #ed1d24;   /* Italian red */
  --gold-lt:   #f6f3ec;   /* warm white */
  --gold-dp:   #b3161b;   /* deep red */
  --accent-grn:#00a651;   /* Italian green — secondary accent */

  /* tricolore */
  --it-green:  #00a651;
  --it-red:    #ed1d24;
  --flag-green:#00a651;
  --flag-white:#f4f5f0;
  --flag-red:  #ed1d24;

  --serif: 'Bodoni Moda', 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --gutter: clamp(20px, 5vw, 90px);
  --maxw: 1320px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--gold); color:#fff; }

img,canvas,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.01em;
}
.display em{ font-style:italic; font-weight:400; color:var(--gold-lt); }

/* ---------- Overlays: grain + vignette ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-5%)} 60%{transform:translate(-3%,4%)}
  80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8000; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ---------- Flag bits ---------- */
.flag-strip,.nav__flag{ display:inline-flex; height:1em; aspect-ratio:3/2; border-radius:1px; overflow:hidden; vertical-align:middle; }
.flag-strip i,.nav__flag i{ flex:1; }
.flag-strip i:nth-child(1),.nav__flag i:nth-child(1){ background:var(--flag-green); }
.flag-strip i:nth-child(2),.nav__flag i:nth-child(2){ background:var(--flag-white); }
.flag-strip i:nth-child(3),.nav__flag i:nth-child(3){ background:var(--flag-red); }
.nav__flag{ height:12px; }
.flag-strip{ height:9px; margin-right:.55em; box-shadow:0 0 0 1px rgba(0,0,0,.4); }

/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ width:min(78vw,340px); text-align:center; }
.preloader__mark{
  font-family:var(--serif); font-weight:600; font-size:34px; letter-spacing:.28em;
  color:var(--gold-lt); padding-left:.28em; margin-bottom:26px;
}
.preloader__bar{ height:1px; background:var(--line); position:relative; overflow:hidden; }
.preloader__bar span{ position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,var(--flag-green),var(--flag-white) 50%,var(--flag-red)); transition:right .2s linear; }
.preloader__pct{ margin-top:14px; font-size:12px; letter-spacing:.2em; color:var(--ink-soft); }
.preloader__pct small{ opacity:.5; }
.preloader__note{ margin-top:6px; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:400;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:transform .5s var(--ease), background .5s, padding .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(7,8,10,.72); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-2); padding-top:16px; padding-bottom:16px;
}
.nav.is-hidden{ transform:translateY(-105%); }
.nav__brand{ display:inline-flex; align-items:center; gap:12px; font-weight:500; letter-spacing:.02em; font-size:15px; }
.nav__brandtext{ opacity:.95; }
.nav__links{ display:flex; gap:34px; font-size:12.5px; letter-spacing:.06em; color:var(--ink-soft); text-transform:uppercase; }
.nav__links a{ position:relative; padding:4px 0; transition:color .35s; }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  font-size:12.5px; letter-spacing:.04em; padding:11px 20px; border:1px solid var(--line);
  border-radius:100px; color:var(--ink); transition:border-color .4s, color .4s, background .4s;
  position:relative; overflow:hidden;
}
.nav__cta::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--gold-dp),var(--gold)); transform:translateY(101%); transition:transform .45s var(--ease); z-index:-1; }
.nav__cta:hover{ border-color:transparent; color:#fff; }
.nav__cta:hover::before{ transform:translateY(0); }

/* ---------- Shared scrub canvas ---------- */
.scrub-canvas{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- HERO ---------- */
.hero{ position:relative; height:230vh; }
.hero__canvas-wrap{
  position:fixed; inset:0; z-index:-1;
}
.hero__canvas-wrap::after{ /* base darkening + bottom fade */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,8,10,.35) 0%, transparent 22%, transparent 55%, rgba(7,8,10,.85) 100%);
}
.hero__stage{
  position:sticky; top:0; height:100svh; overflow:hidden; z-index:1;
}
.hero__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter);
}
.hero__eyebrow{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:2px; margin-bottom:26px;
}
.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(58px, 13vw, 200px); line-height:.9; letter-spacing:-.02em;
  text-shadow:0 4px 60px rgba(0,0,0,.5);
}
.hero__title .track{ display:inline-block; white-space:nowrap; }
.hero__sub{
  margin-top:30px; max-width:34ch; font-size:clamp(15px,1.5vw,19px);
  color:var(--ink-soft); font-weight:300; line-height:1.55;
}
.hero__scrollcue{
  position:absolute; left:var(--gutter); bottom:34px; z-index:3;
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.hero__scrollcue i{ position:relative; width:34px; height:1px; background:var(--line); overflow:hidden; }
.hero__scrollcue i::after{ content:''; position:absolute; inset:0; background:var(--gold); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }
.hero__year{
  position:absolute; right:var(--gutter); bottom:26px; z-index:3;
  font-family:var(--serif); font-size:clamp(40px,7vw,96px); font-weight:400;
  color:transparent; -webkit-text-stroke:1px rgba(244,241,233,.14); line-height:1;
}

/* ---------- STORY ---------- */
.story{
  position:relative; z-index:5; background:var(--bg);
  padding:clamp(90px,16vh,200px) var(--gutter) clamp(90px,14vh,180px);
  border-top:1px solid var(--line-2);
}
.story__index{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:60px; }
.story__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,6vw,90px); align-items:start; }
.story__lead h2{ font-size:clamp(44px,7.5vw,120px); }
.story__lead h2 span{ display:block; overflow:hidden; }
.story__lead h2 span:last-child{ color:var(--gold-lt); font-style:italic; font-weight:400; }
.story__body{ padding-top:12px; }
.story__body p{ font-size:clamp(16px,1.5vw,20px); line-height:1.7; color:var(--ink-soft); font-weight:300; margin-bottom:26px; max-width:46ch; }
.story__signature{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.2vw,28px) !important; color:var(--ink) !important; }

/* ---------- DETAIL (macro scrub) ---------- */
.detail{ position:relative; height:320vh; background:var(--bg); }
.detail__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.detail__canvas-wrap{ position:absolute; inset:0; z-index:0; }
.detail__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(7,8,10,.86) 0%, rgba(7,8,10,.35) 42%, transparent 70%); }
.detail__head{ position:absolute; z-index:2; top:clamp(90px,14vh,150px); left:var(--gutter); max-width:46ch; }
.detail__index{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.detail__title{ font-size:clamp(40px,6vw,92px); }
.detail__callouts{ position:absolute; z-index:3; left:var(--gutter); bottom:clamp(48px,10vh,110px); list-style:none; width:min(90vw,420px); }
.detail__callouts li{
  position:absolute; left:0; bottom:0; opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  padding-left:56px;
}
.detail__callouts li.is-active{ opacity:1; transform:translateY(0); }
.detail__callouts .ci{ position:absolute; left:0; top:2px; font-family:var(--serif); font-size:15px; color:var(--gold); letter-spacing:.05em; }
.detail__callouts .ci::after{ content:''; position:absolute; left:2px; top:24px; width:1px; height:26px; background:linear-gradient(var(--gold),transparent); }
.detail__callouts b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.4vw,28px); margin-bottom:8px; }
.detail__callouts i{ font-style:normal; font-size:14.5px; line-height:1.6; color:var(--ink-soft); font-weight:300; }

/* ---------- SPEC (exploded scrub behind flowing panels) ---------- */
.spec{ position:relative; background:var(--bg); }
.spec__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; z-index:0; }
.spec__canvas-wrap{ position:absolute; inset:0; }
.spec__scrim{ position:absolute; inset:0; background:radial-gradient(90% 70% at 70% 40%, transparent 35%, rgba(7,8,10,.7) 100%), linear-gradient(180deg, rgba(7,8,10,.6), rgba(7,8,10,.4)); }
.spec__flow{
  position:relative; z-index:2; margin-top:-100svh;
  padding:0 var(--gutter) clamp(80px,12vh,160px);
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
.spec__intro{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; max-width:44ch; }
.spec__index{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; }
.spec__intro h2{ font-size:clamp(44px,7vw,110px); }
.spec__intro p{ margin-top:30px; font-size:clamp(16px,1.5vw,19px); line-height:1.7; color:var(--ink-soft); font-weight:300; max-width:42ch; }

.spec__panel{
  margin-top:clamp(40px,8vh,90px); padding:clamp(28px,4vw,54px);
  background:linear-gradient(180deg, rgba(14,17,22,.72), rgba(10,12,15,.72));
  border:1px solid var(--line); border-radius:4px;
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.spec__panel::before{ content:''; position:absolute; left:0; top:0; width:100%; height:2px; background:linear-gradient(90deg,var(--flag-green) 0 33.3%, var(--flag-white) 33.3% 66.6%, var(--flag-red) 66.6% 100%); opacity:.7; }
.spec__panel-title{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,32px); margin-bottom:34px; }

/* stats */
.spec__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); padding:1px; }
.spec__stats .stat{ background:linear-gradient(180deg,rgba(14,17,22,.9),rgba(10,12,15,.9)); padding:clamp(26px,3.4vw,46px) clamp(20px,2.4vw,34px); }
.spec__stats::before{ display:none; }
.stat__num{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(46px,6vw,86px); line-height:.9; color:var(--accent-grn); letter-spacing:-.02em; }
.stat__num sup{ font-size:.4em; vertical-align:super; color:var(--accent-grn); opacity:.85; }
.stat__label{ display:block; margin-top:16px; font-size:13px; line-height:1.5; color:var(--ink-soft); font-weight:300; max-width:22ch; }

/* capabilities */
.cap__list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.cap__list li{
  display:flex; align-items:baseline; gap:16px; padding:22px 4px;
  border-top:1px solid var(--line); font-size:clamp(15px,1.5vw,18px); font-weight:300; color:var(--ink);
}
.cap__list li span{ font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:.08em; min-width:26px; }

/* companies — white logo cards */
.companies__logos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
.logo-card{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:6px; aspect-ratio:16/7; padding:16px 20px;
  overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s;
}
.logo-card::after{ /* subtle tricolore hairline on hover */
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--flag-green) 0 33.3%,var(--flag-white) 33.3% 66.6%,var(--flag-red) 66.6% 100%);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.logo-card img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.logo-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.4); }
.logo-card:hover::after{ transform:scaleX(1); }
.logo-card__name{ display:none; font-size:13px; line-height:1.35; color:#1c1c1c; text-align:center; font-weight:600; letter-spacing:.01em; }
.logo-card.is-missing img{ display:none; }
.logo-card.is-missing .logo-card__name{ display:block; }

/* ---------- EVENT BAND ---------- */
.event{
  position:relative; z-index:5; background:var(--bg-2);
  padding:clamp(100px,20vh,220px) var(--gutter);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  text-align:center; overflow:hidden;
}
.event__inner{ max-width:var(--maxw); margin:0 auto; }
.event__kicker{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:40px; display:inline-flex; align-items:center; gap:6px; }
.event__line{ font-family:var(--serif); font-weight:500; font-size:clamp(84px,22vw,340px); line-height:.86; letter-spacing:-.02em; }
.event__line .reveal-word{ display:inline-block; }
.event__meta{ margin-top:56px; display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,54px); flex-wrap:wrap; }
.event__meta > div:not(.event__dot){ text-align:center; }
.event__meta b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.4vw,30px); }
.event__meta small{ display:block; margin-top:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.event__dot{ font-family:var(--serif); font-size:30px; color:var(--gold); opacity:.5; }

/* ---------- REGISTER ---------- */
.register{ position:relative; z-index:5; background:var(--bg); padding:clamp(90px,16vh,200px) var(--gutter); }
.register__inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); align-items:center; }
.register__index{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; }
.register__copy h2{ font-size:clamp(44px,6.5vw,104px); }
.register__copy p{ margin-top:28px; font-size:clamp(15px,1.5vw,18px); line-height:1.7; color:var(--ink-soft); font-weight:300; max-width:40ch; }

.register__form{ display:flex; flex-direction:column; gap:8px; }
.field{ position:relative; border-bottom:1px solid var(--line); }
.field input,.field select{
  width:100%; background:transparent; border:0; outline:0; color:var(--ink);
  font-family:inherit; font-size:16px; padding:26px 0 12px; letter-spacing:.01em;
}
.field select{ color:var(--ink); appearance:none; cursor:pointer; }
.field select option{ background:var(--bg-3); color:var(--ink); }
.field label{
  position:absolute; left:0; top:26px; color:var(--muted); font-size:16px; letter-spacing:.02em;
  pointer-events:none; transition:transform .35s var(--ease), color .35s, font-size .35s;
  transform-origin:left;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field.field--select label,
.field select:focus + label,
.field select:valid + label{
  transform:translateY(-24px) scale(.7); color:var(--gold);
}
.field::after{ content:''; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.field:focus-within::after{ transform:scaleX(1); }
.field--select::before{ content:''; position:absolute; right:4px; top:30px; width:8px; height:8px; border-right:1px solid var(--ink-soft); border-bottom:1px solid var(--ink-soft); transform:rotate(45deg); pointer-events:none; }

.register__submit{
  margin-top:26px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:14px;
  background:var(--ink); color:#0a0a0a; border:0; border-radius:100px;
  padding:16px 30px; font-size:14px; letter-spacing:.03em; font-weight:500;
  position:relative; overflow:hidden; transition:color .4s;
}
.register__submit svg{ width:22px; height:22px; transition:transform .4s var(--ease); }
.register__submit::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--gold),var(--gold-dp)); transform:translateX(-101%); transition:transform .45s var(--ease); z-index:0; }
.register__submit span,.register__submit svg{ position:relative; z-index:1; }
.register__submit:hover{ color:#fff; }
.register__submit:hover::before{ transform:translateX(0); }
.register__submit:hover svg{ transform:translateX(5px); }
.register__success{ margin-top:20px; font-family:var(--serif); font-style:italic; font-size:18px; color:var(--accent-grn); }

/* ---------- FOOTER ---------- */
.foot{ background:var(--bg); border-top:1px solid var(--line-2); padding:clamp(40px,7vh,80px) var(--gutter) 44px; }
.foot__row{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot__brand{ display:inline-flex; align-items:center; gap:12px; font-size:15px; }
.foot__meta{ font-size:12.5px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
.foot__row--fine{ margin-top:34px; padding-top:24px; border-top:1px solid var(--line-2); font-size:12px; letter-spacing:.05em; color:var(--muted); }

/* ---------- Reveal base states ---------- */
.reveal-up{ opacity:0; transform:translateY(30px); }
.reveal-up.is-in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-lines span{ display:block; }
.char, .word{ display:inline-block; will-change:transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .hero__scrollcue i::after{ animation:none; }
  .reveal-up{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .story__grid{ grid-template-columns:1fr; gap:40px; }
  .register__inner{ grid-template-columns:1fr; gap:50px; }
  .spec__stats{ grid-template-columns:repeat(2,1fr); }
  .cap__list{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  :root{ --gutter:20px; }
  .nav__cta{ display:none; }
  .hero__sub{ margin-top:22px; }
  .detail{ height:280vh; }
  .detail__scrim{ background:linear-gradient(180deg, rgba(7,8,10,.4) 0%, transparent 40%, rgba(7,8,10,.9) 100%); }
  .detail__callouts{ width:min(92vw,380px); }
  .spec__stats{ grid-template-columns:1fr 1fr; }
  .event__meta{ gap:18px; }
  .event__dot{ display:none; }
  .foot__row{ flex-direction:column; align-items:flex-start; }
}