/* ============================================================
   Gaia Angelino — landing
   Reference frame: 1920 wide. Type scales with the viewport (vw).
   ============================================================ */

:root {
  --bg:    #f5f5f5;   /* grigio chiaro (Figma)      */
  --ink:   #0a0a0a;   /* near-black text            */
  --lime:  #dcff51;   /* highlight / accent (Figma) */
  --blue:  #2722e8;   /* "iper" logo box            */
  --ph:    #d2d2cf;   /* placeholder fill           */

  /* Type sizes relative to the 1920 design --------------------- */
  /* Figma: font-size 260 su frame 1920 → 13.54vw */
  --fs-lead:  clamp(40px, 13.54vw, 260px);
  --fs-meta:  clamp(12px, 1.04vw, 21px);

  /* Figma: letter-spacing -4% */
  --track: -0.04em;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 1.7vw, 34px);
  background: linear-gradient(
    180deg,
    var(--lime) 0%,
    rgba(245, 245, 245, 0) 100%
  );
  transition: top .35s ease;
}
.site-header.nav-hidden { top: -90px; }

.logo {
  font-family: "Instrument Serif", serif;
  font-size: clamp(14px, 2.08vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.06em;
}

.nav ul {
  display: flex;
  gap: clamp(14px, 1.9vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-meta);
  font-weight: 400;
}

.nav a {
  position: relative;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}
.nav sup {
  font-size: .62em;
  font-weight: 500;
  margin-left: 1px;
  vertical-align: super;
}
.nav a:hover { opacity: .55; }

/* nessuno stato visivo al click / scroll (nessuna riga sotto) */

/* ============================================================
   MAIN — the big editorial paragraph
   ============================================================ */
.main {
  padding: clamp(60px, 8vw, 90px) clamp(16px, 1.7vw, 34px) clamp(40px, 5vw, 110px);
}

.lead {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: .92;
  letter-spacing: var(--track);
  text-align: left;
}

/* spazio "editoriale" dove un blocco numerato finisce e ne inizia un altro */
.gap {
  display: inline-block;
  width: .5em;
}

/* note nel testo — Figma: 30px su frame 1920, serif, in alto al testo grande */
.fn {
  font-family: "Instrument Serif", serif;
  font-size: clamp(14px, 1.5625vw, 30px);    /* 30 / 1920 */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  /* top della nota allineato alla maiuscola del testo grande, non oltre */
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(-3.75em);
  margin-left: .06em;
  scroll-margin-top: 130px;
}
.fn::before { content: "["; }
.fn::after  { content: "]"; }

/* "ipersensibilità" — stesse caratteristiche di .brand */
.hl {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: none;
}

/* ---- SERVIZI: rotator animato (copywriting, creative direction, …) ---- */
/* fascia a larghezza fissa: aspect-ratio = viewBox dell'SVG (760/180),
   così tutte le parole hanno la stessa larghezza e il [2] non si muove.
   height 0.69em → a corpo 260px la parola rende a font-size 100 (come Figma). */
.rotator {
  display: inline-block;
  position: relative;
  width: 2.92em;
  height: 0.69em;
  vertical-align: baseline;
  white-space: nowrap;
}
.service {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;      /* la stroke lime non viene tagliata */
  transition: transform .56s cubic-bezier(.33,0,.2,1),
              opacity   .56s cubic-bezier(.33,0,.2,1);
}
/* "ipersensibilità" — sans, bold e più grande, outside stroke 5px */
.hl--big {
  font-size: 0.846em;
}
.hl--big:hover { font-style: italic; }

/* "BASE Milano" — sans bold nero, 220/260 del corpo */
.brand {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  font-size: 0.846em;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand:hover { font-style: italic; }

.plus {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
}

/* ============================================================
   INLINE MEDIA — immagini reali, dimensionate in em sul testo.
   height in em + width:auto preserva la proporzione del file.
   ============================================================ */
.media {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  object-fit: contain;
  /* tolte dal calcolo del line-box: immagini visibili ma non espandono l'interlinea */
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}

/* cutout su sfondo trasparente (galleggiano nel testo) */
.media--hand   { height: .739em; transform: translateY(-.12em); }
.media--eyes   { height: .812em; vertical-align: middle; transform: translateY(-.1em); }
.media--ball   { height: .812em; transform: translateY(-.1em); }
.media--pencil { height: .72em; animation: float-pencil 3.5s ease-in-out infinite; }
.media--phone  { height: 1.3em; animation: float 4s ease-in-out infinite .8s; }

.media--photo    { height: .62em; }
.media--sneakers { height: .731em; }
.media--iper     { height: .74em; }
.media--projects {
  height: 1.5em;
  margin-top: 0;
  margin-bottom: 0;
}

.video-with-ball {
  display: inline-block;
  position: relative;
  line-height: 0;
  vertical-align: top;
}

/* video centrato */
.guarda-row {
  display: flex;
  justify-content: center;
  margin-top: 0.3em;
  transform-origin: center center;
}
.guarda-row .video-with-ball {
  flex: 0 0 70%;
  display: block;
}
.guarda-row .media--projects {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0;
  cursor: none;
}

/* ============================================================
   CURSOR PROGETTI — rettangolo lime con testo in loop
   ============================================================ */
#cursor-progetti {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--lime);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 999;
  overflow: hidden;
  white-space: nowrap;
  padding: clamp(8px, 0.8vw, 14px) 0;
  width: clamp(130px, 11vw, 210px);
  transition: opacity .12s ease;
}
#cursor-progetti.is-visible { opacity: 1; }

.cursor-ticker {
  display: inline-flex;
  animation: ticker 4s linear infinite;
}
.cursor-ticker span {
  font-family: "Instrument Serif", serif;
  font-size: clamp(14px, 1.2vw, 22px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.03em;
  padding-right: 0;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* [3] posizionato sul video */
.fn--video {
  position: absolute;
  top: 0.15em;
  right: 0.15em;
  transform: none;
  font-family: "Instrument Serif", serif;
  font-size: clamp(10px, 1.04vw, 20px);
  line-height: 1;
  margin: 0;
  z-index: 10;
}

.ball-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 0.9em;
  width: auto;
  transform: translate(35%, 0);
  cursor: pointer;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(12px, 1.04vw, 20px) clamp(16px, 1.7vw, 34px);
  min-height: clamp(140px, 12.8vw, 246px);
  font-size: var(--fs-meta);
}

.foot-id p {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-size: clamp(14px, 2.08vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.06em;
}

.foot-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: clamp(100px, 9.1vw, 175px);
}

.nav--foot ul { justify-content: flex-end; }

.foot-credit {
  text-align: right;
  font-family: "Instrument Serif", serif;
  font-size: clamp(11px, 1.5625vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.06em;
}
.foot-credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   POPUP LINKS (creative hub, agenzia)
   ============================================================ */
.popup-link {
  display: inline-block;
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.04em;
  cursor: pointer;
}

.popup-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  background: var(--lime);
  padding: clamp(10px, 0.9vw, 18px) clamp(14px, 1.2vw, 24px);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(12px, 1.45vw, 28px);
  line-height: 1;
  letter-spacing: -0.04em;
  width: clamp(160px, 20vw, 380px);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
}
[data-popup="hub"] .popup-tooltip    { transform: translate(-50%, -50%) rotate(-4.88deg); }
[data-popup="agenzia"] .popup-tooltip { transform: translate(-50%, -50%) rotate(3.5deg); }
.popup-link:hover .popup-tooltip { opacity: 1; }
.popup-tooltip strong {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* ============================================================
   CTA LINKS (scrivimi / chiamami)
   ============================================================ */
.cta {
  display: inline-block;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.cta__text {
  display: inline-block;
  transition: transform .3s ease;
  transform-origin: center;
}
.cta:hover .cta__text { transform: scale(.92); }

/* icona flottante centrata sulla parola */
.cta .media {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
}

@keyframes float {
  0%, 100% { transform: translate(-50%, -50%); }
  50%       { transform: translate(-50%, calc(-50% - .04em)); }
}
@keyframes float-pencil {
  0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
  50%       { transform: translate(-50%, calc(-50% - .04em)) rotate(-8deg); }
}

/* ============================================================
   MODAL CATALOGO
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, .38);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.modal-open { overflow: hidden; }

.modal {
  position: relative;
  width: min(94vw, 1500px);
  max-height: 90vh;
  background: var(--lime);
  border: 6px dashed var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateY(18px);
  transition: transform .35s cubic-bezier(.33,0,.2,1);
}
.modal-overlay.is-open .modal { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: clamp(12px, 1.25vw, 24px);
  right: clamp(16px, 1.7vw, 34px);
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Instrument Serif", serif;
  font-size: clamp(14px, 1.25vw, 24px);
  color: var(--ink);
  padding: 0;
  line-height: 1;
  z-index: 10;
  transition: opacity .2s;
}
.modal-close:hover { opacity: .5; }

.modal-inner {
  overflow-y: auto;
  padding: clamp(24px, 2.5vw, 50px) clamp(20px, 1.7vw, 34px);
}

/* catalog header */
.cat-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(20px, 2vw, 40px);
}
.cat-title {
  display: flex;
  align-items: baseline;
  gap: .5em;
}
.cat-num {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(10px, .78vw, 15px);
  font-weight: 400;
  letter-spacing: .02em;
}
.cat-title h2 {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(36px, 4.69vw, 90px);
  line-height: 1;
  letter-spacing: -0.05em;
}
.cat-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.cat-filters {
  display: flex;
  gap: clamp(12px, 1.45vw, 28px);
}
.cat-filter {
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(10px, .78vw, 15px);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  padding: 0 0 2px;
  opacity: .45;
  transition: opacity .2s;
  text-transform: uppercase;
}
.cat-filter:hover { opacity: .75; }
.cat-filter.active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.cat-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(10px, .78vw, 15px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cat-sort > span { opacity: .45; }
.cat-sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink);
  padding: 3px 10px;
  border-radius: 20px;
  transition: background .2s, color .2s;
}
.cat-sort-btn.active { background: var(--ink); color: var(--lime); }

/* column labels */
.cat-cols {
  display: grid;
  grid-template-columns: 3.5ch 1fr auto;
  gap: 0 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(9px, .68vw, 13px);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* items */
.cat-list { list-style: none; margin: 0; padding: 0; }

.cat-item {
  display: grid;
  grid-template-columns: 3.5ch 1fr auto 1.8ch;
  gap: 0 24px;
  align-items: center;
  padding: clamp(10px, 1vw, 18px) 0;
  border-bottom: 1px solid var(--ink);
  cursor: default;
  transition: background .15s;
}
.cat-item:hover { background: rgba(10,10,10,.06); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }

.cat-item__n {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(9px, .68vw, 13px);
  opacity: .35;
}
.cat-item__title {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cat-item__meta {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(9px, .68vw, 13px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cat-item__plus {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(14px, 1.25vw, 22px);
  font-weight: 300;
  text-align: right;
}
.cat-item.hidden { display: none; }

/* ============================================================
   RESPONSIVE — tablet / mobile
   ============================================================ */
@media (max-width: 760px) {
  :root {
    --fs-lead: clamp(34px, 13vw, 92px);
    --fs-meta: 13px;
  }
  .lead { text-align: left; line-height: 1.04; }
  /* su mobile gli a-capo fissi del desktop si disattivano: riflusso naturale */
  .lead br { display: none; }
  .gap { width: .3em; }

  .site-header { flex-direction: column; gap: 14px; }
  .nav ul { gap: 16px; flex-wrap: wrap; }

  .site-footer {
    flex-direction: column;
    gap: 20px;
    min-height: auto;
  }
  .foot-right {
    align-items: flex-start;
    height: auto;
    gap: 16px;
  }
  .nav--foot ul { justify-content: flex-start; }
  .foot-credit { text-align: left; }
}