/* The real document remains selectable, searchable and clickable below the water. */
html.ocean-ready {
  background: #94ccc5;
  color: #173f45;
}
.ocean-ready body {
  isolation: isolate;
}
/* One shared, viewport-sized palette on desktop and mobile. A static layer avoids
   Safari's expensive background-attachment:fixed scrolling repaint path. */
.ocean-ready body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 85%, #f0e6c5a8, transparent 65%),
    radial-gradient(ellipse at 80% 12%, #259ea68c, transparent 72%),
    linear-gradient(165deg, #a4ded2 0%, #a8d9ca 45%, #dedbbe 100%);
}
.ocean-floor {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.ocean-ready .ocean-floor { color: #163b40; }
.ocean-ready .tagline, .ocean-ready .projects span { color: #285057; }
.ocean-ready a { color: #124b5a; }
.ocean-ready a:hover { color: #082f3a; }
.ocean-ready footer {
  background: #e7e6c334;
  border-color: #367a7533;
  color: #294e51;
  padding-bottom: 88px;
}
.ocean-ready .character { position: relative; z-index: 11; mix-blend-mode: normal; }
/* Keep the image outside filtered stacking contexts so it sits above the water. */
.ocean-refracting .intro, .ocean-refracting footer { filter: url('#ocean-refraction'); }
.ocean-surface {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  contain: strict;
}
.ocean-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ocean-fish-layer { position: fixed; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; contain: strict; }
.ocean-fish { position: absolute; top: 0; left: 0; width: 36px; height: 16px; opacity: .76; will-change: transform; }
.ocean-fish:nth-child(2) { width: 29px; opacity: .60; }
.ocean-fish:nth-child(3) { width: 32px; opacity: .69; }
.ocean-fish:nth-child(4) { width: 25px; opacity: .55; }
.ocean-fish svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fish-tail { transform-origin: 21px 15px; }
.ocean-duck {
  position: fixed; top: 0; left: 0; z-index: 12;
  width: clamp(104px, 11vw, 144px); aspect-ratio: 1;
  padding: 0; border: 0; background: transparent;
  cursor: pointer; touch-action: manipulation; will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.ocean-duck:focus-visible { outline: 2px solid #124b5a; outline-offset: 0; border-radius: 50%; }
.duck-model { position: relative; width: 100%; height: 100%; display: block; pointer-events: none; }
.duck-shadow, .duck-wake { position: absolute; left: 23%; top: 42%; width: 54%; height: 45%; border-radius: 50%; pointer-events: none; }
.duck-shadow { background: #164f4326; filter: blur(3px); transform: translate(3px,5px); }
.duck-wake { border: 1px solid #eaffdc8c; transform: scale(1.22); }
.duck-fallback { position: absolute; inset: 20%; font-size: 60px; pointer-events: none; }
.ocean-controls {
  position: fixed;
  z-index: 20;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: calc(100% - 32px);
  font: 500 12px/1.3 system-ui, sans-serif;
}
.ocean-controls button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #29636145;
  border-radius: 24px;
  background: #eff9edeb;
  color: #19494d;
  font: inherit;
  box-shadow: 0 3px 16px #1c626015;
  cursor: pointer;
  touch-action: manipulation;
}
.ocean-controls button:hover { background: #fff; }
.ocean-controls button:focus-visible { outline: 3px solid #124b5a; outline-offset: 3px; }
.ocean-controls [hidden], .ocean-controls[hidden], .ocean-surface[hidden] { display: none; }
.ocean-status {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Mobile keeps the reference palette; only rendering cost changes. */
@media (pointer: coarse), (max-width: 600px) {
  .ocean-controls button { box-shadow: none; }
  .ocean-refracting .intro, .ocean-refracting footer { filter: none; }
  .duck-shadow { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ocean-refracting .intro, .ocean-refracting footer { filter: none; }
}
@media print {
  .ocean-ready body::before { display: none; }
  html.ocean-ready, .ocean-ready body { background: white; color: #202b34; }
  .ocean-ready .ocean-floor, .ocean-ready footer, .ocean-ready .tagline, .ocean-ready .projects span { color: #202b34; }
  .ocean-ready a { color: #18577e; }
  .ocean-surface, .ocean-controls, .ocean-filter, .ocean-duck, .ocean-fish-layer { display: none; }
  .ocean-refracting .intro, .ocean-refracting footer { filter: none; }
  .ocean-ready footer { padding-bottom: 24px; }
}