/* Genesis Web — landing concept previews.
   Five concept cases reuse the approved website proof composition while each
   desktop/mobile surface uses its own optimized preview asset.

   IMPORTANT: visual refinements in this file remain scoped to the projects
   page. Shared left-rail spacing changes only the metadata column; proof/card
   geometry, sizes and positions are not changed. */
.gw-projects-concept-crop{position:relative;width:100%;overflow:hidden;background:#eef1eb center/cover no-repeat}
.gw-projects-concept-crop--desktop{aspect-ratio:1440/878}
.gw-projects-concept-crop--mobile{aspect-ratio:430/810}
.gw-projects-concept-crop>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;user-select:none}

/* Stable concept selectors. Asset mapping no longer depends on article order,
   so adding or reordering project cards cannot swap preview images. */
.gw-projects-case--aurum-dent .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/aurum-dent-project-desktop.webp')}
.gw-projects-case--aurum-dent .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/aurum-dent-project-mobile.webp')}
.gw-projects-case--liora-beauty .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/liora-beauty-project-desktop.webp')}
.gw-projects-case--liora-beauty .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/liora-beauty-project-mobile.webp')}
.gw-projects-case--lexpoint .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/lexpoint-project-desktop.webp')}
.gw-projects-case--lexpoint .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/lexpoint-project-mobile.webp')}
.gw-projects-case--forma-house .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/forma-house-project-desktop.webp')}
.gw-projects-case--forma-house .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/forma-house-project-mobile.webp')}
.gw-projects-case--gusto-vita .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/gusto-vita-project-desktop.webp')}
.gw-projects-case--gusto-vita .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/gusto-vita-project-mobile.webp')}

/* Corporate/business website concepts use the same approved proof contract as
   the landing concepts, with stable per-project Desktop/Mobile asset mapping. */
.gw-projects-case--prosteel .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/prosteel-project-desktop.webp')}
.gw-projects-case--prosteel .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/prosteel-project-mobile.webp')}
.gw-projects-case--solara-energy .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/solara-energy-project-desktop.webp')}
.gw-projects-case--solara-energy .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/solara-energy-project-mobile.webp')}
.gw-projects-case--novacare-clinic .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/novacare-clinic-project-desktop.webp')}
.gw-projects-case--novacare-clinic .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/novacare-clinic-project-mobile.webp')}
.gw-projects-case--northline-cargo .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/northline-cargo-project-desktop.webp')}
.gw-projects-case--northline-cargo .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/northline-cargo-project-mobile.webp')}
.gw-projects-case--finora-consulting .gw-projects-concept-crop--desktop{background-image:url('/assets/images/projects/finora-consulting-project-desktop.webp')}
.gw-projects-case--finora-consulting .gw-projects-concept-crop--mobile{background-image:url('/assets/images/projects/finora-consulting-project-mobile.webp')}

/* Corporate screenshots are shorter than the landing-page captures. Centered
   cover cropping removed the top navigation/header on desktop. Pin both the
   desktop and mobile previews to the top edge so the real page header is always
   visible; any necessary crop is taken from the bottom or horizontal edges. */
.gw-projects-case--prosteel .gw-projects-concept-crop,
.gw-projects-case--solara-energy .gw-projects-concept-crop,
.gw-projects-case--novacare-clinic .gw-projects-concept-crop,
.gw-projects-case--northline-cargo .gw-projects-concept-crop,
.gw-projects-case--finora-consulting .gw-projects-concept-crop{background-position:center top}

/* Website proof presentation: all site previews use the same restrained shadow
   treatment. Only box-shadow changes here; dimensions and positions stay intact. */
.gw-projects-case--website .gw-projects-proof-desktop,
.gw-projects-case--website .gw-projects-proof-mobile{box-shadow:none}

/* Desktop: add air only inside the LEFT metadata rail for every project case.
   The right proof/card keeps the exact existing grid column, width and position. */
@media(min-width:1025px){
  .gw-projects-case .gw-projects-case-meta{padding-inline-end:clamp(40px,3vw,56px)}
}

/* Tablet: restore the intended 8-column hero placement after the later editorial
   desktop refinement in projects.css. Keep project description aligned with the
   heading row so the right column never rises above the title block. */
@media(min-width:768px) and (max-width:1024px){
  .gw-projects-hero-copy{grid-column:3/9}
  .gw-projects-case-copy{grid-row:2}
  .gw-projects-case--concept .gw-projects-case-meta{padding-inline-end:0}
  .gw-projects-case--concept .gw-projects-case-proof{margin-top:56px}
}

/* Mobile: single-column narrative. Preserve all proof/card dimensions and only
   keep the concept text/media rhythm. */
@media(max-width:767.98px){
  .gw-projects-case--concept .gw-projects-case-meta{margin-bottom:42px;padding-inline-end:0}
}

