/* ~chumthewaters · ASCII shark
   hand-poured vanilla CSS. no frameworks, no build step.
   black water, a white ASCII shark cruising it, and a red title up front. */

:root {
  --ink:   #000000;   /* the black deep */
  --shark: #e9e9e9;   /* white shark */
  --red:   #ff2a1a;   /* blood in the water */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;                 /* the tank fills the window; nothing to scroll */
  font-family: ui-monospace, "Cascadia Code", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  color: var(--shark);
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(255,255,255,0.06), transparent 70%),
    linear-gradient(180deg, #0d0d0d 0%, #070707 45%, var(--ink) 100%);
  background-attachment: fixed;
}

/* visually-hidden heading — keeps the page titled for screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the tank (shark swims here, behind the title) ---- */
#tank {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;             /* clicks pass through to the document */
}

#shark {
  position: absolute;
  margin: 0;
  font-size: clamp(6px, 1.5vw, 12px);
  line-height: 0.92;                /* matches the source's tight cell (~11/12) */
  letter-spacing: 0;
  white-space: pre;
  color: var(--shark);
  opacity: 0.9;
  text-shadow: 0 0 7px rgba(255,255,255,0.12);
  will-change: left, top;
}

/* ---- the title (rides in front of the shark) ---- */
#stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;             /* don't block clicks to the water */
}

#title {
  margin: 0;
  white-space: pre;
  letter-spacing: 0;
  line-height: 1.04;
  font-size: clamp(4px, 2.4vw, 18px);
  color: var(--red);
  /* black halo keeps the red readable wherever the white shark passes behind */
  text-shadow:
    0 0 3px #000,
    0 0 9px rgba(0,0,0,0.85),
    0 1px 2px #000;
}

/* a puff of chum where you click */
.chum {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,42,26,0.95), rgba(255,42,26,0));
  animation: chum 0.9s ease-out forwards;
  z-index: 5;
}
@keyframes chum {
  from { transform: scale(0.4); opacity: 0.9; }
  to   { transform: scale(6);   opacity: 0; }
}

/* reduced motion: the shark holds still */
@media (prefers-reduced-motion: reduce) {
  #shark { opacity: 0.8; }
  .chum { display: none; animation: none; }
}