/* ============================================================================
   bto-work-deck.css — THE FLOATING CARD DECK, moved from the home page to
   work.html, second position (2026-08-09).

   A vanilla-CSS port of bto-spylt/src/panel3.css (home's "THE WORK" pinned
   deck — 7 raked vertical cards dealing in over a giant THE/WORK headline).
   The React build stays on disk untouched (HomeWorkRail.jsx / panel3.css);
   this is an independent copy for the static stack, same shape as
   bto-work-screen.css was for HomeBrands.jsx. Renamed `.p3-*` -> `.wkd-*`
   throughout so nothing here can collide with the React build if it is ever
   read alongside this file, and so the class list search-and-replaces cleanly
   with no leftover panel3 numbering.

   Values are copied 1:1 from panel3.css — this is a MOVE, not a redesign.
   Its own §-numbers and reasoning are preserved in the comments below; read
   panel3.css first if a number here looks unexplained.
   ========================================================================== */

.wkd-panel {
  background-color: #F0EEEB;
  position: relative;
  width: 100%;
  height: 120dvh;
  overflow: hidden;
  --wkd-card-w: clamp(232px, 22.2vw, 384px);
  --wkd-lap: calc(var(--wkd-card-w) * 0.4583);
}

.wkd-panel .wkd-titles {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wkd-panel .wkd-titles h2 {
  margin: 0;
  text-transform: uppercase;
  font-size: 20.5vw;
  line-height: 105%;
  letter-spacing: -0.4vw;
  font-weight: 700;
  font-family: "Antonio", "Archivo", sans-serif;
  white-space: nowrap;
}
.wkd-panel .wkd-t1 { color: #13181B; }
.wkd-panel .wkd-t2 { color: #FFBF65; }

.wkd-panel .wkd-pin-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  padding-inline-start: calc(var(--wkd-lap) + 32px);
  top: 10%;
  height: 100vh;
}

.wkd-panel .wkd-card {
  width: var(--wkd-card-w);
  flex: none;
  border-radius: 2vw;
  border: 0.5vw solid #F0EEEB;
  margin-inline-start: calc(var(--wkd-lap) * -1);
  overflow: hidden;
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  text-decoration: none;
  color: inherit;
}
.wkd-panel .wkd-card > video,
.wkd-panel .wkd-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wkd-panel .wkd-card > img { position: absolute; inset: 0; z-index: 0; }
.wkd-panel .wkd-card > video {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transition: opacity .3s ease;
}
.wkd-panel .wkd-card > video.is-on { opacity: 1; }

/* the seven-card fan, verbatim from HomeWorkRail's card-index map
   (rotation[i] / translation[i]) — literal per-card classes, since this page
   has no Tailwind JIT to generate them from a data attribute. */
.wkd-card--1 { transform: translateY(-5%) rotateZ(-10deg); }
.wkd-card--2 { transform: rotateZ(4deg); }
.wkd-card--3 { transform: rotateZ(-4deg); }
.wkd-card--4 { transform: translateY(5%) rotateZ(4deg); }
.wkd-card--5 { transform: rotateZ(-10deg); }
.wkd-card--6 { transform: translateY(5%) rotateZ(4deg); }
.wkd-card--7 { transform: translateY(10%) rotateZ(-3deg); }

/* below 1025px / reduced motion — native scroll-snap shelf, panel3.css §5
   verbatim (renamed only) */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .wkd-panel { height: auto; min-height: 100dvh; padding-bottom: clamp(32px, 6vh, 64px); }
  .wkd-panel .wkd-titles {
    position: relative;
    height: auto;
    align-items: flex-start;
    padding: clamp(88px, 12vh, 124px) clamp(20px, 2.4vw, 40px) 0;
  }
  .wkd-panel .wkd-titles h2 { font-size: clamp(48px, 13vw, 140px); margin-left: 0; }
  .wkd-panel .wkd-pin-box {
    position: relative;
    bottom: auto;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding-inline-start: clamp(20px, 2.4vw, 40px);
    margin-top: clamp(24px, 4vh, 48px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wkd-panel .wkd-pin-box::-webkit-scrollbar { display: none; }
  .wkd-panel .wkd-card {
    margin-inline-start: 0;
    margin-inline-end: 12px;
    transform: none !important;
    scroll-snap-align: start;
  }
}