:root {
  /* Design vocabulary: Interaction Panels Panels:** IntersectionObserver` (native JavaScript high-contrast transitional enormous glassmorphic panels. serif's delicate hairlines interact with `backdrop-filter: (Google */
  --linen: #F2EDE4;
  --white: #FFFFFF;
  --tide: #2D3440;
  --deep: #0A0E14;
  --ink: #2A2A32;
  --stone: #7A7A86;
  --teal: #5B9EA6;
  --coral: #D4847A;
  --gold: #D4A95A;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "DM Sans", Inter, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  background: linear-gradient(165deg, #D4847A 0%, #F2EDE4 35%, #5B9EA6 70%, #2D3440 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

.marble-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-color: #F2EDE4;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(212, 132, 122, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(91, 158, 166, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 40% 80%, rgba(212, 169, 90, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 60% 40%, rgba(42, 42, 50, 0.03) 0%, transparent 35%);
  filter: contrast(1.5) brightness(1.1);
}

.aquarium-page { position: relative; }

.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(165deg, #D4847A 0%, #F2EDE4 35%, #5B9EA6 70%, #2D3440 100%);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(10, 14, 20, 0.08);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:hover { background: rgba(255, 255, 255, 0.18); box-shadow: 0 14px 44px rgba(10, 14, 20, 0.13); }
.dark-glass { background: rgba(45, 52, 64, 0.25); color: var(--white); }
.dark-glass:hover { background: rgba(45, 52, 64, 0.34); }

.hero-panel {
  width: min(1120px, calc(100vw - 48px));
  min-height: 70vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 80px);
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

h1, h2, h3 { font-family: "Playfair Display", Playfair, serif; letter-spacing: -0.02em; line-height: 0.95; margin: 0; }
h1 { font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; color: rgba(42, 42, 50, 0.86); text-shadow: 0 20px 50px rgba(255,255,255,0.24); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; color: var(--ink); }
h3 { font-size: clamp(1.35rem, 2.3vw, 2rem); font-weight: 700; }

.specimen-label {
  margin: 0 0 14px;
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

.hero-copy { max-width: 520px; margin: 24px 0 0; color: var(--ink); font-size: clamp(1rem, 1.6vw, 1.25rem); }
.hero-fish { position: absolute; right: 8%; bottom: 12%; width: 150px; opacity: 0.75; }

.bubble-layer { position: absolute; inset: 0; pointer-events: none; }
.bubble-layer-back { z-index: 0; opacity: 0.55; }
.hero-panel { z-index: 2; }
.bubble-layer-front { z-index: 3; }
.bubble {
  position: absolute;
  bottom: -80px;
  width: var(--size);
  height: var(--size);
  left: var(--left);
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: bubble-rise var(--duration) linear infinite;
  animation-delay: var(--delay);
}
.b1{--size:10px;--left:8%;--duration:11s;--delay:-2s}.b2{--size:18px;--left:17%;--duration:14s;--delay:-8s}.b3{--size:13px;--left:28%;--duration:9s;--delay:-3s}.b4{--size:22px;--left:41%;--duration:15s;--delay:-10s}.b5{--size:8px;--left:55%;--duration:10s;--delay:-5s}.b6{--size:20px;--left:68%;--duration:13s;--delay:-1s}.b7{--size:14px;--left:82%;--duration:12s;--delay:-7s}.b8{--size:24px;--left:91%;--duration:15s;--delay:-11s}.b9{--size:11px;--left:13%;--duration:8s;--delay:-4s}.b10{--size:19px;--left:23%;--duration:12s;--delay:-9s}.b11{--size:15px;--left:36%;--duration:10s;--delay:-6s}.b12{--size:9px;--left:49%;--duration:13s;--delay:-2s}.b13{--size:21px;--left:63%;--duration:14s;--delay:-12s}.b14{--size:12px;--left:73%;--duration:9s;--delay:-1s}.b15{--size:16px;--left:84%;--duration:11s;--delay:-8s}.b16{--size:23px;--left:94%;--duration:15s;--delay:-5s}

@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
  12% { opacity: 0.85; }
  35% { transform: translate3d(18px, -35vh, 0) scale(1); }
  65% { transform: translate3d(-14px, -70vh, 0) scale(0.96); }
  100% { transform: translate3d(10px, -112vh, 0) scale(1.08); opacity: 0; }
}

.bento-garden { padding: 80px 24px 120px; position: relative; }
.garden-heading { max-width: 1040px; margin: 0 auto 16px; padding: clamp(24px, 4vw, 44px); }
.bento-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 150px;
  gap: 16px;
  grid-template-areas:
    "land land land land land land land land flipa flipa flipa flipa"
    "land land land land land land land land flipa flipa flipa flipa"
    "swat swat swat swat flipb flipb flipb flipb type type type type"
    "swat swat swat swat flipb flipb flipb flipb type type type type"
    "ribb ribb ribb ribb ribb ribb ribb ribb ribb ribb ribb ribb"
    "port port port port flipc flipc flipc flipc note note note note"
    "port port port port flipc flipc flipc flipc note note note note"
    "port port port port flipc flipc flipc flipc note note note note";
}
.bento-cell { border-radius: 16px; position: relative; overflow: hidden; min-height: 100%; }
.cell-landscape { grid-area: land; padding: 24px; }
.flip-card:nth-of-type(2) { grid-area: flipa; }
.swatch-cell { grid-area: swat; padding: 24px; }
.flip-card:nth-of-type(4) { grid-area: flipb; }
.cell-type { grid-area: type; padding: 24px; }
.fish-ribbon { grid-area: ribb; }
.cell-portrait { grid-area: port; padding: 24px; }
.flip-card:nth-of-type(8) { grid-area: flipc; }
.cell-note { grid-area: note; padding: 24px; }

