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

/* Safe-area + viewport vars (JS can set --vh/--vw via visualViewport) */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* --vh / --vw are optional and should be set in JS for Opera Mobile quirks */
}

/* Full-viewport horizontal scroller (fits visible viewport) */
.flow {
  position: fixed;        /* lock to viewport */
  inset: 0;               /* top/right/bottom/left = 0 */
  display: flex;
  align-items: stretch;   /* images are same height */
  gap: 0;                 /* absolutely no space between images */
  overflow-x: auto;       /* horizontal scroll */
  overflow-y: hidden;     /* no vertical scroll */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;  /* continuous (no snap) */
  overflow-anchor: none;

  /* Prefer visible viewport units */
  height: 100svh;
  width: 100svw;

  /* Override with JS-driven visible viewport if provided (fixes Opera Mobile) */
  height: calc(var(--vh, 1vh) * 100);
  width:  calc(var(--vw, 1vw) * 100);

  /* keep content clear of device UI cutouts */
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* Each image fills the full visible viewport height and keeps aspect ratio */
.flow img {
  height: 100svh;         /* modern visible viewport height */
  width: auto;            /* expands horizontally, preserves aspect */
  flex: 0 0 auto;         /* no shrinking, no stretching */
  display: block;
  user-select: none;
  pointer-events: none;   /* optional: images don’t capture clicks/drags */
  overflow-anchor: none;

  /* JS-driven visible viewport fallback/override */
  height: calc(var(--vh, 1vh) * 100);
}

/* 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 moves it) */
  #cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
    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 */
    height: 36px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari */
    background: rgba(255, 255, 255, 0.06);
  }
}