/* ───────── MAIN STAGE ───────── */
.stage {
  height: calc(100% - 64px);
  display: grid;
  grid-template-columns: 50% 50%;
  position: relative;
  z-index: 1;
}

/* ───────── MOBILE LAYOUT ───────── */
@media (max-width: 820px){




    /* MOBILE: HERO folder layers match the hole rect (same as bg folders) */
  #windowImage, #windowImageB, #midMedia{
    position: absolute !important;
    inset: auto !important;

    top: var(--hole-t) !important;
    left: var(--hole-l) !important;
    width: calc(100vw - var(--hole-l) - var(--hole-r)) !important;
    height: calc(100vh - var(--hole-t) - var(--hole-b) - var(--hole-b-adjust)) !important;

    clip-path: none !important; /* rely on #windowStack clip-path */
    object-fit: cover !important;
    object-position: 50% 100% !important; /* bottom align */
  }

  /* fullscreen hero */
  body.hero-expanded #windowImage,
  body.hero-expanded #windowImageB,
  body.hero-expanded #midMedia{
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-position: 50% 50% !important;
  }



  



  #windowBack img, #windowBack video,
  #windowFront img, #windowFront video{
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 100% !important;
  }



  /* fullscreen hero */
  body.hero-expanded #windowBack,
  body.hero-expanded #windowFront{
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }




  body.hero-expanded #windowBack img, body.hero-expanded #windowBack video,
  body.hero-expanded #windowFront img, body.hero-expanded #windowFront video{
    object-position: 50% 50% !important;
  }



  :root{
  --hole-b-adjust: 10px;

  /* ✅ lock 16:9: width is capped by vw, px, AND a height cap (35vh) */
  --mobHeroW: min(92vw, 720px, calc(35vh * 16 / 9));
  --mobHeroH: calc(var(--mobHeroW) * 9 / 16);

  --mobHeroTopGap: 10px;
  --mobHeroLeft: 35px;
  }



  /* keep header always visible */
  .topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }

  /* stage becomes 2 rows: hero on top, gallery below */
  .stage{
    position: fixed;
    top: 64px;   /* header height */
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;

    display: flex !important;              /* override desktop grid */
    flex-direction: column;     /* HERO on top, GALLERY below */
    gap: 0;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;

  }

 


  .right{
    order: 0;
    flex: 0 0 auto;
    width: 100%;
  }

  .left{
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;              /* allows the gallery area to size correctly */
  }


  

    /* FIX: keep hero above gallery on mobile */
  .right{ position: relative; z-index: 10; }
  #heroMask{ position: relative; z-index: 11; }

  .left{ position: relative; z-index: 1; }
  #conveyor{ position: relative; z-index: 1; }


    /* MOBILE: crop (hide) the TOP of the gallery viewport */
  :root{
    --mobGalleryCropTop: 37px; /* increase to crop more */
  }

  #conveyor{
    position: relative;   /* needed for ::before */
    overflow: hidden;     /* you already have this, keep it */
  }

  /* solid “cover” that hides the top part (doesn't affect layout/JS bounds) */
  #conveyor::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height: var(--mobGalleryCropTop);
    background: rgba(4, 14, 36, 0.9); /* match your page bg */
    z-index: 5;
    pointer-events: none;
  }



  #windowBack, #windowFront{
    position: absolute !important;
    inset: auto !important;          /* IMPORTANT: clears right/bottom=0 */
    top: var(--hole-t) !important;
    left: var(--hole-l) !important;
    width: calc(100vw - var(--hole-l) - var(--hole-r)) !important;
    height: calc(100vh - var(--hole-t) - var(--hole-b) - var(--hole-b-adjust)) !important;
  }



  body.hero-expanded #windowBack,
  body.hero-expanded #windowFront{
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }




  


  body.hero-expanded .left,
  body.mob-panel .left{
    transform: translate3d(0, 110%, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  





  /* hero box stays in view */
  .hero{
    width: var(--mobHeroW);
    aspect-ratio: 16 / 9; /* ✅ always 16:9 */
    height: auto;         /* ✅ let aspect-ratio decide */
    border-radius: 14px;

    margin: var(--mobHeroTopGap) auto 0 var(--mobHeroLeft);
  }


  /* MOBILE: fit the hero window layers to the hole box
   (so the bottom edge of the gifs matches the bottom edge of the hole) */






  /* gallery gets the remaining space */
  .left{
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #conveyor{
    position: relative;
    height: calc(100vh - 64px - var(--mobHeroTopGap) - var(--mobHeroH));
    touch-action: none;
  }

  /* ───────── MOBILE: FILTERS DROPDOWN ───────── */
  #filterToggleBtn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  /* turn the tag bar into a dropdown panel */
  #tagBar{
    position: fixed;
    top: 64px;          /* under the fixed header */
    left: 0;
    right: 0;
    padding: 12px 14px;

    background: rgba(192, 255, 90, 0.96);
    backdrop-filter: blur(6px);
    z-index: 60;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;

    transition:
      max-height 260ms cubic-bezier(.22,.61,.36,1),
      opacity 180ms cubic-bezier(.22,.61,.36,1),
      transform 260ms cubic-bezier(.22,.61,.36,1);
  }

  body.filters-open #tagBar{
    max-height: 40vh;
    overflow: auto;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* chips layout inside dropdown */
  .tagbar{
    max-width: none;
    justify-content: flex-start;
  }




  /* ───────── MOBILE: SOCIALS ───────── */
  /* before fullscreen: sit inside the hero window-hole (near bottom) */
  :root{
    --sdMobDown: 10px; /* ✅ increase to move dock DOWN */
  }

  #socialDock{
    position: fixed;
    z-index: 2001;
    pointer-events: auto;

    left: calc(var(--hero-x) + (var(--hero-w) / 2));
    top:  calc(var(--hero-y) + var(--hero-h) - 14px);

    /* ✅ push it down slightly */
    transform: translate(-50%, -100%) translateY(var(--sdMobDown));

    margin: 0 !important;
    max-width: calc(var(--hero-w) - 20px);
  }
  /* FULLSCREEN: dock is pinned, NOT driven by hero rect / hover */
  :root{
    --sd-fs-right: 16px;     /* adjust */
    --sd-fs-gap: 12px;       /* space above bottom panel */
  }
  /* fullscreen: bottom-center (on the bottom panel), NO vertical centering */
  /* DESKTOP fullscreen: centered X, sits ABOVE the bottom panel */
  body.hero-expanded #socialDock{
    left: 50% !important;
    top: calc(100vh - var(--fsPanelH, 120px) - var(--sd-fs-gap, 12px) - var(--socialDockH)) !important;

    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;

    filter: none !important;
    opacity: 1 !important;
  }



  /* MOBILE: when panel opens, push gallery down (hero stays NOT fullscreen) */
  body.mob-panel .left{
    transform: translateY(110%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* MOBILE: bottom panel occupies the gallery area (where the gallery was) */
  #fsBottomPanel{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;

    top: calc(64px + var(--mobHeroTopGap) + var(--mobHeroH)) !important;
    height: calc(100vh - 64px - var(--mobHeroTopGap) - var(--mobHeroH)) !important;
    bottom: auto !important;

    transform: translateY(110%);
    transition: transform var(--fsDur) var(--fsEase);
    z-index: 40;

    pointer-events: none;
  }

  body.mob-panel #fsBottomPanel{
    transform: translateY(0);
    pointer-events: auto;
  }

  /* MOBILE: bottom panel becomes 3 ROWS (not columns)
    (assumes children are: col, divider, col, divider, col) */
  #fsBottomPanel .fsPanelGrid{
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1px 1fr 1px 1fr !important;
  }

  #fsBottomPanel .fsPanelDivider{
    width: 100% !important;
    height: 1px !important;
  }









}