.reveal-cell { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); transition-delay: var(--delay, 0ms); }
.reveal-cell.is-visible { opacity: 1; transform: translateY(0); }

.reef-scene { position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(212,169,90,0.16), transparent 30%), radial-gradient(circle at 80% 18%, rgba(91,158,166,0.2), transparent 34%); }
.caption-card { position: absolute; left: 24px; bottom: 24px; max-width: 430px; padding: 22px; border-radius: 16px; background: rgba(255,255,255,0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.18); }
.caption-card p, .swatch-cell p, .cell-type p, .cell-portrait p, .cell-note p { margin-bottom: 0; }
.wave-border { border: 2px solid rgba(91,158,166,0.3); box-shadow: 0 8px 32px rgba(10,14,20,0.08), inset 0 0 0 6px rgba(255,255,255,0.04); }

.flip-card { perspective: 1000px; cursor: pointer; min-height: 100%; }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.7s ease; transform-style: preserve-3d; }
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 24px; overflow: hidden; }
.flip-front .fish { position: absolute; width: 42%; min-width: 110px; left: 50%; top: 42%; transform: translate(-50%, -50%); }
.flip-back { transform: rotateY(180deg); color: var(--white); background: linear-gradient(145deg, #D4A95A 0%, #D4847A 100%); border-radius: 16px; box-shadow: 0 -8px 32px rgba(10,14,20,0.1); }
.flip-back .specimen-label { color: rgba(255,255,255,0.75); }

.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 28px 0; }
.swatches i { display: block; height: 76px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); }
.swatches i:nth-child(1){background:#F2EDE4}.swatches i:nth-child(2){background:#5B9EA6}.swatches i:nth-child(3){background:#D4847A}.swatches i:nth-child(4){background:#D4A95A}
.cell-type strong { display: block; margin: 22px 0; font-family: "Playfair Display", serif; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 0.9; color: var(--coral); }
.mini-marble { height: 120px; margin-top: 24px; border-radius: 16px; background-color: #F2EDE4; background-image: radial-gradient(ellipse at 10% 50%, rgba(212,132,122,0.18), transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(91,158,166,0.16), transparent 42%), radial-gradient(circle at 60% 70%, rgba(42,42,50,0.07), transparent 35%); filter: contrast(1.4); }

.fish-ribbon { min-height: 150px; background: rgba(45,52,64,0.25); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 8px 32px rgba(10,14,20,0.08); }
.school { position: absolute; top: 50%; width: 88px; animation: swim var(--swim-duration) linear infinite, bob 2.8s ease-in-out infinite; animation-delay: var(--swim-delay), 0s; }
.school:nth-child(1){--swim-duration:24s;--swim-delay:-4s}.school:nth-child(2){--swim-duration:29s;--swim-delay:-14s; width:78px}.school:nth-child(3){--swim-duration:26s;--swim-delay:-8s; width:115px}.school:nth-child(4){--swim-duration:30s;--swim-delay:-19s; width:92px}.school:nth-child(5){--swim-duration:21s;--swim-delay:-2s; width:72px}.school:nth-child(6){--swim-duration:27s;--swim-delay:-23s; width:82px}
@keyframes swim { from { left: calc(100% + 160px); transform: translateY(-50%) scaleX(-1); } to { left: -220px; transform: translateY(-50%) scaleX(-1); } }
@keyframes bob { 0%,100% { margin-top: -3px; } 50% { margin-top: 4px; } }

.fish { height: 58px; background: var(--teal); display: block; filter: drop-shadow(0 12px 18px rgba(10,14,20,0.13)); }
.fish.teal { background: var(--teal); }.fish.coral { background: var(--coral); }.fish.gold { background: var(--gold); }
.angelfish { aspect-ratio: 1.15; clip-path: polygon(8% 50%, 35% 8%, 70% 16%, 92% 0, 82% 50%, 92% 100%, 70% 84%, 35% 92%); }
.clown { aspect-ratio: 1.75; border-radius: 55% 45% 45% 55%; clip-path: polygon(0 50%, 16% 18%, 66% 12%, 100% 50%, 66% 88%, 16% 82%); background-image: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,0.5) 18px 25px); }
.manta { aspect-ratio: 2.2; clip-path: polygon(0 52%, 28% 12%, 55% 34%, 82% 12%, 100% 52%, 78% 72%, 54% 62%, 46% 100%, 42% 62%, 20% 72%); }
.lion { aspect-ratio: 1.45; clip-path: polygon(2% 52%, 19% 31%, 23% 0, 39% 25%, 55% 2%, 62% 31%, 91% 16%, 77% 50%, 92% 85%, 62% 69%, 54% 98%, 39% 72%, 21% 100%, 19% 68%); }
.seahorse { width: 100px; height: 130px; border-radius: 60% 42% 50% 46%; clip-path: polygon(60% 0, 94% 17%, 70% 30%, 84% 49%, 64% 64%, 76% 83%, 46% 100%, 31% 84%, 46% 70%, 31% 55%, 50% 39%, 33% 17%); }
.reef-scene .fish { position: absolute; }
.reef-scene .manta { width: 190px; left: 12%; top: 23%; opacity: 0.8; }
.reef-scene .clown { width: 120px; right: 18%; top: 48%; }
.reef-scene .angelfish { width: 96px; left: 50%; bottom: 18%; }
.seaweed { position: absolute; bottom: -10px; width: 26px; height: 150px; border-radius: 100% 0; background: rgba(91,158,166,0.33); transform-origin: bottom; }
.weed-a { left: 9%; transform: rotate(-8deg); }.weed-b { left: 15%; height: 115px; background: rgba(212,169,90,0.25); transform: rotate(10deg); }.weed-c { right: 12%; height: 135px; transform: rotate(7deg); }

