html { scrollbar-gutter: stable; }


/* =========================
   Case Study Overlay (Modal)
   ========================= */

#case-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  z-index: 1000000; /* above nav/cards */

  /* Overlay layout tokens */
  --case-rect-w: 1400px;
  --case-rect-h: 1500px;
  /* Nav sizing + placement tokens */
  --case-nav-w: 104px;
  --case-nav-h: 150px;
  --case-nav-gap: 12px;            /* distance from rect edge to button */
  --case-nav-label-offset: 112px;  /* vertical distance below center */

  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 320ms;
}

/* Rect width steps to reduce "floaty" motion during live resize (Chrome/Edge) */
@media (max-width: 1600px) { #case-overlay { --case-rect-w: 1200px; } }
@media (max-width: 1400px) { #case-overlay { --case-rect-w: 1000px; } }
@media (max-width: 1200px) { #case-overlay { --case-rect-w: 860px; } }
@media (max-width: 980px)  { #case-overlay { --case-rect-w: 720px; } }


#case-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms cubic-bezier(.2,.8,.2,1);
}

#case-overlay .case-backdrop {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 0;
  background: rgb(0 0 0);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.2,.8,.2,1);
}

#case-overlay.is-open .case-backdrop {
  opacity: 0.7;
}

/*NEW: centered inner black rectangle (1400x1316) under all overlay content.*/
#case-overlay .case-rect {
  position: fixed;
  left: 50vw;
  top: 50vh;

  width: min(1400px, calc(100vw - 0px));
  height: min(1316px, calc(100vh - 0px));

  transform:
    translate(-50%, -50%)
    translate3d(var(--ov-rect-x, 0px), var(--ov-rect-y, 0px), 0)
    scale3d(var(--ov-rect-scale-x, 1), var(--ov-rect-scale-y, 1), 1);
  transition: transform 300ms cubic-bezier(0, 1.0, 0, 1.0);
  background: rgba(0,0,0,1);
  opacity: var(--ov-rect-opacity, 1);
  pointer-events: none;
  z-index: 1;
  


    
}



/*
  What you changed to in later build

.case-rect {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50vw;              was 50% 
  width: 1400px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 1);
  z-index: 1;
  pointer-events: none;
}

*/






/*SCROLLING OPTION A WAY THAT DOES WORK IN ALL BROWSERS*/
 
 #case-overlay .case-panel {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 2;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  color: #fff;
}

/* Subtle open/close motion lives on an inner wrapper so fixed UI doesn't "drift" when scrollbars appear */
#case-overlay .case-panel-inner {
  /* Keep open/close motion, but also allow horizontal carousel sliding via --case-slide-x */
  transform: translate3d(var(--case-slide-x, 0px), 0, 0) translateY(10px) scale(0.985);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

#case-overlay.is-open .case-panel-inner {
  transform: translate3d(var(--case-slide-x, 0px), 0, 0) translateY(0) scale(1);
}







/* 

SCROLLING OPTION B WAY THAT DOESN'T WORK IN ALL BROWSERS

  #case-overlay .case-panel {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  color: #fff;

  /* subtle open/close motion */ /* 
  transform: translateY(10px) scale(0.985);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}*/







/* Keep content centered like the mock */
#case-overlay .case-content {
  max-width: 1364px;
  margin: 0 auto;
  padding: 90px 72px 96px;
}

@media (max-width: 900px) {
  #case-overlay .case-content {
    padding: 64px 22px 80px;
  }
}

/* Top row: title left, details right all notes and details left and right*/
#case-overlay .case-top {
  display: grid;
  grid-template-columns: 1fr 594px;
  gap: 72px;
  align-items: start;
}

/* Copy reveal is timeline-driven (see bottom of file). */

