/* ==========================================================================
   dvx-gallery.css
   Two 3D project galleries (Cylinder + Coverflow) for the Devnex React SPA.

   - every selector is prefixed .dvx3d-  (no Tailwind / template collisions)
   - LIGHT theme: reuses the template tokens from assets/index-BnqwISra.css
     (--background / --card / --border / --foreground / --muted-foreground /
      --primary / --accent / --section-bg / --shadow-card / --shadow-elevated)
   - zero external dependencies. No GSAP, no ScrollTrigger.
   - pinning is CSS position:sticky, driven by a plain scroll listener.
   ========================================================================== */

/* --------------------------------------------------------------------------
   position:sticky needs a non-scroll-container ancestry. The React section
   carries Tailwind overflow-hidden, which silently kills sticky.
   overflow:clip clips identically but does NOT create a scroll container.
   (JS also patches the ancestor chain inline, for browsers without :has().)
   -------------------------------------------------------------------------- */
#projects:has(.dvx3d-root) { overflow: clip; }

/* ==========================  SHARED TOKENS  ============================== */

.dvx3d-root {
  --dvx3d-page:      hsl(var(--background, 0 0% 100%));
  --dvx3d-panel:     hsl(var(--section-bg, 210 40% 98%));
  --dvx3d-surface:   hsl(var(--card, 0 0% 100%));
  --dvx3d-fg:        hsl(var(--foreground, 221 39% 11%));
  --dvx3d-muted:     hsl(var(--muted-foreground, 215 16% 47%));
  --dvx3d-line:      hsl(var(--border, 214 32% 91%));
  --dvx3d-primary:   hsl(var(--primary, 221 83% 53%));
  --dvx3d-accent:    hsl(var(--accent, 243 75% 59%));
  --dvx3d-grad:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #a855f7 100%);
  --dvx3d-shadow:    var(--shadow-card, 0 4px 24px hsl(221 39% 11% / .07));
  --dvx3d-shadow-lg: var(--shadow-elevated, 0 20px 60px hsl(221 39% 11% / .12));
  --dvx3d-ink:       #0a0f1e;
  --dvx3d-ease:      cubic-bezier(.19, 1, .22, 1);
  --dvx3d-nav:       0px;

  position: relative;
  z-index: 1;
  display: block;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--dvx3d-fg);
  -webkit-font-smoothing: antialiased;
}

.dvx3d-root *, .dvx3d-root *::before, .dvx3d-root *::after { box-sizing: border-box; }

.dvx3d-live {
  position: absolute; width: 1px; height: 1px; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================  TOOLBAR  ================================== */

.dvx3d-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}

.dvx3d-switch {
  display: inline-flex;
  align-items: stretch;
  padding: 4px;
  background: hsl(var(--card, 0 0% 100%) / .82);
  border: 1px solid var(--dvx3d-line);
  box-shadow: var(--dvx3d-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dvx3d-opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--dvx3d-muted);
  transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}

.dvx3d-opt svg { width: 16px; height: 16px; display: block; flex: none; }
.dvx3d-opt:hover { color: var(--dvx3d-fg); }
.dvx3d-opt:focus-visible { outline: 2px solid var(--dvx3d-primary); outline-offset: -2px; }

.dvx3d-opt.is-on {
  background: var(--dvx3d-grad);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px hsl(243 75% 59% / .28);
}

.dvx3d-toolnote {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground, 215 16% 47%) / .8);
}

/* ======================  TRACK / STICKY PIN  ============================= */

.dvx3d-track { position: relative; }
.dvx3d-pin   { position: relative; }

.dvx3d-view.is-pinned > .dvx3d-track > .dvx3d-pin {
  position: sticky;
  top: var(--dvx3d-sticktop, calc(var(--dvx3d-nav, 0px) + 12px));
}

/* ==========================================================================
   VIEW 1 - CYLINDER  (12 cards on a ring, 30deg apart, scroll sweeps 330deg)
   ========================================================================== */

.dvx3d-cyl {
  --dvx3d-w: 344px;
  --dvx3d-h: 383px;
  --dvx3d-r: 783px;
  --dvx3d-stageh: 475px;
}

.dvx3d-cyl-track { height: auto; }
.dvx3d-cyl.is-pinned .dvx3d-cyl-track { height: var(--dvx3d-trackh, auto); }

