/* The aquarium fills the hero itself, without an inset panel or frame. */
.hero.aquarium-hero {
  position: relative;
  isolation: isolate;
  background: #03212e url('public/aquarium-reef.webp') center / cover no-repeat;
  color: #f1fafb;
  min-height: max(800px, 100svh);
}
.aquarium-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #00131b35, #00172220 40%, #00121c85 70%, #00111d60), linear-gradient(0deg, #00192155, transparent 35%);
}
.aquarium-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aquarium-canvas, .aquarium-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.aquarium-scene.is-ready .aquarium-fallback, .aquarium-scene.is-webgl .aquarium-canvas { opacity: 1; }
.aquarium-scene.is-webgl .aquarium-fallback { opacity: 0; }
.aquarium-light {
  position: absolute; inset: -25%; opacity: .22; transform-origin: 50% 0;
  background: repeating-conic-gradient(from 166deg at 45% -15%, transparent 0deg 8deg, #8de9e920 10deg 12deg, transparent 14deg 24deg);
  filter: blur(12px); animation: aquariumLight 19s ease-in-out infinite alternate;
}
@keyframes aquariumLight { to { transform: translateX(4%) rotate(5deg); opacity: .4; } }
.aquarium-bubbles { position: absolute; inset: 0; }
.aquarium-bubbles i {
  position: absolute; left: var(--x); bottom: -15px; width: var(--size); height: var(--size);
  border: 1px solid #c3f7ff55; border-radius: 50%; box-shadow: inset 1px 1px 2px #c7ffff45;
  animation: aquariumBubble var(--duration) linear infinite; animation-delay: var(--delay);
}
@keyframes aquariumBubble { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .6; } 88% { opacity: .4; } 100% { transform: translate(28px, -1100px); opacity: 0; } }
.hero.aquarium-hero .hero-inner { position: relative; z-index: 1; padding-top: 145px; padding-bottom: 150px; }
.hero.aquarium-hero .hero-name, .hero.aquarium-hero .hero-tagline, .hero.aquarium-hero .bullet-title { color: #f0fbff; text-shadow: 0 2px 18px #00141fc0; }
.hero.aquarium-hero .hero-name-top, .hero.aquarium-hero .hero-name-sub { color: #a8dce3; }
.hero.aquarium-hero .hero-name-rule { background: #8ce1e5; }
.hero.aquarium-hero .hero-tagline em { color: #72ddd5; }
.hero.aquarium-hero .hero-eyebrow { color: #b4d8e0; }
.hero.aquarium-hero .bullet-desc { color: #d1e4e9; text-shadow: 0 1px 8px #00121b; }
.hero.aquarium-hero .bullet-title::before { background: #062632; }
.hero.aquarium-hero .chat-trigger-input { background: #052737db; border: 1px solid #b2e7ec55; box-shadow: 0 8px 24px #00121f50; backdrop-filter: blur(12px); }
.hero.aquarium-hero .chat-trigger-input input { color: #f0fcff; }
.hero.aquarium-hero .chat-trigger-input input::placeholder { color: #c4e0e6; }
.hero.aquarium-hero .chat-trigger-input .chat-send { color: #90e3de; background: #0b394b; box-shadow: none; }
.hero.aquarium-hero .chat-trigger-input:focus-within { border-color: #96fff3; }
.aquarium-footer { position: absolute; bottom: 30px; left: 3rem; right: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 2; }
.aquarium-caption { color: #b5dce1; font: 10px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.aquarium-caption::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #80ebdc; box-shadow: 0 0 12px #80ebdc; }
.aquarium-pause { border: 1px solid #b0e1e550; border-radius: 24px; background: #03243099; color: #d4edf0; padding: 10px 16px; font: 11px var(--font-sans); cursor: pointer; backdrop-filter: blur(8px); }
.aquarium-pause:hover { background: #0c3b49; border-color: #99dfe5; }
.aquarium-pause:focus-visible { outline: 2px solid #a0fff0; outline-offset: 4px; }
.aquarium-pause[hidden] { display: none; }
/* Preserve the normal navigation below the aquarium, in either site theme. */
body:has(.aquarium-hero) .nav:not(.scrolled) { background: linear-gradient(#001722b0, #00172200); border-color: #c2edf020; }
body:has(.aquarium-hero) .nav:not(.scrolled) .nav-links a { color: #d1e9ef; }
body:has(.aquarium-hero) .nav:not(.scrolled) .nav-contact-btn { background: #093545a0; color: #e3faff; border: 1px solid #9dd0d64d; box-shadow: none; }
body:has(.aquarium-hero) .nav:not(.scrolled) .mobile-menu-btn span { background: #e2f8fc; }
.aquarium-hero[data-aquarium-motion='still'] .aquarium-light,
.aquarium-hero[data-aquarium-motion='still'] .aquarium-bubbles i { animation-play-state: paused; }
@media (max-width: 768px) {
  .hero.aquarium-hero { min-height: 100svh; background-position: 40% center; }
  .hero.aquarium-hero .hero-inner { padding-top: 120px; padding-bottom: 135px; }
  .aquarium-hero::before { background: linear-gradient(#001b2840, #001b28a0 45%, #001b2850); }
  .aquarium-footer { left: 24px; right: 24px; bottom: 25px; }
  .aquarium-caption { font-size: 8px; letter-spacing: .1em; }
  .aquarium-pause { padding: 9px 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .aquarium-light, .aquarium-bubbles i { animation: none; }
  .aquarium-hero .hero-name-block, .aquarium-hero .hero-right-content { animation: none; opacity: 1; transform: none; }
}
@media (hover: none) { .aquarium-caption .cursor-hint { display: none; } }
.hero.aquarium-hero .chat-trigger-input::after { background: #052737; }
.hero.aquarium-hero .chat-trigger-input input { background: #062330; box-shadow: inset 0 1px 4px #0004; }
body:has(.aquarium-hero) .nav:not(.scrolled) .nav-contact-btn { color: #e3faff !important; }
@media (max-width: 768px) {
  .aquarium-scene.is-webgl .aquarium-canvas,
  .aquarium-scene.is-ready:not(.is-webgl) .aquarium-fallback { opacity: .58; }
  .aquarium-caption { max-width: 190px; line-height: 1.6; flex-wrap: wrap; gap: 5px; }
  .aquarium-pause { flex-shrink: 0; }
}