/* ===================================================================
   THE CLEARINGS — each piece is a discovery, not a card.
   Foliage parts, the work opens, a shaft sweeps across it once.
   Every reveal is one-shot: a clearing you have found stays found.
   =================================================================== */

.plate {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
@media (min-width: 940px) {
  .plate { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
  .plate:nth-child(even) .plate__art  { order: 2; }
  .plate:nth-child(even) .plate__meta { order: 1; }
}

/* --- The label. Always visible. Never on hover, never in small print. */

.plate__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-bottom: 1.1rem;
}
.plate__label span { white-space: nowrap; }
.plate__label > span:not(.plate__kind) { padding: .3rem 0; }
.plate__kind {
  padding: .3rem .6rem;
  border: 1px solid var(--moss);
  border-radius: 3px;
  color: var(--paper-dim);
}
.plate__kind[data-kind="client"] {
  border-color: color-mix(in oklab, var(--firefly), transparent 50%);
  color: var(--firefly);
}

.plate__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.08;
  letter-spacing: -.015em;
  font-variation-settings: "SOFT" 55, "WONK" 1, "opsz" 60;
  margin-bottom: .7rem;
}
.plate__brief { color: var(--paper-dim); max-width: 46ch; }
.plate__palette { display: flex; gap: .4rem; margin-top: 1.3rem; }
.plate__swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--paper), transparent 82%);
}

/* --- The artboard ---------------------------------------------------- */

.plate__art {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  background: var(--loam);
  box-shadow: 0 40px 90px -40px var(--hollow);
  /* the clearing opens from the centre */
  clip-path: inset(9% 18% 9% 18% round 46%);
  transition: clip-path 1400ms var(--ease-part);
}
.plate.is-found .plate__art { clip-path: inset(0% 0% 0% 0% round 3px); }

.plate__board { width: 100%; height: 100%; display: block; }

/* Foliage: two masses pushed aside on arrival */
.plate__frond {
  position: absolute;
  top: -14%; bottom: -14%;
  width: 62%;
  pointer-events: none;
  z-index: 3;
  filter: blur(3px) brightness(.12);
  transition: transform 1500ms var(--ease-part), opacity 1200ms ease;
}
.plate__frond svg { width: 100%; height: 100%; }
.plate__frond--l { left: -8%;  transform: translate3d(0,0,0) rotate(0deg); }
.plate__frond--r { right: -8%; transform: translate3d(0,0,0) rotate(0deg) scaleX(-1); }
.plate.is-found .plate__frond--l { transform: translate3d(-72%,0,0) rotate(-13deg); opacity: 0; }
.plate.is-found .plate__frond--r { transform: translate3d(72%,0,0) rotate(13deg) scaleX(-1); opacity: 0; }

/* One shaft sweeps across, then settles */
.plate__art::after {
  content: "";
  position: absolute; inset: -30% -60%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 42%,
    color-mix(in oklab, var(--sun-core), transparent 72%) 50%,
    transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-60%, 0, 0);
}
.plate.is-found .plate__art::after { animation: shaft-sweep 2000ms 500ms var(--ease-part) 1 both; }
@keyframes shaft-sweep {
  0%   { opacity: 0;  transform: translate3d(-60%,0,0); }
  22%  { opacity: 1; }
  100% { opacity: 0;  transform: translate3d(60%,0,0); }
}

/* Hover: the local ambient lifts. The forest brightens where you looked. */
.plate__art { transition: clip-path 1400ms var(--ease-part), box-shadow 600ms ease; }
.plate:hover .plate__art {
  box-shadow: 0 40px 90px -40px var(--hollow),
              0 0 0 1px color-mix(in oklab, var(--live), transparent 62%),
              0 0 70px -10px color-mix(in oklab, var(--live), transparent 78%);
}

/* --- Empty slots for real client work -------------------------------- */

.plate--slot .plate__art {
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in oklab, var(--moss), transparent 82%) 0 10px,
      transparent 10px 20px),
    var(--canopy);
  border: 1px dashed var(--moss);
  display: grid; place-content: center; text-align: center;
  padding: 2rem;
}
.plate--slot .plate__art::after { display: none; }
.plate--slot .slot-note {
  font-family: var(--font-guide); font-size: var(--t-guide);
  letter-spacing: .16em; line-height: 2.1; color: var(--bark-silver);
  text-transform: uppercase;
}
.plate--slot .slot-note strong { color: var(--paper-dim); display: block; margin-bottom: .8rem; }

/* --- Reduced motion: everything is simply already open ---------------- */

@media (prefers-reduced-motion: reduce) {
  .plate__art { clip-path: inset(0 0 0 0 round 3px) !important; transition: none; }
  .plate__frond { display: none; }
  .plate__art::after { animation: none !important; opacity: 0; }
}
html.rm .plate__art { clip-path: inset(0 0 0 0 round 3px) !important; transition: none; }
html.rm .plate__frond { display: none; }
html.rm .plate__art::after { animation: none !important; opacity: 0; }

/* ===================================================================
   PLATE 07 — THE LONG DRY
   The centre frame animates on hover: the fissure widens and the
   type cracks apart. Motion thinking, proven, with no video file.
   =================================================================== */

.plate__board .ld-crack-l, .plate__board .ld-crack-r {
  transition: transform 900ms var(--ease-part);
}
.plate__art:hover .ld-crack-l, .plate__art:focus-within .ld-crack-l { transform: translateX(-11px); }
.plate__art:hover .ld-crack-r, .plate__art:focus-within .ld-crack-r { transform: translateX(11px); }
.plate__board .ld-fissure { transition: opacity 900ms ease, transform 900ms var(--ease-part); }
.plate__art:hover .ld-fissure, .plate__art:focus-within .ld-fissure { opacity: 1; transform: scaleX(2.6); }

@media (prefers-reduced-motion: reduce) {
  .plate__board .ld-crack-l, .plate__board .ld-crack-r, .plate__board .ld-fissure { transition: none; }
}