/* =========================================================
   ZAIRA AIELLO — DIGITAL PORTFOLIO
   style.css — main stylesheet
   ========================================================= */

/* ---------------------------------------------------------
   1. FONT FACES
   I file reali sono in /fonts (estratti dai tuoi zip).
   - "Arial Narrow" 400/700  → titoli, eyebrow, numeri
   - "Arial Black"           → usato SOLO per i titoli enormi
     (hero, numeri di sezione): non esiste un vero file
     "Arial Narrow Black", quindi lo comprimiamo un po' via
     CSS (vedi .display-black qui sotto) per avvicinarlo il
     più possibile al taglio condensed+black del cartaceo.
   - "Helvetica Neue" 400/500/700 → testo, il 500 (Medium) è
     il peso di default per i paragrafi, come richiesto.
--------------------------------------------------------- */
@font-face{
  font-family:"Arial Narrow";
  src:url("../fonts/ARIALN.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Arial Narrow";
  src:url("../fonts/ARIALNB.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Arial Black";
  src:url("../fonts/ARIBLK.woff") format("woff");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue";
  src:url("../fonts/HelveticaNeueRoman.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue";
  src:url("../fonts/HelveticaNeueMedium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue";
  src:url("../fonts/HelveticaNeueBold.woff") format("woff");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue";
  src:url("../fonts/HelveticaNeueItalic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------------------------------------------------------
   2. TOKENS — i colori esatti del portfolio cartaceo
--------------------------------------------------------- */
:root{
  --grey:   #1a1919; /* cover / back cover */
  --yellow: #edda1c; /* second slide */
  --orange: #f05123; /* ICON. */
  --blue:   #222cf0; /* ITO */
  --pink:   #ff94cd; /* Steven Meisel */
  --red:    #db2121; /* 07/10 */
  --green:  #27a33c; /* Bodoni */
  --white:  #ffffff;
  --black:  #000000;
  --paper:  #f6f5f2; /* leggero off-white per variare dal bianco puro */

  --font-display:"Arial Narrow", Arial, sans-serif;
  --font-black:"Arial Black", "Arial Narrow", Arial, sans-serif;
  --font-text:"Helvetica Neue", Helvetica, Arial, sans-serif;

  --cursor-color: var(--grey);
  --grid-line: rgba(0,0,0,.08);
}

/* ---------------------------------------------------------
   3. RESET
--------------------------------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--white);
  color:var(--black);
  font-family:var(--font-text);
  font-weight:500; /* Helvetica Neue Medium come richiesto */
  line-height:1.5;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){
  body{ cursor:auto; }
  .cursor, .cursor-trail{ display:none; }
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:-0.01em;
}
/* titoli "black" condensati — usa questa classe sui titoli enormi */
.display-black{
  font-family:var(--font-black);
  font-weight:900;
  transform:scaleX(.86);
  transform-origin:left center;
  display:inline-block;
  letter-spacing:-0.01em;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 6vw; }

.eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.08em;
}

/* ---------------------------------------------------------
   4. CUSTOM CURSOR — pallino "elastico" che insegue il mouse
   con un piccolo ritardo (spring), + puntino satellite più
   piccolo che segue ancora più lento (ispirato a ma5a.com)
--------------------------------------------------------- */
.cursor, .cursor-trail{
  position:fixed; top:0; left:0;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor{
  width:14px; height:14px;
  background:var(--cursor-color);
  transition:width .25s, height .25s, background .25s;
}
.cursor.hover{ width:44px; height:44px; }
.cursor-trail{
  width:32px; height:32px;
  border:1px solid var(--cursor-color);
  background:transparent;
}

/* ---------------------------------------------------------
   5. PAGE TRANSITION — wipe colorato tra una pagina e l'altra
--------------------------------------------------------- */
.page-transition{
  position:fixed; inset:0;
  background:var(--grey);
  z-index:9998;
  transform:translateY(101%);
  pointer-events:none;
}
.page-transition.enter{ animation:wipeIn .5s cubic-bezier(.77,0,.18,1) forwards; }
@keyframes wipeIn{ from{transform:translateY(101%);} to{transform:translateY(0);} }

/* ---------------------------------------------------------
   6. NAV
--------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 6vw;
  mix-blend-mode:difference;
  color:var(--white);
}
.nav .nav-name{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:.95rem; }
.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:.8rem; letter-spacing:.04em; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:currentColor;
  transition:width .25s;
}
.nav-links a:hover::after{ width:100%; }
.nav-links a.current::after{ width:100%; }

/* ---------------------------------------------------------
   7. GRID BACKGROUND — richiama la griglia InDesign
   visibile in copertina nel PDF originale
--------------------------------------------------------- */
.grid-bg{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px calc(100% / 6)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px calc(100% / 5));
  pointer-events:none;
}
.grid-bg.on-dark{ --grid-line: rgba(255,255,255,.08); }

/* ---------------------------------------------------------
   8. HERO / COVER (index.html)
--------------------------------------------------------- */
.hero{
  min-height:100svh;
  background:var(--grey);
  color:var(--white);
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:7rem 6vw 3rem;
  overflow:hidden;
}
.hero-top{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
  flex:1;
  position:relative;
}
.hero-letter{
  font-family:var(--font-black);
  font-weight:900;
  font-size:clamp(5rem,16vw,11rem);
  transform:scaleX(.8); transform-origin:left center;
  opacity:.92;
}
.hero-letter.z{ text-align:right; transform-origin:right center; }
.hero-arrow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(38vw,340px); height:2px; background:#6a6a6a;
}
.hero-arrow::after{
  content:""; position:absolute; right:-2px; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:#6a6a6a;
}
.hero-title{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; white-space:nowrap;
  font-size:clamp(2rem,6.4vw,4.6rem);
}
.hero-title .paren{ color:var(--yellow); }
.hero-caption{
  max-width:360px; font-family:var(--font-text); font-weight:400;
  text-transform:none; font-size:1rem; color:#c9c9c9; margin-top:1.4rem;
}
.hero-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  border-top:1px solid #3a3939; padding-top:1.2rem;
}
.hero-bottom .item span{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#8f8f8f; }
.hero-bottom .item strong{ font-family:var(--font-text); font-weight:500; font-size:1rem; }
.hero-tagline{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,1.7rem);
}

.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:1px; height:44px; background:#4a4a4a; overflow:hidden;
}
.scroll-cue::after{
  content:""; position:absolute; top:-44px; left:0; width:100%; height:44px;
  background:var(--yellow); animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{ to{ top:44px; } }

/* ---------------------------------------------------------
   9. MARQUEE
--------------------------------------------------------- */
.marquee{
  background:var(--yellow); color:var(--grey);
  overflow:hidden; white-space:nowrap; padding:.9rem 0;
  border-top:1px solid var(--grey); border-bottom:1px solid var(--grey);
}
.marquee-track{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:1.05rem; letter-spacing:.04em;
  animation:marquee 24s linear infinite;
}
.marquee-track span{ margin:0 1.2em; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------------------------------------------------------
   10. QUOTE
--------------------------------------------------------- */
.quote{ min-height:60vh; display:flex; align-items:center; padding:6rem 6vw; }
.quote p{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,4.6vw,3.1rem); max-width:900px;
}

/* ---------------------------------------------------------
   11. SECTION LINK ("view work", "about me" teasers on home)
--------------------------------------------------------- */
.section-link{
  padding:5rem 6vw; border-top:1px solid #eee;
  display:flex; justify-content:space-between; align-items:center;
  gap:2rem; flex-wrap:wrap;
}
.section-link h2{ font-size:clamp(2rem,6vw,4rem); }
.section-link .go{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:.9rem; letter-spacing:.04em;
  padding:.9rem 1.6rem; border-radius:100px; border:1px solid var(--black);
  transition:background .2s, color .2s;
}
.section-link .go:hover{ background:var(--black); color:var(--white); }

/* ---------------------------------------------------------
   12. FOOTER (contatti, presente su tutte le pagine)
--------------------------------------------------------- */
.footer{
  background:var(--grey); color:var(--white);
  padding:5rem 6vw 2rem; position:relative; overflow:hidden;
}
.footer canvas{ position:absolute; inset:0; z-index:0; }
.footer-inner{ position:relative; z-index:1; }
.footer h2{ font-size:clamp(2.2rem,8vw,5rem); margin-bottom:2.5rem; }
.footer-grid{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  padding-top:1.5rem; border-top:1px solid #3a3939;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:.82rem; letter-spacing:.05em; color:#b7b7b7;
}
.footer-grid a:hover{ color:var(--yellow); }
.footer small{
  display:block; margin-top:2rem; color:#666; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-text); font-weight:400;
}

/* ---------------------------------------------------------
   13. REVEAL ON SCROLL
--------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------
   14. ABOUT PAGE
--------------------------------------------------------- */
.about-hero{ padding:9rem 6vw 3rem; }
.about-hero h1{ font-size:clamp(2.4rem,8vw,5rem); }
.about-body{
  padding:2rem 6vw 6rem; display:grid; grid-template-columns:1fr 1.3fr;
  gap:4rem; align-items:start;
}
.about-photo{
  aspect-ratio:3/4; background:#eee; border:2px dashed #ccc;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1rem; font-family:var(--font-display); font-size:.8rem; text-transform:uppercase; color:#999;
}
.about-body p{ font-size:1.1rem; max-width:560px; }
.about-body p + p{ margin-top:1.2rem; }
.about-facts{
  margin-top:5rem; padding-top:2.5rem; border-top:1px solid #eee;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
}
@media (max-width:800px){ .about-facts{ grid-template-columns:1fr; } }
.about-facts .eyebrow{ color:#999; margin-bottom:.5rem; }

/* ---------------------------------------------------------
   15. WORK INDEX PAGE (work.html) — jackygrob-style numbered
   list + cursor-following image preview (ma5a-style toy)
--------------------------------------------------------- */
.work-hero{ padding:9rem 6vw 2rem; }
.work-hero h1{ font-size:clamp(2.4rem,8vw,5rem); }
.work-hero p{ max-width:480px; margin-top:1rem; font-size:1.05rem; color:#555; }

.work-list{ padding:2rem 6vw 6rem; }
.work-row{
  display:grid;
  grid-template-columns:60px 1fr auto auto 40px;
  align-items:center;
  gap:1.5rem;
  padding:2rem 0;
  border-top:1px solid #e6e6e6;
  position:relative;
}
.work-list .work-row:last-child{ border-bottom:1px solid #e6e6e6; }
.work-row .idx{ font-family:var(--font-display); font-weight:700; color:#bbb; }
.work-row h2{
  font-size:clamp(1.6rem,4.4vw,2.8rem); text-transform:none; font-weight:700;
  transition:transform .25s, color .25s;
}
.work-row .tag{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.05em; color:#999;
}
.work-row .year{ font-family:var(--font-text); font-weight:500; color:#999; font-size:.9rem; }
.work-row .arrow{ font-size:1.4rem; transition:transform .25s; }
.work-row:hover .arrow{ transform:translate(4px,-4px) rotate(45deg); }
.work-row:hover h2{ transform:translateX(10px); }
@media (max-width:760px){
  .work-row{ grid-template-columns:34px 1fr 26px; row-gap:.4rem; }
  .work-row .tag, .work-row .year{ display:none; }
}

/* la mini-immagine che segue il cursore quando passi su una riga */
.hover-preview{
  position:fixed; top:0; left:0;
  width:260px; height:180px;
  border-radius:8px;
  overflow:hidden;
  pointer-events:none;
  z-index:50;
  opacity:0;
  transform:translate(-50%,-50%) scale(.9);
  transition:opacity .25s ease, transform .25s ease;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:.85rem; color:var(--white); text-align:center; padding:1rem;
}
.hover-preview.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:none){ .hover-preview{ display:none; } }

/* ---------------------------------------------------------
   16. PROJECT PAGES
--------------------------------------------------------- */
.project-hero{
  min-height:56vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:8rem 6vw 4rem; color:var(--white); position:relative;
}
.project-hero.dark-text{ color:var(--grey); }
.project-hero h1{ font-size:clamp(2.6rem,9vw,6rem); max-width:900px; }
.project-hero p.claim{
  font-family:var(--font-text); font-weight:500; text-transform:none;
  max-width:560px; font-size:1.15rem; margin-top:1.2rem;
}

.project-meta{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem;
  padding:2.5rem 6vw; border-bottom:1px solid #eee;
}
@media (max-width:800px){ .project-meta{ grid-template-columns:repeat(2,1fr); } }
.project-meta div span{
  display:block; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; color:#999; margin-bottom:.4rem;
}
.project-meta div strong{ font-weight:500; font-size:.95rem; }

.project-text{ padding:5rem 6vw; max-width:820px; font-size:1.1rem; }

.project-section{ padding:3rem 6vw 5rem; }
.project-section h2{
  font-size:1.5rem; margin-bottom:1.6rem; display:flex; align-items:center; gap:.6rem;
}
.project-section h2::before{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--accent,var(--grey)); display:inline-block;
}

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:800px){ .gallery{ grid-template-columns:1fr 1fr; } }
.placeholder-media{
  aspect-ratio:4/3; background:#f2f2f2; border:2px dashed #ccc;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem;
  font-size:.78rem; color:#999; text-transform:uppercase; letter-spacing:.03em;
}

.embed-pdf{ width:100%; height:75vh; border:1px solid #eee; border-radius:4px; }

.embed-video{ position:relative; width:100%; aspect-ratio:16/9; background:#111; border-radius:4px; overflow:hidden; }
.embed-video iframe, .embed-video video{ width:100%; height:100%; border:0; }

.link-external{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.6rem; border-radius:100px; background:var(--grey); color:var(--white);
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:.85rem; letter-spacing:.03em; transition:transform .2s;
}
.link-external:hover{ transform:translateX(4px); }

.project-nav-end{
  display:flex; justify-content:space-between; align-items:center;
  padding:3rem 6vw 5rem; border-top:1px solid #eee;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:.9rem;
}

/* ---------------------------------------------------------
   17. CHAOS TOGGLE — piccolo bottone giocoso in basso
   a destra, ispirato al tono "playful" di ma5a.com.
   Attiva un cursore con "trail" di puntini colorati e un
   leggero effetto wobble sui titoli.
--------------------------------------------------------- */
.chaos-toggle{
  position:fixed; bottom:1.4rem; right:1.4rem; z-index:200;
  width:52px; height:52px; border-radius:50%;
  background:var(--grey); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.65rem; text-transform:uppercase;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .2s;
}
.chaos-toggle:hover{ transform:scale(1.08) rotate(-6deg); }
body.chaos h1, body.chaos h2{ animation:wobble 3.2s ease-in-out infinite; }
@keyframes wobble{
  0%,100%{ transform:rotate(0deg); }
  25%{ transform:rotate(-.6deg); }
  75%{ transform:rotate(.6deg); }
}

/* ---------------------------------------------------------
   18. ACCESSIBILITY + RESPONSIVE
--------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  body.chaos h1, body.chaos h2{ animation:none !important; }
}

@media (max-width:800px){
  .hero-top{ display:none; }
  .hero-title{ position:static; transform:none; margin:2rem 0; }
  .about-body{ grid-template-columns:1fr; }
  .project-meta{ grid-template-columns:1fr 1fr; }
}