/* ================================================
   DISARM — PROJECTS PAGE
   Layout + type reproduced from:
   · DSRM_projects_layout_01_ja_260905.pdf   (positions)
   · DSRM_guia_tipografica_web_ja_260905.jpg (type scale — see
     --t-* tokens in variables.css)
   Each project is a full-viewport "slide": a mint panel with a
   diagonal clip over a full-bleed image, sides alternating.
   ================================================ */

.projects-page {
  /* Global content inset — measured ~7.7% of 1920 in the layout */
  --pj-pad: max(38px, 7.6vw);
  /* Mint panel: 35% wide at the top (narrow) end, 45% at the bottom
     (nudged a touch past the layout's 43.3% so the copy column breathes) */
  --pj-panel-w: 45%;
  /* Width of the slide that is always visible next to the panel = the panel's
     narrow (top) end, 77.8% of --pj-panel-w (see the clip-paths below) */
  --pj-visible-inset: calc(var(--pj-panel-w) * 0.778);
  /* Right-panel text column starts here (measured ~67.2% of 1920) */
  --pj-right-text: 67%;
  /* Space between the sliding image frames */
  --pj-gap: 12px;
}

.projects-page main {
  position: relative;
  z-index: var(--z-base);
}

/* Header follows the layout's tighter margin (logo ~7.7% from edge) */
.projects-page .site-header {
  padding-left: var(--pj-pad);
  padding-right: var(--pj-pad);
}
.projects-page .header-inner {
  max-width: none;
}

/* ============================================
   00 — INTRO  ("PROJECTS" wordmark + intro line)
   Fills the whole first screen; the first project slide
   starts right below the fold. Content clears the header
   and is optically centered in the space beneath it.
   ============================================ */
.pj-intro {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + 11vh) var(--pj-pad) 14vh;
  overflow: hidden;
}

.pj-intro-inner {
  display: flex;
  align-items: center;
  gap: clamp(26px, 2.6vw, 48px);
}

/* 00_callouts — Sui Generis Bold Italic / 98 / 60 / 0.05em / UPPER, outlined */
.pj-intro-title {
  flex: 0 0 auto;
  font-family: var(--font-callout);
  font-style: italic;
  font-weight: var(--t-callout-weight);
  font-size: clamp(48px, 6.0vw, 88px);
  line-height: 0.612; /* 60 / 98 */
  letter-spacing: var(--t-callout-ls);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--color-6);
}

/* 01_subtitles — Saira Medium / 31 / 39.7 / 0.002em / UPPER */
.pj-intro-text {
  flex: 0 1 auto;
  font-family: var(--font-secondary);
  font-weight: var(--t-subtitle-weight);
  font-size: clamp(18px, 1.85vw, 28px);
  line-height: 1.281; /* 39.7 / 31 */
  letter-spacing: var(--t-subtitle-ls);
  text-transform: uppercase;
  color: var(--color-6);
  max-width: 36ch;
}

/* ============================================
   PROJECT SLIDE
   ============================================ */
.pj-slide {
  position: relative;
  width: 100%;
  /* Exactly one viewport tall so a slide always fills the screen (js/projects.js
     pins it and magnet-snaps to it). No min-height: it made slides taller than
     short laptop viewports, so they could never fit. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---- MEDIA (full-bleed image strip) ---- */
.pj-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  /* Fixed grey backdrop: it never moves or shrinks. Artboards with a
     transparent background travel over it; opaque photos simply cover it,
     and the gaps between frames during a sweep show grey, never the page. */
  background: #cccfd0 url('../assets/images_projects/DSRM_web_projects_background_01.webp') center / cover no-repeat;
}

/* Track of 3 full-width frames laid side by side. js/projects.js slides it
   toward the mint panel while the slide is pinned, so the frames pass
   BEHIND .pj-panel (z-index 2). Left panel → frames queue on the right and
   travel right→left; right panel → mirrored (row-reverse, left→right). */
.pj-track {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--pj-gap);
  will-change: transform;
}
.pj-slide--right .pj-track {
  flex-direction: row-reverse;
}

