html,body{margin:0;background:#050914;font-family:'IBM Plex Sans',system-ui,sans-serif;overflow-x:hidden}
  a{color:#6DE3FF;text-decoration:none}
  a:hover{color:#a6efff}
  @keyframes mb-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.5}90%{opacity:.5}100%{transform:translateY(-140px);opacity:0}}
  @keyframes mb-sonar{0%{transform:scale(.4);opacity:.5}100%{transform:scale(1);opacity:0}}
  @keyframes mb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes mb-lure{0%,100%{opacity:.85;filter:blur(6px)}50%{opacity:1;filter:blur(9px)}}
  @keyframes mb-drift{0%{background-position:0 0}100%{background-position:600px -300px}}


/* hover states */
.index-h1:hover{color:#6DE3FF !important}
.index-h2:hover{background:rgba(109,227,255,.09) !important}
.index-h3:hover{color:#6DE3FF !important;text-shadow:0 0 14px rgba(109,227,255,.55) !important}
.index-h4:hover{transform:translateY(-2px) !important;box-shadow:0 10px 32px rgba(49,87,245,.5),inset 0 1px 0 rgba(255,255,255,.24) !important;filter:brightness(1.12) !important}
.index-h5:hover{transform:translateY(-2px) !important;box-shadow:0 12px 40px rgba(49,87,245,.52),inset 0 1px 0 rgba(255,255,255,.24) !important;filter:brightness(1.12) !important}
.index-h6:hover{transform:translateY(-2px) !important;background:rgba(109,227,255,.10) !important;border-color:rgba(109,227,255,.45) !important;box-shadow:0 0 24px rgba(109,227,255,.18) !important}
.index-h8:hover{color:#a6efff !important;text-shadow:0 0 14px rgba(109,227,255,.5) !important}
.index-h9:hover{transform:translateY(-3px) !important;border-color:rgba(109,227,255,.4) !important;box-shadow:0 16px 44px rgba(0,0,0,.5),0 0 26px rgba(109,227,255,.12) !important}

/* ===================================================================
   Reef cards: the three core-offering tiles.
   A dark ledge with coral growing out of the bottom edge: the branch
   silhouettes fade upward into the water, the polyps at the tips stay
   crisp and bioluminesce. Hover pushes a slow caustic beam across.
   =================================================================== */
.mb-reef{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:44px 96px 0}

.mb-reef-card{
  position:relative;display:block;isolation:isolate;overflow:hidden;
  min-height:196px;padding:20px 26px 24px;border-radius:18px;
  background:
    radial-gradient(120% 90% at 84% 118%, rgba(37,84,120,.28), transparent 62%),
    linear-gradient(176deg, rgba(12,25,44,.60) 0%, rgba(6,14,27,.80) 58%, rgba(3,9,19,.92) 100%);
  border:1px solid rgba(109,227,255,.13);
  box-shadow:inset 0 1px 0 rgba(150,215,255,.06), 0 10px 30px rgba(0,0,0,.32);
  backdrop-filter:blur(5px);
  color:inherit;text-decoration:none;
  transition:transform .34s cubic-bezier(.22,.72,.28,1), border-color .34s ease, box-shadow .34s ease;
}
.mb-reef-card:hover{
  transform:translateY(-4px);
  border-color:rgba(109,227,255,.34);
  box-shadow:inset 0 1px 0 rgba(150,215,255,.10), 0 18px 46px rgba(0,0,0,.46), 0 0 30px rgba(109,227,255,.10);
}
.mb-reef-card:focus-visible{outline:2px solid rgba(109,227,255,.6);outline-offset:3px}

/* caustic light beam, only on hover */
.mb-reef-card::before{
  content:'';position:absolute;left:-30%;right:-20%;top:-45%;height:190%;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,transparent 32%,rgba(120,220,255,.06) 44%,rgba(120,220,255,.02) 50%,transparent 60%);
  opacity:0;transform:translateX(-16%);
  transition:opacity .5s ease, transform .95s cubic-bezier(.3,.7,.3,1);
}
.mb-reef-card:hover::before{opacity:1;transform:translateX(0)}

/* seabed: sediment settling along the bottom edge, coral roots sink into it */
.mb-reef-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:42px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,8,17,.50) 58%,rgba(3,8,17,.88));
}

