/* Progetti page: portfolio of the apps built by Rovi.
   Base layout = plain vertical list (no JS, reduced motion). .is-scene (set by js/progetti.js) pins the
   showcase and swaps the active project while the page scrolls. Devices show real home screens of the apps. */

/* The site sets overflow-x: hidden on html and body, which turns body into a scroll container and silently
   disables position: sticky for everything inside it. clip hides the overflow without creating one. */
body.pj-page { overflow-x: clip; overflow-y: visible; }

.pj-main {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  padding-top: 6.8rem;
}

/* ===== Hero ===== */
.pj-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(52dvh, 48rem);
  overflow: hidden;
  color: var(--color-text-inverse);
  isolation: isolate;
}

.pj-hero-bg, .pj-hero-shade { position: absolute; inset: 0; }
.pj-hero-bg { z-index: -2; }
.pj-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; will-change: transform; }
.pj-hero-shade { z-index: -1; background: linear-gradient(180deg, rgba(22, 28, 14, 0.3) 0%, rgba(22, 28, 14, 0.6) 45%, rgba(22, 28, 14, 0.92) 100%); }

.pj-hero-content { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

.pj-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: 0.4rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(22, 28, 14, 0.6); /* keeps the white label readable over any part of the photo */
  border-radius: var(--radius-pill);
  font-size: 1.3rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.pj-eyebrow--dark { border-color: rgba(86, 72, 184, 0.35); background: none; color: #5648b8; /* 6.9:1 on the cream */ }

.pj-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(3.6rem, 6vw, 8rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--color-text-inverse);
}

.pj-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.pj-line > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .pj-line > span { animation: pj-rise 1.1s var(--ease-out-expo) both; }
  .pj-line:nth-child(2) > span { animation-delay: 0.12s; }
  .pj-hero-content > p, .pj-hero-cta { animation: pj-fade 1s ease 0.5s both; }
}

@keyframes pj-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pj-fade { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }

.pj-hero-content > p {
  margin-top: var(--space-lg);
  max-width: 60ch;
  font-size: clamp(1.7rem, 1.6vw, 2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
}

.pj-hero-cta { margin-top: var(--space-lg); }

/* arrow that leads down to the apps */
.pj-down { display: inline-flex; align-items: center; gap: var(--space-md); color: #fff; font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); }
.pj-down-ico { display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--color-secondary-dark); color: #fff; box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.35); transition: transform var(--transition-fast), background-color var(--transition-fast); }
.pj-down:hover .pj-down-ico { transform: translateY(0.4rem); background: #b53218; }
.pj-down:focus-visible { outline: 0.3rem solid #fff; outline-offset: 0.6rem; border-radius: 5rem; }
@media (prefers-reduced-motion: no-preference) {
  .pj-down-ico .material-symbols-outlined { animation: pj-bob 1.8s ease-in-out infinite; }
}
@keyframes pj-bob { 0%, 100% { transform: translateY(-0.2rem); } 50% { transform: translateY(0.3rem); } }

/* ===== Stack: one thin strip below the showcase ===== */
.pj-strip { background: var(--color-bg-tertiary); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); padding: var(--space-lg) 0; }
.pj-strip-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); }
.pj-strip-label { margin: 0; font-size: 1.2rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.pj-strip-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm) var(--space-xl); flex: 1 1 auto; }
.pj-strip-logos img { display: block; height: 4.4rem; width: auto; max-width: 11rem; object-fit: contain; }
.pj-strip-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: #5648b8; text-decoration: underline; text-underline-offset: 0.3rem; }
.pj-strip-link:hover { color: #453a9c; }
.pj-strip-link:focus-visible { outline: 0.3rem solid #7b6fd9; outline-offset: 0.3rem; border-radius: 0.4rem; }
.pj-strip-link .material-symbols-outlined { font-size: 1.8rem; transition: transform var(--transition-fast); }
.pj-strip-link:hover .material-symbols-outlined { transform: translateX(0.4rem); }

@media (max-width: 899px) {
  .pj-strip-in { justify-content: center; text-align: center; }
  .pj-strip-logos img { height: 3.6rem; max-width: 9rem; }
}

/* ===== Showcase: base (plain list) ===== */
.pj-showcase {
  --pj-nav: 6.8rem;
  --pj-step: 70dvh;
  padding: var(--space-3xl) 0 var(--space-3xl);
}

.pj-intro h2 {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 4.6vw, 5.6rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 20ch;
  text-wrap: balance;
}

.pj-intro p { margin-top: var(--space-md); max-width: 62ch; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-secondary); }

.pj-track { margin-top: var(--space-2xl); }
.pj-washes, .pj-rail, .pj-meter { display: none; }

.pj-deck { display: grid; gap: var(--space-3xl); width: min(100% - 3.2rem, 118rem); margin-inline: auto; }
.pj { display: grid; gap: var(--space-xl); align-items: center; }

/* copy column */
.pj-brand { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.pj-logo { height: 5.6rem; width: auto; max-width: 24rem; object-fit: contain; object-position: left center; }
.pj-status { display: inline-block; padding: 0.3rem 1.2rem; border-radius: var(--radius-pill); background: rgba(90, 105, 51, 0.14); color: var(--color-dark-olive); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }

.pj-copy h3 { font-family: var(--font-heading); font-size: clamp(3.4rem, 4.4vw, 6rem); font-weight: var(--font-weight-semibold); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.pj-lead { margin-top: var(--space-md); max-width: 44ch; font-size: clamp(1.7rem, 1.5vw, 2.1rem); line-height: 1.5; color: var(--color-text-secondary); }

.pj-facts { margin: var(--space-xl) 0 0; display: grid; gap: var(--space-md); }
.pj-facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); align-items: baseline; }
.pj-facts dt { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.pj-facts dd { margin: 0; font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text-body); }

.pj-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.pj-chips li { padding: 0.3rem 1.1rem; border: 1px solid var(--color-border-medium); border-radius: var(--radius-pill); background: var(--color-bg-tertiary); font-size: var(--font-size-sm); color: var(--color-text-body); }

.pj-impact { display: flex; gap: var(--space-md); align-items: flex-start; margin-top: var(--space-xl); padding: 0.2rem 0 0.2rem var(--space-lg); border-left: 0.3rem solid var(--color-secondary); max-width: 46ch; }
.pj-impact .material-symbols-outlined { color: var(--color-secondary-dark); font-size: 2.6rem; flex-shrink: 0; }
.pj-impact p { margin: 0; font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text-primary); }
.pj-count { font-size: 2.6rem; font-weight: var(--font-weight-bold); color: var(--color-secondary-dark); font-variant-numeric: tabular-nums; }

