/* Aquarium theme overrides — loaded after site.css */
:root {
  --aq-deep: #021a2e;
  --aq-mid: #054a72;
  --aq-shallow: #0a86ab;
  --aq-glow: #7ff0e0;
  --color-brand-dark: #04263c;
  --color-brand-navy: #06405f;
  --color-brand-red: #06405f;
  --color-brand-teal: #35c8e8;
  --color-brand-teal-dark: #0a8fb0;
  --color-brand-teal-light: #bff0fb;
  --color-brand-green: #2fe0b8;
  --color-brand-gold: #59e6d6;
  --color-brand-gold-dark: #0aa596;
}

html {
  background: linear-gradient(180deg, #d4f6ff 0%, #8fdcf2 35%, #3fadd4 70%, #1b7fa8 100%);
  background-attachment: fixed;
}

body {
  background: transparent;
}

/* Panels become glass so the water shows through */
.bg-white {
  background-color: color-mix(in srgb, #f2fdff 88%, transparent) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.min-h-screen.bg-white {
  background-color: color-mix(in srgb, #eafbff 34%, transparent) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.border-gray-100 {
  border-color: color-mix(in srgb, var(--color-brand-teal) 25%, transparent) !important;
}

.bg-brand-navy,
.bg-brand-dark,
.bg-brand-red {
  background-image: linear-gradient(160deg, rgba(53, 200, 232, 0.18), transparent 60%);
}

.bg-green-600 {
  background-color: #ff8a1f !important;
  background-image: linear-gradient(135deg, #ffb020 0%, #ff7a12 45%, #ff5a00 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px -8px rgba(255, 122, 18, 0.75), 0 0 0 3px rgba(255, 255, 255, 0.35) inset !important;
  text-shadow: 0 1px 2px rgba(120, 45, 0, 0.35);
}

.bg-green-600:hover {
  background-image: linear-gradient(135deg, #ffc24a 0%, #ff8a1f 45%, #ff6a10 100%) !important;
  box-shadow: 0 16px 38px -8px rgba(255, 122, 18, 0.9) !important;
}

.text-green-600 {
  color: #0a8f7e !important;
}

/* Emoji icons before card titles */
.aq-ico { color: var(--color-brand-teal-dark);
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}


/* ---------- Animated aquarium background ---------- */
.aq-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.aq-caustics {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 10%, rgba(190, 255, 250, 0.22), transparent 45%),
    radial-gradient(circle at 75% 25%, rgba(160, 240, 255, 0.16), transparent 40%),
    radial-gradient(circle at 45% 70%, rgba(120, 220, 255, 0.14), transparent 45%);
  animation: aq-drift 18s ease-in-out infinite alternate;
  will-change: transform;

}

.aq-rays {
  position: absolute;
  inset: -10% -20%;
  background: repeating-linear-gradient(
    102deg,
    rgba(255, 255, 255, 0.16) 0px,
    rgba(255, 255, 255, 0.16) 26px,
    transparent 26px,
    transparent 96px
  );
  mix-blend-mode: screen;
  animation: aq-sway 14s ease-in-out infinite alternate;
}

.aq-glass-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 22%);
}

.aq-bubbles span {
  position: absolute;
  bottom: -8vh;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.12) 60%, transparent 70%);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.6);
  animation: aq-rise linear infinite;
}

.aq-plants {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34vh;
  background:
    radial-gradient(60% 100% at 8% 100%, rgba(3, 62, 52, 0.8), transparent 70%),
    radial-gradient(45% 100% at 30% 100%, rgba(4, 78, 66, 0.7), transparent 70%),
    radial-gradient(55% 100% at 68% 100%, rgba(3, 58, 60, 0.8), transparent 72%),
    radial-gradient(40% 100% at 92% 100%, rgba(4, 70, 62, 0.75), transparent 70%);
  transform-origin: bottom center;
  animation: aq-plant-sway 9s ease-in-out infinite alternate;
}

