/* ==========================================================================
   Kowloon 2077 · rain / drip layer  (Visual Director)  ·  prefix: kr-
   Purely decorative. Everything sits BEHIND section content.
   --------------------------------------------------------------------------
   Tiers (put ONE on a <section>):
     .kr-dry      Crown / roof: sealed glass, faint sheen only, no rain
     .kr-wet      Midstack: light rain, ceiling drip stains
     .kr-wetter   lower floors: heavier rain, more stains, condensation beads
     .kr-flooded  Roots / the Deep: as wetter + water line & puddle sheen at the bottom
     .kr-typhoon  Typhoon Nights: wind-driven slanted rain, fast
   Modifier (on <body> or any ancestor): .kr-storm  -> every tier ~40% heavier
   Falling rain needs one empty child:  <div class="kr-fall" aria-hidden="true"></div>
   (rain.js can inject it). Without it you still get the static stains.

   Stacking: the tier class sets position:relative + isolation:isolate, so the
   section becomes its own stacking context. Layers use negative z-index
   (-5 stains, -4 rain), which paints them ABOVE the section's own background
   but BELOW every in-flow child (text, cards, <img>) and below the site's
   existing z-index:-1..-3 decorative backgrounds. They never cover images.
   ========================================================================== */

.kr-dry, .kr-wet, .kr-wetter, .kr-flooded, .kr-typhoon {
	position: relative;
	isolation: isolate;
	--kr-stain-o: 0;
	--kr-rain-o: 0;
	--kr-rain-dur: .6s;
	--kr-drop-o: 0;
	--kr-water: 0%;
}
.kr-storm { --kr-boost: 1.4; } /* inherited; tiers read var(--kr-boost, 1) */

.kr-wet     { --kr-stain-o: .55; --kr-rain-o: .16; --kr-rain-dur: .62s; --kr-drop-o: 0;   }
.kr-wetter  { --kr-stain-o: .7;  --kr-rain-o: .21; --kr-rain-dur: .54s; --kr-drop-o: .2;  }
.kr-flooded { --kr-stain-o: .8;  --kr-rain-o: .23; --kr-rain-dur: .5s;  --kr-drop-o: .26; --kr-water: 13%; }
.kr-typhoon { --kr-stain-o: .55; --kr-rain-o: .26; --kr-rain-dur: .42s; --kr-drop-o: .14; }

/* ---------- (b) static stains / grime  (section::after; ::before is the site's divider line) ---------- */
.kr-dry::after, .kr-wet::after, .kr-wetter::after, .kr-flooded::after, .kr-typhoon::after {
	content: "";
	position: absolute; inset: 0;
	z-index: -5;
	pointer-events: none;
}
.kr-wet::after, .kr-wetter::after, .kr-flooded::after, .kr-typhoon::after {
	opacity: min(1, calc(var(--kr-stain-o) * var(--kr-boost, 1)));
	background:
		/* rust runs hanging from the ceiling slab */
		url("../img/rain/kr-stains.webp") 0 0 / 512px 768px repeat-x,
		/* second, offset run for variety */
		url("../img/rain/kr-stains.webp") 233px 0 / 360px 540px repeat-x,
		/* grime pooling at the foot of the wall */
		linear-gradient(to top, rgba(110, 58, 30, .22), rgba(60, 34, 22, .08) 9%, transparent 22%),
		/* damp cold cast over the whole wall */
		linear-gradient(180deg, rgba(46, 230, 255, .035), transparent 30%, transparent 70%, rgba(46, 230, 255, .03));
}
.kr-wet::after { background-size: 512px 768px, 0 0, 100% 100%, 100% 100%; } /* one stain run only */

/* flooded: water line + ripple sheen in the bottom band */
.kr-flooded::after {
	background:
		linear-gradient(to top, transparent calc(var(--kr-water) - 1px), rgba(140, 240, 255, .55) var(--kr-water), transparent calc(var(--kr-water) + 2px)),
		/* ripple lines on the surface, fading with depth */
		repeating-linear-gradient(180deg, rgba(150, 240, 255, .07) 0 1px, transparent 1px 9px) 0 100% / 100% var(--kr-water) no-repeat,
		linear-gradient(to top, rgba(10, 70, 95, .28), rgba(46, 230, 255, .07) var(--kr-water), transparent calc(var(--kr-water) + 8%)),
		url("../img/rain/kr-stains.webp") 0 0 / 512px 768px repeat-x,
		url("../img/rain/kr-stains.webp") 233px 0 / 360px 540px repeat-x,
		/* tide mark: rust band just above the water line */
		linear-gradient(to top, transparent calc(var(--kr-water) + 1%), rgba(130, 66, 30, .25) calc(var(--kr-water) + 2%), transparent calc(var(--kr-water) + 9%));
}