.pj-frame {
  flex: 0 0 100%;
  height: 100%;
}

.pj-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pj-obj-pos, center);
}

/* Artboards on a transparent background: always shown WHOLE (contain) over
   the grey backdrop, so on screens wider than 16:9 they keep the grey margin
   around them instead of being zoomed in and cropped under the header.
   Anchored to the side away from the panel, so the extra width goes to the
   panel side and the content stays clear of it. */
.pj-frame--art img {
  object-fit: contain;
}
.pj-slide--left .pj-frame--art img {
  object-position: right center;
}
.pj-slide--right .pj-frame--art img {
  object-position: left center;
}


/* By default a frame is as wide as the slide, so a photo is scaled to the
   FULL width even though the mint panel hides ~35-45% of it — a portrait
   photo then ends up hugely zoomed and mostly cropped. .pj-track--fit makes
   the track (and so every frame) only as wide as the part that stays
   visible next to the panel: the photo is sized to that width, edge to edge,
   with no empty bands, and only the top/bottom gets cropped (pick which part
   with --pj-obj-pos). The frames still queue outside the slide, so the sweep
   behind the panel works the same and the gaps between images stay small. */
.pj-slide--left .pj-track--fit {
  left: var(--pj-visible-inset);
}
.pj-slide--right .pj-track--fit {
  right: var(--pj-visible-inset);
}