.deep-zone { min-height: 95vh; position: relative; display: grid; place-items: center; padding: 24px; overflow: hidden; color: var(--white); background: radial-gradient(ellipse at center top, #5B9EA6 0%, #2D3440 80%); }
.depth-fog { position: absolute; inset: -20%; background: radial-gradient(circle at 20% 20%, rgba(242,237,228,0.18), transparent 30%), radial-gradient(circle at 80% 45%, rgba(212,132,122,0.15), transparent 36%); filter: blur(38px); }
.depth-copy { position: relative; z-index: 2; max-width: 900px; text-align: center; }
.depth-copy h2 { color: var(--white); font-size: clamp(2.3rem, 5vw, 5.5rem); }
.depth-copy p:last-child { max-width: 620px; margin: 28px auto 0; color: rgba(255,255,255,0.78); }
.depth-copy .specimen-label { color: rgba(255,255,255,0.68); }
.depth-fish { position: absolute; width: 28vw; min-width: 220px; right: -5vw; bottom: 14vh; opacity: 0.2; }

@media (max-width: 767px) {
  .hero, .bento-garden, .deep-zone { padding-left: 16px; padding-right: 16px; }
  .hero-panel { width: calc(100vw - 32px); min-height: 72vh; }
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: none; }
  .bento-cell, .cell-landscape, .swatch-cell, .cell-type, .fish-ribbon, .cell-portrait, .cell-note { grid-area: auto; min-height: 310px; }
  .fish-ribbon { min-height: 130px; }
  .flip-card { min-height: 360px; }
  .cell-landscape { min-height: 430px; }
  .caption-card { left: 16px; right: 16px; bottom: 16px; }
  .hero-fish { width: 110px; right: 4%; bottom: 8%; }
}