/* ═══════════════════════════════════════════════════════════════
   work.css — All Work page (/work/index.html)

   3D barrel-roll carousel. Cards live on the surface of a
   horizontal cylinder behind the viewport. JS in js/work.js
   positions each card per frame; this stylesheet is the static
   chrome + the per-card layout.

   Tokens used from style.css :root
     --dark, --text, --text-secondary, --accent, --ease,
     --blue-glow
   ═══════════════════════════════════════════════════════════════ */

/* Lock body scroll — Observer handles all carousel input */
body.work-page {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}


/* ── Main viewport ────────────────────────────────────────────── */
.wp {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: var(--dark);
  overflow: hidden;
}


/* ── Carousel — scroll-space container (heightless; visuals come
       from .stage which is position:fixed). ─────────────────── */
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}


/* ── Stage — fixed at viewport, holds all cards. Perspective gives
       translateZ its natural foreshortening: cards further back
       become smaller automatically. The "barrel" is the circular
       path the cards' positions follow. ──────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  perspective: 450px;
  perspective-origin: 50% 50%;
}


/* ── Card ────────────────────────────────────────────────────── */
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60vw;
  aspect-ratio: 24 / 9;
  max-width: 1280px;
  transform-origin: center center;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  will-change: transform, opacity;
  background: #0a0c14;
  box-shadow:
    0 70px 130px -30px rgba(0,0,0,0.78),
    0 30px 70px -40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}


/* ── Card background — static image variant ─────────────────── */
.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  will-change: transform;
}

/* ── Card background — video variant ────────────────────────── */
.card-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Poster image overlay for video cards. Sits ABOVE the video so
   initial state shows the static frame. When the video actually
   starts playing, JS adds .is-playing to the card and the poster
   crossfades out, revealing the live frame underneath. */
.card-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
  will-change: transform;
}
.card.is-playing .card-poster { opacity: 0; }


/* ── Vignette overlay (every card) ──────────────────────────── */
.card-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 90%),
    linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 2;
}


/* ── Card content — pinned to bottom-left ─────────────────────
   Padding grows on the focused card for breathing room. */
.card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 36px 44px;
  z-index: 3;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  transition: padding 0.5s var(--ease);
}
.card.is-focused .card-content { padding: 44px 56px; }


/* ── Card number ("01 / 07") — accent kicker bar reveals when
       the card becomes focused. Keeps text white at all times for
       legibility regardless of background. ──────────────────── */
.card-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.7);
  margin: 0 0 12px;
  position: relative;
  padding-top: 0;
  transition: color 0.4s, font-size 0.4s, letter-spacing 0.4s, padding-top 0.4s;
}
.card-num::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--blue-glow);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.card.is-focused .card-num {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.26em;
  padding-top: 12px;
}
.card.is-focused .card-num::before {
  opacity: 1;
  transform: scaleX(1);
}


/* ── Card tagline ──────────────────────────────────────────── */
.card-tagline {
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255,255,255,0.85);
  margin: 0;
  font-weight: 400;
}


/* ── Card logo sizing — uniformity across very different aspect
       ratios. Wide wordmarks hit max-width before max-height; tall
       crests use a different allowance. ─────────────────────── */