/* ===== Device mockups: real home screens of the apps, a different composition for each project ===== */
.pj-devices { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background: var(--color-bg-secondary); }

.pj-laptop, .pj-phone { position: absolute; }
.pj-laptop-screen { border: 0.8rem solid #1c1e1a; border-radius: 1.4rem 1.4rem 0.3rem 0.3rem; background: #000; overflow: hidden; box-shadow: 0 3rem 6rem -2.4rem rgba(30, 36, 18, 0.5); }
.pj-laptop-screen img { display: block; width: 100%; height: auto; }
.pj-laptop-base { height: 1.2rem; margin: 0 -3%; border-radius: 0 0 1.4rem 1.4rem / 0 0 0.8rem 0.8rem; background: linear-gradient(#dcd9cf, #b9b5a8); box-shadow: 0 1.4rem 2rem -1rem rgba(30, 36, 18, 0.4); }
.pj-phone { border: 0.7rem solid #1c1e1a; border-radius: 3rem; background: #000; overflow: hidden; box-shadow: 0 3rem 6rem -2rem rgba(30, 36, 18, 0.55); }
.pj-phone::before { content: ""; position: absolute; z-index: 2; top: 0.7rem; left: 50%; width: 32%; height: 1rem; border-radius: var(--radius-full); background: #000; transform: translateX(-50%); }
.pj-phone img { display: block; width: 100%; height: auto; }

.pj--mensapp .pj-laptop { left: 0; top: 10%; width: 72%; }
.pj--mensapp .pj-phone { right: 3%; bottom: 5%; width: 25%; }
.pj--biblioteca .pj-laptop { right: 0; top: 6%; width: 80%; }
.pj--biblioteca .pj-phone { left: 2%; bottom: 6%; width: 21%; }
.pj--campettogo .pj-laptop { right: 0; top: 16%; width: 72%; }
.pj--campettogo .pj-phone { left: 16%; bottom: 4%; width: 26%; }
.pj--memoria-viva .pj-laptop { left: 12%; top: 3%; width: 86%; }
.pj--memoria-viva .pj-phone { left: 0; bottom: 3%; width: 22%; }
.pj--pop-tributes .pj-laptop { left: 0; top: 20%; width: 78%; }
.pj--pop-tributes .pj-phone { right: 2%; top: 3%; width: 25%; }

@media (min-width: 900px) {
  .pj { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
}

/* ===== Showcase: pinned scene, full width ===== */
.pj-showcase.is-scene { padding-bottom: 0; }
.is-scene .pj-track { height: calc(100dvh - var(--pj-nav) + (var(--n) - 1) * var(--pj-step)); }

.is-scene .pj-scene {
  position: sticky;
  top: var(--pj-nav);
  height: calc(100dvh - var(--pj-nav));
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg-primary);
}

/* one soft colour per app behind the devices: it fades while the active project changes */
.is-scene .pj-washes { display: block; position: absolute; inset: 0; z-index: 0; }
.pj-wash { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.pj-wash.is-on { opacity: 1; }
.pj-wash--mensapp { background: radial-gradient(46% 70% at 70% 48%, rgba(0, 118, 82, 0.22), transparent 70%), radial-gradient(30% 40% at 100% 100%, rgba(199, 0, 54, 0.1), transparent 70%); }
.pj-wash--biblioteca { background: radial-gradient(46% 70% at 70% 48%, rgba(255, 107, 74, 0.22), transparent 70%), radial-gradient(34% 44% at 100% 100%, rgba(138, 155, 94, 0.32), transparent 70%); }
.pj-wash--campettogo { background: radial-gradient(46% 70% at 70% 48%, rgba(66, 144, 202, 0.22), transparent 70%), radial-gradient(34% 44% at 100% 100%, rgba(148, 11, 40, 0.16), transparent 70%); }
.pj-wash--memoria-viva { background: radial-gradient(46% 70% at 70% 48%, rgba(212, 155, 69, 0.28), transparent 70%), radial-gradient(34% 44% at 100% 100%, rgba(168, 56, 30, 0.16), transparent 70%); }
.pj-wash--pop-tributes { background: radial-gradient(46% 70% at 70% 48%, rgba(225, 167, 5, 0.24), transparent 70%), radial-gradient(34% 44% at 100% 100%, rgba(0, 82, 147, 0.2), transparent 70%); }

.is-scene .pj-deck { position: absolute; inset: 0; z-index: 1; display: block; width: auto; margin: 0; }
.is-scene .pj {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
  align-items: center;
  gap: clamp(2.4rem, 3vw, 6rem);
  padding: 0 clamp(2.4rem, 3.2vw, 7rem) 8rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2.4rem);
  pointer-events: none;
  /* the old project leaves first, the new one enters after it: the two texts are never on screen together */
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.is-scene .pj.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.6s ease 0.24s, transform 0.9s var(--ease-out-expo) 0.24s, visibility 0s linear 0.24s; }

.is-scene .pj-copy { max-width: 56rem; }
.is-scene .pj-copy h3 { font-size: clamp(3.6rem, 4.6vw, 7rem); }
.is-scene .pj-devices { background: none; width: min(100%, calc((100dvh - var(--pj-nav) - 10rem) * 4 / 3)); justify-self: center; }

.is-scene .pj-rail { display: flex; flex-wrap: wrap; gap: 0.4rem; position: absolute; left: clamp(2.4rem, 4vw, 8rem); bottom: 3.2rem; z-index: 3; max-width: calc(100% - 6.4rem); }
.pj-rail button { font-family: var(--font-body); font-size: 1.4rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border-medium); padding: 0.7rem 1.6rem; border-radius: var(--radius-pill); cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.pj-rail button:hover { color: var(--color-text-primary); border-color: var(--color-primary); }
.pj-rail button[aria-current="true"] { color: #fff; background: var(--color-dark-olive); border-color: var(--color-dark-olive); }
.pj-rail button:focus-visible { outline: 0.3rem solid var(--color-secondary); outline-offset: 0.2rem; }

.is-scene .pj-meter { display: block; position: absolute; left: 0; right: 0; top: 0; height: 0.3rem; z-index: 3; background: rgba(90, 105, 51, 0.14); }
.pj-meter i { display: block; height: 100%; background: var(--color-primary); transform-origin: left; transform: scaleX(var(--f, 0)); }

@media (max-width: 899px) {
  .is-scene .pj { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--space-md); align-content: start; padding: var(--space-md) 1.6rem 0; }
  .is-scene .pj-devices { order: -1; width: 100%; height: 36dvh; aspect-ratio: auto; display: flex; justify-content: center; align-items: center; }
  .is-scene .pj-laptop { display: none; }
  .is-scene .pj-phone, .is-scene .pj--mensapp .pj-phone, .is-scene .pj--biblioteca .pj-phone, .is-scene .pj--campettogo .pj-phone, .is-scene .pj--memoria-viva .pj-phone, .is-scene .pj--pop-tributes .pj-phone { position: relative; inset: auto; width: auto; height: 100%; }
  .is-scene .pj-phone img { height: 100%; width: auto; }
  .is-scene .pj-brand { margin-bottom: var(--space-sm); }
  .is-scene .pj-logo { height: 3.6rem; }
  .is-scene .pj-copy h3 { font-size: 2.8rem; }
  .is-scene .pj-lead { font-size: 1.45rem; margin-top: var(--space-sm); }
  .is-scene .pj-facts,   .is-scene .pj-impact { margin-top: var(--space-md); }
  .is-scene .pj-rail { display: none; }
}

@media (max-width: 899px) {
  .pj-devices { aspect-ratio: 4 / 3.4; }
}

/* ===== Territory: numbers and focus cards (same language as the Impatto page) ===== */
.pj-territory { padding-top: var(--space-4xl); }

.pj-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.pj-stat { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: var(--space-xl); background: var(--color-bg-tertiary); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.pj-stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-border-dark); }
.pj-stat::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--color-primary); }
.pj-stat.secondary::before { background: var(--color-secondary); }
.pj-stat.accent::before { background: var(--color-accent); }
.pj-stat-icon { display: flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; margin-bottom: var(--space-lg); border-radius: var(--radius-md); font-size: 2.4rem; background: rgba(90, 105, 51, 0.1); color: var(--color-primary); }
.pj-stat.secondary .pj-stat-icon { background: rgba(255, 107, 74, 0.1); color: var(--color-secondary-dark); }
.pj-stat.accent .pj-stat-icon { background: rgba(123, 111, 217, 0.1); color: #5648b8; }
.pj-stat-number { margin-bottom: var(--space-xs); font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pj-stat-label { margin-bottom: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); }
.pj-stat-desc { margin-top: auto; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-body); }
.pj-note { margin: var(--space-xl) auto 0; max-width: 78ch; text-align: center; font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-muted); }

.pj-focus-section { padding-bottom: var(--space-4xl); }
.pj-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.pj-focus { display: flex; gap: var(--space-xl); padding: var(--space-2xl); background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.pj-focus:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--color-border-medium); }
.pj-focus--wide { grid-column: 1 / -1; }
.pj-focus-badge { flex-shrink: 0; display: grid; place-items: center; align-self: flex-start; min-width: 7.2rem; max-width: 15rem; height: 7.2rem; padding: 0.8rem 1.2rem; border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.pj-focus-badge img { height: 5.2rem; width: auto; max-width: 100%; object-fit: contain; }
.pj-focus-body h3 { margin-bottom: var(--space-xs); font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.pj-focus-target { margin-bottom: var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); }
.pj-focus-body > p:not(.pj-focus-target) { margin-bottom: var(--space-md); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-body); max-width: 60ch; }
.pj-focus-points { list-style: none; margin: 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--color-border-light); }
.pj-focus-points li { display: flex; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-xs); font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-primary); }
.pj-focus-points .material-symbols-outlined { flex-shrink: 0; margin-top: 0.1rem; font-size: 1.8rem; color: var(--color-primary); }