/* dry Crown: sealed glass, a single faint sheen, nothing moves */
.kr-dry::after {
	background:
		linear-gradient(115deg, transparent 32%, rgba(190, 235, 255, .035) 44%, rgba(190, 235, 255, .012) 50%, transparent 58%),
		linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 18%);
}
.kr-dry > .kr-fall { display: none; }

/* ---------- (a) falling rain + (c) condensation  (.kr-fall child) ---------- */
.kr-fall {
	position: absolute; inset: 0;
	z-index: -4;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}
.kr-fall::before, .kr-fall::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: -512px; bottom: 0;   /* one tile of overscan so the loop is seamless */
	pointer-events: none;
	backface-visibility: hidden;
}
/* rain: near layer 256x512 + far layer 128x256 (both periodic in 512px) */
.kr-fall::before {
	opacity: min(.4, calc(var(--kr-rain-o) * var(--kr-boost, 1)));
	background:
		url("../img/rain/kr-rain.webp") 0 0 / 256px 512px repeat,
		url("../img/rain/kr-rain.webp") 61px 97px / 128px 256px repeat;
	animation: kr-fall var(--kr-rain-dur) linear infinite;
}
/* condensation beads creeping down (wetter / flooded / typhoon) */
.kr-fall::after {
	opacity: min(.4, calc(var(--kr-drop-o) * var(--kr-boost, 1)));
	background: url("../img/rain/kr-drops.webp") 0 0 / 256px 512px repeat;
	animation: kr-fall 16s linear infinite;
}
.kr-wet > .kr-fall::after { display: none; }

/* typhoon: wind-driven slant, moves (256px, 512px) per loop to stay seamless */
.kr-typhoon > .kr-fall::before {
	left: -256px;
	background:
		url("../img/rain/kr-rain-slant.webp") 0 0 / 256px 512px repeat,
		url("../img/rain/kr-rain-slant.webp") 40px 150px / 128px 256px repeat;
	animation-name: kr-fall-slant;
}

@keyframes kr-fall       { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 512px, 0); } }
@keyframes kr-fall-slant { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(256px, 512px, 0); } }

/* With rain.js: only sections on screen animate (it toggles .kr-live). */
.kr-js .kr-fall::before, .kr-js .kr-fall::after { animation-play-state: paused; }
.kr-js .kr-fall.kr-live::before, .kr-js .kr-fall.kr-live::after { animation-play-state: running; will-change: transform; }

/* ---------- small screens: one rain layer, no beads, lighter ---------- */
@media (max-width: 600px) {
	.kr-fall::before { background-size: 256px 512px, 0 0; opacity: min(.3, calc(var(--kr-rain-o) * var(--kr-boost, 1) * .8)); }
	.kr-fall::after { display: none; }
	.kr-wet::after, .kr-wetter::after, .kr-typhoon::after { background-size: 384px 576px, 0 0, 100% 100%, 100% 100%; }
}

/* ---------- reduced motion: static streaks, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
	.kr-fall::before, .kr-fall::after { animation: none !important; transform: none; will-change: auto; }
	.kr-fall::before { opacity: min(.25, calc(var(--kr-rain-o) * var(--kr-boost, 1) * .6)); }
}

/* ---------- off where it can only hurt ---------- */
@media print, (forced-colors: active) {
	.kr-fall, .kr-dry::after, .kr-wet::after, .kr-wetter::after, .kr-flooded::after, .kr-typhoon::after { display: none !important; }
}

/* ---------- SITE TUNING (webdev, 2026-10-28) ----------
   The site already runs a full-page rain canvas (canvas.rain, opacity .5), so here the kr- falling rain is the quieter
   "water on the walls" layer: about 40-45% less falling-rain opacity on the ordinary tiers, stains/beads/water line unchanged.
   Typhoon keeps most of its strength (it's the one place the storm should read). On phones the plain .kr-wet tier
   drops falling rain entirely (stains only): calmer, and fewer animated layers. */
.kr-wet     { --kr-rain-o: .09; }
.kr-wetter  { --kr-rain-o: .12; --kr-drop-o: .16; }
.kr-flooded { --kr-rain-o: .13; }
.kr-typhoon { --kr-rain-o: .22; }
@media (max-width: 600px) { .kr-wet > .kr-fall { display: none; } }