/* bioluminescent bloom behind the coral */
.mb-reef-bloom{
  position:absolute;left:0;right:0;bottom:-40px;height:180px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 72% 74%, rgba(109,227,255,.15), rgba(96,78,196,.08) 42%, transparent 70%),
             radial-gradient(ellipse at 12% 80%, rgba(109,227,255,.07), transparent 60%);
  opacity:.7;transition:opacity .45s ease;
}
.mb-reef-card:hover .mb-reef-bloom{opacity:1}

/* ---- the coral itself ---- */
.mb-coral{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:auto;z-index:1;pointer-events:none;overflow:visible}
.mb-coral-branches{
  fill:none;stroke:#4d86a6;stroke-opacity:.34;stroke-linecap:round;stroke-linejoin:round;
  /* dissolve upward into the water column and sideways past the card edges */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.40) 20%,rgba(0,0,0,.85) 52%,#000 78%),
                     linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.40) 20%,rgba(0,0,0,.85) 52%,#000 78%),
                     linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
          mask-composite:intersect;
  transition:stroke .45s ease,stroke-opacity .45s ease;
}
.mb-reef-card:hover .mb-coral-branches{stroke:#74b8da;stroke-opacity:.46}

.mb-polyp{fill:#9ff2ff;filter:drop-shadow(0 0 4px rgba(109,227,255,.75))}
.mb-polyp circle{opacity:.30;animation:mb-polyp 5.4s ease-in-out infinite}
.mb-polyp circle:nth-child(3n)  {animation-duration:7.6s;animation-delay:-2.7s}
.mb-polyp circle:nth-child(3n+1){animation-duration:4.3s;animation-delay:-1.2s}
.mb-reef-card:hover .mb-polyp circle{opacity:.72}
@keyframes mb-polyp{0%,100%{opacity:.16}50%{opacity:.72}}

/* ---- copy ---- */
.mb-reef-body{position:relative;z-index:3;display:block}
.mb-reef-index{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;
  color:rgba(109,227,255,.62);transition:color .3s ease;
}
.mb-reef-card:hover .mb-reef-index{color:rgba(109,227,255,.95)}

.mb-reef-arrow{
  position:absolute;top:-2px;right:0;display:flex;color:rgba(109,227,255,.42);
  transition:transform .34s cubic-bezier(.22,.72,.28,1), color .3s ease;
}
.mb-reef-card:hover .mb-reef-arrow{transform:translateX(5px);color:#6DE3FF}

.mb-reef-title{
  display:flex;align-items:center;gap:11px;margin:16px 0 8px;
  font-size:22px;font-weight:600;line-height:1.2;color:#F2F6FA;
}
.mb-reef-title svg{flex:none;color:#6DE3FF;opacity:.85;transition:opacity .3s ease}
.mb-reef-card:hover .mb-reef-title svg{opacity:1}

.mb-reef-text{display:block;max-width:290px;font-size:15px;line-height:1.5;color:#B6C2CF}

@media (prefers-reduced-motion: reduce){
  .mb-reef-card,.mb-reef-card::before,.mb-reef-arrow,.mb-coral-branches{transition:none}
  .mb-polyp circle{animation:none;opacity:.6}
  .mb-reef-card:hover{transform:none}
}


/* ===================================================================
   Anglerfish: dissolving the mascot into the plate.

   The fish is flat vector art painted into a photoreal background, and
   that clash is what made it shout. Rather than repaint the asset, the
   patch of background around it is re-drawn on top of itself and put
   through water: a copy of the plate, aligned pixel-for-pixel, refracted
   by an animated turbulence field, softened and desaturated, then
   feathered back into the untouched painting with a mask.

   .mb-angler is a small window onto the art (cheap filter region);
   .mb-angler-shot inside it is the full-size plate, offset so the window
   lands on the fish. The percentages are locked to each other:
     window  left 60%  top 10%  width 22%  height 36%   (of the art box)
     shot    left -60/22   top -10/36   width 100/22   height 100/36
   Change one and the other four have to follow.
   =================================================================== */
.mb-angler{
  position:absolute;left:60%;top:10%;width:22%;height:36%;
  overflow:hidden;pointer-events:none;
  filter:url(#mb-angler-water) saturate(.80) brightness(.93) contrast(.96);
  /* feathered so the re-projected patch has no seam: opaque across the
     mascot plus a margin, gone well before the window edge */
  -webkit-mask-image:radial-gradient(ellipse 38% 47% at 48.6% 48.6%,#000 0%,#000 66%,rgba(0,0,0,.45) 84%,transparent 100%);
          mask-image:radial-gradient(ellipse 38% 47% at 48.6% 48.6%,#000 0%,#000 66%,rgba(0,0,0,.45) 84%,transparent 100%);
}
.mb-angler-shot{
  position:absolute;left:-272.727%;top:-27.778%;width:454.545%;height:277.778%;
  background:url(../assets/abyss-bg.webp) top left / 100% auto no-repeat;
  /* the current nudges the fish inside its mask, which stays put */
  animation:mb-angler-sway 19s ease-in-out infinite;
}
@keyframes mb-angler-sway{
  0%,100%{transform:translate(0,0)}
  33%    {transform:translate(.34%,-.22%)}
  66%    {transform:translate(-.26%,.3%)}
}

/* depth haze: the water column between camera and fish, which is what
   actually stops a distant shape from reading as a sticker */
.mb-angler-veil{
  position:absolute;left:57%;top:7%;width:28%;height:42%;pointer-events:none;
  background:radial-gradient(ellipse 44% 47% at 50% 50%,
    rgba(9,28,58,.38) 0%,rgba(9,28,58,.30) 46%,rgba(10,30,60,.12) 72%,transparent 89%);
}

/* caustics drifting across the fish: light from far above, broken by the
   surface. Kept on normal blending: the art layer is its own stacking
   context, so screen would have nothing to blend against. */
.mb-angler-caustics{
  position:absolute;left:54%;top:4%;width:34%;height:48%;pointer-events:none;
  opacity:.55;filter:blur(7px);
  background:
    repeating-linear-gradient(74deg,transparent 0 30px,rgba(150,225,255,.09) 36px,rgba(198,242,255,.15) 41px,rgba(150,225,255,.09) 46px,transparent 54px 96px),
    repeating-linear-gradient(58deg,transparent 0 46px,rgba(120,200,255,.06) 54px,transparent 64px 138px);
  -webkit-mask-image:radial-gradient(ellipse 44% 48% at 50% 50%,#000 12%,rgba(0,0,0,.55) 58%,transparent 84%);
          mask-image:radial-gradient(ellipse 44% 48% at 50% 50%,#000 12%,rgba(0,0,0,.55) 58%,transparent 84%);
  animation:mb-angler-caustic 34s linear infinite;
}
@keyframes mb-angler-caustic{
  0%  {background-position:0 0,0 0}
  100%{background-position:192px -96px,-138px 66px}
}

/* marine snow between the camera and the fish: a foreground plane is the
   cheapest possible cue that the fish is further away than it looks */
.mb-angler-motes{
  position:absolute;left:54%;top:4%;width:34%;height:48%;pointer-events:none;
  opacity:.34;filter:blur(.6px);
  background-repeat:repeat;background-size:47% 61%;
  background-image:
    radial-gradient(circle at 14% 22%,rgba(206,240,255,.75) 0 .8px,transparent 1.6px),
    radial-gradient(circle at 63% 9%, rgba(206,240,255,.55) 0 .6px,transparent 1.3px),
    radial-gradient(circle at 38% 71%,rgba(186,228,255,.60) 0 .7px,transparent 1.5px),
    radial-gradient(circle at 86% 54%,rgba(206,240,255,.45) 0 .5px,transparent 1.2px),
    radial-gradient(circle at 71% 88%,rgba(196,234,255,.55) 0 .6px,transparent 1.3px);
  animation:mb-angler-motes 41s linear infinite;
}
@keyframes mb-angler-motes{
  0%  {background-position:0 0,0 0,0 0,0 0,0 0}
  100%{background-position:-26px -120px,18px -140px,-34px -108px,9px -132px,-15px -118px}
}

/* Narrow viewports shrink the fish to a fraction of the width the
   displacement scale was tuned for, where the same wobble melts it.
   The softening and the haze carry the effect on their own there. */
@media (max-width:1000px){
  .mb-angler{filter:blur(.9px) saturate(.82) brightness(.94)}
  .mb-angler-motes{display:none}
}

@media (prefers-reduced-motion: reduce){
  .mb-angler-shot,.mb-angler-caustics,.mb-angler-motes{animation:none}
}