@media (max-width: 980px) {
  #case-overlay .case-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* Brand and Project Name copy*/
#case-overlay .case-title {
  margin: 0;
  font-size: 48px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (max-width: 700px) {
  #case-overlay .case-title { font-size: 48px; }
}



/* For Agency Name copy*/
#case-overlay .case-for {
  margin-top: 18px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

#case-overlay .case-for a {
  color: #01aeff;
  text-decoration: none;
}

#case-overlay .case-for a:hover { text-decoration: underline; }



/* Details and Notes */

#case-overlay .case-right .label {
  /* color: #01aeff;*/
  font-size: 18px;
  opacity: 0.55;
  /*opacity: 1.00;*/
  margin: 0 0 0px 0;
  font-weight: 500;

}



/* Details copy IT"S MARGIN PUSHES EVERYTHING BELOW IT*/
#case-overlay .case-right .value {
  margin: 0 0 28px 0;
  font-size: 18px;
  line-height: 1.52;
  font-weight: 500;
  letter-spacing: 0.02em;
  
}



/* Notes copy */
#case-overlay .case-notes {
  margin-top: max(0px, env(safe-area-inset-top));
  font-size: 18px;
  line-height: 1.52;
  font-weight: 500;
  letter-spacing: 0.02em;
}

  /* Pushes video down */
#case-overlay .case-media {
  display: flex;
  justify-content: center;

  margin-top: 94px;
}

@media (max-width: 980px) {
  #case-overlay .case-media { margin-top: 44px; }
}

/* Fixed media stage (centered like the mock) */
#case-overlay .case-media-stage {
  /* Default media box (can be overridden per case via CSS vars set in JS) */
  width: min(var(--case-media-w, 560px), 100%);
  aspect-ratio: var(--case-media-ar, 16 / 9);
  position: relative;
  display: grid;
  place-items: center;
}

/* On mobile, cap ultra-wide aspect ratios so videos don't get too short and push down. */
@media (max-width: 768px) {
  #case-overlay .case-media-stage {
    width: 100%;
    aspect-ratio: unset;
    max-height: 50vh;
  }

  #case-overlay .case-media-stage img,
  #case-overlay .case-media-stage video {
    object-fit: contain;
    max-height: 50vh;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
}

#case-overlay .case-media-stage img,
#case-overlay .case-media-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

/* Media visibility is gated by JS + timeline.
   - Video stays hidden until it is actually playing (snaps in).
   - Images are shown immediately once mounted. */
#case-overlay .case-media-stage video {
  opacity: 0;
  transition: none;
}

#case-overlay.is-video-playing .case-media-stage video {
  opacity: 1;
  transition: none;
}

#case-overlay .case-media-stage img {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Spinner (timeline-driven): fades in, then stays until video is actually playing */
@keyframes caseSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#case-overlay .case-media-spinner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 999px;
  animation: caseSpin 0.9s linear infinite;
  opacity: 0;
}

/* Fade in: 0.90 → 1.36 */
/* spinner fade-in is now triggered by .is-fade-in on the spinner element */

/* =========================
   Custom replay affordance
   ========================= */

/* End-frame treatment: dark overlay */
#case-overlay .case-media-stage::after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  z-index: 2;
}

#case-overlay .case-media-stage.is-ended::after {
  opacity: 1;
}

/* Replay button container */
#case-overlay .case-replay {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  z-index: 3;
}

/* Fade in replay UI (NO rotation here) */
#case-overlay .case-replay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Icon + text default alpha */
#case-overlay .case-replay-icon,
#case-overlay .case-replay-text {
  opacity: 0.8;
  transition: opacity 500ms ease;
}

/* SVG icon */
#case-overlay .case-replay-svg {
  height: 50px;
  width: auto;
  color: #fff;
  display: block;
  transform-origin: 50% 50%;
}

/* Replay text */
#case-overlay .case-replay-text {
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

/* Intro spin — ICON ONLY */
#case-overlay .case-replay.is-visible .case-replay-svg {
  animation: caseReplayIntroCCW 800ms ease-out;
}

