/* =========================================================
   Home · work cards: project-tinted stage, whole screens (never cropped),
   annotation band above the screen, playful pop transitions.
   ========================================================= */

.work-media.has-scenes {
  padding: 0;
  overflow: hidden;
  container-type: size;
}

/* project-specific light stage */
.work-media.media-ts {
  background: radial-gradient(120% 90% at 12% 8%, #ffffff 0%, #e8f1ff 42%, #cfe0fb 100%);
}
.work-media.media-tk {
  background: radial-gradient(120% 90% at 88% 6%, #fff6ef 0%, #ffe9dc 40%, #dbe9fb 100%);
}
.work-media.media-nk {
  background: radial-gradient(120% 90% at 20% 92%, #ffffff 0%, #f0ecff 42%, #ddd6fb 100%);
}

/* paused unless the stage is on screen */
.has-scenes:not(.ws-live) .ws-scene,
.has-scenes:not(.ws-live) .ws-shot,
.has-scenes:not(.ws-live) .ws-anno { animation-play-state: paused; }
.has-scenes:not(.ws-live) .ws-shot,
.has-scenes:not(.ws-live) .ws-anno { will-change: auto; }

.ws-scenes {
  position: absolute;
  inset: 0;
  contain: strict;
}

/* one scene = note band + the whole screen under it. 27s loop, 9s each. */
.ws-scene {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  place-content: center;
  justify-items: center;
  align-items: center;
  gap: clamp(16px, 2.2%, 30px);
  padding: clamp(14px, 2.4%, 26px) clamp(18px, 3vw, 40px);
  visibility: hidden;
  animation: ws-visible 18s linear infinite;
}
.ws-scene:nth-child(2) { animation-delay: 6s; }
.ws-scene:nth-child(3) { animation-delay: 12s; }
.ws-scene:nth-child(2) .ws-shot,
.ws-scene:nth-child(2) .ws-anno { animation-delay: 6s; }
.ws-scene:nth-child(3) .ws-shot,
.ws-scene:nth-child(3) .ws-anno { animation-delay: 12s; }

@keyframes ws-visible {
  0%, 33.3% { visibility: visible; }
  33.4%, 100% { visibility: hidden; }
}

/* the screen: whole capture, never cropped, no extra stroke */
.ws-shot {
  grid-area: 2 / 2;
  width: auto;
  height: auto;
  max-width: 84cqw;
  max-height: 84cqh;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  align-self: center;
  justify-self: center;
  border-radius: 20px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  box-shadow:
    0 8px 18px rgb(23 33 61 / 0.16),
    0 22px 44px rgb(23 33 61 / 0.14);
  opacity: 0;
  animation: ws-pop 18s cubic-bezier(0.22, 1, 0.32, 1) infinite;
}

/* playful, but quick: in by 1s, out in 0.5s, ~7.5s of reading */
@keyframes ws-pop {
  0% { opacity: 0; transform: scale(0.9) rotate(3deg) translateY(12px); }
  1.6% { opacity: 1; }
  2.6% { transform: scale(1.015) rotate(-1.4deg) translateY(-4px); }
  4% { transform: scale(1) rotate(-0.7deg) translateY(0); }
  31.4% { opacity: 1; transform: scale(1) rotate(-0.7deg) translateY(0); }
  33.3% { opacity: 0; transform: scale(0.96) rotate(-4deg) translateY(12px); }
  33.4%, 100% { opacity: 0; transform: scale(0.9) rotate(3deg) translateY(12px); }
}

/* handwritten note — always in its own band, never over the screen, one colour */
.ws-anno {
  grid-area: 1 / 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 88%;
  font-family: "Architects Daughter", "Patrick Hand", "Bradley Hand", cursive;
  font-size: clamp(15.5px, 1.1vw, 20px);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  color: #1b2438;
  will-change: transform, opacity;
  backface-visibility: hidden;
  opacity: 0;
  animation: ws-note 18s cubic-bezier(0.22, 1, 0.32, 1) infinite;
}

@keyframes ws-note {
  0%, 1.2% { opacity: 0; transform: translateY(9px) rotate(-4deg) scale(0.92); }
  3.4% { opacity: 1; transform: translateY(0) rotate(-1.8deg) scale(1.03); }
  4.8% { transform: translateY(0) rotate(-1.4deg) scale(1); }
  31.4% { opacity: 1; transform: translateY(0) rotate(-1.4deg) scale(1); }
  33% { opacity: 0; transform: translateY(-6px) rotate(-5deg) scale(0.96); }
  100% { opacity: 0; transform: translateY(9px) rotate(-4deg) scale(0.92); }
}

/* room for the note is taken out of the screen's own box, so the group stays centred */
.ws-scene .ws-shot { max-height: 72cqh; }

/* the note sits in a band right next to the screen */
.ws-anno.pos-t { grid-area: 1 / 2; align-items: flex-end; }
.ws-anno.pos-b { grid-area: 3 / 2; align-items: flex-start; }


.ws-arrow {
  align-self: flex-end;
  width: clamp(24px, 2vw, 34px);
  opacity: 0.66;
  filter: brightness(0) saturate(100%) invert(11%) sepia(18%) saturate(1400%) hue-rotate(191deg);
}
/* each arrow points from its note toward the screen (assets already face that way) */
.pos-t .ws-arrow { align-self: flex-end; transform: rotate(-4deg); }
.pos-b .ws-arrow { align-self: flex-start; transform: rotate(4deg); }


/* key word in a title: marker underline */
.work-info h3 .mk-off {
  font-style: inherit;
  white-space: nowrap;
  background-image: linear-gradient(180deg, rgb(238 106 46 / 0.95), rgb(238 106 46 / 0.95));
  background-repeat: no-repeat;
  background-size: 100% 0.1em;
  background-position: 0 0.93em;
}

.work-media-tag {
  display: none;
}

/* ---------- one title size for every case file ---------- */
.work-info h3.work-title {
  font-size: clamp(40px, 4.3vw, 82px);
  line-height: 0.9;
  max-width: 20ch;
}

/* ---------- title reveal ---------- */
.work-info h3 {
  clip-path: inset(0 0 105% 0);
  transform: translateY(10px);
  transition: clip-path 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card.is-seen .work-info h3 {
  clip-path: inset(0 0 -10% 0);
  transform: none;
}

/* ---------- idle nudge on the CTA ---------- */
.work-link.is-nudge {
  animation: wl-nudge 1.5s cubic-bezier(0.3, 1.2, 0.4, 1) infinite;
}
.work-link.is-nudge .work-arrow {
  animation: wl-arrow 1.5s cubic-bezier(0.3, 1.2, 0.4, 1) infinite;
}
@keyframes wl-nudge {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-1.2deg); }
}
@keyframes wl-arrow {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(5px); }
}

/* narrow / stacked layout: the media box follows its own ratio, note stays above */
@media (max-width: 1080px) {
  .work-media.has-scenes {
    min-height: 0;
    max-height: none;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .ws-scene {
    padding: clamp(12px, 2vw, 20px);
    gap: 16px;
  }
  /* stacked: note always under the screen, centred */
  .ws-scene .ws-shot {
    max-width: 88cqw;
    max-height: 74cqh;
  }
  .ws-anno.pos-t, .ws-anno.pos-b {
    grid-area: 1 / 2;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    text-align: center;
  }
  .ws-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-scene, .ws-shot, .ws-anno,
  .work-link.is-nudge,
  .work-link.is-nudge .work-arrow { animation: none; }
  .ws-scene:first-child { visibility: visible; }
  .ws-scene:first-child .ws-shot,
  .ws-scene:first-child .ws-anno { opacity: 1; transform: none; }
  .work-info h3 { clip-path: none; transform: none; }
}