.dvx3d-stage {
  position: relative;
  height: var(--dvx3d-stageh);
  perspective: 2200px;
  perspective-origin: 50% 46%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.dvx3d-stage.is-dragging { cursor: grabbing; }
.dvx3d-stage:focus-visible {
  outline: 2px solid var(--dvx3d-primary);
  outline-offset: 10px;
}

/* soft brand wash so the drum sits IN the page rather than on it */
.dvx3d-glow {
  position: absolute; inset: -12% -22% -4%;
  pointer-events: none;
  background:
    radial-gradient(56% 52% at 50% 42%, hsl(221 83% 53% / .085) 0%, hsl(221 83% 53% / 0) 66%),
    radial-gradient(44% 20% at 50% 90%, hsl(243 75% 59% / .10) 0%, hsl(243 75% 59% / 0) 72%);
}

/* edge vignettes: side cards dissolve into the page instead of hard-clipping */
.dvx3d-stage::before,
.dvx3d-stage::after {
  content: ""; position: absolute; top: -10%; bottom: -6%; width: 15%;
  pointer-events: none; z-index: 5;
}
.dvx3d-stage::before { left: -1px;  background: linear-gradient(90deg,  var(--dvx3d-page) 6%, transparent); }
.dvx3d-stage::after  { right: -1px; background: linear-gradient(270deg, var(--dvx3d-page) 6%, transparent); }

.dvx3d-scene { position: absolute; inset: 0; transform-style: preserve-3d; }

.dvx3d-ring {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--dvx3d-r) * -1)) rotateY(0deg);
  will-change: transform;
}

.dvx3d-card {
  --s: 1; --o: 1; --g: 0;
  position: absolute;
  left: 50%; top: 50%;
  width: var(--dvx3d-w);
  height: var(--dvx3d-h);
  margin-left: calc(var(--dvx3d-w) / -2);
  margin-top: calc(var(--dvx3d-h) / -2);
  transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--dvx3d-r)) scale(var(--s));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  text-decoration: none;
  color: inherit;
  display: block;
  outline: none;
}

.dvx3d-face {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dvx3d-surface);
  border: 1px solid var(--dvx3d-line);
  opacity: var(--o);
  box-shadow: var(--dvx3d-shadow);
  transition: border-color .45s var(--dvx3d-ease), box-shadow .45s var(--dvx3d-ease);
}

/* depth veil: on a light page distance reads as "fades toward the paper" */
.dvx3d-veil {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: var(--dvx3d-page);
  opacity: calc(var(--g) * .55);
}

.dvx3d-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex: none;
  overflow: hidden;
  background: var(--dvx3d-panel);
  display: block;
  border-bottom: 1px solid hsl(var(--border, 214 32% 91%) / .7);
}

.dvx3d-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  opacity: 0;
  transition: opacity .45s ease;
}
.dvx3d-shot.is-on { opacity: 1; }