/* Hover: full opacity */
#case-overlay .case-replay:hover .case-replay-icon,
#case-overlay .case-replay:hover .case-replay-text {
  opacity: 1;
}

/* Hover spin — ICON ONLY */
#case-overlay .case-replay:hover .case-replay-svg {
  animation: caseReplaySpinCCW 800ms ease-out;
}

/* Intro spin keyframes */
@keyframes caseReplayIntroCCW {
  from { transform: rotate(0deg) scale(0.9); }
  to   { transform: rotate(-360deg) scale(1); }
}

/* Hover spin keyframes (2x CCW) */
@keyframes caseReplaySpinCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Close button */
#case-overlay .case-close {
  position: absolute;
  /* iOS/Safari: fixed inside transformed ancestors can be unreliable; absolute in fixed panel is stable */
  top: max(0px, env(safe-area-inset-top));
  right: max(0px, env(safe-area-inset-right));
  width: 64px;
  height: 64px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 42px;
  line-height: 44px;
  cursor: pointer;
  opacity: .9;
  z-index: 3;
  pointer-events: auto;
  transform-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#case-overlay .case-close:hover { opacity: 1; }


/* Prev/Next controls */
#case-overlay .case-nav-btn {
  position: fixed;
  top: var(--case-nav-top-lock, calc(50vh - (var(--case-nav-h) / 2) - 10px));
  transform: scale(var(--case-nav-scale, 0.5));
  transform-origin: 50% 50%;width: var(--case-nav-w);
  height: var(--case-nav-h);
  background: rgba(0,0,0,1);
  /* border: 1px solid rgba(255,255,255,.12);*/
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  z-index: 3;
  pointer-events: auto;
  will-change: left;
}

#case-overlay .case-nav-btn:hover {
  background: rgba(0,0,0,1);
}

#case-overlay .case-nav-btn .tri {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  filter: drop-shadow(0 0 0px rgba(255,255,255,0));
  transition: filter 300ms ease;
}

#case-overlay .case-nav-btn:hover .tri {
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.0)) drop-shadow(0 0 5px rgba(255,255,255,0.85));
}

#case-overlay .case-nav-prev { left: calc(50vw - (var(--case-rect-w) / 2) - var(--case-nav-gap) - var(--case-nav-w)); }
#case-overlay .case-nav-next { right: auto; left: calc(50vw + (var(--case-rect-w) / 2) + var(--case-nav-gap)); }



/*#case-overlay .case-nav-prev { left: calc(50vw - (var(--case-rect-w) / 2) - 8px - 104px); }
#case-overlay .case-nav-next { right: auto; left: calc(50vw + (var(--case-rect-w) / 2) + 22px); }*/


#case-overlay .case-nav-prev .tri {
  border-right: 24px solid #fff;
  margin-left: -4px;
}

#case-overlay .case-nav-next .tri {
  border-left: 24px solid #fff;
  margin-right: -4px;
}

#case-overlay .case-nav-label {
  position: fixed;
  top: var(--case-nav-label-top-lock, calc(50vh + var(--case-nav-label-offset) - 40px));
  width: var(--case-nav-w);
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  opacity: .95;
  z-index: 3;
  will-change: left;
}

#case-overlay .case-nav-label.prev { left: calc(50vw - (var(--case-rect-w) / 2) - var(--case-nav-gap) - var(--case-nav-w)); }
#case-overlay .case-nav-label.next { right: auto; left: calc(50vw + (var(--case-rect-w) / 2) + var(--case-nav-gap)); }

@media (max-width: 900px) {
  #case-overlay .case-nav-btn,
  #case-overlay .case-nav-label {
    display: none;
  }
}









/* Lock page scroll while open */
body.case-overlay-open {
  overflow: hidden !important;
}


/* Copy reveal is timeline-driven (see bottom of file). */

/* Ensure replay UI sits above dark overlay */
#case-overlay .case-media-stage {
  position: relative;
}

