* { box-sizing: border-box; }
html { background: #031b2b; overflow-x: hidden; }
body {
  display: grid;
  min-height: 100dvh;
  margin: 0;
  place-items: center;
  overflow-x: hidden;
  isolation: isolate;
  background: #031b2b;
  color: white;
  font-family: system-ui, sans-serif;
}
/* An isolated backdrop avoids Chromium repainting the viewport with filtered text. */
.water-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.water-background::before {
  content: '';
  position: absolute;
  top: -75%;
  left: 0;
  width: 250%;
  height: 250%;
  background: radial-gradient(ellipse at 25% 15%, #40c9bd44, transparent 60%),
    linear-gradient(135deg, #031b2b, #075366 52%, #179eaa);
  transform: translateX(-30%);
}
body.impact {
  animation: camera-shake 1.2s linear;
}
@keyframes camera-shake {
  0%, 100% { transform: translate(0, 0); }
  8% { transform: translate(-7px, 5px); }
  17% { transform: translate(6px, -6px); }
  26% { transform: translate(-6px, -3px); }
  35% { transform: translate(5px, 4px); }
  44% { transform: translate(-4px, 3px); }
  53% { transform: translate(3px, -4px); }
  62% { transform: translate(-3px, -2px); }
  71% { transform: translate(2px, 2px); }
  80% { transform: translate(-1px, 2px); }
  89% { transform: translate(1px, -1px); }
}
.damage-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(ellipse, #ff403009 25%, #ff302044 100%);
  opacity: 0;
}
.glass-damage {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}
.glass-damage svg { display: block; width: 100%; height: 100%; }
.glass-damage path {
  fill: none;
  stroke: #d5fff9;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  filter: drop-shadow(1px 1px 0 #001522);
  animation: glass-mend 15s ease-in forwards;
}
.glass-damage polygon {
  fill: #d5fff925;
  stroke: #d5fff988;
  stroke-width: 0.8;
  animation: chip-mend 15s ease-in forwards;
}
@keyframes glass-mend {
  0%, 15% { stroke-dashoffset: 0; opacity: 0.8; }
  100% { stroke-dashoffset: 0.94; opacity: 0.12; }
}
@keyframes chip-mend {
  0%, 15% { opacity: 0.8; }
  100% { opacity: 0.05; }
}
body.impact .damage-overlay { animation: damage-flash 1.5s ease-out; }
body.healing .damage-overlay {
  background: radial-gradient(ellipse, #58ff8812 25%, #2dff884d 100%);
  animation: healing-flash 2s ease-out;
}
@keyframes healing-flash {
  0%, 100% { opacity: 0; }
  15% { opacity: 1; }
  40% { opacity: 0.75; }
}
@keyframes damage-flash {
  0%, 100% { opacity: 0; }
  10% { opacity: 1; }
  35% { opacity: 0.6; }
}
body::before, body::after, .aquarium, .ripples, .sky, .bird-effects {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  content: '';
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
body::after {
  content: '';
  z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, transparent 25%, #00152299 100%);
}
.aquarium { z-index: 1; overflow: hidden; }
.fish, .bird {
  position: absolute;
  top: calc(25% + var(--y) * 0.75);
  left: 0;
  font-size: var(--size);
  opacity: var(--opacity, 0.7);
  filter: blur(var(--blur, 0px)) drop-shadow(0 8px 6px #00152288);
  animation: swim var(--duration) linear infinite;
  animation-delay: var(--delay);
}
.fish { top: 0; left: 0; animation: none; }
.fish.reverse, .bird.reverse { --facing: -1; animation-direction: reverse; }
.fish span, .bird span {
  display: inline-block;
  animation: bob 3s ease-in-out infinite alternate;
}
.sky { z-index: 2; height: 33.333dvh; overflow: hidden; }
.bird {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.bird:hover, .bird:focus { animation-play-state: paused; }
body.frightened .bird { animation-play-state: running; }
body.frightened .fish span, body.frightened .bird span {
  animation: bob 3s ease-in-out infinite alternate, animal-panic 0.16s ease-in-out infinite alternate;
}
@keyframes animal-panic {
  from {
    translate: calc(-1px * var(--panic, 1)) calc(-2px * var(--panic, 1));
    rotate: calc(-8deg * var(--panic, 1));
  }
  to {
    translate: calc(1px * var(--panic, 1)) calc(2px * var(--panic, 1));
    rotate: calc(8deg * var(--panic, 1));
  }
}
.bird:focus-visible { outline: 2px solid #b8fff9; outline-offset: 3px; }
.dove { top: 1rem; left: auto; right: 1rem; animation: none; }
.dove span, body.frightened .dove span { animation: none; }
.bird-effects { z-index: 5; }
.bird-greeting {
  position: absolute;
  max-width: calc(100vw - 1rem);
  padding: 0.7rem 1rem;
  border: 1px solid #b8fff955;
  border-radius: 1rem;
  background: #032b3aee;
  box-shadow: 0 8px 24px #00152266;
  font-size: 1rem;
}
.bird-greeting:empty { display: none; }
.heart {
  position: absolute;
  font-size: 1.6rem;
  animation: hearts 1.6s ease-out forwards;
}
@keyframes hearts {
  from { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), -120px) scale(1.2); opacity: 0; }
}
@keyframes swim {
  from { transform: translateX(calc(100vw + 5rem)); }
  to { transform: translateX(-5rem); }
}
@keyframes bob {
  from { transform: translateY(-0.3em) rotate(-4deg) scaleX(var(--facing, 1)); }
  to { transform: translateY(0.3em) rotate(4deg) scaleX(var(--facing, 1)); }
}
.ripples { z-index: 2; overflow: hidden; }
.ripple {
  position: absolute;
  width: 180px;
  height: 180px;
  margin: -90px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, transparent 45%, #b8fff91c 46%, #001d2e16 47%, transparent 49%);
}
main {
  position: fixed;
  z-index: 3;
  top: 12.5dvh;
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
}
h1 {
  margin: 0;
  font-size: clamp(1.25rem, 7vmin, 3.5rem);
  animation: logo-sway 8s ease-in-out infinite;
}
@keyframes logo-sway {
  0%, 100% { transform: translate(3px, 0); }
  25% { transform: translate(0, 5px); }
  50% { transform: translate(-3px, 0); }
  75% { transform: translate(0, -5px); }
}
.logo-trigger {
  padding: 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  font: inherit;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  animation: gentle-tint 10s ease-in-out infinite alternate;
}
.logo-trigger:focus-visible { outline: 2px solid #b8fff9; }
.logo-trigger:disabled { visibility: hidden; }
.logo-trigger.healed {
  animation: gentle-tint 10s ease-in-out infinite alternate, healing-pop 0.7s ease-out;
}
@keyframes gentle-tint {
  from { filter: hue-rotate(-8deg) brightness(0.94); }
  to { filter: hue-rotate(8deg) brightness(1.04); }
}
@keyframes healing-pop {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1); }
}
.logo-trigger.aura .logo-letter {
  animation: healing-aura 3.5s ease-out;
}
@keyframes healing-aura {
  0%, 15% { filter: drop-shadow(0 0 6px #70ffb5); }
  100% { filter: drop-shadow(0 0 18px #70ffb500); }
}
.logo-letter {
  display: inline-block;
  background: linear-gradient(90deg, #d0e6e3, #bbdcdf, #b6cddd, #d0e6e3);
  background-size: 400% 100%;
  background-position: var(--tone, 0%) 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.fragments {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.fragment {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
  line-height: 1.2;
  animation: gentle-tint 10s ease-in-out infinite alternate;
}
.links {
  position: fixed;
  top: 25dvh;
  left: 0;
  width: 100%;
  height: 50dvh;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem;
  pointer-events: none;
}
.bubble-float {
  animation: bubble-sway var(--float-duration, 8s) ease-in-out infinite;
  animation-delay: var(--float-delay, -2s);
}
.bubble-float.flying {
  position: fixed;
  top: 0;
  left: 0;
  width: max-content;
  animation: none;
}
@keyframes bubble-sway {
  0%, 100% { transform: translate(1px, -2px); }
  35% { transform: translate(-2px, 1px); }
  70% { transform: translate(2px, 2px); }
}
.bubble {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.8rem;
  border: 1px solid #b4e7e04d;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9eee51c, #8cc6d90c);
  box-shadow: inset 0 1px 1px #e6fffb33, 0 8px 24px #00152233;
  color: #ecf7f5;
  font-size: clamp(1rem, 2.4vmin, 1.15rem);
  font-weight: 500;
  text-decoration: none;
  pointer-events: auto;
  transform: translate(var(--repel-x, 0px), var(--repel-y, 0px));
  transition: transform 0.18s ease-out, border-color 0.18s ease-out;
}
.bubble:hover { border-color: #b4e7e099; }
.bubble:focus-visible { outline: 2px solid #b8fff9; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .bubble { transform: none; transition: none; }
  .bubble-float, .logo-trigger, .fragment { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  body, h1, .logo-letter, .fish, .fish span, .bird, .bird span, .heart { animation: none; }
  .bird:not(.dove) { left: var(--rest); }
  .heart { transform: translate(calc(-50% + var(--dx)), -50%); }
  .ripples { display: none; }
  body.impact, body.impact .damage-overlay { animation: none; }
  body.healing .damage-overlay, .logo-trigger.healed { animation: none; }
  .logo-trigger.aura .logo-letter { animation: none; }
  body.frightened .fish span, body.frightened .bird span { animation: none; }
}