/* THE AQUARIUM — nothing in here is a fish. everything in here swims. */

:root {
  --aq-deep: #041826;
  --aq-mid: #063048;
}

body.aquarium {
  background: linear-gradient(180deg, var(--aq-mid) 0%, var(--aq-deep) 100%);
  color: #d8f4ff;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  padding: 3rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aq-header {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: 1rem;
}
.aq-header h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  color: #aef4ff;
  text-shadow: 0 0 16px rgba(110, 230, 255, 0.6);
}
.aq-header p {
  max-width: 42ch;
  margin: 0.75rem auto 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* caustic light — two slowly drifting conic gradients, heavily blurred
   down into soft patches (unblurred, thin conic stripes read as hard
   radiating spikes across the whole page, not refracted light — the
   blur is what actually sells "light through moving water"), confined
   to the tank itself rather than the full fixed viewport. */
.caustics {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.2;
  filter: blur(18px);
  background:
    repeating-conic-gradient(from 0deg at 30% 40%, transparent 0deg 16deg, #2fe0ff 17deg 19deg),
    repeating-conic-gradient(from 40deg at 70% 65%, transparent 0deg 18deg, #6dff2f 19deg 21deg);
  background-size: 140% 140%, 160% 160%;
  animation: caustic-drift 14s ease-in-out infinite alternate;
}
@keyframes caustic-drift {
  from { background-position: 0% 0%, 100% 0%; }
  to   { background-position: 8% 6%, 92% 8%; }
}

/* THE TANK — a plastic-trimmed glass box, not just a rounded rectangle
   of water. a real tank reads as a tank because of what frames the
   water (the black rim top and bottom), what's visibly floating on the
   glass itself (a diagonal reflection streak), and what's sitting on
   the bottom (gravel, plants, rocks) — the water color alone was never
   going to be enough. */
.tank-wrap {
  position: relative;
  z-index: 2;
  width: min(100%, 900px);
}

.tank {
  position: relative;
  height: 56vh;
  min-height: 380px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 80px rgba(0, 0, 0, 0.5);
}

/* the plastic trim */
.tank-rim {
  position: relative;
  z-index: 4;
  height: 16px;
  background: linear-gradient(180deg, #2a2a2e, #0a0a0c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
.tank-rim.bottom {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.06);
}

/* THE HOOD LIGHT — the same @property flicker trick as the Entry
   Hall's fluorescents, applied to a physical tube fixture and a soft
   downward wash together. --tank-flicker is animated once, on the
   wrapping rig; both children reference it in their own `filter`
   (filter itself doesn't inherit, but the custom property's computed
   *value* does), so one flicker drives two different-looking elements
   in perfect sync without duplicating the animation. */
@property --tank-flicker {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

.tank-light-rig {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  animation: tank-flicker 8s infinite steps(24);
}
@keyframes tank-flicker {
  0%, 100% { --tank-flicker: 1; }
  3%   { --tank-flicker: 0.5; }
  4%   { --tank-flicker: 1; }
  47%  { --tank-flicker: 1; }
  48%  { --tank-flicker: 0.35; }
  49%  { --tank-flicker: 0.85; }
  50%  { --tank-flicker: 1; }
  78%  { --tank-flicker: 1; }
  79%  { --tank-flicker: 0.55; }
  81%  { --tank-flicker: 1; }
}

.light-tube {
  position: absolute;
  top: 2px;
  left: 6%;
  right: 6%;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #cdf4ff, #ffffff 50%, #cdf4ff);
  box-shadow: 0 0 14px 4px rgba(200, 245, 255, 0.7);
  filter: brightness(var(--tank-flicker, 1));
}

.light-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(180, 240, 255, 0.28), transparent 45%);
  mix-blend-mode: screen;
  filter: brightness(var(--tank-flicker, 1));
}

/* the glass — a fixed diagonal reflection streak, the thing that
   actually reads as "glass" rather than "an open tinted box" */
.glass-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 30%,
    rgba(255, 255, 255, 0.09) 38%,
    rgba(255, 255, 255, 0.03) 44%,
    transparent 52%
  );
}

/* the water's own surface — a lighter band right under the top rim,
   where the light actually hits first */
.water-surface {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(120, 220, 255, 0.18), transparent);
  pointer-events: none;
}

/* the substrate — gravel speckle (the same "one dot, many box-shadows"
   trick as the lounge's carpet pile, here standing in for scattered
   pebbles instead of yarn) sitting under a plain sand-toned base */
.gravel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 2;
  background: linear-gradient(180deg, #7a6544, #4a3c26);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.35);
}
.gravel .speckle {
  position: absolute;
  inset: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  box-shadow: var(--gravel-shadows);
}

