/* Reset + ensure no gaps */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000; /* never shown; images cover everything */
}

/* Full-viewport VERTICAL scroller */
.flow {
  position: fixed;        /* stays full-screen */
  inset: 0;
  display: block;         /* stack vertically */
  overflow-x: hidden;     /* no sideways scroll */
  overflow-y: auto;       /* vertical scroll here */
  touch-action: pan-y;    /* allow vertical touch scroll on mobile */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}


/* Each image fills viewport WIDTH; height adjusts to preserve aspect */
.flow img {
  width: 100svw;          /* modern mobile-safe viewport width */
  min-width: 100vw;       /* fallback */
  height: auto;           /* natural height */
  display: block;
  user-select: none;
  pointer-events: none;   /* keep clicks on link wrappers, if any */
  overflow-anchor: none;
}

/* Optional: hide scrollbar without disabling scrolling (WebKit) */
.flow::-webkit-scrollbar { height: 0; }

/* Optional: Firefox aesthetic (comment out to keep scrollbar) */
/* .flow { scrollbar-width: none; } */

/* Hide native cursor and show our custom white circle on pointer-precise devices */
@media (pointer: fine) {
  html, body, .flow { cursor: none; }

  /* Cursor container follows the pointer (JS already moves it) */
  #cursor {
    position: fixed;
    left: 0;
    top: 0;
    /* keep the container lightweight; children draw the visuals */
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
  }

  /* Smooth, subtle motion */
#cursor {
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

/* Grow a bit over links */
#cursor.over-link {
  transform: translate(-50%, -50%) scale(1.8);
}

/* Grow a bit when dragging/holding mouse */
#cursor.dragging {
  transform: translate(-50%, -50%) scale(1.5);
}

/* If dragging while over a link, go a touch larger */
#cursor.over-link.dragging {
  transform: translate(-50%, -50%) scale(2);
}


  /* Inner white dot */
  #cursor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;           /* dot diameter */
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
  }

  /* Soft blur halo around the dot */
  #cursor::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;          /* halo diameter (increase for a larger blur area) */
    height: 36px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /* The magic: blur whatever is behind this circle */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari */
    /* A tiny translucent fill helps make the blur perceptible on all backgrounds */
    background: rgba(255, 255, 255, 0.06);
  }
}



/* Bottom-left hover caption */
.caption {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 10001;
  color: #fff;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: rgba(0,0,0,0.35);
  padding: .45rem .6rem;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;          /* don't block clicks on images/links */
  opacity: 0;                    /* hidden until we have text */
  transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
  max-width: min(60vw, 520px);
  text-overflow: ellipsis;
  overflow: hidden;
}

/* show when it has content */
.caption.--show {
  opacity: 1;
  transform: translateY(0);
}

/* Global link style: white, no underline — across all states */
a:where(:link, :visited) {
  color: #fff;
  text-decoration: none;
}

/* Keep it clean on hover/focus too */
a:hover,
a:focus-visible,
a:active {
  color: #b5b5b5;
  text-decoration: none;
}