/* Cascadia font */
@font-face {
  font-family: 'Cascadia';
  src: local('Cascadia Code'), url('fonts/Cascadia.ttf') format('truetype');
}

:root {
  --font: 'Cascadia', monospace;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: var(--font);
  background: rgba(4, 14, 36, 0.9);
}

/* ───────── BACKGROUND HERO ───────── */
#heroBackground {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

/* ───────── PAGE MASK ───────── */
#pageMask {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1;
  pointer-events: none;

  clip-path: inset(
    18vh
    4vw
    18vh
    53vw
    round 24px
  );

  /* ADDED: animate mask too */
  transition:
    clip-path 0.8s cubic-bezier(.22,.61,.36,1),
    opacity 160ms cubic-bezier(.22,.61,.36,1);
  will-change: clip-path, opacity;

}

/* ───────── WINDOW IMAGE ───────── */

/* one clip for ALL window layers */
#windowStack{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -2;

  clip-path: inset(18vh 4vw 18vh 53vw round 24px);
  transition: clip-path 0.8s cubic-bezier(.22,.61,.36,1);
  will-change: clip-path;
}
body.hero-expanded #windowStack{ clip-path: inset(0 round 0); }
body:not(.hero-expanded).hero-hover #windowStack{
  clip-path: inset(16vh 3vw 16vh 51vw round 24px);
}

#windowBack, #windowFront{
  position: absolute;
  inset: 0;
}
#windowBack{ z-index: -6; }
#windowFront{ z-index: -5; }

#windowStack img,
#windowStack video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#windowImage, #windowImageB{ z-index: 10; }
#midMedia{ z-index: 20; }



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

  clip-path: inset(
    18vh
    4vw
    18vh
    53vw
    round 24px
  );

  transition: clip-path 0.8s cubic-bezier(.22,.61,.36,1);
}

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



/* ───────── TOP BAR ───────── */
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(192, 255, 90, 0.9);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}

.logo {
  font-size: 28px;
  margin: 0;
}

#aboutBtn {
  font-family: var(--font);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}


.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.tagbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width: 52vw;
  justify-content:flex-end;
}

.tagbtn{
  font-family: var(--font);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.35);
  cursor: pointer;
}

.tagbtn.active{
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-color: rgba(0,0,0,0.75);
}


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

/* ───────── LEFT: CONVEYOR (MASONRY) ───────── */
.left {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  transition:
    transform 0.8s cubic-bezier(.22,.61,.36,1),
    opacity 0.2s ease;
}

body.hero-expanded .left {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

#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);
  transition: transform 180ms ease;
  will-change: transform;
}

.conveyor-item:hover,
.hero: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: center;
  background: transparent;
}

.hero {
  width: 70%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: transparent;
  z-index: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* 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" */
body:not(.hero-expanded).hero-hover #windowImage,
body:not(.hero-expanded).hero-hover #windowImageB,
body:not(.hero-expanded).hero-hover #pageMask {
  clip-path: inset(
    16vh
    3vw
    16vh
    51vw
    round 24px
  );
}


/* ───────── 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;
}

/* ───────── MID LAYER (between window and UI mask) ───────── */
#midMedia{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: -2;

  clip-path: inset(18vh 4vw 18vh 53vw round 24px);
  transition: clip-path 0.8s cubic-bezier(.22,.61,.36,1);
}

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

body:not(.hero-expanded).hero-hover #midMedia{
  clip-path: inset(16vh 3vw 16vh 51vw round 24px);
}

/* ───────── PAGE MASK ───────── */
#pageMask {
  /* …your existing styles… */
  z-index: 1;
}

/* small hover zoom only */
.hero{
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}

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



/* ───────── LIGHTBOX ───────── */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#lightbox.show {
  opacity: 1;
  pointer-events: auto;
}

#lightbox.hidden {
  display: none;
}

#lightboxContent {
  position: relative;
  background: #111;
  color: #fff;
  border-radius: 14px;
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem;
  height: 85vh;
  max-width: 95vw;
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(.22,.61,.36,1),
    opacity 0.25s ease;
}