/* rocks — a couple of irregular blobs half-buried in the gravel */
.rock {
  position: absolute;
  bottom: 40px;
  z-index: 2;
  border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
  background: linear-gradient(160deg, #6a6258, #38332c);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.4), inset 3px 3px 6px rgba(255, 255, 255, 0.08);
}

/* plants — the exact swaying-strand mechanic from the Lounge's carpet
   pile, rooted at the tank floor instead, in aquatic greens. an
   accidental proof that the trick generalizes: "many independent
   elements, each rotating around its own base, none sharing a
   duration/delay" is just as much a seaweed bed as it is shag pile. */
.plant {
  position: absolute;
  bottom: 46px;
  z-index: 1;
  border-radius: 50% 50% 8% 8% / 20% 20% 6% 6%;
  transform-origin: bottom center;
  animation-name: sway-plant;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.85;
  filter: blur(0.3px);
}
@keyframes sway-plant {
  0%, 100% { transform: rotate(calc(var(--amp, 8deg) * -1)); }
  50%      { transform: rotate(var(--amp, 8deg)); }
}

/* bubbles — small circles rising and fading, staggered by nth-child */
.bubble {
  position: absolute;
  bottom: -5%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eafcff, transparent 70%);
  border: 1px solid rgba(200, 245, 255, 0.4);
  animation: rise linear infinite;
  opacity: 0;
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translateY(-60vh) translateX(20px); opacity: 0; }
}

/* fish — a glowing body with a triangular tail, following a motion
   path via offset-path. offset-rotate: auto keeps the body pointed
   the way it's swimming, so it actually turns at each curve. */
.fish {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 34px;
  height: 18px;
  offset-rotate: auto;
  animation-name: swim;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  cursor: pointer;
}
.fish .body {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: blur(0.2px);
}
.fish .tail {
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 10px solid currentColor;
  opacity: 0.85;
}
.fish .eye {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #04141c;
}

