/* ==========================================================================
   Projects Showroom Page Stylesheet
   Inherits design variables and reset styles from style.css
   ========================================================================== */

/* ==========================================================================
   PREMIUM CURTAIN INTRO
   Two panels split vertically to reveal the page; centered logo, animated
   hairline (magenta), and a wordmark. GSAP timeline in projects.js drives it.
   ========================================================================== */
.projects-intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  overflow: hidden;
}

/* Curtain panels — cover screen, then slide apart */
.intro-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%; /* slight overlap to avoid a seam line */
  background: var(--color-bg-dark);
  will-change: transform;
}

.intro-panel-top {
  top: 0;
  border-bottom: 1px solid rgba(230, 35, 106, 0.12);
}

.intro-panel-bottom {
  bottom: 0;
  border-top: 1px solid rgba(230, 35, 106, 0.12);
}

/* Centered lockup */
.intro-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  will-change: transform, opacity;
}

.intro-logo {
  width: 68px;
  height: auto;
  opacity: 0;
  transform: translateY(14px);
  filter: drop-shadow(0 0 22px rgba(230, 35, 106, 0.25));
  will-change: transform, opacity;
}

/* Large display-serif wordmark, matching the treatment every other page's
   intro/hero uses (see .shop-intro-word in css/shop.css and .hero-proof-title
   in style.css) instead of the small uppercase/wide-tracked caps this used
   to be — which read as generic body text rather than the same premium
   wordmark language as the rest of the site. */
.intro-word {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}

/* Hairline that draws across, magenta fill */
.intro-line {
  position: relative;
  width: 160px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.intro-line-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--color-magenta-deep), var(--color-magenta-glow));
  box-shadow: 0 0 12px rgba(230, 35, 106, 0.6);
  will-change: transform;
}

/* When JS finishes, kill the layer entirely */
.projects-intro.intro-done {
  display: none;
}

/* Reveal targets start hidden, GSAP fades/rises them in behind the curtain */
.intro-reveal {
  opacity: 0;
}

@media (max-width: 900px) {
  .intro-logo { width: 56px; }
  .intro-line { width: 120px; }
}

/* ==========================================================================
   CATEGORY TRANSITION DIVIDER
   A chapter-style wipe that announces the selected activity type on filter
   change. Veil sweeps across, big serif label + magenta hairline, then clears.
   Driven by GSAP in projects.js.
   ========================================================================== */
.category-transition {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}

/* The sweeping veil (clipped left→right, then right→left out) */
.cat-trans-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(176, 30, 86, 0.12), transparent 60%),
    var(--color-bg-dark);
  clip-path: inset(0 100% 0 0); /* fully hidden from the right */
  will-change: clip-path;
}

.cat-trans-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: 0 1.5rem;
  width: 100%;
}

.cat-trans-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--color-magenta-glow);
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity;
}

.cat-trans-label {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

.cat-trans-line {
  position: relative;
  width: 200px;
  max-width: 60vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.cat-trans-line-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--color-magenta-deep), var(--color-magenta-glow));
  box-shadow: 0 0 12px rgba(230, 35, 106, 0.6);
  will-change: transform;
}

@media (max-width: 900px) {
  .cat-trans-eyebrow { font-size: 0.6rem; letter-spacing: 0.26em; text-indent: 0.26em; }
  .cat-trans-line { width: 140px; }
}

/* Force navbar visibility on projects page (no preloader reveal here).
   Matches the homepage lockup exactly: logo mark + "GLOBAL CONTRACT" wordmark. */
.main-header {
  opacity: 1 !important;
}
.nav-logo-img {
  opacity: 1 !important;
}
.logo-text {
  opacity: 1 !important;
}

/* Projects Hero Section */
.projects-hero {
  padding: 13rem 2rem 4.5rem 2rem; /* Symmetrical top padding to clear fixed header */
  background-color: var(--color-bg-dark);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.projects-hero-title {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.15;
  color: var(--color-white);
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.projects-hero-desc {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-gray-text);
  max-width: 600px;
  letter-spacing: 0.02em;
}

/* Category Filter Nav */
.projects-filter-container {
  --pf-band: 6rem;   /* distanza fra il bordo della finestra e la barra */
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 11rem; /* Clear fixed header (hero removed) */
  margin-bottom: 5.5rem;
  padding: 0 2rem;
  position: sticky;
  top: var(--pf-band); /* Sticky filter bar below header */
  z-index: 90;
}

/* LA BARRA E' AGGANCIATA, MA DA SOLA NON BASTAVA. Si ferma a 6rem dal bordo,
   sotto la navbar, e in quei 6rem passavano i titoli e le foto dei progetti:
   fra la pillola della navbar e quella dei filtri si vedeva scorrere la
   pagina, e la barra sembrava scendere insieme al contenuto invece che
   restare in alto. Questa fascia copre dal bordo della finestra fino al
   fondo della barra, cosi' navbar e filtri poggiano sullo stesso piano pieno
   e sotto non passa piu' niente. Il fondo e' pieno e non vetro: e' una
   fascia alta ~150px, e un blur vivo per tutta la lunghezza di una galleria
   costa un ricampionamento a ogni frame senza aggiungere nulla sopra al nero
   della pagina. */
.projects-filter-container::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--pf-band));
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: #060608;
  z-index: -1;
  pointer-events: none;
}
.projects-filter-container::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -20px;
  width: 100vw; height: 20px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #060608, rgba(6, 6, 8, 0));
  z-index: -1;
  pointer-events: none;
}