/* ───────── SOCIAL DOCK (DESKTOP/GLOBAL) ───────── */
#socialDock{
  position: fixed;
  z-index: 2001;
  pointer-events: auto;

  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;

  /* under hero (centered to hero) */
  left: calc(var(--hero-x) + (var(--hero-w) / 2));
  top:  calc(var(--hero-y) + var(--hero-h) + var(--socialDockGap));
  transform: translateX(-50%);

  transition:
    left var(--fsDur) var(--fsEase),
    top  var(--fsDur) var(--fsEase),
    transform var(--fsDur) var(--fsEase),
    opacity 200ms ease;
}



.socialIcon{
  --socialSize: 30px;        /* icon button size */
  width: var(--socialSize);
  height: var(--socialSize);
  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.92);   /* ✅ icon color */
  text-decoration: none;
  border-radius: 10px;
  background: rgba(0,0,0,0.12);
}

.socialIcon:hover{ filter: brightness(1.08); }
.socialIcon:active{ transform: scale(0.98); }

/* the actual icon (mask = easy recolor) */
.socialGlyph{
  width: 70%;
  height: 70%;
  background: currentColor; /* ✅ icon inherits from .socialIcon color */

  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}



/* DESKTOP fullscreen: pin dock above panel (ANIMATES from hero position) */
body.hero-expanded #socialDock{
  left: 50% !important;
  top: calc(100vh - var(--fsPanelH) - var(--dockAbovePanel) - var(--socialDockH)) !important;

  right: auto !important;
  bottom: auto !important;

  transform: translateX(-50%) !important;

  /* ✅ keep base transitions so it animates */
  filter: none !important;
  opacity: 1 !important;
}


/* if hero-hover class exists, do nothing to the dock in fullscreen */
body.hero-expanded.hero-hover #socialDock{
  transform: translateX(-50%) !important;
  filter: none !important;
  opacity: 1 !important;
}


/* icons */
#socialDock .socialIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border: 0;
  background: transparent;
  border-radius: 0;

  color: #ffffff;
  text-decoration: none;
}

#socialDock .socialIcon:hover{
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
}

/* svg size + white via currentColor */
#socialDock .socialIcon svg{
  width: clamp(16px, 1.6vw, 24px);
  height: clamp(16px, 1.6vw, 24px);
  display: block;
}

#socialDock .socialIcon svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}
#socialDock .socialIcon svg [stroke]{
  stroke: currentColor !important;
}