/* the never-broken fallback tile, always sitting UNDER the screenshot */
.dvx3d-tile {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 9px;
  text-align: center; padding: 18px;
  background:
    radial-gradient(120% 92% at 22% 0%, var(--tint, hsl(243 75% 59% / .16)) 0%, transparent 64%),
    linear-gradient(135deg, hsl(210 40% 98%) 0%, hsl(0 0% 100%) 58%, hsl(221 83% 97%) 100%);
}
.dvx3d-tile::after {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    linear-gradient(hsl(221 39% 11% / .035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(221 39% 11% / .035) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 18%, transparent 76%);
          mask-image: radial-gradient(120% 100% at 50% 50%, #000 18%, transparent 76%);
}
.dvx3d-tile-mark {
  position: relative;
  font-family: Poppins, sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase;
  background: var(--dvx3d-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: block;
}
.dvx3d-tile-name {
  position: relative;
  font-family: Poppins, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -.015em;
  color: var(--dvx3d-fg); max-width: 16ch; margin: 0 auto;
  display: block; line-height: 1.32;
}

.dvx3d-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 11px;
  font-family: Poppins, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--dvx3d-accent);
  background: hsl(0 0% 100% / .86);
  border: 1px solid hsl(243 75% 59% / .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dvx3d-meta { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }

.dvx3d-title {
  font-family: Poppins, sans-serif;
  color: var(--dvx3d-fg); font-size: 18px; line-height: 1.22;
  font-weight: 600; letter-spacing: -.02em; margin: 0; display: block;
}
.dvx3d-text {
  color: var(--dvx3d-muted); font-size: 12.8px; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dvx3d-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dvx3d-tag {
  padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--dvx3d-ink);
  background: hsl(221 83% 53% / .08);
  border: 1px solid hsl(221 83% 53% / .18);
}
.dvx3d-cta {
  margin-top: auto; padding-top: 4px;
  font-family: Poppins, sans-serif;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--dvx3d-primary);
  display: inline-flex; align-items: center; gap: 7px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--dvx3d-ease), transform .45s var(--dvx3d-ease);
}
.dvx3d-cta span:last-child { transition: transform .3s var(--dvx3d-ease); }

.dvx3d-card.is-front .dvx3d-face {
  border-color: hsl(221 83% 53% / .32);
  box-shadow: var(--dvx3d-shadow-lg), 0 0 0 1px hsl(221 83% 53% / .06);
}
.dvx3d-card.is-front .dvx3d-cta { opacity: 1; transform: none; }
.dvx3d-card.is-front:hover .dvx3d-cta span:last-child { transform: translate(3px, -3px); }
.dvx3d-card:focus-visible .dvx3d-face { border-color: var(--dvx3d-primary); box-shadow: var(--dvx3d-shadow-lg); }

/* no url => no link affordance at all (applies to cylinder AND flat cards) */
.dvx3d-card.is-nolink { cursor: default; }
.dvx3d-root .is-nolink > .dvx3d-meta > .dvx3d-cta,
.dvx3d-root .is-nolink .dvx3d-face .dvx3d-cta {
  letter-spacing: .04em; text-transform: uppercase;
  color: hsl(var(--muted-foreground, 215 16% 47%) / .85); font-weight: 600;
}

/* ---------------------------- controls ---------------------------------- */

.dvx3d-controls {
  position: relative; z-index: 6;
  margin-top: 30px;
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.dvx3d-arrow {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  background: var(--dvx3d-surface); color: var(--dvx3d-fg);
  border: 1px solid var(--dvx3d-line);
  box-shadow: var(--dvx3d-shadow);
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--dvx3d-ease);
}
.dvx3d-arrow:hover { background: var(--dvx3d-grad); color: #fff; border-color: transparent; transform: scale(1.06); }
.dvx3d-arrow:active { transform: scale(.94); }
.dvx3d-arrow svg { width: 15px; height: 15px; display: block; }

.dvx3d-dots { display: flex; align-items: center; gap: 9px; }
.dvx3d-tick {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: hsl(221 39% 11% / .18);
  transition: background .35s ease, transform .35s var(--dvx3d-ease);
}
.dvx3d-tick:hover { background: hsl(221 83% 53% / .5); }
.dvx3d-tick.is-on { background: var(--dvx3d-primary); transform: scale(1.6); }

.dvx3d-readout {
  position: relative; z-index: 6;
  margin-top: 18px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dvx3d-muted);
}
.dvx3d-count { color: var(--dvx3d-fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.dvx3d-rail { width: 148px; height: 2px; background: hsl(221 39% 11% / .1); position: relative; overflow: hidden; }
.dvx3d-rail i {
  position: absolute; inset: 0 auto 0 0; width: 8.3333%;
  background: var(--dvx3d-grad);
  transition: transform .5s var(--dvx3d-ease);
}

/* ==========================================================================
   VIEW 2 - COVERFLOW  (sticky stage, one card per scroll step, depth spring)
   ========================================================================== */

.dvx3d-cf { --dvx3d-cw: clamp(250px, 42vw, 560px); }

.dvx3d-cf.is-pinned .dvx3d-cf-track { height: var(--dvx3d-trackh, auto); }

.dvx3d-cf.is-pinned > .dvx3d-track > .dvx3d-pin {
  height: calc(100vh - var(--dvx3d-nav, 0px) - 40px);
  min-height: 500px;
  padding-bottom: 4px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.dvx3d-cf-viewport {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;
  min-height: 300px;
}

/* viewport too short to pin: the stack still flows, just unpinned */
.dvx3d-cf:not(.is-pinned) .dvx3d-cf-viewport { height: 62vh; min-height: 340px; margin-bottom: 20px; }
.dvx3d-cf:not(.is-pinned) .dvx3d-cf-meta { padding-bottom: 8px; }

.dvx3d-cf-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.dvx3d-cf-card {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;                 /* only the frame is clickable */
  transform-style: preserve-3d;
  will-change: transform, opacity;
  text-decoration: none;
  color: inherit;
  backface-visibility: hidden;
}

.dvx3d-frame {
  pointer-events: auto;
  position: relative;
  width: var(--dvx3d-cw);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--dvx3d-surface);
  border: 1px solid var(--dvx3d-line);
  box-shadow: 0 34px 70px -34px hsl(221 39% 11% / .45), var(--dvx3d-shadow);
  cursor: pointer;
  transition: border-color .45s ease, box-shadow .45s ease;
}
.dvx3d-cf-card.is-nolink .dvx3d-frame { cursor: default; }

.dvx3d-cf-card.is-active .dvx3d-frame {
  border-color: hsl(243 75% 59% / .35);
  box-shadow:
    0 54px 100px -40px hsl(221 39% 11% / .5),
    0 0 60px -26px hsl(243 75% 59% / .55);
}
.dvx3d-cf-card.is-active .dvx3d-frame:hover { border-color: hsl(271 91% 65% / .55); }

.dvx3d-cf-shotwrap { position: absolute; inset: 0; overflow: hidden; }
.dvx3d-cf-shot {
  position: absolute; top: -3%; left: -3%; width: 106%; height: 106%;
  object-fit: cover; object-position: 50% 50%;
  display: block; will-change: transform;
  opacity: 0; transition: opacity .45s ease;
}
.dvx3d-cf-shot.is-on { opacity: 1; }

/* aerial perspective on a light page = wash toward the paper colour */
.dvx3d-cf-shade {
  position: absolute; inset: 0;
  background: var(--dvx3d-page);
  opacity: 0; pointer-events: none;
}
.dvx3d-cf-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, hsl(0 0% 100% / .38) 0%, hsl(0 0% 100% / 0) 38%);
}

.dvx3d-cf-plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 16px 12px;
  display: flex; align-items: baseline; gap: 10px;
  background: linear-gradient(0deg, hsl(0 0% 100% / .94) 12%, hsl(0 0% 100% / 0) 100%);
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
}
.dvx3d-cf-card.is-active .dvx3d-cf-plate { opacity: 1; }
.dvx3d-cf-plate-num {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: var(--dvx3d-accent); font-variant-numeric: tabular-nums;
}
.dvx3d-cf-plate-title {
  font-family: Poppins, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -.015em;
  color: var(--dvx3d-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dvx3d-cf-hint {
  position: absolute; right: 2px; bottom: 2px;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: hsl(var(--muted-foreground, 215 16% 47%) / .6);
  pointer-events: none; transition: opacity .5s ease;
}

/* ------------------------- meta panel ----------------------------------- */

.dvx3d-cf-meta {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 40px;
  padding-top: clamp(12px, 2vh, 22px);
  border-top: 1px solid var(--dvx3d-line);
}
.dvx3d-cf-main { min-width: 0; max-width: 720px; }

.dvx3d-cf-cats {
  margin: 0 0 .5em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dvx3d-muted);
}
.dvx3d-cf-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dvx3d-accent); flex: none; }

