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

:root {
  --font: 'Cascadia', monospace;
  --fsDur: 800ms;
  --fsEase: cubic-bezier(.22,.61,.36,1);
  --socialDockGap: -60px; /* increase = lower under the hero */

  --fsPanelH: clamp(72px, 16vh, 180px);  /* bottom panel height */
  --socialDockH: 30px;                  /* your dock height */
  --fsPanelLine: 1px;
  --fsPanelLineCol: rgba(255,255,255,0.18);
  --dockAbovePanel: 14px;   /* gap ABOVE the panel (desktop fullscreen) */
  --dockOverlap: 10px;      /* how much it overlaps the panel top (mobile panel) */


  /* window hole (JS will overwrite to match hero box) */
  --hole-t: 18vh;
  --hole-r: 4vw;
  --hole-b: 18vh;
  --hole-l: 53vw;
  --hole-rad: 24px;
  --hole-b-adjust: 0px; /* increase on mobile to cut bottom */

}


* {
  box-sizing: border-box;
}

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

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


/* ───────── return-to-gallery: keep text hidden until transition ends ───────── */
#col3Output,
#heroOverlayText{
  transition: opacity 240ms ease;
}

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


/* ───────── 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(
    var(--hole-t)
    var(--hole-r)
    var(--hole-b)
    var(--hole-l)
    round var(--hole-rad)
  ) !important;

  transition: clip-path var(--fsDur) var(--fsEase);
  will-change: clip-path, opacity;
}

/* ───────── FS HOLE OVERLAY: must be clickable when panel is shown ───────── */
#fsHoleOverlay{
  position: fixed;
  inset: 0;
  z-index: 4;            /* above stage (and pageMask), below leftSlidePanel (z=6) */
  pointer-events: none;  /* don't block gallery when closed */
}

/* only clickable while the panel is open */
body.fs-panel-open #fsHoleOverlay{
  pointer-events: auto;
  cursor: pointer;
}

/* Make sure the actual panel and its contents can receive events */
#fsBottomPanel,
#fsBottomPanel *{
  pointer-events: auto;
}

/* Text must be focusable/selectable */
#col3Input{
  pointer-events: auto;
  user-select: text;
}
#col3Output{
  user-select: text;
}