#lightbox.show #lightboxContent {
  transform: scale(1);
  opacity: 1;
}

#closeBtn {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 22px;
  background: none;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
}

#lightboxMedia {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-media-wrap {
  max-width: 100%;
  max-height: calc(85vh - 2rem);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;          /* canvas clips the zoomed media */
  border-radius: 10px;       /* canvas border radius */
  border: 1px solid rgba(255,255,255,0.14);
  background: #000;
  cursor: grab;

}

/* breakout mode: let zoomed media escape the canvas */
.lightbox-media-wrap.breakout{
  overflow: visible;
  border: none;
  background: transparent;
}

/* breakout must override ALL lightbox modes (lb:minimal too) */
#lightbox.lb-breakout #lightboxContent,
#lightbox.lb-breakout #lightboxMedia{
  overflow: visible !important;
}

#lightbox.lb-breakout .lightbox-media-wrap{
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
}



.lightbox-media-wrap img,
.lightbox-media-wrap video {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 0;
  will-change: transform;
  transform-origin: center center;

}

.lightbox-media-wrap.dragging{ cursor: grabbing; }


.lightbox-media-wrap audio {
  width: 100%;
}

#lightboxCaption {
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#lightboxCaption h3 {
  margin: 0;
  font-size: 18px;
}

#lightboxCaption p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}


#lightbox.lb-full #lightboxCaption{
  display: none;
}

#lightbox.lb-full #lightboxContent{
  height: 100vh;
  max-width: 100vw;
  width: 100vw;
  border-radius: 0;
  padding: 0;
  grid-template-columns: 1fr;
}

#lightbox.lb-full #lightboxMedia{
  height: 100vh;
}

#lightbox.lb-full .lightbox-media-wrap{
  max-height: 100vh;
}

#lightbox.lb-full .lightbox-media-wrap img,
#lightbox.lb-full .lightbox-media-wrap video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

#lightbox.lb-full #closeBtn{
  position: fixed;
  top: 14px;
  right: 16px;
}


/* ───────── LIGHTBOX MODE: MINIMAL ───────── */
/* lb:minimal: always fit media inside the lightbox */
#lightbox.lb-minimal #lightboxCaption{
  display: none;
}

#lightbox.lb-minimal #lightboxContent{
  grid-template-columns: 1fr;
  width: min(92vw, 1100px);
  height: min(85vh, 760px);
  padding: 0.75rem;
}

#lightbox.lb-minimal #lightboxMedia{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* important */
}

#lightbox.lb-minimal .lightbox-media-wrap{
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

/* override your base "height:100%; width:auto" so it never spills */
#lightbox.lb-minimal .lightbox-media-wrap img,
#lightbox.lb-minimal .lightbox-media-wrap video{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* lb:minimal: always fit media inside the lightbox */
#lightbox.lb-minimal #lightboxCaption{
  display: none;
}

#lightbox.lb-minimal #lightboxContent{
  grid-template-columns: 1fr;
  width: min(92vw, 1100px);
  height: min(85vh, 760px);
  padding: 0.75rem;
}

#lightbox.lb-minimal #lightboxMedia{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* important */
}

#lightbox.lb-minimal .lightbox-media-wrap{
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

/* override your base "height:100%; width:auto" so it never spills */
#lightbox.lb-minimal .lightbox-media-wrap img,
#lightbox.lb-minimal .lightbox-media-wrap video{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* ───────── ABOUT ───────── */
#aboutOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 2000;
  display: none;
}

#aboutOverlay.show {
  display: flex;
}


/* ───────── "MORE CONTENT" TEXT OVERLAY ───────── */
#soonOverlay{
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

body.hero-expanded #soonOverlay{
  opacity: 1;
}

#soonCard{
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}

#soonText{
  font-family: var(--font);
  font-size: clamp(18px, 3.2vw, 44px);
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.15;
  white-space: nowrap;
}

#soonText .char{
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
}

body.hero-expanded #soonOverlay.play #soonText .char{
  animation: charIn 650ms cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i) * 35ms);
}

@keyframes charIn{
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}