.dvx3d-cf-title {
  font-family: Poppins, sans-serif;
  margin: 0 0 .32em;
  font-size: clamp(1.25rem, 2.4vw, 1.95rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.06;
  color: var(--dvx3d-fg);
}
.dvx3d-cf-text {
  margin: 0 0 .9em;
  font-size: .86rem; line-height: 1.58;
  color: var(--dvx3d-muted); max-width: 64ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.dvx3d-cf-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  border: 0;
  background: var(--dvx3d-grad);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: .8rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: none;
  box-shadow: 0 8px 24px hsl(243 75% 59% / .28);
  transition: transform .35s var(--dvx3d-ease), box-shadow .35s ease;
}
.dvx3d-cf-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px hsl(243 75% 59% / .38); }
.dvx3d-cf-cta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.dvx3d-cf-cta[hidden] { display: none; }

/* the no-url counterpart: a flat, non-interactive statement of fact */
.dvx3d-cf-nolink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px dashed var(--dvx3d-line);
  color: hsl(var(--muted-foreground, 215 16% 47%) / .9);
  font-family: Poppins, sans-serif;
  font-size: .76rem; font-weight: 500; letter-spacing: .04em;
}
.dvx3d-cf-nolink[hidden] { display: none; }

.dvx3d-cf-controls { display: flex; align-items: center; gap: 14px; }
.dvx3d-cf-nav {
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--dvx3d-line);
  background: var(--dvx3d-surface);
  color: var(--dvx3d-fg);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--dvx3d-shadow);
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.dvx3d-cf-nav:hover:not(:disabled) { background: var(--dvx3d-grad); color: #fff; border-color: transparent; }
.dvx3d-cf-nav:disabled { opacity: .3; cursor: default; }
.dvx3d-cf-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.dvx3d-cf-counter {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  color: var(--dvx3d-muted); font-variant-numeric: tabular-nums;
  min-width: 74px; text-align: center;
}
.dvx3d-cf-counter em { font-style: normal; color: var(--dvx3d-fg); }

.dvx3d-cf-rail { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; width: 100%; }
.dvx3d-cf-tick {
  flex: 1; height: 2px; border: 0; padding: 9px 0 0;
  background: transparent; cursor: pointer; position: relative;
}
.dvx3d-cf-tick::after {
  content: ""; display: block; height: 2px;
  background: hsl(221 39% 11% / .12);
  transition: background .45s ease, transform .45s var(--dvx3d-ease);
  transform-origin: center;
}
.dvx3d-cf-tick:hover::after { background: hsl(221 83% 53% / .4); }
.dvx3d-cf-tick.is-on::after { background: var(--dvx3d-primary); transform: scaleY(2.4); }

/* meta re-entry animation (replaces the GSAP tween, pure CSS) */
.dvx3d-cf-main.is-in .dvx3d-cf-title  { animation: dvx3d-rise .6s var(--dvx3d-ease) both; }
.dvx3d-cf-main.is-in .dvx3d-cf-cats   { animation: dvx3d-rise .5s var(--dvx3d-ease) .04s both; }
.dvx3d-cf-main.is-in .dvx3d-cf-text   { animation: dvx3d-rise .5s var(--dvx3d-ease) .08s both; }
.dvx3d-cf-main.is-in .dvx3d-cf-cta,
.dvx3d-cf-main.is-in .dvx3d-cf-nolink { animation: dvx3d-rise .5s var(--dvx3d-ease) .12s both; }

@keyframes dvx3d-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .dvx3d-cf-meta { grid-template-columns: 1fr; }
  .dvx3d-cf-controls { justify-content: space-between; width: 100%; }
  .dvx3d-cf-text { display: none; }
  .dvx3d-cf.is-pinned > .dvx3d-track > .dvx3d-pin { min-height: 470px; }
}

