/* Sea world (track 59): tokens and background for <html data-world="sea">.
   Dark looks down at the sea floor, light looks up at the surface. The canvas
   (sea-engine.js) paints the scene; the gradients here are the pre-canvas,
   no-JS and reduced-motion fallback. Light keeps the day theme's ink and
   glass so contrast holds; only the water tints change. */

:root[data-world="sea"] {
  --bg-base: #0b0f0e; /* the landing's dark canvas */
  --bg-raised: #11191c;
  --glass-fill: rgba(200, 240, 238, 0.06);
  --glass-fill-2: rgba(200, 240, 238, 0.1);
  --glass-border: rgba(170, 228, 226, 0.15);
  --glass-border-strong: rgba(170, 228, 226, 0.24);
  --scrim: linear-gradient(180deg, rgba(4, 20, 26, 0.12), rgba(4, 20, 26, 0.3));
}
:root[data-world="sea"][data-theme="light"] {
  --bg-base: #eef6f3; /* the landing's paper */
  --bg-raised: #e2eeea;
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-fill-2: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(20, 82, 88, 0.2);
  --glass-border-strong: rgba(14, 70, 76, 0.34);
  --scrim: linear-gradient(180deg, rgba(210, 238, 236, 0), rgba(190, 226, 224, 0.2));
}

/* Fallback scenes. */
:root[data-world="sea"] .aurora-bg {
  background:
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(62, 82, 73, 0.75), transparent 70%),
    linear-gradient(180deg, #132024 0%, #0e1517 50%, #0b0f0e 100%);
}
:root[data-world="sea"][data-theme="light"] .aurora-bg {
  background:
    radial-gradient(circle at 50% 46%, #ffffff 0%, #eaf4ef 22%, #bfeee6 34%, #8fd6ca 52%, #5bb6a8 100%);
}

/* The aurora, its orbs and the drifting maple leaves belong to the Sky. */
:root[data-world="sea"] .aurora-bg .aurora-canvas,
:root[data-world="sea"] .aurora-bg .orb {
  visibility: hidden;
}
:root[data-world="sea"] .aurora-bg::before,
:root[data-world="sea"] .aurora-bg .scrim::before {
  display: none;
}

.aurora-bg .sea-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms ease;
}
:root[data-world="sea"] .aurora-bg .sea-canvas {
  opacity: 1;
}

/* The Sky/Sea toggle sits beside the theme toggle and shares its look. */
.world-toggle {
  margin-right: 0.4rem;
}
.world-toggle[aria-pressed="true"] {
  border-color: var(--glass-border-strong);
}

/* Dive / surface overlay: above the page, never catching clicks. */
.world-dive {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 900;
  pointer-events: none;
}

/* On pages whose theme toggle is pinned to the corner (access), the world
   toggle pins beside it. */
.world-toggle-fixed {
  position: fixed;
  top: clamp(0.8rem, 3vw, 1.4rem);
  right: calc(clamp(0.8rem, 3vw, 1.4rem) + 50px);
  z-index: 30;
  margin: 0;
}

/* Scene leaves (leaves.js) replace the old drifting CSS leaves. */
.aurora-bg .leaf-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
:root.leaves-on .aurora-bg::before,
:root.leaves-on .aurora-bg .scrim::before {
  display: none;
}