/*
  ReefLogic docs skin.
  This stylesheet reuses the same visual language as 4000_doc/002_www/assets/css/site.css
  while keeping Zensical documentation components readable and accessible.
*/

:root {
  --rl-bg: #134a60;
  --rl-surface: #0c344a;
  --rl-text: #edf5f1;
  --rl-off-white: #f2f6f1;
  --rl-muted: #b4cdd9;
  --rl-accent: #7dbecf;
  --rl-accent-2: #a8dbe7;
  --rl-line: rgba(191, 223, 235, 0.3);
  --rl-header-bg: rgba(7, 34, 49, 0.95);
  --rl-footer-bg: rgba(7, 34, 49, 0.95);
  --rl-footer-nav-bg: rgba(12, 52, 74, 0.94);
  --rl-card-shadow: 0 12px 28px rgba(2, 16, 28, 0.24);
  --rl-fixed-footer-height: clamp(4.6rem, 11vh, 7rem);
  --rl-nav-link-color: #dbf0f7;
  --rl-nav-link-hover-color: #ffffff;
  --rl-nav-link-hover-bg: rgba(132, 202, 220, 0.22);
  --rl-nav-link-active-color: #ffffff;
  --rl-nav-link-active-bg: rgba(51, 170, 191, 0.34);
  --rl-nav-link-active-border: transparent;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #123e57;
  --md-primary-fg-color--light: #215776;
  --md-primary-fg-color--dark: #0b2f44;
  --md-primary-bg-color: #f2f6f1;
  --md-accent-fg-color: var(--rl-accent-2);
  --md-accent-fg-color--transparent: rgba(168, 219, 231, 0.19);
  --md-default-bg-color: #134a60;
  --md-default-bg-color--light: rgba(19, 74, 96, 0.72);
  --md-default-bg-color--lighter: rgba(19, 74, 96, 0.42);
  --md-default-bg-color--lightest: rgba(19, 74, 96, 0.2);
  --md-default-fg-color: #edf5f1;
  --md-default-fg-color--light: rgba(237, 245, 241, 0.79);
  --md-default-fg-color--lighter: rgba(237, 245, 241, 0.46);
  --md-default-fg-color--lightest: rgba(237, 245, 241, 0.22);
  --md-typeset-color: #edf5f1;
  --md-typeset-a-color: #b5e5ef;
  --md-code-bg-color: #062335;
  --md-code-bg-color--light: rgba(6, 35, 53, 0.74);
  --md-code-fg-color: #e6f5fb;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--rl-bg);
  background-image:
    radial-gradient(circle at top left, rgba(157, 213, 233, 0.2) 0%, rgba(157, 213, 233, 0) 52%),
    radial-gradient(circle at right bottom, rgba(173, 202, 235, 0.16) 0%, rgba(173, 202, 235, 0) 56%),
    linear-gradient(132deg, var(--rl-bg) 0%, var(--rl-bg) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--rl-text);
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.md-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 40;
  backdrop-filter: blur(9px);
  background: var(--rl-header-bg);
  border-bottom: 1px solid var(--rl-line);
}

.md-container {
  padding-bottom: calc(var(--rl-fixed-footer-height) + env(safe-area-inset-bottom, 0px));
  padding-top: var(--md-header-height, 2.8rem);
  position: relative;
  z-index: 8;
}

.md-header,
.md-header__topic,
.md-header__title,
.md-header__button,
.md-tabs,
.md-tabs__link,
.md-search__button {
  color: #f6fcff;
}

.md-header__button:hover,
.md-tabs__link:hover,
.md-tabs__link--active {
  color: #ffffff;
}

.md-search__button {
  background: rgba(10, 60, 85, 0.72);
  border: 1px solid rgba(165, 226, 244, 0.46);
  border-radius: 999px;
  color: #f6fcff;
  font-weight: 600;
}

.md-search__button:hover {
  background: rgba(18, 83, 112, 0.84);
  border-color: rgba(201, 239, 250, 0.75);
}

.md-search__form {
  background: rgba(5, 29, 44, 0.98);
  border: 1px solid rgba(147, 214, 234, 0.34);
}

.md-search__input {
  color: #f3fbff;
}

.md-search__input::placeholder {
  color: rgba(232, 247, 252, 0.7);
}

.md-search__output {
  background: rgba(5, 26, 39, 0.96);
}

