/* ============================================================
   /home — vertical, chrome-less project list (v3)
   + mobile interaction layer

   Mobile-only. Each project:
     image (near full-bleed, sharp 2px radius), org · year
     overline, title row with arrow, description, generous gap.
   Year + org meta stays hidden on mobile (markup kept so it can
   be lit up again without rebuilding).

   Interaction layer (see home-cards-scroll.js for the JS half):
   A. reveal      — .tcm2-item--revealed, one-shot, staggered:
                    image fades/settles up, index fades, title
                    rises out of an overflow mask, desc follows.
                    Per-item batch delay comes in via --tcm2-d.
   B. center lit  — .tcm2-item--active, item nearest screen
                    center: veil lifts, title/index/arrow go
                    bright. Everything else rests dim.
   C. parallax    — img transform driven from JS (scale pre-set
                    here so the drift never shows the frame edge)
   D. press       — :active scale on the whole item
   ============================================================ */

@media (max-width: 809.98px) {

  /* Hide Framer's vertical card stack from first paint, not just
     after install — otherwise the SSR cards flash before the JS
     mounts the custom list. The install flow tolerates the section
     being display:none (it only needs the node in the DOM). */
  .framer-1ma9oa6,
  .framer-1ma9oa6.tcm2-section--hidden {
    display: none !important;
  }

  .tcm2-list {
    display: flex;
    flex-direction: column;
    /* The drawn divider between projects now owns the bifurcation;
       the gap on each side of it stays moderate so the rhythm is
       project → breath → line → breath → project. */
    gap: 44px;
    padding: 20px 0 96px;
    box-sizing: border-box;
    /* Pull flush so the image can run nearly edge-to-edge even
       though the surrounding Framer column has a gutter. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
  }

  .tcm2-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    /* D. press feedback — the only transform on the item itself,
       tiny and quick, so it can't fight the scroll effects. */
    transition: transform 0.22s ease;
  }
  .tcm2-item:active {
    transform: scale(0.98);
  }

  /* Hide year + org on mobile per latest feedback. The data still
     lives in the JS and the DOM, so a future tweak can re-enable. */
  .tcm2-item__meta {
    display: none !important;
  }

  /* ---- image frame ------------------------------------------
     Near full-bleed: 10px inset instead of the old 24px gutter,
     barely-there radius + hairline ring so it reads as a sharp,
     editorial frame rather than a bare <img>. */
  .tcm2-item__image {
    margin: 0 10px;
    border-radius: 2px;
    overflow: hidden;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    /* A. reveal start state: sits low and transparent. */
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.7s ease var(--tcm2-d, 0ms),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--tcm2-d, 0ms);
  }
  .tcm2-item--revealed .tcm2-item__image {
    opacity: 1;
    /* translateZ keeps the rounded-corner clip honest in Safari
       while the inner img is scaled. */
    transform: translateZ(0);
  }

  .tcm2-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* C. parallax headroom: pre-scaled so the JS-driven ±4% drift
       never exposes the frame edge. JS overwrites this transform
       each scroll frame (same scale, varying translateY). */
    transform: scale(1.12);
  }
  /* A. before reveal the image holds a deeper zoom, then settles
     down to its parallax base as the frame fades up. */
  .tcm2-item:not(.tcm2-item--revealed) .tcm2-item__image img {
    transform: scale(1.26);
  }
  .tcm2-item--revealed .tcm2-item__image img {
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--tcm2-d, 0ms);
  }

  /* Hairline ring above the image, below nothing else. */
  .tcm2-item__image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    pointer-events: none;
  }

  /* B. center-active veil: a dark overlay that lifts on the item
     nearest the viewport center. Opacity-only, GPU-cheap. */
  .tcm2-item__image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.42);
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  .tcm2-item--active .tcm2-item__image::after {
    opacity: 0;
  }

  /* ---- overline: org · year ----------------------------------- */
  .tcm2-item__index {
    margin: 18px 16px 0;
    font-family: 'Degular', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.55s ease calc(var(--tcm2-d, 0ms) + 100ms),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--tcm2-d, 0ms) + 100ms),
      color 0.35s ease;
  }
  .tcm2-item--revealed .tcm2-item__index {
    opacity: 1;
    transform: none;
  }
  .tcm2-item--active .tcm2-item__index {
    color: rgba(255, 255, 255, 0.7);
  }

  /* ---- title row: masked title + arrow ----------------------- */
  .tcm2-item__titlerow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    /* Title and description read as one block: minimal gap below
       (the title's own 3px descender pad supplies the rest). */
    margin: 6px 16px 2px;
  }
  .tcm2-item__title {
    margin: 0;
    /* Overflow mask for the line-rise reveal. Small bottom pad so
       descenders aren't clipped by the mask once settled. */
    overflow: hidden;
    padding-bottom: 3px;
    font-family: 'Degular', sans-serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1.2px;
    line-height: 1.08;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.35s ease;
  }
  .tcm2-item__title-inner {
    display: block;
    transform: translateY(112%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--tcm2-d, 0ms) + 140ms);
  }
  .tcm2-item--revealed .tcm2-item__title-inner {
    transform: none;
  }
  /* B. center-active: the lit item's title goes full white. */
  .tcm2-item--active .tcm2-item__title {
    color: #fff;
  }

  .tcm2-item__arrow {
    flex: none;
    width: 18px;
    height: 18px;
    /* Optical alignment with the title's cap height. */
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition:
      opacity 0.55s ease calc(var(--tcm2-d, 0ms) + 240ms),
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--tcm2-d, 0ms) + 240ms),
      color 0.35s ease;
  }
  .tcm2-item__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .tcm2-item--revealed .tcm2-item__arrow {
    opacity: 1;
    transform: none;
  }
  .tcm2-item--active .tcm2-item__arrow {
    color: #fff;
  }

  /* ---- description ------------------------------------------- */
  .tcm2-item__desc {
    margin: 0 16px;
    font-family: 'Degular', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    /* Three lines, gracefully clipped if longer. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.6s ease calc(var(--tcm2-d, 0ms) + 220ms),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--tcm2-d, 0ms) + 220ms);
  }
  .tcm2-item--revealed .tcm2-item__desc {
    opacity: 1;
    transform: none;
  }

  /* ---- divider between projects -------------------------------
     A hairline that draws itself from left to right when it
     scrolls into view, ending in a small rotated square — the
     same square motif as the hero grid. Pure transform/opacity. */
  .tcm2-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px;
  }
  .tcm2-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .tcm2-divider__square {
    flex: none;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(45deg) scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
  }
  .tcm2-divider--in .tcm2-divider__line {
    transform: scaleX(1);
  }
  .tcm2-divider--in .tcm2-divider__square {
    transform: rotate(45deg) scale(1);
  }

  /* Reduced motion: no zoom, no parallax headroom, no veil fade,
     content simply visible. JS also skips its transform writes. */
  @media (prefers-reduced-motion: reduce) {
    .tcm2-item__image,
    .tcm2-item__index,
    .tcm2-item__title-inner,
    .tcm2-item__arrow,
    .tcm2-item__desc {
      opacity: 1;
      transform: none;
      transition: color 0.35s ease;
    }
    .tcm2-item__image img,
    .tcm2-item:not(.tcm2-item--revealed) .tcm2-item__image img {
      transform: none;
      transition: none;
    }
    .tcm2-item__image::after {
      transition: none;
    }
    .tcm2-item {
      transition: none;
    }
    .tcm2-divider__line,
    .tcm2-divider__square {
      transition: none;
    }
    .tcm2-divider__line { transform: scaleX(1); }
    .tcm2-divider__square { transform: rotate(45deg) scale(1); }
  }
}