/* ---- PANEL (mint shape only; text is a separate, unclipped layer) ---- */
.pj-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--pj-panel-w);
  z-index: 2;
  /* Slightly see-through (as in the layouts): the artboards run under the
     panel and should read faintly behind it */
  background-color: rgba(158, 229, 222, 0.94); /* --color-3 */
}
.pj-slide--left .pj-panel {
  left: 0;
  /* 77.8% ≈ 35% / 45% → 35% viewport width at the top edge */
  clip-path: polygon(0 0, 77.8% 0, 100% 100%, 0 100%);
}
.pj-slide--right .pj-panel {
  right: 0;
  clip-path: polygon(22.2% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- TEXT LAYER (sibling of the panel → not clipped, may bleed onto image) ---- */
.pj-panel-inner {
  position: absolute;
  /* The copy is centred in the band between the header and the page-progress
     rail (bottom 6%, ~140px tall), so a long text never runs into the rail on
     short screens. On 1920×1080 this lands where the layout puts it (~1/3). */
  top: calc(var(--header-height) + 3vh);
  bottom: calc(6% + 150px);
  z-index: 3;
  /* The copy blocks (one per image) stack in the same cell, so the column
     is as tall as the tallest one and every block starts at the same y. */
  display: grid;
  align-content: center;
}

.pj-copy {
  grid-area: 1 / 1;
}
/* Only the first block shows by default; js/projects.js fades the others in
   as the image sweep reaches their image (stays hidden without JS or with
   reduced motion). */
.pj-copy:nth-child(n + 2) {
  opacity: 0;
  visibility: hidden;
}
.pj-slide--left .pj-panel-inner {
  left: var(--pj-pad);
  /* Copy column runs from 7.7% to ~39% of the width — wider than the
     layout so lines flow like the PDF, still landing on the mint. */
  max-width: 31.5vw;
}
.pj-slide--right .pj-panel-inner {
  left: var(--pj-right-text);
  right: var(--pj-pad);
}

/* 04_microtext — Saira Thin / 14 / 16.8 / 0.02em, shown UPPERCASE, muted */
.pj-tags {
  font-family: var(--font-secondary);
  font-weight: var(--t-microtext-weight);
  font-size: var(--t-microtext-size);
  line-height: var(--t-microtext-lh);
  letter-spacing: var(--t-microtext-ls);
  text-transform: uppercase;
  color: #1a2532;
  margin-bottom: 44px;
}

/* 01_subtitles — Saira Medium / 31 / 39.7 / 0.002em / UPPER */
.pj-title {
  font-family: var(--font-secondary);
  font-weight: var(--t-subtitle-weight);
  font-size: var(--t-subtitle-size);
  line-height: var(--t-subtitle-lh);
  letter-spacing: var(--t-subtitle-ls);
  text-transform: uppercase;
  color: #374976;
  margin-bottom: 2px;
}

/* 03_microtitles — Saira Medium / 18.09 / 21.71 / 0.10em */
.pj-subtitle {
  font-family: var(--font-secondary);
  font-weight: var(--t-microtitle-weight);
  font-size: var(--t-microtitle-size);
  line-height: var(--t-microtitle-lh);
  letter-spacing: var(--t-microtitle-ls);
  color: #374976;
  margin-bottom: 20px;
}

/* 03_core — Saira Thin / 17.01 / 20.41 / 0.05em */
.pj-desc p {
  font-family: var(--font-secondary);
  font-weight: var(--t-core-weight);
  font-size: var(--t-core-size);
  line-height: var(--t-core-lh);
  letter-spacing: var(--t-core-ls);
  color: #1a2532;
  margin-bottom: 18px;
}
.pj-desc p:last-child {
  margin-bottom: 0;
}

/* Blocks without a subtitle: same breathing room under the title */
.pj-title + .pj-desc {
  margin-top: 20px;
}

/* ---- Extras tied to one copy block (data-pj-copy = its index) ----
   Children of the slide, not of the copy, so they can sit anywhere on it;
   js/projects.js fades them in and out together with their copy block.
   Hidden by default like every copy block after the first. */
[data-pj-copy] {
  position: absolute;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
}
[data-pj-copy="0"] {
  opacity: 1;
  visibility: visible;
}

/* ---- Certifications strip (RASA, last image) ----
   Bottom of the panel, to the right of the page-progress rail. */
.pj-certs {
  left: calc(var(--pj-pad) + 4.6vw);
  bottom: 13%;
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 2.6vw, 50px);
  list-style: none;
  color: #1a2532;
}
.pj-certs li {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: start;
}
.pj-certs strong {
  grid-column: 1;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 25px);
  line-height: 1;
  letter-spacing: 0.06em;
}
.pj-certs span {
  grid-column: 1;
  font-family: var(--font-secondary);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(9px, 0.62vw, 12px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.pj-certs em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(9px, 0.62vw, 12px);
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Tech pack diagram (AVIA Blaster, "Development") ----
   Like .pj-certs it fades with its copy block, but it belongs to the artboard, so it is placed in ARTBOARD coordinates: the image
   is shown whole (contain) and anchored right, i.e. a 16:9 box
   --art-w × --art-h hugging the right edge, vertically centred. In that box
   the diagram starts at 56% across and sits 8% above the bottom.
   (The slide is one viewport: 100vw × 100vh.) */
.pj-techpack {
  --art-w: min(100vw, 177.78vh);
  --art-h: calc(var(--art-w) * 0.5625);
  left: calc(100vw - var(--art-w) * 0.44);
  bottom: calc((100vh - var(--art-h)) / 2 + var(--art-h) * 0.08);
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: clamp(10px, calc(var(--art-w) * 0.0106), 20px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #3a4756;
}
.pj-techpack strong {
  font-weight: 600;
}
.pj-techpack-dash {
  width: 1.6em;
  height: 1px;
  background: currentColor;
}
.pj-techpack-fork {
  width: 2.6em;
  height: 4.6em;
  flex: 0 0 auto;
}
.pj-techpack ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 4.6em; /* same as the fork → its 3 prongs land on the 3 lines */
  line-height: 1;
}

/* ============================================
   REVEAL SLIDE  (Soft Goods — .pj-slide--reveal)
   One photo. Scrolling on (js/projects.js) slides the panel out to the left,
   darkens the photo and brings in the centred "CONFIDENTIAL" block; the
   button then fills left → right like the home "LET'S TALK" button.
   Without that script (reduced motion) the block stays hidden and the slide
   reads like the others.
   ============================================ */
.pj-reveal-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(16, 23, 32, 0.62);
  opacity: 0;
  pointer-events: none;
}

.pj-reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 4vh;
  text-align: center;
  visibility: hidden; /* js/projects.js shows it */
}