.md-search-result__meta,
.md-search-result__title {
  color: #ecf8fd;
}

.md-search-result__teaser {
  color: rgba(230, 245, 252, 0.85);
}

.md-logo img {
  border-radius: 0.4rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.md-main__inner {
  align-items: flex-start;
  padding-bottom: 1rem;
}

.md-content__inner,
.md-sidebar__scrollwrap {
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.md-main,
.md-main__inner,
.md-content,
.md-sidebar,
.md-sidebar__inner,
.md-nav {
  background: transparent !important;
}

.md-content__inner::before {
  display: none;
}

.md-content__inner {
  padding: 0.85rem 1rem 1.1rem;
}

.md-sidebar__scrollwrap {
  padding: 0.4rem;
}

.md-nav__link {
  border: 1px solid transparent;
  border-radius: 0.45rem;
  color: var(--rl-nav-link-color) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.md-nav__link .md-ellipsis {
  color: inherit;
}

.md-nav__link:visited {
  color: var(--rl-nav-link-color) !important;
}

.md-nav__link:hover,
.md-nav__link:focus {
  background: var(--rl-nav-link-hover-bg);
  color: var(--rl-nav-link-hover-color) !important;
}

.md-nav__link:hover .md-ellipsis,
.md-nav__link:focus .md-ellipsis {
  color: var(--rl-nav-link-hover-color) !important;
}

.md-nav__item--active > .md-nav__link,
.md-nav__item .md-nav__link--active {
  background: var(--rl-nav-link-active-bg);
  border-color: var(--rl-nav-link-active-border);
  color: var(--rl-nav-link-active-color) !important;
}

.md-nav__item--active > .md-nav__link .md-ellipsis,
.md-nav__item .md-nav__link--active .md-ellipsis {
  color: var(--rl-nav-link-active-color) !important;
}

/* Landing cards aligned with the main-site card and link-card styling. */
.rl-home {
  box-sizing: border-box;
  margin-top: 0.4rem;
  max-width: 66rem;
  width: 100%;
}

.rl-deployment {
  box-sizing: border-box;
  margin-top: 0.4rem;
  max-width: 66rem;
  width: 100%;
}

/* Keep index page layout aligned with pages that have right TOC, but hide TOC content. */
.md-main__inner:has(.rl-home) .md-sidebar--secondary .md-sidebar__scrollwrap {
  opacity: 0;
  pointer-events: none;
}

/* Keep deployment page layout aligned with pages that have right TOC, but hide TOC content. */
.md-main__inner:has(.rl-deployment) .md-sidebar--secondary .md-sidebar__scrollwrap {
  opacity: 0;
  pointer-events: none;
}

.rl-home .rl-home-intro,
.rl-deployment .rl-home-intro {
  color: rgba(223, 244, 250, 0.95);
  font-size: 0.92rem;
  line-height: 1.62;
  margin: 0 0 0.4rem;
  max-width: 54rem;
}

.rl-home .rl-doc-link-grid {
  display: grid;
  gap: 1rem;
  /* Single column: each link card gets full width of the rl-home wrapper
     (max 66rem) so the description, CTA, and any future card extras stay
     readable. Four cards render as four stacked rows rather than a
     cramped four-column band. */
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

.rl-guide-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.95rem 0 1.1rem;
}

.rl-guide-card {
  background: linear-gradient(160deg, rgba(182, 224, 236, 0.2) 0%, rgba(120, 188, 209, 0.25) 100%);
  border: 1px solid rgba(198, 234, 244, 0.52);
  border-radius: 0.82rem;
  box-shadow: var(--rl-card-shadow);
  min-width: 0;
  padding: 0.92rem 0.95rem 0.98rem;
}

.rl-guide-card h2 {
  color: #f4fcff;
  font-size: 1rem;
  margin: 0 0 0.52rem;
}

.rl-guide-card ol {
  margin: 0;
  padding-left: 1.25rem;
}

.rl-guide-card li {
  color: rgba(228, 246, 252, 0.95);
  line-height: 1.55;
  margin: 0.32rem 0;
}

.rl-home .rl-link-card {
  background: linear-gradient(160deg, rgba(182, 224, 236, 0.2) 0%, rgba(120, 188, 209, 0.25) 100%);
  border: 1px solid rgba(198, 234, 244, 0.52);
  border-radius: 0.82rem;
  box-shadow: var(--rl-card-shadow);
  color: #f3fbff;
  display: flex;
  flex-direction: column;
  min-height: 11.2rem;
  min-width: 0;
  padding: 1rem 0.96rem 1.02rem;
  text-decoration: none;
  transition: all 0.24s ease;
}

.rl-home .rl-home-faq-heading,
.rl-deployment .rl-home-faq-heading {
  margin-top: 1.5rem;
}

.rl-home .rl-link-card h3 {
  color: #f4fcff;
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.rl-home .rl-link-card p {
  color: rgba(217, 242, 250, 0.95);
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
}

.rl-home .rl-card-cta {
  color: #d7f1f8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.9rem;
  text-transform: uppercase;
}

.rl-home .rl-link-card:hover {
  background: linear-gradient(160deg, rgba(196, 233, 243, 0.28) 0%, rgba(138, 200, 219, 0.32) 100%);
  border-color: rgba(214, 241, 248, 0.68);
  box-shadow: 0 12px 26px rgba(7, 29, 41, 0.24);
  transform: translateY(-4px);
}

.rl-home .rl-link-card:hover .rl-card-cta {
  color: #ffffff;
}

.rl-home .rl-link-card:focus-visible {
  outline: 3px solid #a8efff;
  outline-offset: 3px;
}

.rl-faq {
  box-sizing: border-box;
  display: grid;
  gap: 0.72rem;
  margin-top: 0.75rem;
  max-width: none;
  width: 100%;
}

.rl-faq .rl-faq-item {
  background:
    radial-gradient(circle at 88% 86%, rgba(150, 214, 231, 0.16) 0%, rgba(150, 214, 231, 0.08) 20%, rgba(150, 214, 231, 0) 48%),
    linear-gradient(160deg, rgba(8, 46, 66, 0.72) 0%, rgba(6, 37, 56, 0.76) 100%);
  border: 1px solid rgba(170, 220, 234, 0.36);
  border-radius: 0.74rem;
  box-shadow: 0 8px 20px rgba(8, 31, 44, 0.22);
}

.rl-faq .rl-faq-item > summary {
  color: #f5fdff;
  cursor: pointer;
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  list-style: none;
  line-height: 1.4;
  padding: 0.8rem 0.92rem !important;
  padding-inline-end: 2rem !important;
  padding-inline-start: 0.92rem !important;
  position: relative;
}

.rl-faq .rl-faq-item > summary .rl-faq-question {
  display: block;
  line-height: 1.4;
}

.rl-faq .rl-faq-item > summary::-webkit-details-marker {
  display: none;
}

.rl-faq .rl-faq-item > summary::marker {
  content: "";
}

.rl-faq .rl-faq-item > summary::before {
  background: none !important;
  content: none !important;
  display: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.rl-faq .rl-faq-item > summary::after {
  color: #d8f2f8;
  content: "›" !important;
  display: block !important;
  font-size: 1.05rem;
  line-height: 1;
  position: absolute;
  right: 0.86rem;
  top: 0.84rem;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.rl-faq .rl-faq-item[open] > summary {
  border-bottom: 1px solid rgba(199, 235, 244, 0.34);
  margin-bottom: 0.62rem;
}

.rl-faq .rl-faq-item[open] > summary::after {
  transform: rotate(90deg);
}

.rl-faq .rl-faq-item > p {
  color: rgba(227, 245, 251, 0.95);
  margin: 0;
  padding: 0 0.92rem 0.88rem;
}

@media screen and (max-width: 76.234375em) {
  .rl-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 48em) {
  .rl-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* Remove heading permalink mark (¶) from generated docs headings. */
.md-typeset .headerlink {
  display: none !important;
}

.md-typeset hr.rl-package-divider {
  border: 0;
  border-top: 0.06rem solid rgba(177, 215, 229, 0.42);
  margin: 1.25rem 0 1rem;
}

.md-nav--secondary .md-nav__title {
  background: rgba(176, 219, 234, 0.28);
  border: 1px solid rgba(201, 232, 242, 0.46);
  border-radius: 0.5rem;
  color: #0f3248 !important;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.md-nav--secondary .md-nav__title .md-nav__icon,
.md-nav--secondary .md-nav__title span {
  color: #0f3248 !important;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: #f4fcff;
}

.md-typeset h1 {
  border-bottom: 1px solid rgba(152, 219, 238, 0.35);
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
}

.md-typeset p,
.md-typeset li,
.md-typeset td {
  color: rgba(237, 245, 241, 0.95);
}

.md-typeset a,
.md-typeset a:visited {
  color: #d9f2f9 !important;
  text-decoration-color: rgba(217, 242, 249, 0.72) !important;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}

.md-typeset code {
  background: rgba(143, 199, 218, 0.18);
  border: 1px solid rgba(176, 219, 234, 0.42);
  border-radius: 0.35rem;
  color: #effbff;
}

.md-typeset a code {
  color: #e8fbff;
}

.md-typeset table:not([class]) {
  background: rgba(6, 37, 55, 0.82);
  border: 1px solid rgba(185, 224, 238, 0.4);
  border-radius: 0.5rem;
  border-spacing: 0;
  box-shadow: 0 8px 18px rgba(2, 18, 28, 0.2);
  display: table;
  overflow: hidden;
  width: 100%;
}

.md-typeset table:not([class]) th {
  background: rgba(158, 208, 225, 0.22);
  border-bottom: 1px solid rgba(185, 224, 238, 0.44);
  border-right: 1px solid rgba(185, 224, 238, 0.24);
  color: #f6fdff;
  font-weight: 700;
  padding: 0.72rem 0.85rem;
}

.md-typeset table:not([class]) td {
  background: rgba(9, 42, 60, 0.78);
  border-right: 1px solid rgba(185, 224, 238, 0.2);
  color: rgba(238, 248, 253, 0.96);
  padding: 0.66rem 0.85rem;
}

.md-typeset table:not([class]) code {
  background: rgba(7, 33, 49, 0.86);
  border: 1px solid rgba(168, 211, 227, 0.35);
  color: #e9f8ff;
}

.md-typeset table:not([class]) td:last-child,
.md-typeset table:not([class]) th:last-child {
  border-right: 0;
}

.md-typeset table:not([class]) tbody tr:nth-child(2n) td {
  background: rgba(11, 49, 69, 0.8);
}

.md-typeset table:not([class]) tbody tr:hover td {
  background: rgba(164, 215, 232, 0.16);
}

.md-typeset pre > code {
  border: 1px solid rgba(141, 209, 231, 0.22);
}

/* ------------------------------------------------------------------------
 * Code-block syntax highlighting overrides.
 *
 * Zensical / Material's default Pygments palette renders YAML keys in
 * blue and string values in green, which collide visually with the dark
 * ocean theme used by the rest of the site. We flatten the palette so:
 *   - structural tokens (YAML tags, INI attribute names, shell keywords
 *     and builtins) render bold white,
 *   - value tokens (strings, numbers, plain scalars, variables) render
 *     plain white,
 *   - comments render dimmed italic so they read as subordinate context
 *     without disappearing entirely.
 *
 * Applies to every code block in `.md-typeset` regardless of the
 * fenced-block language, so YAML, INI, shell, libconfig and JSON
 * snippets all stay readable.
 * ---------------------------------------------------------------------- */

.md-typeset .highlight .n,
.md-typeset .highlight .err,
.md-typeset .highlight .o,
.md-typeset .highlight .p,
.md-typeset .highlight .s,
.md-typeset .highlight .s1,
.md-typeset .highlight .s2,
.md-typeset .highlight .sb,
.md-typeset .highlight .sc,
.md-typeset .highlight .sd,
.md-typeset .highlight .se,
.md-typeset .highlight .sh,
.md-typeset .highlight .si,
.md-typeset .highlight .sr,
.md-typeset .highlight .ss,
.md-typeset .highlight .sx,
.md-typeset .highlight .m,
.md-typeset .highlight .mi,
.md-typeset .highlight .mf,
.md-typeset .highlight .mb,
.md-typeset .highlight .mh,
.md-typeset .highlight .mo,
.md-typeset .highlight .nf,
.md-typeset .highlight .ne,
.md-typeset .highlight .ni,
.md-typeset .highlight .no,
.md-typeset .highlight .nl,
.md-typeset .highlight .nv,
.md-typeset .highlight .vc,
.md-typeset .highlight .vg,
.md-typeset .highlight .vi,
.md-typeset .highlight .l,
.md-typeset .highlight .py,
.md-typeset .highlight .ow,
.md-typeset .highlight .kt,
.md-typeset .highlight .kc {
  color: #ffffff;
}

.md-typeset .highlight .nt,
.md-typeset .highlight .na,
.md-typeset .highlight .k,
.md-typeset .highlight .kd,
.md-typeset .highlight .kn,
.md-typeset .highlight .kp,
.md-typeset .highlight .kr,
.md-typeset .highlight .nb,
.md-typeset .highlight .nc,
.md-typeset .highlight .bp,
.md-typeset .highlight .nn {
  color: #ffffff;
  font-weight: 700;
}

.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm,
.md-typeset .highlight .cp,
.md-typeset .highlight .cpf,
.md-typeset .highlight .cs,
.md-typeset .highlight .ch {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

.md-footer {
  backdrop-filter: blur(8px);
  background: var(--rl-footer-bg);
  border-top: 1px solid var(--rl-line);
  color: var(--rl-off-white);
  inset: auto 0 0 0;
  position: fixed;
  width: 100%;
  z-index: 35;
}

.md-footer__inner,
.md-footer__title,
.md-footer__direction,
.md-footer__button,
.md-footer__link,
.md-footer-meta,
.md-footer-meta__inner,
.md-copyright,
.md-copyright__highlight {
  color: var(--rl-off-white);
}

.md-footer__link:hover,
.md-copyright__site-link:hover {
  color: #ffffff;
}

.md-footer__inner,
.md-footer-meta {
  background: var(--rl-footer-bg);
}

.md-footer-meta {
  border-top: 1px solid rgba(191, 223, 235, 0.22);
}

.md-footer__inner {
  background: var(--rl-footer-nav-bg);
  border-top: 1px solid rgba(198, 229, 240, 0.22);
}

.md-footer-meta__inner {
  align-items: center;
  display: flex;
  justify-content: center;
}

.md-copyright {
  text-align: center;
  width: 100%;
}

.md-copyright__highlight {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.35rem;
  justify-content: center;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

.md-copyright__text {
  color: var(--rl-off-white);
}

.md-copyright__divider {
  color: rgba(241, 244, 239, 0.72);
}

.md-copyright__site-link {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.md-copyright__site-link:visited,
.md-copyright__site-link:hover,
.md-copyright__site-link:active {
  color: #ffffff !important;
}

/* Keep both side menus pinned while main content scrolls. */
@media screen and (min-width: 60em) {
  .md-sidebar--primary,
  .md-sidebar--secondary {
    align-self: start;
    position: sticky;
    top: calc(var(--md-header-height, 2.8rem) + 0.55rem);
    z-index: 1;
  }

  .md-sidebar--primary .md-sidebar__inner,
  .md-sidebar--secondary .md-sidebar__inner {
    max-height: calc(100vh - var(--md-header-height, 2.8rem) - var(--rl-fixed-footer-height) - 1.25rem);
  }

  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    max-height: calc(100vh - var(--md-header-height, 2.8rem) - var(--rl-fixed-footer-height) - 1.25rem);
    overflow-y: auto;
  }
}

.floating-bg-logo {
  /* Decorative watermark drifting behind all docs content. */
  background-image:
    url("../assets/branding/reeflogic-favicon.png"),
    url("https://www.reeflogic.org/favicon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 24px rgba(3, 19, 28, 0.35));
  height: 400px;
  left: 50%;
  mix-blend-mode: screen;
  opacity: 0.08;
  pointer-events: none;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  will-change: transform, opacity;
  z-index: 8;
}

.ocean-bubbles {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 11;
}

.ocean-bubble {
  --bubble-size: 10px;
  --bubble-left: 50vw;
  --bubble-rise: 95vh;
  --bubble-drift: 0px;
  --bubble-sway: 8px;
  --bubble-opacity: 0.1;
  --bubble-duration: 20s;
  --bubble-delay: 0s;
  --bubble-swirl-duration: 5s;
  --bubble-twist: 11deg;
  animation: rlBubbleRise var(--bubble-duration) linear var(--bubble-delay) infinite;
  bottom: calc(-1 * var(--bubble-size) - 12vh);
  height: var(--bubble-size);
  left: var(--bubble-left);
  opacity: 0;
  position: absolute;
  width: var(--bubble-size);
  will-change: transform, opacity;
  z-index: 1;
}

.ocean-bubble::before {
  animation: rlBubbleSwirl var(--bubble-swirl-duration) ease-in-out var(--bubble-delay) infinite;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(242, 253, 255, 0.58) 0%,
    rgba(189, 233, 247, 0.24) 38%,
    rgba(129, 200, 225, 0.08) 74%,
    rgba(99, 171, 198, 0.01) 100%
  );
  border: 1px solid rgba(190, 232, 246, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(143, 214, 234, 0.12),
    inset 0 0 6px rgba(237, 250, 255, 0.2);
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}

.ocean-bubble.is-short {
  animation-name: rlBubbleRiseShort;
}

body.motion-calm .ocean-bubbles {
  display: block !important;
}

body.motion-calm .floating-bg-logo {
  animation: none !important;
  opacity: 0.09;
  transition: opacity 0.24s ease;
}

@keyframes rlBubbleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  10% {
    opacity: var(--bubble-opacity);
  }

  36% {
    transform: translate3d(calc(var(--bubble-drift) * 0.18), calc(var(--bubble-rise) * -0.36), 0);
  }

  60% {
    transform: translate3d(calc(var(--bubble-drift) * -0.2), calc(var(--bubble-rise) * -0.66), 0);
  }

  80% {
    opacity: calc(var(--bubble-opacity) * 0.62);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--bubble-drift), calc(var(--bubble-rise) * -1), 0);
  }
}

@keyframes rlBubbleRiseShort {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  10% {
    opacity: var(--bubble-opacity);
  }

  42% {
    opacity: calc(var(--bubble-opacity) * 0.7);
    transform: translate3d(calc(var(--bubble-drift) * 0.08), calc(var(--bubble-rise) * -0.4), 0);
  }

  66% {
    opacity: 0;
    transform: translate3d(calc(var(--bubble-drift) * -0.18), calc(var(--bubble-rise) * -0.68), 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--bubble-drift) * -0.22), calc(var(--bubble-rise) * -0.74), 0);
  }
}

@keyframes rlBubbleSwirl {
  0% {
    transform: translateX(0) scale(0.9) rotate(0deg);
  }

  25% {
    transform: translateX(var(--bubble-sway)) scale(1) rotate(var(--bubble-twist));
  }

  50% {
    transform: translateX(calc(var(--bubble-sway) * -0.72)) scale(1.04) rotate(calc(var(--bubble-twist) * -0.55));
  }

  75% {
    transform: translateX(calc(var(--bubble-sway) * 0.46)) scale(1) rotate(calc(var(--bubble-twist) * 0.4));
  }

  100% {
    transform: translateX(0) scale(0.95) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-bg-logo,
  .ocean-bubble {
    animation: none !important;
  }

  .ocean-bubble::before {
    animation: none !important;
  }

  .ocean-bubbles {
    display: none !important;
  }
}

@media screen and (max-width: 76.234375em) {
  .floating-bg-logo {
    opacity: 0.08;
  }

  .md-overlay {
    backdrop-filter: none;
    background: rgba(0, 7, 12, 0.62);
  }

  .md-sidebar--primary,
  .md-sidebar--secondary {
    background: rgba(5, 25, 37, 0.98);
  }

  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #0a2f45 !important;
    border-color: rgba(199, 225, 236, 0.34);
    box-shadow: none;
  }

  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__link,
  .md-nav--secondary .md-nav__link {
    color: var(--rl-nav-link-color) !important;
  }

  .md-nav--primary .md-nav__link:hover,
  .md-nav--secondary .md-nav__link:hover,
  .md-nav--primary .md-nav__link:focus,
  .md-nav--secondary .md-nav__link:focus {
    background: var(--rl-nav-link-hover-bg);
    color: var(--rl-nav-link-hover-color) !important;
  }

  .md-nav--primary .md-nav__link--active,
  .md-nav--secondary .md-nav__link--active {
    background: var(--rl-nav-link-active-bg);
    border-color: var(--rl-nav-link-active-border);
    color: var(--rl-nav-link-active-color) !important;
  }
}

@media screen and (max-width: 30em) {
  .floating-bg-logo {
    height: clamp(9rem, 50vw, 12.5rem);
    width: clamp(9rem, 50vw, 12.5rem);
  }

  .md-content__inner {
    padding: 0.75rem 0.75rem 1rem;
  }
}