/* ============================================================
   COVERFLOW // case-study carousel
   Matches the existing case-study card treatment: sharp edges,
   dark fill behind the art, no accent colour. Vanilla CSS.
   ============================================================ */

.cvf{
  /* the ONE shared dimension. widths are whatever each image's shape gives.
     mobile-first: this is the phone value, scaled up in the queries below. */
  --cvf-h: clamp(96px, 26vw, 140px);
  width:100%;
  position:relative;
  font-family:var(--mono,'Space Mono',monospace);
}

.cvf-rel{position:relative;}

/* ---- title, above the deck ---- */
.cvf-head{
  min-height:2.4em;
  display:flex;align-items:flex-end;justify-content:center;
  text-align:center;
  padding:0 40px 2px;
}
.cvf-head-title{
  font-family:var(--display,'Archivo Black',sans-serif);
  font-size:clamp(13px,1.5vw,17px);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--paper,#f2f0ee);
}

.cvf-frame{
  overflow:hidden;
  padding:16px 0 18px;          /* keeps the shadows clear of the clip */
  outline:none;
  cursor:grab;
  touch-action:pan-y;           /* horizontal drag is ours, page keeps vertical */
}
.cvf-frame:active{cursor:grabbing;}
.cvf-frame:focus-visible .cvf-card.is-on{outline:2px solid var(--paper,#f2f0ee);outline-offset:3px;}

.cvf-track{
  position:relative;
  height:var(--cvf-h);
  transform-style:preserve-3d;
  user-select:none;
}

/* No border, no box. Every card shares one height and takes whatever
   width its own picture works out to. Nothing is cropped or squashed. */
.cvf-card{
  position:absolute;
  left:50%;
  top:0;
  width:auto;               /* the picture decides */
  height:100%;
  overflow:hidden;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.cvf-card > img,
.cvf-card > video{
  height:100%;
  width:auto;               /* natural proportions, kept */
  max-width:none;
  display:block;
  user-select:none;-webkit-user-drag:none;
}
/* No cap and no object-fit on purpose. The card is exactly the size the
   picture is, so nothing is cropped, letterboxed or fitted to a box. */

.cvf-card.is-on{cursor:pointer;}
.cvf-card.is-on .cvf-open{opacity:1;}

/* hold the centre card to reveal the earlier version.
   the before shot fills whatever box the after shot established. */
.cvf-card .cvf-before{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .18s;
}
.cvf-card.is-on:hover .cvf-before{opacity:1;}
.cvf-card.is-on:hover .cvf-open{opacity:0;}
.cvf-card .cvf-before-stamp{
  position:absolute;left:0;top:0;z-index:3;
  background:var(--paper,#f2f0ee);color:var(--ink,#0a0a0f);
  font-size:9px;font-weight:700;letter-spacing:.16em;padding:4px 7px;
  opacity:0;transition:opacity .18s;
}
.cvf-card.is-on:hover .cvf-before-stamp{opacity:1;}

/* the click affordance, only on the centre card */
.cvf-open{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  opacity:0;transition:opacity .25s;
  background:rgba(10,10,15,.86);
  color:var(--paper,#f2f0ee);
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 8px;text-align:center;pointer-events:none;
}

/* ---- nav arrows ---- */
.cvf-nav{
  position:absolute;top:50%;z-index:200;
  transform:translateY(-50%);
  width:30px;height:30px;
  display:grid;place-items:center;
  background:transparent;
  color:rgba(242,240,238,.55);
  border:none;
  font-size:20px;line-height:1;
  cursor:pointer;
  transition:color .18s;
}
.cvf-nav:hover{color:var(--paper,#f2f0ee);}
.cvf-prev{left:0;}
.cvf-next{right:0;}

/* ---- caption + instruction, under the deck ---- */
.cvf-cap{
  margin-top:2px;padding:0 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  animation:cfFade .28s ease;
}
@keyframes cfFade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.cvf-cap-text{
  max-width:56ch;
  font-family:var(--body,Inter,sans-serif);
  font-size:12.5px;line-height:1.55;
  color:rgba(242,240,238,.7);
}
.cvf-cap-action{
  margin-top:7px;
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,240,238,.42);
}

/* ---- dots ---- */
.cvf-dots{
  margin-top:14px;
  display:flex;align-items:center;justify-content:center;
  gap:6px;flex-wrap:wrap;
}
.cvf-dot{
  width:7px;height:7px;
  background:var(--paper,#f2f0ee);
  border:none;padding:0;cursor:pointer;
  opacity:.22;transition:opacity .2s,transform .2s;
}
.cvf-dot:hover{opacity:.55;}
.cvf-dot.is-on{opacity:1;transform:scale(1.3);}


/* ============================================================
   RESPONSIVE — mobile first. The base rules above are the phone
   layout; each step up only enlarges. Nothing is hidden on small
   screens except the arrows, because dragging replaces them.
   ============================================================ */

/* phones: arrows get in the way of a small deck, drag instead */
@media (max-width:479px){
  .cvf-nav{display:none;}
  .cvf-head{padding:0 8px 2px;}
  .cvf-cap{padding:0 8px;}
  .cvf-cap-text{font-size:12px;}
  .cvf-dots{gap:5px;margin-top:10px;}
  .cvf-dot{width:6px;height:6px;}
  .cvf-open{font-size:8px;letter-spacing:.1em;padding:6px 4px;}
}

@media (min-width:480px){
  .cvf{--cvf-h:clamp(110px,22vw,160px);}
  .cvf-head{padding:0 44px 2px;}
}

@media (min-width:768px){
  .cvf{--cvf-h:clamp(130px,18vw,180px);}
  .cvf-frame{padding:22px 0 24px;}
  .cvf-nav{width:34px;height:34px;}
  .cvf-head{padding:0 56px 2px;}
}

@media (min-width:1100px){
  .cvf{--cvf-h:clamp(150px,15vw,200px);}
  .cvf-frame{padding:26px 0 30px;}
}

/* short/landscape phones: height is the scarce axis, not width */
@media (max-height:520px){
  .cvf{--cvf-h:clamp(88px,26vh,130px);}
  .cvf-frame{padding:10px 0 12px;}
  .cvf-cap{margin-top:0;}
  .cvf-cap-text{font-size:11.5px;}
  .cvf-dots{margin-top:8px;}
}

/* lightbox on small screens */
@media (max-width:640px){
  .cvf-lb-close{top:8px;right:10px;font-size:9px;}
  .cvf-lb-title{font-size:12px;}
  .cvf-lb-deck{height:62vh;gap:8px;width:96vw;}
  .cvf-lb-cycle{width:96vw;max-height:62vh;}
  .cvf-lb-cycle img{max-height:62vh;}
  .cvf-lb-scroll{width:96vw;height:66vh;}
  .cvf-lb-fit{max-height:66vh;max-width:96vw;}
  .cvf-lb video{max-height:66vh;max-width:96vw;}
  .cvf-lb-cap{font-size:11.5px;}
  .cvf-lb-hint{font-size:8px;letter-spacing:.14em;text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  .cvf-cap{animation:none;}
}

/* visible failure beats a silent blank box */
.cvf-empty{
  font-family:var(--mono,'Space Mono',monospace);
  font-size:11px;font-weight:700;line-height:1.7;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper,#f2f0ee);
  border:2px dashed rgba(242,240,238,.4);
  padding:18px;text-align:center;
}

/* ============================================================
   LIGHTBOX // what happens when you click the centre card
   Three modes:
     fit    - normal art, scaled to sit inside the screen
     scroll - a full-page screenshot. clipped to a window and
              scrolled, the way the real page behaves
     play   - video, with controls
   ============================================================ */

.cvf-lb{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  background:rgba(8,8,12,.94);
  padding:48px 12px 20px;
  animation:cfLbIn .22s ease;
}
@keyframes cfLbIn{from{opacity:0;}to{opacity:1;}}
body.cvf-locked{overflow:hidden;}

.cvf-lb-close{
  position:absolute;top:16px;right:20px;
  background:none;border:none;cursor:pointer;
  font-family:var(--mono,'Space Mono',monospace);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,240,238,.6);
  padding:8px 10px;
}
.cvf-lb-close:hover{color:var(--paper,#f2f0ee);}

.cvf-lb-title{
  font-family:var(--display,'Archivo Black',sans-serif);
  font-size:clamp(13px,1.5vw,17px);
  text-transform:uppercase;text-align:center;
  color:var(--paper,#f2f0ee);
  flex:none;
}

/* fit: the whole thing on screen at once */
.cvf-lb-fit{
  max-width:min(1200px,92vw);
  max-height:76vh;
  width:auto;height:auto;
  object-fit:contain;
  display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

/* scroll: a clipped window you scroll, like looking at the live page */
.cvf-lb-scroll{
  width:min(1000px,92vw);
  height:76vh;
  overflow-y:auto;
  overflow-x:hidden;
  background:#101016;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.cvf-lb-scroll img{
  display:block;
  width:100%;
  height:auto;          /* the full page, at full length */
}
.cvf-lb-scroll::-webkit-scrollbar{width:10px;}
.cvf-lb-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);}
.cvf-lb-scroll::-webkit-scrollbar-thumb{background:rgba(242,240,238,.28);}
.cvf-lb-scroll::-webkit-scrollbar-thumb:hover{background:rgba(242,240,238,.45);}

.cvf-lb video{
  max-width:min(1200px,92vw);
  max-height:76vh;
  display:block;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.cvf-lb-cap{
  max-width:64ch;text-align:center;
  font-family:var(--body,Inter,sans-serif);
  font-size:12.5px;line-height:1.55;
  color:rgba(242,240,238,.68);
  flex:none;
}
.cvf-lb-hint{
  font-family:var(--mono,'Space Mono',monospace);
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,240,238,.36);
  flex:none;
}

/* deck: a presentation, pages laid out left to right */
.cvf-lb-deck{
  display:flex;align-items:center;gap:14px;
  width:min(1400px,94vw);height:74vh;
  overflow-x:auto;overflow-y:hidden;
  padding:0 4px;cursor:grab;
  scroll-snap-type:x proximity;
}
.cvf-lb-deck:active{cursor:grabbing;}
.cvf-lb-deck img{
  height:100%;width:auto;max-width:none;flex:none;display:block;
  scroll-snap-align:center;
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  user-select:none;-webkit-user-drag:none;
}
.cvf-lb-deck::-webkit-scrollbar{height:9px;}
.cvf-lb-deck::-webkit-scrollbar-track{background:rgba(255,255,255,.05);}
.cvf-lb-deck::-webkit-scrollbar-thumb{background:rgba(242,240,238,.28);}

/* cycle: one screen at a time */
.cvf-lb-cycle{
  display:grid;place-items:center;
  width:min(1300px,94vw);max-height:72vh;cursor:pointer;
}
.cvf-lb-cycle img{
  max-width:100%;max-height:72vh;width:auto;height:auto;
  object-fit:contain;display:block;
  box-shadow:0 16px 44px rgba(0,0,0,.6);
  user-select:none;-webkit-user-drag:none;
}
.cvf-lb-pips{display:flex;gap:6px;justify-content:center;flex:none;}
.cvf-lb-pips i{width:7px;height:7px;background:var(--paper,#f2f0ee);opacity:.25;display:block;transition:opacity .2s,transform .2s;}
.cvf-lb-pips i.on{opacity:1;transform:scale(1.3);}

/* hover tooltip on the card itself */
.cvf-tip{
  position:absolute;left:0;right:0;top:0;z-index:4;
  background:rgba(10,10,15,.88);color:var(--paper,#f2f0ee);
  font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 8px;text-align:center;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.cvf-card:hover .cvf-tip{opacity:1;}