#case-overlay .case-media-stage::after {
  z-index: 2;
}

#case-overlay .case-replay {
  z-index: 3;
}

/* =========================
   Overlay open timeline (specified)
   ========================= */

/* Start states */
#case-overlay .case-title,
#case-overlay .case-for,
#case-overlay .case-for a,
#case-overlay .case-right .label,
#case-overlay .case-right .value,
#case-overlay .case-notes,
#case-overlay .case-close,
#case-overlay .case-nav-label,
#case-overlay .case-nav-btn {

  opacity: 0;
}

/* Keep layout stable (no media-ready gating) */
#case-overlay .case-top,
#case-overlay .case-left,
#case-overlay .case-right {
  opacity: 1;
  transform: none;
  transition: none;
}

/* .case-nav-label */
#case-overlay.is-open .case-nav-label {
  opacity: 1;
  transition: opacity 2000ms cubic-bezier(.2,.8,.2,1);
  transition-delay: 300ms;
}




/* Title: 0.20 → 0.53 */
#case-overlay.is-open .case-title {
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(0, 0, 0.58, 1.0);
  transition-delay: 300ms;
}

/* Prev/Next buttons: 0.30 → 0.60 */
#case-overlay.is-open .case-nav-btn {
  opacity: 1;
  transition:
    opacity 400ms cubic-bezier(0.22, 0, 0.68, 1.0),
    transform 400ms cubic-bezier(0.22, 0, 0.68, 1.0);
  transition-delay: 0ms;

  
}




/* For line + link: 1.10 → 1.40 */
#case-overlay.is-open .case-for,
#case-overlay.is-open .case-for a {
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(0, 0, 0.58, 1.0);
  transition-delay: 500ms;
}


/* Spinner fade-in: 0.90 → 1.36 (dur 0.46s, delay 0.90s) */
#case-overlay .case-media-spinner.is-fade-in {
  opacity: 1;
  transition: opacity 460ms cubic-bezier(.2,.8,.2,1);
  transition-delay: 900ms;
}


/* Remaining copy on the right: 0.93 → 1.38 */
#case-overlay.is-open .case-right .label,
#case-overlay.is-open .case-right .value,
#case-overlay.is-open .case-notes {
  opacity: 1;
  transition: opacity 1200ms cubic-bezier(0, 0, 0.58, 1.0);
  transition-delay: 700ms;
}






/* Instant hide when video is actually playing (must come AFTER fade-in rules) */
#case-overlay.is-video-playing .case-media-spinner {
  opacity: 0 !important;
  transition: none !important;
}



/* Close button: 1.03 → 1.30 */
#case-overlay.is-open .case-close {
  opacity: 1;
  transition: opacity 800ms cubic-bezier(.2,.8,.2,1);
  transition-delay: 1030ms;
}



/* Close button spin (clockwise x2) */
@keyframes caseCloseSpinCW2 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(720deg); }
}


/* Close icon svg */
#case-overlay .case-close-svg { display:block; width:28px; height:28px; margin:auto; transform-origin:50% 50%; }

/* Close icon spin (clockwise x2) synced to close fade-in: 1.03 → 1.30 */
#case-overlay.is-open .case-close .case-close-svg {
  animation: caseCloseSpinCW2 800ms cubic-bezier(.2,.8,.2,1) 1030ms both;
}

#case-overlay .case-close-svg path { fill: currentColor; }

/* Thick X for desktop, thin X for mobile */
#case-overlay .case-close-mobile { display: none; }
#case-overlay .case-close-desktop { display: block; }

@media (max-width: 768px) {
  #case-overlay .case-close-mobile { display: block; }
  #case-overlay .case-close-desktop { display: none; }
}


/* =========================
   Overlay carousel slide (Prev/Next)
   ========================= */
/*
  We slide the overlay's rect + panel as a pair, using CSS variables.
  JS toggles #case-overlay[data-case-slide="..."] to drive these vars.
*/

