/* tigerpointer — splash
   Five full-viewport panels, no copy. Dark ground, pink rule between panels,
   drifting pink dust over each image, and a curtain that lifts on scroll. */

*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img,
section, main, canvas, figure, figcaption, header, footer, nav {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

:root {
  --ink: #1c1b29;          /* ground */
  --pink: #ff80a6;         /* accent: rule, loader, dust */
  --dust: rgba(255, 128, 166, 0.29);
  --rule: 10px;            /* pink border on top of every panel */
  --reveal-speed: 1s;
  --viewport-height: 100vh;

  /* Purple haze, thin at the top-right corner and gathering toward the
     bottom-left. Kept as a raw triplet so each layer can take its own alpha;
     widen the gap between the two for a more pronounced sweep. */
  --haze: 124, 82, 168;
  --haze-thin: 0.16;       /* top-right corner */
  --haze-thick: 0.62;      /* bottom-left corner */
}

/* Real viewport height on mobile, where 100vh includes the retracting chrome.
   main.js keeps --viewport-height in sync; svh is the no-JS fallback. */
@supports (height: 100svh) {
  :root { --viewport-height: 100svh; }
}

html { font-size: 18pt; }

body {
  min-height: var(--viewport-height);
  min-width: 320px;
  background-color: var(--ink);
  color: #fff;
  line-height: 1;
  overflow-x: hidden;
  word-wrap: break-word;
  -webkit-text-size-adjust: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* No `overflow: hidden` here: it would make #wrapper the scroll container for
   anchor navigation, so a link to #panel-wallet scrolls the wrapper *and* the
   window and lands past the panel. Horizontal clipping lives on body. */
#wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--viewport-height);
  -webkit-overflow-scrolling: touch;
}

#main {
  position: relative;
  z-index: 1;
  width: 100%;
  opacity: 1;
  transition: opacity 1s ease;
}

body.is-loading #main { opacity: 0; }


/* ---------- panels ---------- */

.panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--viewport-height);
  border-top: var(--rule) solid var(--pink);
  overflow: hidden;
}

/* The photo. Held in its own layer so the dust canvas and the curtain can sit
   above it, and so `fixed` attachment can be dropped on touch without
   disturbing anything else. */
/* background-image itself is set inline per panel, so the paths resolve against
   the document rather than this stylesheet. */
.panel__image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;  /* the parallax: image stays put, panel slides */
  z-index: 0;
}

/* The haze, on every panel. Two layers rather than a flat wash: a diagonal sweep
   so the tint is uneven the way real haze is, over a soft vignette that pulls
   the corners down into the ground colour.

   A pseudo-element paints as the first child, so at equal z-index everything
   declared after it in the markup lands on top. That ordering is the point: the
   haze covers the photograph beneath it, while the wordmark and the dust — both
   z-index 1, both later in the DOM — stay clear of it. Tinting the pink dog
   would only muddy it. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom left,
      rgba(var(--haze), var(--haze-thin)) 0%,
      rgba(var(--haze), var(--haze-thick)) 100%
    ),
    radial-gradient(
      132% 112% at 100% 0%,
      rgba(28, 27, 41, 0) 35%,
      rgba(28, 27, 41, 0.45) 100%
    );
}

/* The logo is artwork rather than scenery, so it is a real <img>: it must never
   be cropped, and it is the one thing on the page worth announcing to a screen
   reader. Sized against the smaller axis so the whole dog fits in portrait. */
.panel__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(72vw, 52vh, 40rem);
  height: auto;
}

/* `fixed` attachment measures against the viewport, so the image is sized for
   the screen rather than the panel — and it costs a repaint per scroll frame on
   phones, where nothing is gained anyway. */
@media (max-width: 1280px), (hover: none) {
  .panel__image { background-attachment: scroll; }
}

.panel__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Panels start behind a sheet of the ground colour; main.js clears it the first
   time the panel is scrolled into view. */
.panel__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--ink);
  pointer-events: none;
  transition: background-color var(--reveal-speed) ease;
}

.panel--reveal.is-visible .panel__curtain {
  background-color: rgba(0, 0, 0, 0.001);
}


/* ---------- loader ---------- */

#loader {
  position: fixed;
  top: calc(50% - 3.75rem);
  left: calc(50% - 3.75rem);
  width: 7.5rem;
  height: 7.5rem;
  z-index: 100000;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 1s;
}

/* Only shown if loading outlasts the grace period, so a fast load never flashes
   a spinner. */
body.with-loader #loader {
  opacity: 1;
  visibility: visible;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cstyle%3Ecircle%7Bfill:%23FF80A6%7D%3C/style%3E%3Ccircle cx='24' cy='48' r='3'%3E%3Canimate attributeName='r' dur='1.2s' begin='0s' repeatCount='indefinite' values='3;6;3'/%3E%3C/circle%3E%3Ccircle cx='48' cy='48' r='3'%3E%3Canimate attributeName='r' dur='1.2s' begin='0.2s' repeatCount='indefinite' values='3;6;3'/%3E%3C/circle%3E%3Ccircle cx='72' cy='48' r='3'%3E%3Canimate attributeName='r' dur='1.2s' begin='0.4s' repeatCount='indefinite' values='3;6;3'/%3E%3C/circle%3E%3C/svg%3E");
}


/* ---------- type scale ---------- */

@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px)  { html { font-size: 11pt; } }

@media (max-width: 736px) {
  :root { --rule: 7px; }
}


/* ---------- reduced motion ---------- */

/* Drop the drift and the curtain; the panels stay, they just arrive plainly. */
@media (prefers-reduced-motion: reduce) {
  #main, .panel__curtain { transition: none; }
  .panel--reveal .panel__curtain { background-color: rgba(0, 0, 0, 0.001); }
  .panel__dust { display: none; }
}