/* Client Showcase as a perspective tunnel (homepage section#work).
   Fonts and colour tokens come from styles.css; nothing here redefines them.
   Progressive enhancement: the base rules are a calm responsive grid of the
   eight cards (no JS, reduced motion, or before tunnel.js runs). tunnel.js adds
   .is-live, which turns the same markup into the sticky 3D flight. */

.work { padding-top: 0; }
.tunnel {
  --t-ease: cubic-bezier(.2, .8, .2, 1);
  --t-spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
}
.tunnel .mono { letter-spacing: .14em; }

/* ---- base: the grid ------------------------------------------------------ */
.tunnel__sticky { position: relative; padding: 96px 16px 64px; }
.tunnel__dots, .tunnel__glow, .tunnel__prompt { display: none; }

.tunnel__title {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 36rem; margin: 0 auto 40px; padding: 0 24px; pointer-events: none;
}
.tunnel__h {
  margin: 0;
  font-family: var(--font-d);
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  font-weight: 800;
  font-stretch: 78%;
  line-height: .86;
  letter-spacing: -.035em;
  color: var(--ink);
}
.tunnel__lede { margin: 18px 0 0; max-width: 30ch; font-size: clamp(.95rem, 1.6vw, 1.05rem); line-height: normal; color: var(--ink-soft); }

.tunnel__space {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px; max-width: 1240px; margin: 0 auto; padding: 0; list-style: none;
}
.t-card { position: relative; aspect-ratio: 5 / 4; }
.t-card__link {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden;
  background: var(--bone-2);
  color: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px oklch(0.205 0.014 56 / .1), 0 26px 50px -18px oklch(0.205 0.014 56 / .45);
  transition: box-shadow .45s var(--t-ease), transform .55s var(--t-spring);
  -webkit-tap-highlight-color: transparent;
}
.t-card__link video, .t-card__link img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--t-spring);
}
.t-card__link img { z-index: 1; transition: transform .9s var(--t-spring), opacity .4s var(--t-ease); }
.t-card[data-playing] .t-card__link img { opacity: 0; }
.t-card__shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgb(12 9 6 / .82) 0%, rgb(12 9 6 / .18) 42%, transparent 66%);
}
/* a card whose site has its own big headline where the caption sits: press
   that text back so the project name reads first */
.t-card--busy .t-card__shade {
  background: linear-gradient(to top, rgb(12 9 6 / .95) 0%, rgb(12 9 6 / .9) 30%, rgb(12 9 6 / .55) 52%, transparent 74%);
}
.t-card__cap {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
}
.t-card__name { font-family: var(--font-d); font-size: clamp(15px, 1.4vw, 19px); font-weight: 650; letter-spacing: -.01em; line-height: 1.1; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.t-card__dom { font-family: var(--font-m); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .86); }

@media (hover: hover) and (pointer: fine) {
  .t-card__link:hover { box-shadow: 0 0 0 2px var(--brand), 0 30px 60px -18px color-mix(in oklch, var(--brand) 55%, transparent); }
  .t-card__link:hover video, .t-card__link:hover img { transform: scale(1.06); }
}
.t-card__link:active { transform: scale(.97); transition-duration: .12s; }
.t-card__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---- live: the flight ---------------------------------------------------- */
.tunnel.is-live { height: 420vh; height: 420svh; }
.tunnel.is-live .tunnel__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding: 0;
  /* clip, unlike hidden, is not a scroll container: focusing a far card can
     never scroll the stage sideways, and the page cannot pan past it */
  overflow: hidden; overflow: clip;
  display: grid; place-items: center;
  perspective: 1200px; perspective-origin: 50% 50%;
  isolation: isolate;
}
@media (max-width: 767px) { .tunnel.is-live .tunnel__sticky { perspective: 900px; } }

.tunnel.is-live .tunnel__dots {
  display: block; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: radial-gradient(oklch(0.205 0.014 56 / .16) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
}
.tunnel.is-live .tunnel__glow {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgb(247 126 45 / .16) 0%, transparent 62%);
}
.tunnel.is-live .tunnel__title { margin: 0; will-change: transform, opacity; }
/* tall screens (1440p and up): the title grows with height so it does not
   shrink to a caption between the cards; at 900 tall these equal the base */
.tunnel.is-live .tunnel__h { font-size: clamp(3.4rem, 11vw, max(7.5rem, 11.5vh)); }
.tunnel.is-live .tunnel__lede { font-size: clamp(.95rem, 1.6vw, max(1.05rem, 1.6vh)); }
.tunnel.is-live 
.tunnel.is-live .tunnel__prompt {
  position: absolute; bottom: 28px; left: 0; right: 0; z-index: 20; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-soft); pointer-events: none;
}
/* phones: sit above the floating Book a Call pill (0.75rem + 3rem + the inset) */
@media (max-width: 767px) {
  .tunnel.is-live .tunnel__prompt { bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem); }
}
.tunnel__prompt svg { animation: t-nudge 1.8s var(--t-ease) infinite; }
@keyframes t-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.tunnel.is-live .tunnel__space {
  display: block; position: absolute; inset: 0; max-width: none; margin: 0;
  transform-style: preserve-3d; pointer-events: none;
}
.tunnel.is-live .t-card {
  position: absolute; left: 50%; top: 50%;
  width: var(--w, 300px);
  will-change: transform, opacity;
  pointer-events: auto;
  opacity: 0;
}

/* ---- reduced motion: no flight, the calm grid of the same eight ---------- */
@media (prefers-reduced-motion: reduce) {
  .tunnel.is-live { height: auto; }
  .tunnel.is-live .tunnel__sticky { position: relative; height: auto; overflow: visible; perspective: none; display: block; padding: 96px 16px 64px; }
  .tunnel.is-live .tunnel__dots, .tunnel.is-live .tunnel__glow, .tunnel.is-live .tunnel__prompt { display: none; }
  .tunnel.is-live .tunnel__title { margin: 0 auto 40px; transform: none !important; opacity: 1 !important; }
  .tunnel.is-live .tunnel__space { position: static; display: grid; max-width: 1240px; margin: 0 auto; transform-style: flat; }
  .tunnel.is-live .t-card { position: relative; left: auto; top: auto; width: auto; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .t-card__link, .t-card__link video, .t-card__link img, .tunnel__prompt svg { transition: none; animation: none; }
}