.fish.f1 {
  color: #ff2fd6;
  offset-path: path('M -40 60 C 200 -20, 500 140, 900 40');
  animation-duration: 11s;
}
.fish.f1 .body { background: radial-gradient(circle at 35% 30%, #ff9ef0, #ff2fd6 60%, #7a0057 100%); box-shadow: 0 0 18px 4px rgba(255, 47, 214, 0.55); }

.fish.f2 {
  color: #2fe0ff;
  offset-path: path('M 900 200 C 650 280, 250 120, -40 220');
  animation-duration: 14s;
  animation-direction: reverse;
}
.fish.f2 .body { background: radial-gradient(circle at 35% 30%, #b0f6ff, #2fe0ff 60%, #045c73 100%); box-shadow: 0 0 18px 4px rgba(47, 224, 255, 0.55); }

.fish.f3 {
  color: #ffe62f;
  offset-path: path('M -40 320 C 250 250, 300 380, 600 300 S 900 340, 900 300');
  animation-duration: 9s;
  width: 26px;
  height: 14px;
}
.fish.f3 .body { background: radial-gradient(circle at 35% 30%, #fff6b0, #ffe62f 60%, #7a5c00 100%); box-shadow: 0 0 16px 4px rgba(255, 230, 47, 0.5); }

.fish.f4 {
  color: #6dff2f;
  offset-path: path('M 900 100 C 600 20, 300 160, -40 90');
  animation-duration: 16s;
  animation-direction: reverse;
  width: 20px;
  height: 11px;
}
.fish.f4 .body { background: radial-gradient(circle at 35% 30%, #d4ffb0, #6dff2f 60%, #245c00 100%); box-shadow: 0 0 14px 3px rgba(109, 255, 47, 0.5); }

/* --- an angelfish: tall instead of long, with a real dorsal + ventral
   fin, not just a resized version of the teardrop shape above --- */
.fish.shape-angel {
  width: 30px;
  height: 34px;
}
.fish.shape-angel .body {
  inset: 0;
  border-radius: 0;
  clip-path: polygon(50% 4%, 78% 24%, 92% 50%, 78% 76%, 50% 96%, 22% 76%, 8% 50%, 22% 24%);
}
.fish.shape-angel .fin {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  opacity: 0.8;
}
.fish.shape-angel .fin.top {
  top: -9px;
  transform: translateX(-50%);
  border-bottom: 11px solid currentColor;
}
.fish.shape-angel .fin.bottom {
  bottom: -9px;
  transform: translateX(-50%);
  border-top: 11px solid currentColor;
}
.fish.shape-angel .tail {
  left: -7px;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-right-width: 8px;
}
.fish.shape-angel .eye { right: 8px; top: 12px; }

.fish.f5 {
  color: #b04fff;
  offset-path: path('M -40 140 C 220 60, 480 220, 900 120');
  animation-duration: 13s;
}
.fish.f5 .body { background: radial-gradient(circle at 40% 25%, #e2b8ff, #b04fff 55%, #5c1a8a 100%); box-shadow: 0 0 16px 4px rgba(176, 79, 255, 0.5); }

/* --- a pufferfish: round, small-finned, one big startled eye --- */
.fish.shape-puffer {
  width: 24px;
  height: 24px;
}
.fish.shape-puffer .body {
  border-radius: 50%;
}
.fish.shape-puffer .tail {
  left: -6px;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-right-width: 6px;
}
.fish.shape-puffer .eye {
  width: 5px;
  height: 5px;
  right: 5px;
  top: 7px;
}

.fish.f6 {
  color: #ffb04f;
  offset-path: path('M 900 260 C 700 190, 380 300, -40 240');
  animation-duration: 10s;
  animation-direction: reverse;
}
.fish.f6 .body { background: radial-gradient(circle at 38% 30%, #fff0c8, #ffb04f 55%, #8a4a08 100%); box-shadow: 0 0 15px 4px rgba(255, 176, 79, 0.5); }

/* --- an eel: long, thin, and never quite swimming in a straight
   line — the body gets its own independent skew animation on top of
   the parent's offset-path travel, a second element with a second
   timeline rather than fighting the same one --- */
.fish.shape-eel {
  width: 70px;
  height: 9px;
}
.fish.shape-eel .body {
  border-radius: 50% / 50%;
  animation: undulate 1.1s ease-in-out infinite;
}
.fish.shape-eel .tail {
  left: -6px;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-right-width: 7px;
}
.fish.shape-eel .eye { right: 6px; top: 2px; width: 2px; height: 2px; }
@keyframes undulate {
  0%, 100% { transform: skewY(-6deg); }
  50%      { transform: skewY(6deg); }
}

.fish.f7 {
  color: #2fffb0;
  offset-path: path('M -40 190 C 150 140, 250 260, 420 190 S 700 130, 900 190');
  animation-duration: 15s;
}
.fish.f7 .body { background: radial-gradient(circle at 30% 30%, #c8fff0, #2fffb0 55%, #0a6b48 100%); box-shadow: 0 0 12px 3px rgba(47, 255, 176, 0.5); }

/* --- a small shoal: three tiny identical fish sharing nearly the same
   path with staggered delays, so they drift as a loose group instead
   of three unrelated fish that happen to share a color --- */
.fish.shape-mini {
  width: 15px;
  height: 8px;
}
.fish.shape-mini .tail {
  left: -4px;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-right-width: 5px;
}
.fish.shape-mini .eye { width: 2px; height: 2px; right: 2px; top: 2px; }
.fish.shape-mini .body {
  background: radial-gradient(circle at 35% 30%, #f0f8ff, #cfe8f5 60%, #7fa8c0 100%);
  box-shadow: 0 0 6px 1px rgba(220, 245, 255, 0.4);
}
.fish.shape-mini { color: #dcf5ff; }

.fish.m1 { offset-path: path('M -30 100 C 150 70, 300 130, 480 90 S 750 60, 870 100'); animation-duration: 12s; animation-delay: 0s; }
.fish.m2 { offset-path: path('M -30 108 C 150 78, 300 138, 480 98 S 750 68, 870 108'); animation-duration: 12s; animation-delay: -0.6s; }
.fish.m3 { offset-path: path('M -30 116 C 150 86, 300 146, 480 106 S 750 76, 870 116'); animation-duration: 12s; animation-delay: -1.2s; }

@keyframes swim {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* click a fish — it darts, brighter and faster, then settles back into
   its normal loop. animation-iteration-count and -timing-function need
   their own two-value lists here too — left at their one-value base
   (infinite, linear), the single value would repeat across *both*
   animations in the list, making the one-shot startle flash loop
   forever instead of playing once. */
.fish.startled {
  animation-name: swim, startle;
  animation-iteration-count: infinite, 1;
  animation-timing-function: linear, ease-out;
}
.fish.startled { animation-duration: var(--dur, 11s), 0.6s; }
.fish.f1.startled { --dur: 11s; }
.fish.f2.startled { --dur: 14s; }
.fish.f3.startled { --dur: 9s; }
.fish.f4.startled { --dur: 16s; }
.fish.f5.startled { --dur: 13s; }
.fish.f6.startled { --dur: 10s; }
.fish.f7.startled { --dur: 15s; }
.fish.m1.startled { --dur: 12s; }
.fish.m2.startled { --dur: 12s; }
.fish.m3.startled { --dur: 12s; }
@keyframes startle {
  0%   { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  30%  { filter: brightness(1.8) drop-shadow(0 0 10px currentColor); }
  100% { filter: brightness(1); }
}

.aq-hint {
  position: relative;
  z-index: 3;
  max-width: 40ch;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.75;
}