/* or responsive size */
#socialDock .socialIcon img{
  width: clamp(16px, 1.6vw, 24px);
  height: clamp(16px, 1.6vw, 24px);
}

#socialDock .socialIcon img{
  filter: brightness(0) invert(1);
}






body.hero-expanded #filterToggleBtn,
body.hero-expanded #tagBar{
  display: none !important;
}




/* ───────── LEFT: CONVEYOR (MASONRY) ───────── */
.left {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  transition:
    transform var(--fsDur) var(--fsEase),
    opacity 200ms ease;

}

/* DESKTOP ONLY: fullscreen pushes gallery LEFT */
@media (min-width: 821px){
  body.hero-expanded .left{
    transform: translate3d(-110%, 0, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


#conveyor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.masonry-track {
  width: 90%;
  display: flex;
  gap: 16px;
  will-change: transform;
}

.masonry-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* items */
.conveyor-item {
  width: 100%;
}

/* zoom on hover for gallery cards + right hero rectangle */

.hero{
  transform: translateZ(0) scale(1);
  transform-origin: center;
  transition: transform 140ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}


.conveyor-item:hover{
  transform: scale(1.03);
}

.conveyor-item img,
.conveyor-item video {
  width: 100%;
  display: block;
  border-radius: 10px;
  transform: scale(1);
  transition: transform 70ms cubic-bezier(.2,.9,.2,1); /* was 180ms */
  will-change: transform;
}



/* ───────── RIGHT: HERO WINDOW ───────── */
.right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;

}

.hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  margin-right: 35px;   /* increase/decrease */

  background: transparent;
  z-index: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}


/* ───────── HERO OVERLAY TEXT (mirrors col3Output) ───────── */
.heroOverlayText{
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  z-index: 20;

  /* ✅ centered text */
  text-align: center;

  font-family: var(--font);
  font-size: 17px;
  line-height: 1.25;
  color: rgba(225, 255, 0, 0.92);

  /* ✅ no background */
  background: transparent;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;

  pointer-events: none;

  /* keep it readable without a box */
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);

  /* ✅ 2-line clamp without -webkit-line-clamp */
  overflow: hidden;
  max-width: 100%;
  line-height: 1.25;
  max-height: calc(1.25em * 2); /* 2 lines */
  white-space: normal;


  transition: opacity 220ms ease;
}


/* ───────── RETURN TO GALLERY: delay text re-appear ───────── */
#col3Output{
  transition: opacity 240ms ease;
}

/* keep both the hero overlay text + col3 output hidden until we say so */
body.returning-to-gallery #col3Output,
body.returning-to-gallery #heroOverlayText{
  opacity: 0 !important;
}

/* hide text while returning to gallery, then fade in */
#col3Output,
#heroOverlayText{
  transition: opacity 240ms ease;
}

body.returning-to-gallery #col3Output,
body.returning-to-gallery #heroOverlayText{
  opacity: 0;
}


/* ✅ disappear when hero goes fullscreen */
body.hero-expanded #heroOverlayText{
  opacity: 0;
}








/* ADDED: ensure hover target is actually on top */
#heroMask {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#idleMedia {
  opacity: 1;
}

.hero:hover #idleMedia {
  opacity: 0;
}
.hero:hover #hoverMedia {
  opacity: 1;
}

/* ───────── HERO HOVER "ZOOM" THE WINDOW HOLE (clip-path) ───────── */
/* This enlarges the visible hole, which is what you actually see as the "window" */



/* ───────── BACKGROUND HERO ───────── */
#heroBackground {
  /* …your existing styles… */
  z-index: -4; /* (or keep yours, but window must be above it) */
}

/* ───────── WINDOW IMAGE ───────── */
#windowImage,
#windowImageB {
  /* …your existing styles… */
  z-index: -3;
}
/* VISUAL-ONLY LAYERS: don't steal clicks/typing */
#pageMask,
#windowStack,
#windowStack *{
  pointer-events: none;
}

/* ───────── MID LAYER (between window and UI mask) ───────── */


/* no hole animation while resizing */
html.no-hole-trans #pageMask,
html.no-hole-trans #windowStack,
html.no-hole-trans #windowImage,
html.no-hole-trans #windowImageB,
html.no-hole-trans #midMedia{
  transition: none !important;
}

html.no-hole-trans .hero{
  transition: none !important;
}

#midMedia{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: -2;

  clip-path: inset(
  var(--hole-t)
  var(--hole-r)
  calc(var(--hole-b) + var(--hole-b-adjust))
  var(--hole-l)
  round var(--hole-rad)
);


  transition: clip-path var(--fsDur) var(--fsEase);


}

body.hero-expanded #midMedia{
  clip-path: inset(0 round 0);
}




/* small hover zoom only */

.hero{
  transform: translateZ(0) scale(1);
  transform-origin: center;
  will-change: transform;
  transition: transform 120ms cubic-bezier(.22,.61,.36,1);
}
body.hero-hover .hero{
  transform: translateZ(0) scale(1.03);
}


body.hero-hover .hero{
  transform: translateZ(0) scale(1.03);
}