/* ==========================================================================
   Myrak — page Projets : animations, hover, changement de vue
   Chargé après styles.css, uniquement sur projets (FR/EN/DE).
   Même langage que le reste du site : cadre de sélection pointillé avec poignées,
   curseur citron avec étiquette, points ronds, bleu électrique.
   ========================================================================== */

body.projects-grid-page,
body.case-page{
  --pj-blue: var(--primary, #0212EE);
  --pj-lemon: var(--interaction, #D7FF3F);
  --pj-ink: var(--ink, #241916);
  --pj-paper: var(--paper, #f8f7f3);
  --pj-ease: cubic-bezier(.22, 1, .36, 1);
  --pj-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ------------------------------------------------------------------ toolbar : one layout for both views (no jump when switching) */
@media (min-width: 761px){
  body.projects-grid-page [data-projects] .project-grid-toolbar{
    min-height: 154px;
    grid-template-columns: minmax(230px, 1.15fr) 1fr minmax(170px, auto);
    grid-template-rows: auto auto;
    gap: 20px 24px;
    padding: 72px 15px 12px;
  }
  body.projects-grid-page [data-projects] .project-grid-toolbar h1{ grid-column: 1; grid-row: 2; }
  body.projects-grid-page [data-projects] .project-view-controls{ grid-column: 3; grid-row: 1; justify-self: end; }
  body.projects-grid-page [data-projects] .project-toolbar-label{
    display: block; align-self: end;
    color: var(--muted); font-size: .65rem; text-transform: uppercase;
    transition: opacity 300ms ease, translate 450ms var(--pj-ease);
  }
  body.projects-grid-page [data-projects] .project-toolbar-label--category{ grid-column: 2; grid-row: 2; }
  body.projects-grid-page [data-projects] .project-toolbar-label--year{ display: flex; grid-column: 3; grid-row: 2; gap: 6px; align-items: center; justify-self: end; }
  /* the column labels only mean something in the list */
  body.projects-grid-page [data-projects]:not([data-mode="list"]) .project-toolbar-label{ opacity: 0; translate: 0 6px; pointer-events: none; }
}

/* filter + sort grow out of the view switch in list mode, instead of popping in */
body.projects-grid-page [data-projects] .project-service-filter,
body.projects-grid-page [data-projects] .project-year-sort{
  display: grid;
  max-width: 38px; overflow: visible;
  transition: max-width 420ms var(--pj-ease), opacity 260ms ease, scale 420ms var(--pj-spring), margin 420ms var(--pj-ease),
    border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}
body.projects-grid-page [data-projects] .project-service-filter{ display: block; }
body.projects-grid-page [data-projects]:not([data-mode="list"]) .project-service-filter,
body.projects-grid-page [data-projects]:not([data-mode="list"]) .project-year-sort{
  max-width: 0; margin-right: -8px; opacity: 0; scale: .4; pointer-events: none; overflow: hidden;
}
body.projects-grid-page [data-projects][data-mode="list"] .project-year-sort{ transition-delay: 0ms, 60ms, 60ms, 0ms, 0ms, 0ms, 0ms; }

/* ------------------------------------------------------------------ view switch : a blue thumb slides under the active icon */
body.projects-grid-page .project-mode-switch{ position: relative; isolation: isolate; }
body.projects-grid-page .project-mode-switch::before{
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px); border-radius: 999px;
  background: var(--pj-blue);
  box-shadow: 0 6px 14px -6px rgb(2 18 238 / 60%);
  transition: translate 520ms var(--pj-spring), width 300ms var(--pj-ease);
}
body.projects-grid-page [data-projects][data-mode="list"] .project-mode-switch::before{ translate: 100% 0; }
body.projects-grid-page .project-mode-switch button,
body.projects-grid-page .project-mode-switch button[aria-pressed="true"]{
  background: transparent !important; box-shadow: none !important; color: var(--pj-ink) !important;
  transition: color 260ms ease, transform 300ms var(--pj-ease) !important;
}
body.projects-grid-page .project-mode-switch button[aria-pressed="true"]{ color: #fff !important; }
body.projects-grid-page .project-mode-switch button i{ transition: rotate 450ms var(--pj-spring), scale 450ms var(--pj-spring); }
body.projects-grid-page .project-mode-switch button[aria-pressed="true"] i{ animation: pj-icon-in 520ms var(--pj-spring); }
@keyframes pj-icon-in{ 0%{ scale: .6; rotate: -40deg; } 100%{ scale: 1; rotate: 0deg; } }

/* ------------------------------------------------------------------ grid cards : hover = the studio selects the project */
@media (hover: hover) and (pointer: fine){
  body.projects-grid-page .mega-project{ cursor: none; contain: layout paint; }
  body.projects-grid-page .mega-project > img{ transition: filter 700ms ease, transform 1400ms var(--pj-ease), opacity 520ms ease !important; }
  body.projects-grid-page .mega-project:hover > img,
  body.projects-grid-page .mega-project:focus-visible > img{ transform: scale(1.04) !important; }
  /* gallery position : small round dots, top left (the hover gallery cycles through them) */
  body.projects-grid-page .mega-project .pj-dots{
    position: absolute; z-index: 4; left: 24px; top: 26px;
    display: flex; gap: 6px; pointer-events: none;
    opacity: 0; translate: 0 -6px;
    transition: opacity 260ms ease, translate 520ms var(--pj-ease);
  }
  body.projects-grid-page .mega-project .pj-dots i{
    width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 45%);
    transition: background-color 300ms ease, scale 420ms var(--pj-spring);
  }
  body.projects-grid-page .mega-project .pj-dots i.is-on{ background: var(--pj-lemon); scale: 1.35; }
  body.projects-grid-page .mega-project:hover .pj-dots,
  body.projects-grid-page .mega-project:focus-visible .pj-dots{ opacity: 1; translate: 0 0; }

  /* the copy rises line by line */
  body.projects-grid-page .mega-project-copy{ opacity: 1 !important; transform: none !important; }
  body.projects-grid-page .mega-project-copy p,
  body.projects-grid-page .mega-project-copy h2{
    opacity: 0; translate: 0 28px;
    transition: opacity 320ms ease, translate 700ms var(--pj-ease);
  }
  body.projects-grid-page .mega-project-copy h2{ transition-delay: 70ms; }
  body.projects-grid-page .mega-project:hover .mega-project-copy p,
  body.projects-grid-page .mega-project:hover .mega-project-copy h2,
  body.projects-grid-page .mega-project:focus-visible .mega-project-copy p,
  body.projects-grid-page .mega-project:focus-visible .mega-project-copy h2{ opacity: 1; translate: 0 0; }

}

/* ------------------------------------------------------------------ the visitor's cursor (projects index + case pages)
   Myrak arrow + lemon label; over a list row it also carries a preview of the project */
@media (hover: hover) and (pointer: fine){
  .pj-cursor{
    position: fixed; z-index: 60; left: 0; top: 0;
    display: grid; grid-template-columns: auto auto; align-items: start;
    pointer-events: none;
    opacity: 0; scale: .6;
    transition: opacity 180ms ease, scale 360ms var(--pj-spring, cubic-bezier(.34, 1.56, .64, 1));
    will-change: transform;
  }
  .pj-cursor.is-on{ opacity: 1; scale: 1; }
  .pj-cursor svg{ grid-column: 1; grid-row: 2; flex: none; width: 22px; fill: var(--pj-lemon); stroke: var(--pj-ink); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgb(36 25 22 / 30%)); }
  .pj-cursor b{
    grid-column: 2; grid-row: 2;
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    margin: 18px 0 0 2px; padding: 7px 11px; border-radius: 8px;
    background: var(--pj-lemon); color: var(--pj-ink);
    font: 600 13px/1 var(--sans); letter-spacing: 0; white-space: nowrap;
    box-shadow: 0 6px 16px -8px rgb(36 25 22 / 45%);
  }
  .pj-cursor b::after{ content: "↗"; font-weight: 700; }
  /* list rows : the two project photos travel with the cursor, stacked like the old stickers
     (paper border, a little tilt), and lean with the movement */
  .pj-cursor__media{
    position: absolute; left: 22px; bottom: calc(100% - 16px);
    width: 190px; height: 150px;
    opacity: 0; scale: .6; transform-origin: 0 100%;
    rotate: var(--pj-tilt, 0deg);
    transition: opacity 200ms ease, scale 480ms var(--pj-spring, cubic-bezier(.34, 1.56, .64, 1));
  }
  .pj-cursor.has-media .pj-cursor__media{ opacity: 1; scale: 1; }
  .pj-cursor__media img{
    position: absolute; width: 132px; height: 104px; object-fit: cover;
    border: 4px solid var(--pj-paper, #f8f7f3); border-radius: 6px; background: #e9e6e0;
    box-shadow: 0 18px 28px -16px rgb(36 25 22 / 55%);
    opacity: 0;
    transition: opacity 260ms ease, translate 520ms var(--pj-ease, ease), rotate 520ms var(--pj-ease, ease);
  }
  .pj-cursor__media img:nth-child(1){ left: 0; bottom: 0; rotate: -5deg; z-index: 2; }
  .pj-cursor__media img:nth-child(2){ left: 54px; bottom: 34px; rotate: 6deg; z-index: 1; }
  .pj-cursor.has-media .pj-cursor__media img.is-on{ opacity: 1; }
  .pj-cursor.has-media .pj-cursor__media img:nth-child(2).is-on{ translate: 6px -4px; }
}

/* ------------------------------------------------------------------ list rows : blue fill + inverted colours (kept), with finer details
   - the blue pours out of the round dot in front of the title, and goes back into it;
   - the colours flip just behind the fill, not before it;
   - the dash before the title becomes a round lemon dot, chips turn lemon, the year turns lemon;
   - no height change (rows below no longer jump);
   - the two photos pop out of the row and overlap the row above, as before. */
body.projects-grid-page .project-index-list > a,
body.projects-grid-page .project-index-list > a:hover,
body.projects-grid-page .project-index-list > a:focus-visible{ min-height: 112px !important; background: transparent !important; }
body.projects-grid-page .project-index-list > a{ position: relative; isolation: isolate; transition: color 240ms ease 60ms !important; }
/* the blue pours out of the round dot in front of the title (and goes back into it) */
body.projects-grid-page .project-index-list > a{ --pj-dot-x: 22px; }
body.projects-grid-page .project-index-list > a::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pj-blue);
  clip-path: circle(0 at var(--pj-dot-x) 50%);
  transition: clip-path 560ms cubic-bezier(.55, 0, .25, 1);
}
body.projects-grid-page .project-index-list > a:hover::before,
body.projects-grid-page .project-index-list > a:focus-visible::before,
body.projects-grid-page .project-index-list > a.is-touch-active::before{ clip-path: circle(160vmax at var(--pj-dot-x) 50%); transition-delay: 60ms; }
body.projects-grid-page .project-index-list h2{ transition: color 240ms ease 70ms, translate 620ms var(--pj-ease) !important; transform: none !important; }
body.projects-grid-page .project-index-list > a:hover h2,
body.projects-grid-page .project-index-list > a:focus-visible h2,
body.projects-grid-page .project-index-list > a.is-touch-active h2{ color: #fff !important; translate: 16px 0; }
/* dash → round lemon dot */
body.projects-grid-page .project-index-list > a h2::before{ transition: width 460ms var(--pj-spring), height 460ms var(--pj-spring), border-radius 300ms ease, background-color 240ms ease !important; }
body.projects-grid-page .project-index-list > a:hover h2::before,
body.projects-grid-page .project-index-list > a:focus-visible h2::before,
body.projects-grid-page .project-index-list > a.is-touch-active h2::before{ width: 12px !important; height: 12px !important; border-radius: 50% !important; background: var(--pj-lemon) !important; }
/* chips and year */
body.projects-grid-page .project-index-taxonomy strong,
body.projects-grid-page .project-index-taxonomy span,
body.projects-grid-page .project-index-list > a > span:last-child{ transition: background-color 240ms ease 80ms, color 240ms ease 80ms, border-color 240ms ease 80ms, translate 520ms var(--pj-ease), scale 420ms var(--pj-spring) !important; }
body.projects-grid-page .project-index-list > a:hover .project-index-taxonomy strong,
body.projects-grid-page .project-index-list > a:focus-visible .project-index-taxonomy strong{ background: var(--pj-lemon) !important; color: var(--pj-ink) !important; scale: 1.04; }
body.projects-grid-page .project-index-list > a:hover .project-index-taxonomy span,
body.projects-grid-page .project-index-list > a:focus-visible .project-index-taxonomy span{ color: rgb(255 255 255 / 82%) !important; opacity: 1 !important; }
body.projects-grid-page .project-index-list > a:hover > span:last-child,
body.projects-grid-page .project-index-list > a:focus-visible > span:last-child{ background: var(--pj-lemon) !important; border-color: var(--pj-lemon) !important; color: var(--pj-ink) !important; translate: -6px 0; transform: none !important; }
@media (hover: hover) and (pointer: fine){
  body.projects-grid-page .project-index-list > a{ cursor: none; }
}
/* the stickers : they pop out of the row with a little spring, overlapping the row above */
body.projects-grid-page .project-index-title .index-stickers img{ transition: opacity 160ms ease, transform 560ms var(--pj-spring) !important; }
/* further along the row, past the longest title, so they never cover the title of the row above */
@media (min-width: 761px){
  body.projects-grid-page .project-index-title .index-stickers{ margin-left: auto; margin-right: clamp(24px, 6vw, 110px); }
}
@media (prefers-reduced-motion: reduce){
  body.projects-grid-page .project-index-list > a::before{ transition: none; }
}

/* ------------------------------------------------------------------ view change : entering items
   transforms and opacity only (compositor-friendly), no clip-path on big images */
body.projects-grid-page .pj-enter-row{ animation: pj-row-in 620ms var(--pj-ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes pj-row-in{ from{ opacity: 0; transform: translate3d(0, 26px, 0); } to{ opacity: 1; transform: none; } }
body.projects-grid-page .pj-enter-card{ animation: pj-card-in 820ms var(--pj-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
body.projects-grid-page .pj-enter-card > img{ animation: pj-card-img 1300ms var(--pj-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes pj-card-in{ from{ opacity: 0; transform: translate3d(0, 60px, 0); } to{ opacity: 1; transform: none; } }
@keyframes pj-card-img{ from{ transform: scale(1.1); } to{ transform: scale(1); } }

@media (prefers-reduced-motion: reduce){
  body.projects-grid-page .pj-enter-row, body.projects-grid-page .pj-enter-card, body.projects-grid-page .pj-enter-card > img{ animation: none; }
  body.projects-grid-page .project-mode-switch::before{ transition: none; }
  body.projects-grid-page .project-index-list > a::after{ transition: none; }
}
@media (hover: none), (pointer: coarse){
  .pj-cursor, body.projects-grid-page .pj-dots{ display: none; }
}

/* ------------------------------------------------------------------ toolbar buttons : the icon takes the colour on hover */
body.projects-grid-page .project-service-filter-toggle,
body.projects-grid-page .project-year-sort{
  border: 1px solid rgb(36 25 22 / 16%) !important;
  background: #fff !important; color: var(--pj-ink) !important;
  transform: none !important;
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, scale 380ms var(--pj-spring), max-width 420ms var(--pj-ease), opacity 260ms ease, margin 420ms var(--pj-ease) !important;
}
body.projects-grid-page .project-service-filter-toggle i,
body.projects-grid-page .project-year-sort i{ color: inherit !important; transition: color 240ms ease, translate 420ms var(--pj-spring), rotate 420ms var(--pj-spring); }
@media (hover: hover) and (pointer: fine){
  body.projects-grid-page .project-service-filter-toggle:hover,
  body.projects-grid-page .project-year-sort:hover{ border-color: var(--pj-blue) !important; background: var(--pj-blue) !important; color: #fff !important; }
  body.projects-grid-page .project-service-filter-toggle:hover i{ color: var(--pj-lemon) !important; translate: 0 1.5px; }
  body.projects-grid-page .project-year-sort:hover i{ color: var(--pj-lemon) !important; }
  body.projects-grid-page .project-mode-switch button:not([aria-pressed="true"]):hover{ color: var(--pj-blue) !important; transform: none !important; }
  body.projects-grid-page .project-mode-switch button:hover i{ scale: 1.12; }
}
body.projects-grid-page .project-service-filter-toggle:active,
body.projects-grid-page .project-year-sort:active{ scale: .92; }
body.projects-grid-page .project-service-filter-toggle:focus-visible,
body.projects-grid-page .project-year-sort:focus-visible{ outline: 2px solid var(--pj-blue); outline-offset: 3px; }
/* filter open or active : blue, lemon funnel, and a little dot when a category is selected */
body.projects-grid-page .project-service-filter-toggle[aria-expanded="true"],
body.projects-grid-page .project-service-filter-toggle.is-active{ border-color: var(--pj-blue) !important; background: var(--pj-blue) !important; color: var(--pj-lemon) !important; }
body.projects-grid-page .project-service-filter-toggle{ position: relative; }
body.projects-grid-page .project-service-filter-toggle::after{
  content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pj-lemon); box-shadow: 0 0 0 2px var(--pj-paper);
  scale: 0; transition: scale 380ms var(--pj-spring);
}
body.projects-grid-page .project-service-filter-toggle.is-active::after{ scale: 1; }

/* filter menu : springs open, choices arrive one by one */
body.projects-grid-page .project-service-filter-menu{
  border-radius: 16px !important; padding: 12px !important;
  background: #fff !important; backdrop-filter: none !important;
  box-shadow: 0 24px 50px -24px rgb(36 25 22 / 35%), 0 0 0 1px rgb(36 25 22 / 8%) !important; border: 0 !important;
  transform: translateY(-8px) scale(.94) !important;
  transition: opacity 180ms ease, transform 420ms var(--pj-spring) !important;
}
body.projects-grid-page .project-service-filter-menu.is-open{ transform: none !important; }
body.projects-grid-page .project-service-filter-menu button{
  border-radius: 99px !important;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 260ms ease, translate 420ms var(--pj-ease) !important;
}
body.projects-grid-page .project-service-filter-menu:not(.is-open) button{ opacity: 0; translate: 0 6px; }
body.projects-grid-page .project-service-filter-menu.is-open button{ opacity: 1; translate: 0 0; }
body.projects-grid-page .project-service-filter-menu.is-open button:nth-child(2){ transition-delay: 30ms; }
body.projects-grid-page .project-service-filter-menu.is-open button:nth-child(3){ transition-delay: 60ms; }
body.projects-grid-page .project-service-filter-menu.is-open button:nth-child(4){ transition-delay: 90ms; }
body.projects-grid-page .project-service-filter-menu.is-open button:nth-child(5){ transition-delay: 120ms; }
body.projects-grid-page .project-service-filter-menu button[aria-pressed="true"]{ border-color: var(--pj-blue) !important; background: var(--pj-blue) !important; color: #fff !important; }
@media (prefers-reduced-motion: reduce){
  body.projects-grid-page .project-service-filter-menu, body.projects-grid-page .project-service-filter-menu button{ transition-duration: 1ms !important; }
}

/* ------------------------------------------------------------------ case pages : same motion as the index */
@media (prefers-reduced-motion: no-preference){
  /* pictures settle in when they appear, like the cards of the index */
  body.case-page .pj-settle img{ scale: 1.1; transition: scale 1400ms var(--pj-ease); }
  body.case-page .pj-settle.is-in img{ scale: 1; }
}
@media (hover: hover) and (pointer: fine){
  /* hovering a picture : the same slow ease-in as the index cards */
  body.case-page .case-gallery .case-shot img{ transition: scale 1400ms var(--pj-ease), transform 1400ms var(--pj-ease) !important; }
  body.case-page .case-gallery .case-shot:hover img{ transform: scale(1.03) !important; }
  /* « continuer avec » : the visitor's cursor, « Projet suivant ↗ » */
  body.case-page .next-project [data-next-project]{ cursor: none; }
}
/* every reveal of the case pages on the same curve as the index */
body.case-page .reveal{ transition: opacity 800ms ease, transform 1000ms var(--pj-ease) !important; }
body.case-page .case-summary.reveal > article{ transition: opacity 600ms ease, translate 900ms var(--pj-ease); }
body.case-page .case-summary.reveal:not(.is-visible) > article{ opacity: 0; translate: 0 18px; }
body.case-page .case-summary.reveal.is-visible > article:nth-of-type(2){ transition-delay: 90ms; }
body.case-page .case-summary.reveal.is-visible > article:nth-of-type(3){ transition-delay: 180ms; }

/* ------------------------------------------------------------------ case pages : rôle / livrables / résultat
   three cards; the blue pours out of the round dot of the label (same move as the project list),
   the card leans toward the pointer and its big number drifts the other way.
   touch : the card in the middle of the screen fills, a tap picks one. */
body.case-page .case-summary--standalone{
  --cs-ease: cubic-bezier(.55, 0, .25, 1);
  counter-reset: case-summary;
  gap: clamp(10px, 1.2vw, 16px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  perspective: 1100px;
}
body.case-page .case-summary--standalone > article{
  --cs-dot-x: clamp(24px, 2.6vw, 38px);
  --cs-dot-y: clamp(30px, 3.1vw, 44px);
  --cs-rx: 0deg; --cs-ry: 0deg; --cs-px: 0px; --cs-py: 0px;
  counter-increment: case-summary;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(200px, 17vw, 260px);
  padding: calc(var(--cs-dot-y) - .5em) clamp(24px, 2.6vw, 38px) clamp(24px, 2.6vw, 36px) calc(var(--cs-dot-x) - 3px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 1px 0 rgb(36 25 22 / 4%), 0 22px 40px -34px rgb(36 25 22 / 45%);
  color: var(--ink);
  transform: rotateX(var(--cs-rx)) rotateY(var(--cs-ry));
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1), box-shadow 500ms ease, border-color 300ms ease, color 260ms ease 80ms;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
body.case-page .case-summary--standalone > article:nth-of-type(3){ border-top-right-radius: 46px; }
/* the blue, poured from the dot */
body.case-page .case-summary--standalone > article::before{
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: var(--primary);
  clip-path: circle(0 at var(--cs-dot-x) var(--cs-dot-y));
  transition: clip-path 620ms var(--cs-ease);
}
/* the big number */
body.case-page .case-summary--standalone > article::after{
  content: counter(case-summary, decimal-leading-zero);
  position: absolute; z-index: -1;
  right: clamp(16px, 1.8vw, 26px); bottom: clamp(-14px, -1vw, -8px);
  color: transparent;
  font: 400 clamp(4.6rem, 8.4vw, 8.4rem)/1 var(--display);
  letter-spacing: -.04em;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ink) 16%, transparent);
  translate: var(--cs-px) var(--cs-py);
  transition: translate 700ms cubic-bezier(.22, 1, .36, 1), color 300ms ease 60ms, -webkit-text-stroke-color 300ms ease;
  pointer-events: none;
}
body.case-page .case-summary--standalone > article > span{
  position: relative;
  gap: 12px;
  color: var(--primary);
  font-size: .68rem;
  transition: color 260ms ease 80ms;
}
body.case-page .case-summary--standalone > article > span::before{
  width: 10px; height: 10px; flex: 0 0 10px;
  margin-left: -2px;
  background: var(--interaction);
  box-shadow: 0 0 0 1px rgb(2 18 238 / 26%);
  transition: scale 460ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 300ms ease;
}
body.case-page .case-summary--standalone > article > p{
  max-width: 24ch;
  margin-top: clamp(16px, 1.6vw, 24px);
  font: 400 clamp(1.18rem, 1.55vw, 1.5rem)/1.16 var(--display);
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* active : hover, keyboard focus, tap, or (touch) the card in the middle of the screen */
body.case-page .case-summary--standalone > article.is-active{
  color: #fff;
  border-color: transparent;
  box-shadow: 0 30px 50px -30px rgb(2 18 238 / 70%);
}
body.case-page .case-summary--standalone > article.is-active::before{ clip-path: circle(150% at var(--cs-dot-x) var(--cs-dot-y)); }
body.case-page .case-summary--standalone > article.is-active::after{ color: var(--interaction); -webkit-text-stroke-color: transparent; }
body.case-page .case-summary--standalone > article.is-active > span{ color: var(--interaction); }
body.case-page .case-summary--standalone > article.is-active > span::before{ scale: 1.5; box-shadow: 0 0 0 4px rgb(215 255 63 / 22%); }
body.case-page .case-summary--standalone > article:focus-visible{ outline: 2px solid var(--primary); outline-offset: 4px; }

@media (max-width: 620px){
  body.case-page .case-summary--standalone{ gap: 10px; }
  body.case-page .case-summary--standalone > article{ min-height: 0; padding-bottom: 30px; border-radius: 18px; }
  body.case-page .case-summary--standalone > article:nth-of-type(3){ border-top-right-radius: 34px; }
  body.case-page .case-summary--standalone > article > p{ max-width: none; padding-right: 58px; font-size: 1.16rem; }
  body.case-page .case-summary--standalone > article::after{ font-size: 4.4rem; }
}
@media (prefers-reduced-motion: reduce){
  body.case-page .case-summary--standalone > article,
  body.case-page .case-summary--standalone > article::before,
  body.case-page .case-summary--standalone > article::after{ transition-duration: 1ms; }
}
/* the reveal (opacity + translate, staggered) and the card motion share one transition list */
body.case-page .case-summary.case-summary--standalone.reveal > article{
  transition: opacity 600ms ease, translate 900ms var(--pj-ease), transform 700ms cubic-bezier(.22, 1, .36, 1), box-shadow 500ms ease, border-color 300ms ease, color 260ms ease 80ms;
}
body.case-page .case-summary.case-summary--standalone.reveal.is-visible > article:nth-of-type(2){ transition-delay: 90ms, 90ms, 0ms, 0ms, 0ms, 80ms; }
body.case-page .case-summary.case-summary--standalone.reveal.is-visible > article:nth-of-type(3){ transition-delay: 180ms, 180ms, 0ms, 0ms, 0ms, 80ms; }

/* phones : the category line uses the card width (it was cut at 30ch for no reason) */
@media (max-width: 620px){
  body.projects-grid-page .mega-project-copy p{ max-width: none; gap: 7px; font-size: .62rem; letter-spacing: .01em; }
  body.projects-grid-page .mega-project-copy p::before{ width: 14px !important; }
}
/* phones : the two photos of a tapped row live in the row's right column, where the year sits;
   the year steps aside while they show, so nothing covers the title or the categories */
@media (max-width: 760px){
  body.projects-grid-page .project-index-list > a .project-index-title .index-stickers{
    position: absolute !important; z-index: 3;
    top: 10px !important; right: 12px !important; bottom: 10px !important; left: auto !important;
    width: 74px !important; height: auto !important; margin: 0 !important;
    overflow: visible !important; clip-path: none !important; transform: none !important; scale: none; translate: none !important;
  }
  body.projects-grid-page .project-index-list > a .project-index-title .index-stickers img{
    position: absolute; width: 46px !important; height: 60px !important;
    top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    border-width: 3px;
    opacity: 0 !important;
    transform: translate3d(8px, 10px, 0) rotate(0deg) scale(.4) !important;
    transform-origin: 50% 50% !important;
  }
  body.projects-grid-page .project-index-list > a .project-index-title .index-stickers img:nth-child(2){
    top: auto !important; left: auto !important; right: 0 !important; bottom: 0 !important;
    transform: translate3d(-8px, -10px, 0) rotate(0deg) scale(.4) !important;
  }
  body.projects-grid-page .project-index-list > a.is-touch-active .project-index-title .index-stickers img,
  body.projects-grid-page .project-index-list > a:focus-visible .project-index-title .index-stickers img{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) rotate(-7deg) scale(1) !important;
  }
  body.projects-grid-page .project-index-list > a.is-touch-active .project-index-title .index-stickers img:nth-child(2),
  body.projects-grid-page .project-index-list > a:focus-visible .project-index-title .index-stickers img:nth-child(2){
    transform: translate3d(0, 0, 0) rotate(6deg) scale(1) !important;
  }
  body.projects-grid-page .project-index-list > a > span:last-child{ transition: opacity 200ms ease, scale 300ms ease !important; }
  body.projects-grid-page .project-index-list > a.is-touch-active > span:last-child{ opacity: 0 !important; scale: .7; }
}

/* grid on touch screens : the card in the middle of the screen */
@media (hover: none), (pointer: coarse){
  body.projects-grid-page .mega-project > img{ transition: transform 1400ms var(--pj-ease), filter 700ms ease, opacity 520ms ease !important; }
  body.projects-grid-page .mega-project.is-centred > img{ transform: scale(1.05) !important; filter: saturate(1.12); }
  body.projects-grid-page .mega-project .mega-project-copy h2{ transition: translate 700ms var(--pj-ease) !important; }
  body.projects-grid-page .mega-project.is-centred .mega-project-copy h2{ translate: 0 -4px; }
  body.projects-grid-page .mega-project.is-centred .mega-project-copy p::before{ width: 34px !important; }
  body.projects-grid-page .mega-project .mega-project-index{ transition: background-color 300ms ease, color 300ms ease, scale 460ms var(--pj-spring) !important; }
  body.projects-grid-page .mega-project.is-centred .mega-project-index{ background: var(--pj-lemon) !important; color: var(--pj-ink) !important; scale: 1.06; }
  body.projects-grid-page .mega-project.is-centred .mega-project-index::before{ background: var(--pj-blue) !important; }
}

/* touch screens : iOS keeps the last tapped row in :hover. Only the row the script marks
   (.is-touch-active) looks active; a row left in :hover goes back to rest. */
@media (hover: none), (pointer: coarse){
  body.projects-grid-page .project-index-list > a:hover:not(.is-touch-active){ color: var(--ink) !important; background: transparent !important; }
  body.projects-grid-page .project-index-list > a:hover:not(.is-touch-active)::before{ clip-path: circle(0 at var(--pj-dot-x) 50%) !important; transition-delay: 0ms !important; }
  body.projects-grid-page .project-index-list > a:hover:not(.is-touch-active) h2{ color: var(--ink) !important; translate: none !important; transform: none !important; }
  body.projects-grid-page .project-index-list > a:hover:not(.is-touch-active) h2::before{ width: 9px !important; height: 3px !important; border-radius: 999px !important; background: var(--primary) !important; }
  body.projects-grid-page .project-index-list > a:nth-of-type(even):hover:not(.is-touch-active) h2::before{ background: var(--interaction) !important; }
  body.projects-grid-page .project-index-list > a:hover:not(.is-touch-active) .project-index-taxonomy strong{ background: var(--primary) !important; color: var(--paper) !important; scale: none !important; rotate: none !important; transform: none !important; }
  body.projects-grid-page .project-index-list > a:hover:not(.is-touch-active) .project-index-taxonomy span{ color: var(--muted) !important; }
  body.projects-grid-page .project-index-list > a:hover:not(.is-touch-active) > span:last-child{ background: transparent !important; border-color: rgb(2 18 238 / 26%) !important; color: var(--primary) !important; translate: none !important; transform: none !important; }
  /* the active row gets the whole active look (same as a hovered row on a computer) */
  body.projects-grid-page .project-index-list > a.is-touch-active{ color: #fff !important; }
  body.projects-grid-page .project-index-list > a.is-touch-active .project-index-taxonomy strong{ background: var(--pj-lemon) !important; color: var(--pj-ink) !important; }
  body.projects-grid-page .project-index-list > a.is-touch-active .project-index-taxonomy span{ color: rgb(255 255 255 / 82%) !important; opacity: 1 !important; }
}