/* 00_callouts — same outlined italic wordmark as the "PROJECTS" intro */
.pj-reveal-title {
  font-family: var(--font-callout);
  font-style: italic;
  font-weight: var(--t-callout-weight);
  font-size: clamp(44px, 5.3vw, 104px);
  line-height: 0.9;
  letter-spacing: var(--t-callout-ls);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--color-6);
}

/* 03_core — Saira Thin, light on the dark photo */
.pj-reveal-text {
  margin-top: 0.6em;
  font-family: var(--font-secondary);
  font-weight: 200;
  font-size: clamp(14px, 1.1vw, 21px);
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--color-5);
}

/* Slanted cyan bar; the fill is ::before so it can grow from a sliver */
.pj-reveal-btn {
  --fill: 1;
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin-top: clamp(28px, 5.5vh, 64px);
  padding: 0.6em 2.6em;
  min-width: 16vw;
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: clamp(13px, 0.95vw, 18px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0d141c;
  transform: skewX(-12deg);
}
.pj-reveal-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #0df3e3;
  transform: scaleX(var(--fill));
  transform-origin: left center;
  transition: background-color var(--transition-fast);
}
.pj-reveal-btn:hover::before {
  background-color: #fff;
}
.pj-reveal-btn span {
  display: inline-block;
  transform: skewX(12deg); /* un-slant the label */
}

/* Rail label for the reveal state ("05 CONFIDENTIAL") */
.progress-tag {
  display: none;
  margin-left: 1.2em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.page-progress.is-revealed .progress-step.is-active .progress-tag {
  display: inline;
}

/* ============================================
   PAGE PROGRESS RAIL
   Same indicator as the home page (markup + base styles in
   css/components.css), but pinned to the LEFT edge here and
   driven by js/projects.js — one step per project slide.
   ============================================ */
.projects-page .page-progress {
  left: calc(var(--pj-pad) - 4px);
  right: auto;
  bottom: 6%;
  /* Hidden over the intro; js/projects.js adds .is-visible once a project
     slide fills at least half the screen. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.projects-page .page-progress.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Colour model here differs from the home rail: ONLY the active step is
   lit. Past steps fall back to the idle tick (no cyan slant, no diagonal
   accent) so the rail always reads as a single marker.
   The rail is fixed while the backdrop under it alternates — dark photo
   on panel-right slides, the mint panel on panel-left slides — so
   js/projects.js adds .is-over-mint on left slides and we flip to dark ink. */

/* The diagonal cyan accent shows ONLY on the active step — every other
   step (already passed OR still ahead) keeps it hidden, with no fade so
   it vanishes the instant that step stops being active. */
.projects-page .progress-step:not(.is-active) .progress-slant-cyan {
  opacity: 0;
  transition: none;
}

/* --- Over the photo (default): cyan --- */
.projects-page .progress-slant,
.projects-page .progress-step.is-past .progress-slant {
  background-color: rgba(80, 255, 238, 0.7);
}

/* --- Over the mint panel: dark ink --- */
.projects-page .page-progress.is-over-mint .progress-slant,
.projects-page .page-progress.is-over-mint .progress-step.is-past .progress-slant {
  background-color: rgba(13, 20, 28, 0.4);
}
.projects-page .page-progress.is-over-mint .progress-step.is-active .progress-slant,
.projects-page .page-progress.is-over-mint .progress-step.is-active .progress-slant-cyan,
.projects-page .page-progress.is-over-mint .progress-step.is-active .progress-horiz {
  background-color: #0d141c;
}
.projects-page .page-progress.is-over-mint .progress-step.is-active .progress-num {
  color: #0d141c;
}

/* ============================================
   RESPONSIVE — see css/mobile.css
   Every ≤960px rule for this page (stacked cards, hidden rail, …) lives
   there, so this file stays desktop-only.
   ============================================ */