@media (max-width: 899px) {
  .pj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-focus-grid { grid-template-columns: 1fr; }
  .pj-focus { flex-direction: column; padding: var(--space-xl); gap: var(--space-lg); }
}

/* ===== CTA ===== */
.pj-page .section-cta { padding: var(--space-4xl) 0; text-align: center; }
.pj-page .cta-impatto-section { max-width: 76rem; margin: 0 auto; }
.pj-page .cta-impatto-section h2 { font-family: var(--font-heading); font-size: clamp(3rem, 4.6vw, 5.4rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--color-text-inverse); text-wrap: balance; }
.pj-page .cta-impatto-section p { margin: var(--space-md) auto 0; max-width: 56ch; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-inverse-90); }
.pj-page .cta-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-top: var(--space-xl); }

/* Hero depth: scroll-driven where supported, nothing elsewhere */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .pj-hero-bg img { animation: pj-depth linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
  }
}
@keyframes pj-depth { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.16) translateY(9%); } }

@media (max-width: 559px) {
  .pj-stats { grid-template-columns: 1fr; }
}

/* base.css paints a loading shimmer behind lazy images until a script marks them loaded: logos are transparent PNGs */
.pj-strip-logos img, .pj-logo, .pj-focus-badge img { background: none !important; animation: none !important; }

/* rounded figures: a small qualifier (oltre, circa) sits above the number */
.pj-stat-pre { display: block; margin-bottom: 0.2rem; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); font-style: italic; line-height: 1.2; color: var(--color-text-secondary); }