.card-logo {
  display: block;
  height: auto;
  width: auto;
  max-height: clamp(34px, 3.4vw, 46px);
  max-width: clamp(160px, 14vw, 220px);
  margin: 0 0 10px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
.card-logo--narrow {
  /* Source is a tight-cropped thin wordmark (SMEG SVG). */
  max-height: clamp(22px, 2.0vw, 30px);
  max-width: clamp(120px, 11vw, 160px);
}
.card-logo--padded {
  /* Source PNG has heavy whitespace around the actual mark
     (Smart, Porsche, Citroën — 16:9 or 1:1 canvases with the
     mark at ~50–60% of the area). */
  max-height: clamp(56px, 5.5vw, 74px);
  max-width:  clamp(160px, 14vw, 220px);
}
.card-logo--invert {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}


/* ── CTA pill — only shown on focused card ─────────────────── */
.card-cta {
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.3);
  z-index: 4;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.card.is-focused .card-cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ── Side progress nav (left edge) ─────────────────────────── */
.wp-progress {
  position: fixed;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 60;
}
.wp-seg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  transition: color 0.3s;
}
.wp-seg::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255,255,255,0.35);
  transition: width 0.4s var(--ease), background 0.3s, box-shadow 0.3s;
}
.wp-seg__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.38;
  transform: translateX(0);
  transition: opacity 0.3s;
  white-space: nowrap;
}
.wp-seg:hover                   { color: #fff; }
.wp-seg:hover::before           { background: var(--accent); width: 32px; }
.wp-seg:hover .wp-seg__label    { opacity: 1; }
.wp-seg.is-active               { color: #fff; }
.wp-seg.is-active::before       { background: var(--accent); width: 44px; box-shadow: 0 0 12px var(--blue-glow); }
.wp-seg.is-active .wp-seg__label { opacity: 1; }
.wp-seg.is-active.has-pulsed::before { animation: segPulse 0.6s ease-out; }
@keyframes segPulse {
  0%   { width: 44px; }
  40%  { width: 72px; }
  100% { width: 44px; }
}


/* ── First-load hint ───────────────────────────────────────── */
.wp-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  z-index: 50;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: wpHintIn 0.8s 0.4s ease-out forwards, wpHintBob 2s 1.4s ease-in-out infinite;
}
.wp-hint__arrows {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: 8px;
  letter-spacing: 0;
}
.wp-hint.is-dismissed {
  animation: wpHintOut 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes wpHintIn  { 0% { opacity: 0; transform: translate(-50%, 8px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes wpHintBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@keyframes wpHintOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -12px); } }


/* Active-project name — only shown in the compact bottom nav. */
.wp-progress__name { display: none; }


/* ── Compact layout (tablet + mobile) ───────────────────────────
   Left rail → centred horizontal dash row at the bottom; focused card
   enlarged so the barrel fills the viewport with only a slim peek of the
   neighbouring cards. Card is sized by width in portrait, by height in
   landscape; the barrel radius factor in work.js is matched per-orientation. */
@media (max-width: 1024px) {
  .wp-progress {
    top: auto;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 9px;
  }
  .wp-seg { padding: 8px 3px; gap: 0; }
  .wp-seg::before           { width: 18px; }
  .wp-seg.is-active::before { width: 30px; }
  .wp-seg__label { display: none; }
  .wp-progress__name {
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 9px;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
  }
  /* Keep the first-load hint clear of the new bottom nav. */
  .wp-hint { bottom: 80px; }
  /* Glow is a wide cinematic effect designed for desktop — disable on mobile
     to save filter: blur(80px) GPU cost and the per-frame canvas draw loop. */
  #wp-glow { display: none; }
}

/* Portrait compact (mobile + tablet portrait): card sized by width, but
   capped by height (46vh ≈ a 4/5 card ~58vh tall) so on taller portrait
   tablets it doesn't outgrow the barrel and swallow the neighbour peek. */
@media (max-width: 1024px) and (orientation: portrait) {
  .card { width: min(82vw, 42vh); max-width: none; aspect-ratio: 4 / 5; }

  /* Per-card bg reframe for portrait crop — product centred in the 4/5 frame. */
  .card[data-slug="comet700"] .card-bg { background-position: 72% center; }
  .card[data-slug="smart-3"]  .card-bg { background-position: 62% center; }
}

/* Landscape compact (tablet landscape): card sized by height. */
@media (max-width: 1024px) and (orientation: landscape) {
  .card { width: auto; height: 60vh; max-width: 90vw; aspect-ratio: 16 / 10; }
}


/* ── Ambient glow — canvas sized to match the focused card, positioned
   at card-centre. CSS blur bleeds the card's actual image content
   outward past the card edges, mimicking YouTube's ambient mode.
   brightness(2.5) lifts dark footage (e.g. Smart #3) to a visible level.
   opacity starts at 0; work.js fades it in once the first frame is drawn. */
#wp-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  max-width: 1280px;
  aspect-ratio: 24 / 9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  filter: blur(80px) brightness(2.5);
}


/* ── Reduced motion ─────────────────────────────────────────
   JS in work.js drives the static-fan layout in RM mode: same
   barrel transforms as normal, no smooth animation, wheel/touch
   snap one card per gesture. No CSS overrides needed — the JS
   path computes the layout correctly. */