/* ============================================================================
   0 IDENTITY — EXPERIENCE LAYER (Immagine Coordinata v1)
   Tutte le regole vivono sotto html.xp: la classe la aggiunge experience.js
   SOLO se JS attivo e prefers-reduced-motion non e' "reduce".
   Con reduce experience.js aggiunge html.xp-calm (dissolvenze opacity).
   Senza JS questo foglio e' inerte: il sito resta com'e'.
   ============================================================================ */

/* ---------- Lenis: raccomandazioni ufficiali ---------- */
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; }

/* ---------- Reveal potenziati: ampiezza + curva morbida ---------- */
html.xp .rv {
  opacity: 0;
  transform: translateY(64px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html.xp .rv.on { opacity: 1; transform: none; }

/* ---------- Nav che si compatta on-scroll ---------- */
.xp .site-head { transition: background-color 0.32s ease, box-shadow 0.32s ease; }
.xp .site-head .brand { transform-origin: left center; transition: transform 0.32s cubic-bezier(0.2, 0.6, 0.2, 1); }
.xp .site-head.is-compact { background: rgba(25, 25, 23, 0.94); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); }
.xp .site-head.is-compact .brand { transform: scale(0.9); }

/* ---------- HERO: canvas del fiore dither (generato in codice) ---------- */
.xp .hero-flower-canvas { display: block; width: 100%; height: 100%; }

/* ---------- Hover card portfolio: il lift lo fa il CSS base ---------- */
.xp .card { will-change: transform; }

/* ---------- STRIP PORTFOLIO (home #lavori) ----------
   Base (mobile / senza ScrollTrigger): carosello orizzontale scroll-snap.
   Con .xp-strip--pin (desktop): stage a tutta viewport, track mossa da GSAP. */
.xp .xp-strip .work-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.xp .xp-strip .work-grid::-webkit-scrollbar { display: none; }
.xp .xp-strip .work-grid .card {
  flex: 0 0 min(80vw, 320px);
  scroll-snap-align: start;
}

.xp .xp-strip--pin {
  padding: 0;
  min-height: calc(100vh - 66px);
  min-height: calc(100svh - 66px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.xp .xp-strip--pin .wrap { width: 100%; }
.xp .xp-strip--pin .sec-head { margin-bottom: 26px; }
.xp .xp-strip--pin .work-grid {
  overflow: visible;
  width: max-content;
  gap: 26px;
  scroll-snap-type: none;
  padding-bottom: 0;
  will-change: transform;
}
.xp .xp-strip--pin .work-grid .card {
  flex: 0 0 auto;
  width: min(26vw, 44svh);
}
.xp .xp-strip--pin .work-more { margin-top: 26px; }

/* ---------- KEYWORD GIGANTE ATTRAVERSANTE (inserita da JS, decorativa) ----------
   "hybrid" in Instrument Serif italic, dither arancio, attraversa lo schermo. */
.xp .xp-word {
  overflow: hidden;
  background: var(--ink);
  padding: 4vh 0 3vh;
  pointer-events: none;
  user-select: none;
}
.xp .xp-word-track {
  display: inline-block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 22vw, 380px);
  line-height: 0.9;
  white-space: nowrap;
  text-transform: none;
  background-image: radial-gradient(rgba(255, 106, 61, 0.85) 1.2px, transparent 1.6px);
  background-size: 7px 7px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: transform;
}

/* ---------- Gallerie case study: contenimento per lo zoom interno ---------- */
.xp .gallery figure { overflow: hidden; }
.xp .gallery img { backface-visibility: hidden; will-change: transform; }

/* ---------- Marquee: quando il ticker GSAP prende il controllo ---------- */
.xp .marq-track.xp-marq { animation: none; }

/* ---------- Indicatore scroll nella hero ---------- */
.xp .xp-hint {
  position: absolute;
  right: 0;
  bottom: -6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.xp .xp-hint-line {
  width: 1px;
  height: 52px;
  background: var(--accent);
  transform-origin: top center;
  animation: xpHint 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.xp .xp-hint-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-ink-soft);
}
@keyframes xpHint {
  0%   { transform: scaleY(0); transform-origin: top center; }
  45%  { transform: scaleY(1); transform-origin: top center; }
  55%  { transform: scaleY(1); transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}
@media (max-width: 900px) {
  .xp .xp-hint { display: none; }
}

/* ---------- Cintura di sicurezza reduced-motion ----------
   Si spengono SOLO traslazioni/zoom/pin: le dissolvenze opacity restano. */
@media (prefers-reduced-motion: reduce) {
  html.xp .rv { transform: none; transition: opacity 0.6s ease; }
  .xp .xp-hint-line { animation: none; }
  .xp .site-head .brand,
  .xp .card { transition: none; }
  .xp .site-head.is-compact .brand { transform: none; }
  .xp .xp-word-track { transform: none !important; }
}