/* Projects / Desktop motion V1 — editorial registry reveal.
   Motion follows the current Genesis Web grammar: small transform distances,
   content-before-proof sequencing and one reveal per project. Tablet/Mobile stay
   static. JS only toggles state classes; all page content remains in HTML. */
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
  :root{--gw-projects-motion-ease:cubic-bezier(.22,1,.36,1)}

  @keyframes gw-projects-enter-up{
    from{opacity:0;transform:translate3d(0,10px,0)}
    to{opacity:1;transform:none}
  }

  @keyframes gw-projects-enter-filter{
    from{opacity:0;transform:translate3d(0,6px,0)}
    to{opacity:1;transform:none}
  }

  /* One compact page-load sequence: thesis -> support -> project controls. */
  .gw-projects-eyebrow{animation:gw-projects-enter-up 340ms var(--gw-projects-motion-ease) 80ms both}
  .gw-projects-title{animation:gw-projects-enter-up 520ms var(--gw-projects-motion-ease) 150ms both}
  .gw-projects-home-link{animation:gw-projects-enter-up 360ms var(--gw-projects-motion-ease) 300ms both}
  .gw-projects-lead{animation:gw-projects-enter-up 420ms var(--gw-projects-motion-ease) 360ms both}
  .gw-projects-index-title{animation:gw-projects-enter-filter 320ms var(--gw-projects-motion-ease) 520ms both}
  .gw-projects-filters{animation:gw-projects-enter-filter 420ms var(--gw-projects-motion-ease) 580ms both}

  /* Never move the sticky metadata rail itself; only its existing contents move. */
  html.gw-projects-motion-ready .gw-projects-case .gw-projects-case-meta>*{
    transition:opacity 380ms var(--gw-projects-motion-ease),transform 380ms var(--gw-projects-motion-ease)
  }
  html.gw-projects-motion-ready .gw-projects-case .gw-projects-case-proof>:first-child{
    transition:opacity 520ms var(--gw-projects-motion-ease),transform 520ms var(--gw-projects-motion-ease)
  }
  html.gw-projects-motion-ready .gw-projects-case .gw-projects-case-proof>.gw-projects-proof-route{
    transition:opacity 380ms var(--gw-projects-motion-ease),transform 380ms var(--gw-projects-motion-ease)
  }
  html.gw-projects-motion-ready .gw-projects-case .gw-projects-case-note{
    transition:opacity 420ms var(--gw-projects-motion-ease),transform 420ms var(--gw-projects-motion-ease)
  }
  html.gw-projects-motion-ready .gw-projects-case--website .gw-projects-proof-mobile{
    transition:opacity 440ms var(--gw-projects-motion-ease),transform 440ms var(--gw-projects-motion-ease)
  }

  html.gw-projects-motion-ready .gw-projects-case:not(.is-motion-revealed) .gw-projects-case-meta>*{opacity:0;transform:translate3d(0,9px,0)}
  html.gw-projects-motion-ready .gw-projects-case:not(.is-motion-revealed) .gw-projects-case-proof>:first-child{opacity:0;transform:translate3d(0,16px,0)}
  html.gw-projects-motion-ready .gw-projects-case:not(.is-motion-revealed) .gw-projects-case-proof>.gw-projects-proof-route{opacity:0;transform:translate3d(0,7px,0)}
  html.gw-projects-motion-ready .gw-projects-case:not(.is-motion-revealed) .gw-projects-case-note{opacity:0;transform:translate3d(0,8px,0)}
  html.gw-projects-motion-ready .gw-projects-case--website:not(.is-motion-revealed) .gw-projects-proof-mobile{opacity:0;transform:translate3d(8px,12px,0)}

  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-meta>*{opacity:1;transform:none}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-kicker{transition-delay:20ms}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-name{transition-delay:70ms}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-type{transition-delay:110ms}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-copy{transition-delay:150ms}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-tags{transition-delay:190ms}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-proof>:first-child{opacity:1;transform:none;transition-delay:170ms}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-proof>.gw-projects-proof-route{opacity:1;transform:none;transition-delay:250ms}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-case-note{opacity:1;transform:none;transition-delay:310ms}
  html.gw-projects-motion-ready .gw-projects-case--website.is-motion-revealed .gw-projects-proof-mobile{opacity:1;transform:none;transition-delay:270ms}

  /* Workflow connectors communicate sequence without adding decorative motion. */
  html.gw-projects-motion-ready .gw-projects-product-footer i{
    transform-origin:left center;
    transition:transform 420ms var(--gw-projects-motion-ease) 330ms
  }
  html.gw-projects-motion-ready .gw-projects-case:not(.is-motion-revealed) .gw-projects-product-footer i{transform:scaleX(0)}
  html.gw-projects-motion-ready .gw-projects-case.is-motion-revealed .gw-projects-product-footer i{transform:scaleX(1)}
}