/* ==========================================================================
   Selected stores — cases listing + case card
   Reference: css-layout §11 (listing), §12 (case box); js-motion §6.
   Motion (reveals, --dim scrub, velocity lean, card click) lives in js/sections/work.js.
   ========================================================================== */

/* Hover lift of the pearl veil; registered so it can transition independently
   of the per-frame --dim scrub (a transition on opacity itself would lag the scroll). */
@property --case-lift {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.work {
  position: relative;
  z-index: calc(var(--z-page) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8rem 0;
}

/* Ink bands that melt the section into the WebGL satin.
   z -1 inside the section's stacking context: over the canvas, under the content. */
.work::before,
.work::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  pointer-events: none;
}
.work::before {
  top: -80vmin;
  height: 80vmin;
  background: linear-gradient(0deg, transparent, var(--ink) 40%, var(--ink) 60%, transparent);
}
.work::after {
  bottom: -6vw;
  height: 20vw;
  background: linear-gradient(0deg, var(--ink) 40%, transparent);
}

/* --------------------------------------------------------------------------
   Head: starburst, "Selected / Stores", diagonal stem
   -------------------------------------------------------------------------- */
.work__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Head stays static so the burst anchors to .work (top 2rem of the section, as in the reference). */
.work__head .burst {
  position: absolute;
  top: 2rem;
  left: 50%;
  width: 14rem;
  margin-left: -7rem;
  color: var(--pearl);
  opacity: .4;
  pointer-events: none;
}

/* Opacity is owned by the reveal engine, so the .92 tint goes into the colour. */
.work__title {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
  font-family: var(--serif);
  font-size: 16vw;
  line-height: .8;
  text-align: center;
  text-transform: uppercase;
  color: var(--pearl);
  color: color-mix(in srgb, var(--pearl) 92%, transparent);
}

/* The span gets the rotate-in reveal transform; the static 20° tilt lives on ::before. */
.work__stem {
  display: block;
  width: 1px;
  height: 18vw;
  margin: 2.25rem auto;
}
.work__stem::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--hair-strong);
  transform: rotate(20deg);
}

/* --------------------------------------------------------------------------
   List + card column widths
   -------------------------------------------------------------------------- */
.work__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0 1rem;
}

.case { width: 100%; }

/* JS reveals each card (work.js); visible without GSAP or with reduced motion. */
.js .case { opacity: 0; }
.no-motion .case { opacity: 1; }

/* --------------------------------------------------------------------------
   Card: ink base + pearl veil, 2-col top row (image | index), body row below
   -------------------------------------------------------------------------- */
.case__card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    "media index"
    "body  body"
    "link  link";
  padding: 1rem;
  background: var(--ink);
  color: var(--ink);
  transition: --case-lift .6s var(--ease-out);
}

/* --veil steps down the list (inline on .case); --dim is scrubbed on .work__list.
   Floor .5 keeps ink copy at >= 4.5:1 however far the scrub dims the card. */
.case__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pearl);
  opacity: max(min(var(--veil, .9) + var(--case-lift, 0), 1) * var(--dim, 1), .5);
  pointer-events: none;
}

.case__media {
  grid-area: media;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--graphite);
  filter: brightness(var(--dim, 1));
}
.case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* same function list as the hover state so the filter interpolates */
  filter: grayscale(1) sepia(0) contrast(1.02);
  transition: transform 1.2s var(--ease-out), filter .6s var(--ease-out);
}

.case__index {
  grid-area: index;
  justify-self: end;
  align-self: start;
  margin-top: -.05em;
  padding: .3rem .4rem 0 0;
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: .8;
}

.case__body { grid-area: body; }

/* Instrument Serif matches RL-Unno's advance widths (Mercure 2.80em vs 2.88em),
   so the reference 4.5rem holds; 18vw only bites below 400px. */
.case__title {
  margin: .5rem 0 3.5rem;
  font-family: var(--serif);
  font-size: min(4.5rem, 18vw);
  line-height: .8;
}
/* Tall diacritic on the second line (Ō: 885 units) would touch line one at .8. */
.case__title--loose { line-height: .92; }

.case__desc {
  width: 91.667%;
  font-size: 12px;
  line-height: 1.4;
}

.case__link {
  grid-area: link;
  justify-self: start;
  align-self: end;
  margin-top: 1rem;
}
/* Base hover turns tearing links champagne, which vanishes on the pearl card. */
.case__link:hover,
.case__link:focus-visible { color: var(--ink); }

/* Keyboard focus on "Explore" mirrors the hover tint (no scale). */
.case__card:focus-within { --case-lift: .03; }
.case__card:focus-within img { filter: grayscale(.15) sepia(.12) contrast(1.02); }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
  .case { width: 58.333%; }
}

@media (min-width: 768px) {
  .work::before { top: -20vmin; }
  .work__title { font-size: 12vw; }
  .work__list { padding: 0 0 8rem; }

  /* 2fr | 1fr | 3fr: image 6/12 + index 6/12 on top; link 4/12 + body 8/12 below */
  .case__card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 3fr);
    grid-template-areas:
      "media media index"
      "link  body  body";
    padding: .5rem;
  }
  /* base .micro is .6rem = 10.8px at the 18px root; keep the label at the 11px floor */
  .case__link { margin-top: 0; font-size: max(11px, .6rem); }
}

@media (min-width: 992px) {
  .case { max-width: 50%; }
  .case__desc { font-size: max(11px, 1vw); }
}

@media (min-width: 1200px) {
  .case { max-width: 580px; }
  .case__desc { width: 66.667%; font-size: max(11px, .55rem); }
}

@media (min-width: 1500px) {
  .case { max-width: 34.5%; }
}

/* Hover-capable pointers only: slow push-in + warm tint echoing the reference colorize. */
@media (hover: hover) and (pointer: fine) {
  .js .case__card { cursor: pointer; }
  .case__card:hover { --case-lift: .03; }
  .case__card:hover img {
    transform: scale(1.04);
    filter: grayscale(.15) sepia(.12) contrast(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .case { opacity: 1; }
  .case__media img { transition: filter .6s var(--ease-out); }
  .case__card:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Buttons under the list
   -------------------------------------------------------------------------- */
.work__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  margin-top: 4rem;
  padding: 0 1rem;
  text-align: center;
}
.work__actions .btn-row { justify-content: center; }
.work__actions-note { color: var(--ash); letter-spacing: .08em; }

@media (min-width: 768px) {
  .work__actions { margin-top: -3rem; }  /* the list keeps 8rem of bottom padding */
}

/* The concept-work disclosure: it sits with the section heading and is not hidden in small grey */
.work__basis {
  max-width: 44ch;
  margin: 1.2rem 0 0;
  color: var(--ash);
}
@media (min-width: 992px) {
  .work__basis { margin-top: 1.6rem; }
}