.aq-sand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 9vh;
  background: linear-gradient(180deg, rgba(214, 199, 160, 0.35), rgba(120, 106, 74, 0.75));
  opacity: 0.9;
}

.aq-fish {
  position: absolute;
  width: 42px;
  height: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(120, 240, 230, 0.45));
  border-radius: 60% 40% 45% 55%;
  animation: aq-swim linear infinite;
  will-change: transform;

}

.aq-fish::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 4px;
  width: 12px;
  height: 10px;
  background: inherit;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

@keyframes aq-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translate3d(18px, -55vh, 0) scale(1); }
  100% { transform: translate3d(-14px, -112vh, 0) scale(1.15); opacity: 0; }
}

@keyframes aq-drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

@keyframes aq-sway {
  0% { transform: translate3d(-3%, 0, 0) skewX(-2deg); opacity: 0.7; }
  100% { transform: translate3d(3%, 0, 0) skewX(3deg); opacity: 1; }
}

@keyframes aq-plant-sway {
  0% { transform: skewX(-2.5deg) scaleY(0.98); }
  100% { transform: skewX(2.5deg) scaleY(1.03); }
}

@keyframes aq-swim {
  0% { transform: translate3d(-15vw, 0, 0) scaleX(1); }
  49% { transform: translate3d(110vw, -4vh, 0) scaleX(1); }
  50% { transform: translate3d(110vw, -4vh, 0) scaleX(-1); }
  100% { transform: translate3d(-15vw, 3vh, 0) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  .aq-caustics,
  .aq-rays,
  .aq-plants,
  .aq-bubbles span,
  .aq-fish {
    animation: none !important;
  }
}

/* ---------- Scenery: algae, rocks, driftwood, decor ---------- */
.aq-decor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 46vh;
  min-height: 320px;
}

.aq-decor > * {
  position: absolute;
  bottom: 0;
}

.aq-alga {
  transform-origin: bottom center;
  animation: aq-alga-sway ease-in-out infinite alternate;
  opacity: 0.85;
}

.aq-alga--back {
  opacity: 0.4;
}


.aq-rock,
.aq-wood,
.aq-coral,
.aq-shell,
.aq-chest {
  opacity: 0.92;
}

.aq-coral {
  transform-origin: bottom center;
  animation: aq-alga-sway 7s ease-in-out infinite alternate;
}

@keyframes aq-alga-sway {
  0% { transform: rotate(-4deg) skewX(-3deg) scaleY(0.98); }
  100% { transform: rotate(4deg) skewX(3deg) scaleY(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .aq-alga,
  .aq-coral {
    animation: none !important;
  }
}

/* ---------- Performance tuning ---------- */
.aq-scene,
.aq-decor {
  contain: layout paint style;
}

.aq-plants,
.aq-rays,
.aq-alga,
.aq-coral,
.aq-bubbles span {
  will-change: transform;
}

/* Content sections skip rendering work until near the viewport */
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Weak devices / small screens: cut the expensive effects */
@media (max-width: 767px) {
  html {
    background-attachment: scroll;
  }
  .bg-white {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: color-mix(in srgb, #f2fdff 94%, transparent) !important;
  }
  .aq-caustics,
  .aq-rays,
  .aq-glass-shine {
    display: none;
  }
  .aq-bubbles span:nth-child(n + 11),
  .aq-fish:nth-of-type(n + 3),
  .aq-alga:nth-of-type(n + 6),
  .aq-rock:nth-of-type(n + 2),
  .aq-wood:nth-of-type(n + 2),
  .aq-coral:nth-of-type(n + 2) {
    display: none;
  }
}

/* Very coarse/low-power pointers still get the scene, just static */
@media (max-width: 380px) {
  .aq-alga,
  .aq-coral,
  .aq-plants,
  .aq-bubbles span,
  .aq-fish {
    animation: none !important;
  }
}