/* ════════════════════════════════════════════════════════════
   Studio Barnes — Projects page
   The "Spinning Dunny" clip is a fixed, full-page background that
   scrub-spins with scroll (driven by the controller at the foot of
   Projects.html) and loops seamlessly in both directions. All page
   content scrolls over it; opaque cards/surfaces sit on top, while
   transparent sections (hero, grid, closing copy) let it show through.
   ════════════════════════════════════════════════════════════ */

/* flat black page (the scroll-scrubbed video background was removed) */
body[data-page="projects"] { background: var(--sb-black); }

/* hero + closing copy sit over the moving video → protect the type */
body[data-page="projects"] .hero__display,
body[data-page="projects"] .filmcopy .hero__display,
body[data-page="projects"] .cta--bare .display-2 {
  text-shadow: 0 2px 38px rgba(0,0,0,0.72);
}
body[data-page="projects"] .hero__lede,
body[data-page="projects"] .filmcopy .hero__lede,
body[data-page="projects"] .cta--bare .lede {
  text-shadow: 0 1px 24px rgba(0,0,0,0.8);
}

/* closing copy block: hero-scale heading + lead, comfortable measure */
.filmcopy__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
  max-width: 62%;
}
.filmcopy__inner .hero__lede { max-width: 100%; }

/* closing CTA: bare on the flat black page */
.cta.cta--bare { background: transparent; }
.cta.cta--bare::before, .cta.cta--bare::after { display: none; }

/* footer keeps its small grey type legible over the moving clip */
body[data-page="projects"] footer { position: relative; background: rgba(0,0,0,0.72); }

/* project cards become full clickable links to the case study */
.proj-card__link { display: flex; flex-direction: column; gap: var(--space-4); color: inherit; }

/* ════════════════════════════════════════════════════════════
   TWEAKABLE FEEL — three expressive controls (Tweaks panel)
   1. Work grid   data-projgrid: staggered | aligned | editorial
   2. Backdrop    data-mood:     flat | ember | blueprint
   3. Covers      data-cover:    color | mono | duotone
   ════════════════════════════════════════════════════════════ */

/* ── 1. Work grid layout ── */
/* staggered = base v2.css behaviour (even cards dropped). aligned squares them up. */
body[data-page="projects"][data-projgrid="aligned"] .proj-card:nth-child(even) { transform: none; }

/* editorial = full-width stacked showcase: wide covers, oversized titles */
body[data-page="projects"][data-projgrid="editorial"] .proj-grid {
  grid-template-columns: 1fr;
  gap: clamp(44px, 6vw, 104px);
}
body[data-page="projects"][data-projgrid="editorial"] .proj-card:nth-child(even) { transform: none; }
body[data-page="projects"][data-projgrid="editorial"] .proj-card__media img,
body[data-page="projects"][data-projgrid="editorial"] .proj-card__media image-slot { aspect-ratio: 16 / 7; }
body[data-page="projects"][data-projgrid="editorial"] .proj-card__meta { align-items: flex-end; }
body[data-page="projects"][data-projgrid="editorial"] .proj-card .h3 {
  font-size: clamp(30px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em;
}
body[data-page="projects"][data-projgrid="editorial"] .proj-card__meta span { font-size: var(--text-body); }

/* ── 2. Backdrop mood (fixed, behind all content) ── */
body[data-page="projects"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  transition: background 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
body[data-page="projects"][data-mood="flat"]::before { background: none; }
body[data-page="projects"][data-mood="ember"]::before {
  background:
    radial-gradient(125% 95% at 100% 100%, rgba(255,73,0, calc(0.22 * var(--hero-glow, 0.7))), rgba(255,73,0,0) 56%),
    radial-gradient(90% 70% at 0% 0%, rgba(255,73,0, calc(0.10 * var(--hero-glow, 0.7))), rgba(255,73,0,0) 50%);
}
body[data-page="projects"][data-mood="blueprint"]::before {
  background-image:
    linear-gradient(rgba(255,73,0,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,73,0,0.07) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(135% 105% at 50% 0%, #000 52%, transparent 100%);
  mask-image: radial-gradient(135% 105% at 50% 0%, #000 52%, transparent 100%);
}

/* ── 3. Cover treatment ── */
body[data-page="projects"] .proj-card__media img {
  transition: transform 0.6s var(--ease-out), filter 0.5s var(--ease-out);
}
body[data-page="projects"] .proj-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--sb-orange); mix-blend-mode: color;
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
body[data-page="projects"][data-cover="mono"] .proj-card__media img { filter: grayscale(1) contrast(1.02); }
body[data-page="projects"][data-cover="mono"] .proj-card:hover .proj-card__media img { filter: none; }
body[data-page="projects"][data-cover="duotone"] .proj-card__media img { filter: grayscale(1) contrast(1.08) brightness(0.95); }
body[data-page="projects"][data-cover="duotone"] .proj-card__media::after { opacity: 0.55; }
body[data-page="projects"][data-cover="duotone"] .proj-card:hover .proj-card__media img { filter: none; }
body[data-page="projects"][data-cover="duotone"] .proj-card:hover .proj-card__media::after { opacity: 0; }

@media (max-width: 760px) {
  .filmcopy__inner { max-width: none; }
}