.projects-filter-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.2rem;
  padding: 0.85rem 2.5rem;
  background: rgba(12, 12, 16, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.filter-btn {
  background: none;
  border: none;
  color: var(--color-offwhite);
  opacity: 0.55;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.4rem 0;
  position: relative;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--color-white);
  opacity: 1;
}

.filter-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-btn:hover::after,
.filter-btn.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Projects Grid (Editorial Masonry) */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.5rem 3.5rem;
  grid-auto-flow: dense;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 9rem auto;
}

/* Project Card */
.project-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: opacity 0.5s ease;
}

/* will-change only while a card is actually about to move: the three the intro
   timeline reveals (.intro-reveal, removed on its onComplete) and, on mobile,
   a card still waiting for its scroll-reveal (.reveal-init, which js/projects.js
   pairs with .is-visible once it has entered). Declared on .project-card itself
   it promoted all 21 to their own compositor layer and never released them —
   GPU memory held on a phone for animations that finished long ago. Desktop's
   filter tweens need nothing here: GSAP sets and clears will-change itself for
   the duration of a tween. */
.project-card.intro-reveal,
.project-card.reveal-init:not(.is-visible) {
  will-change: transform, opacity;
}

.project-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--color-bg-dark-alt);
  margin-bottom: 1.65rem;
}

/* Wide (Featured) Card */
.card-featured {
  grid-column: span 2;
}

.card-featured .project-image-container {
  height: 520px;
}

/* Standard (Narrow) Card */
.card-standard .project-image-container {
  height: 390px;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-dark);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Hover triggers */
.project-card:hover .project-image {
  transform: scale(1.03);
}

.project-card:hover .project-overlay {
  opacity: 0.15;
}

.project-card:hover .project-title {
  transform: translateY(-2px);
}

/* Meta info (Sector & City) */
.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.project-sector {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-magenta-glow);
  letter-spacing: 0.1em;
}

.project-city {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-gray-text);
  letter-spacing: 0.05em;
}

/* Card title */
.project-title {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card description */
.project-desc {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-gray-text);
  max-width: 90%;
}

/* ==========================================================================
   MOBILE — Molteni-inspired full-bleed editorial layout
   One project per row, edge-to-edge portrait imagery, quiet vertical rhythm,
   horizontal filter strip, scroll-reveal. Global Contract palette retained.
   ========================================================================== */
@media (max-width: 900px) {

  /* --- Hero: quieter, left-aligned editorial header --- */
  .projects-hero {
    padding: 9rem 1.5rem 3rem 1.5rem;
    text-align: left;
    align-items: flex-start;
  }

  .projects-hero-title {
    font-size: 2.6rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
  }

  .projects-hero-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 42ch;
  }

  /* --- Filter: silent horizontal scroll strip, no glass pill --- */
  .projects-filter-container {
    --pf-band: 4.5rem;
    margin-top: 7rem; /* Clear fixed header on mobile (hero removed) */
    margin-bottom: 2.75rem;
    padding: 0;
    justify-content: flex-start;
  }

  .projects-filter-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.75rem;
    padding: 0.9rem 1.5rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Opaque on purpose: this bar is sticky, so on a phone the blur was a
       live backdrop resample for the whole length of a long gallery scroll,
       stacked on top of the mask-image below (which is itself a compositing
       pass). The bar sits over the page's own near-black, so at full alpha it
       reads the same. */
    background: rgb(6, 6, 8);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    box-shadow: none;
    /* soft edge fade so cut-off items read as "more to scroll" */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
  }

  .projects-filter-nav::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.7rem;
    padding: 0.2rem 0;
  }

  /* --- Grid becomes a single full-bleed editorial column --- */
  .projects-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 4.5rem;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 5rem auto;
    padding: 0 1.5rem;
  }

  /* Reset desktop featured/standard spans — every card is full width now */
  .card-featured {
    grid-column: auto;
  }

  /* Full-bleed portrait imagery, no rounded frame, no overlay glow */
  .project-image-container {
    margin-bottom: 1.25rem;
    border-radius: 2px;
  }

  .card-featured .project-image-container,
  .card-standard .project-image-container {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  /* First / featured cards read taller for editorial rhythm variation */
  .card-featured .project-image-container {
    aspect-ratio: 3 / 4;
  }

  /* Kill hover-only affordances — dead on touch; keep imagery calm --- */
  .project-card:hover .project-image { transform: none; }
  .project-card:hover .project-overlay { opacity: 0; }
  .project-card:hover .project-title { transform: none; }

  /* --- Typography under image --- */
  .project-meta {
    margin-bottom: 0.6rem;
  }

  .project-sector {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .project-city {
    font-size: 0.7rem;
  }

  .project-title {
    font-size: 1.9rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.55rem;
  }

  .project-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    max-width: 46ch;
  }

  /* --- Scroll-reveal entrance (JS toggles .is-visible) --- */
  .project-card.reveal-init {
    opacity: 0;
    transform: translateY(38px);
  }

  .project-card.reveal-init.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Extra-small phones: tighten side gutters, scale display type */
@media (max-width: 460px) {
  .projects-hero-title { font-size: 2.25rem; }
  .projects-grid { padding: 0 1.1rem; gap: 4rem; }
  .project-title { font-size: 1.7rem; }
}