#case-overlay {
  /* Carousel motion tuning */
  --case-slide-ms: 380ms;
  --case-slide-opacity-ms: 200ms;
  --case-slide-ease: cubic-bezier(.16,1,.3,1);

  --case-slide-x: 0px;
  --case-slide-opacity: 1;
  --case-nav-scale: 0.5;
}

#case-overlay.is-open {
  --case-nav-scale: 1;
}

/* Slide everything EXCEPT the scroll container and close button */
#case-overlay .case-panel {
  /* Scrollbar stays anchored because .case-panel itself does not translate */
  opacity: 1;
}

/* Panel inner already includes --case-slide-x in its transform (see base rules above) */
#case-overlay[data-case-slide] .case-panel-inner {
  transition:
    transform var(--case-slide-ms) var(--case-slide-ease),
    opacity var(--case-slide-opacity-ms) var(--case-slide-ease);
  opacity: var(--case-slide-opacity);
}

/* Nav buttons keep their scale while sliding */
#case-overlay .case-nav-btn.case-slide-item {
  transform: translate3d(var(--case-slide-x), 0, 0) scale(var(--case-nav-scale, 1));
  opacity: var(--case-slide-opacity);
  transition:
    transform var(--case-slide-ms) var(--case-slide-ease),
    opacity var(--case-slide-opacity-ms) var(--case-slide-ease);
  will-change: transform, opacity;
}

/* Nav labels slide too */
#case-overlay .case-nav-label.case-slide-item {
  transform: translate3d(var(--case-slide-x), 0, 0);
  opacity: var(--case-slide-opacity);
  transition:
    transform var(--case-slide-ms) var(--case-slide-ease),
    opacity var(--case-slide-opacity-ms) var(--case-slide-ease);
  will-change: transform, opacity;
}


#case-overlay .case-rect {
  /* Same transform as original, with slide-x added into the x translation. */
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--ov-rect-x, 0px) + var(--case-slide-x, 0px)), var(--ov-rect-y, 0px), 0)
    scale3d(var(--ov-rect-scale-x, 1), var(--ov-rect-scale-y, 1), 1);

  /* Keep timing in sync with the slide, but don't tie opacity to slide states
     (otherwise the rect "disappears" during out/prep states). */
  opacity: var(--ov-rect-opacity, 1);
  transition:
    transform var(--case-slide-ms) var(--case-slide-ease),
    opacity var(--case-slide-ms) var(--case-slide-ease);
  will-change: transform, opacity;
}

/* Slide current content out */
#case-overlay[data-case-slide="out-left"]  { --case-slide-x: -95vw; --case-slide-opacity: 0; }
#case-overlay[data-case-slide="out-right"] { --case-slide-x:  95vw; --case-slide-opacity: 0; }

/* Jump new content offscreen (no transition), then animate in */
#case-overlay[data-case-slide="prep-in-right"] .case-panel-inner,
#case-overlay[data-case-slide="prep-in-right"] .case-nav-btn,
#case-overlay[data-case-slide="prep-in-right"] .case-nav-label,
#case-overlay[data-case-slide="prep-in-right"] .case-rect,
#case-overlay[data-case-slide="prep-in-left"] .case-panel-inner,
#case-overlay[data-case-slide="prep-in-left"] .case-nav-btn,
#case-overlay[data-case-slide="prep-in-left"] .case-nav-label,
#case-overlay[data-case-slide="prep-in-left"] .case-rect {
  transition: none !important;
}
#case-overlay[data-case-slide="prep-in-right"] { --case-slide-x: 95vw; --case-slide-opacity: 0; }
#case-overlay[data-case-slide="prep-in-left"]  { --case-slide-x: -95vw; --case-slide-opacity: 0; }

#case-overlay[data-case-slide="in"] { --case-slide-x: 0px; --case-slide-opacity: 1; }