@media (max-width: 620px) {
  .dvx3d-toolbar { margin-bottom: 20px; }
  .dvx3d-opt { padding: 8px 14px; font-size: 12.5px; gap: 7px; }
  .dvx3d-controls { gap: 12px; margin-top: 24px; }
  .dvx3d-dots { gap: 7px; }
  .dvx3d-rail { width: 96px; }
  .dvx3d-readout { gap: 10px; font-size: 10px; letter-spacing: .1em; }
  .dvx3d-cf { --dvx3d-cw: clamp(210px, 74vw, 340px); }
  .dvx3d-cf-title { font-size: 1.15rem; }
  .dvx3d-cf-hint { display: none; }
  .dvx3d-badge { top: 9px; left: 9px; padding: 4px 9px; font-size: 9.5px; }
  .dvx3d-cf-cta, .dvx3d-cf-nolink { padding: 9px 15px; font-size: .72rem; }
}

/* ==========================================================================
   FLAT VIEW  -  prefers-reduced-motion fallback (no 3D, no pinning, no rAF)
   ========================================================================== */

.dvx3d-flat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.dvx3d-flat-card {
  display: flex; flex-direction: column;
  background: var(--dvx3d-surface);
  border: 1px solid var(--dvx3d-line);
  box-shadow: var(--dvx3d-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .3s ease, box-shadow .3s ease;
}
a.dvx3d-flat-card:hover { border-color: hsl(221 83% 53% / .3); box-shadow: var(--dvx3d-shadow-lg); }
.dvx3d-flat-card .dvx3d-thumb { aspect-ratio: 16 / 10; }
.dvx3d-flat-card .dvx3d-cta { opacity: 1; transform: none; }

@media (max-width: 480px) {
  .dvx3d-flat { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dvx3d-toolbar { display: none; }
  .dvx3d-root *, .dvx3d-root *::before, .dvx3d-root *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}