/* ============================================================================
   PROTO-OWNED FOOTER — independent site chrome for Web Proto.
   This file owns the footer identity, layout, and searchlight wordmark.
   ============================================================================ */

@layer components {
  :where(
    body:has(.site-footer),
    .page-shell--footer-tacet,
    .site-footer
  ) {
    --site-footer-bg: color-mix(
      in oklch,
      var(--proto-beige-200),
      var(--proto-beige-100) 18%
    );
    --site-footer-bg-soft: color-mix(
      in oklch,
      var(--proto-beige-300),
      var(--proto-beige-100) 44%
    );
    --site-footer-bg-lift: color-mix(
      in oklch,
      var(--proto-beige-100),
      var(--proto-footer-highlight) 18%
    );
    --site-footer-ink: var(--proto-ink-mid);
    --site-footer-ink-muted: var(--proto-ink-muted);
    --site-footer-ink-strong: var(--proto-ink-deep);
    --site-footer-rule: color-mix(in oklch, var(--proto-beige-700), transparent 78%);
    --site-footer-glow-core: color-mix(
      in oklch,
      var(--proto-beige-100),
      var(--proto-footer-highlight) 38%
    );
    --site-footer-glow-mid: color-mix(
      in oklch,
      var(--proto-beige-400),
      var(--proto-tacet-orange) 5%
    );
    --site-footer-glow-edge: color-mix(
      in oklch,
      var(--proto-beige-500),
      transparent 84%
    );
    --site-footer-logo-filter: none;
    --site-footer-icon-filter: none;
    --site-footer-seam-surface: var(--site-footer-bg-soft);
    --site-footer-backdrop:
      radial-gradient(
        circle at 14% 84%,
        color-mix(in oklch, var(--proto-beige-200), var(--proto-tacet-orange) 4%) 0%,
        color-mix(in oklch, var(--proto-beige-300), transparent 54%) 22%,
        transparent 48%
      ),
      radial-gradient(
        circle at 62% 12%,
        color-mix(in oklch, var(--proto-beige-200), var(--proto-pur) 2%) 0%,
        color-mix(in oklch, var(--proto-beige-300), transparent 66%) 18%,
        transparent 36%
      ),
      radial-gradient(
        circle at 102% 52%,
        color-mix(in oklch, var(--proto-beige-300), var(--proto-tacet-orange) 2%) 0%,
        color-mix(in oklch, var(--proto-beige-400), transparent 72%) 16%,
        transparent 34%
      );
  }

  html.dark
    :where(
      body:has(.site-footer),
      .page-shell--footer-tacet,
      .site-footer
    ) {
    --site-footer-bg: var(--proto-beige-800);
    --site-footer-bg-soft: color-mix(
      in oklch,
      var(--proto-beige-800),
      var(--proto-beige-900) 36%
    );
    --site-footer-bg-lift: color-mix(
      in oklch,
      var(--proto-beige-700),
      var(--proto-beige-800) 48%
    );
    --site-footer-ink: var(--proto-beige-300);
    --site-footer-ink-muted: color-mix(
      in oklch,
      var(--proto-beige-300),
      transparent 24%
    );
    --site-footer-ink-strong: var(--proto-beige-100);
    --site-footer-rule: color-mix(in oklch, var(--proto-beige-300), transparent 72%);
    --site-footer-glow-core: color-mix(
      in oklch,
      var(--proto-beige-100),
      var(--proto-tacet-orange) 6%
    );
    --site-footer-glow-mid: color-mix(
      in oklch,
      var(--proto-beige-400),
      var(--proto-tacet-orange) 9%
    );
    --site-footer-glow-edge: color-mix(
      in oklch,
      var(--proto-beige-500),
      transparent 76%
    );
    --site-footer-logo-filter: brightness(0) saturate(100%) invert(91%)
      sepia(10%) saturate(218%) hue-rotate(351deg) brightness(101%)
      contrast(90%);
    --site-footer-icon-filter: brightness(0) saturate(100%) invert(83%)
      sepia(7%) saturate(394%) hue-rotate(355deg) brightness(89%) contrast(88%);
    --site-footer-backdrop:
      radial-gradient(
        circle at 12% 86%,
        color-mix(in oklch, var(--proto-beige-600), var(--proto-tacet-orange) 6%) 0%,
        color-mix(in oklch, var(--proto-beige-700), transparent 48%) 20%,
        transparent 48%
      ),
      radial-gradient(
        circle at 68% 8%,
        color-mix(in oklch, var(--proto-beige-700), var(--proto-pur) 2%) 0%,
        color-mix(in oklch, var(--proto-beige-800), transparent 58%) 16%,
        transparent 34%
      ),
      radial-gradient(
        circle at 104% 58%,
        color-mix(in oklch, var(--proto-beige-700), var(--proto-tacet-orange) 4%) 0%,
        color-mix(in oklch, var(--proto-beige-800), transparent 60%) 18%,
        transparent 36%
      );
  }

  body:has(.site-footer),
  .page-shell--footer-tacet {
    background-color: var(--site-footer-bg);
  }

  .site-footer {
    --site-footer-section-pad-x: clamp(1.5rem, 4vw, 3rem);
    --site-footer-section-max: 90rem;
    --site-footer-visible-rail: min(
      calc(100% - (2 * var(--site-footer-section-pad-x))),
      calc(
        var(--site-footer-section-max) - (2 * var(--site-footer-section-pad-x))
      )
    );

    position: relative;
    box-sizing: border-box;
    width: 100%;
    flex: none;
    isolation: isolate;
    overflow: visible;
    padding: clamp(1rem, 1.5vw, 1.5rem);
    border-top: 0;
    color: var(--site-footer-ink);
    background-color: var(--site-footer-bg);
    background-image: var(--site-footer-backdrop);
    box-shadow: var(--proto-footer-rich-surface-shadow);
  }

  html.dark .site-footer {
    --site-footer-glow-core: color-mix(
      in oklch,
      var(--proto-beige-200),
      transparent 42%
    );
    --site-footer-glow-mid: color-mix(
      in oklch,
      var(--proto-beige-500),
      transparent 66%
    );
    --site-footer-glow-edge: color-mix(
      in oklch,
      var(--proto-beige-600),
      transparent 88%
    );
    --site-footer-backdrop: radial-gradient(
      ellipse 58% 48% at 10% 100%,
      color-mix(in oklch, var(--proto-beige-700), transparent 68%) 0%,
      color-mix(in oklch, var(--proto-beige-800), transparent 82%) 38%,
      transparent 76%
    );

  }

  .page-shell--footer-tacet > #main {
    box-shadow: var(--proto-footer-main-seam-shadow);
  }

  html.dark .page-shell--footer-tacet > #main {
    box-shadow: var(--proto-footer-main-seam-shadow);
  }

  .site-footer__inner {
    position: relative;
    z-index: 1;
    width: var(--site-footer-visible-rail);
    max-width: calc(
      var(--site-footer-section-max) - (2 * var(--site-footer-section-pad-x))
    );
    margin-inline: auto;
    padding-block: clamp(1.55rem, 3vw, 2.5rem) clamp(1rem, 1.8vw, 1.5rem);
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(24rem, 1.1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer__logo {
    display: inline-flex;
    width: min(9.6rem, 48vw);
    color: var(--site-footer-ink-strong);
  }

  .site-footer__logo img {
    width: 100%;
    height: auto;
    filter: var(--site-footer-logo-filter);
  }

  .site-footer__summary {
    max-width: 36rem;
    margin: 0;
    color: var(--site-footer-ink-muted);
    font-size: clamp(0.84rem, 0.8rem + 0.12vw, 0.92rem);
    line-height: 1.5;
  }

  .site-footer__maker {
    display: inline-flex;
    align-items: center;
    color: inherit;
    margin-inline-start: 0.25em;
    vertical-align: middle;
    white-space: nowrap;
  }

  .site-footer__maker-wordmark {
    display: block;
    width: auto;
    height: 1.15em;
    filter: var(--site-footer-logo-filter);
  }

  .site-footer__social {
    display: flex;
    gap: 0.85rem;
    align-items: center;
  }

  .site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--site-footer-ink-muted);
    opacity: 0.78;
    transition:
      color var(--proto-duration-fast) var(--proto-ease-standard),
      opacity var(--proto-duration-fast) var(--proto-ease-standard),
      transform var(--proto-duration-fast) var(--proto-ease-standard);
  }

  .site-footer__social a:hover,
  .site-footer__social a:focus-visible {
    color: var(--site-footer-ink-strong);
    opacity: 1;
    transform: translateY(-1px);
  }

  .site-footer__social img {
    width: 1.125rem;
    height: 1.125rem;
    filter: var(--site-footer-icon-filter);
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 3rem);
  }

  .site-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__nav a {
    display: inline-flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    align-items: center;
    color: var(--site-footer-ink-muted);
    font-family: var(--proto-font-body);
    font-size: clamp(0.82rem, 0.78rem + 0.12vw, 0.92rem);
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition:
      color var(--proto-duration-fast) var(--proto-ease-standard),
      transform var(--proto-duration-fast) var(--proto-ease-standard);
  }

  .site-footer__nav a:hover,
  .site-footer__nav a:focus-visible {
    color: var(--site-footer-ink-strong);
    transform: translateX(2px);
  }

  .site-footer__mark {
    --footer-mark-x: 42%;
    --footer-mark-y: 52%;

    position: relative;
    width: 100%;
    aspect-ratio: 594 / 100;
    height: auto;
    margin-block: clamp(1.55rem, 3vw, 2.45rem) clamp(0.85rem, 2vw, 1.4rem);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }

  .site-footer__mark-outline,
  .site-footer__mark-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .site-footer__mark-outline {
    background: var(--proto-footer-wordmark-outline);
    opacity: 0.76;
    mask: url("../images/footer/proto-wordmark-outline.svg") left center / 100%
      auto no-repeat;
    -webkit-mask: url("../images/footer/proto-wordmark-outline.svg") left
      center / 100% auto no-repeat;
  }

  .site-footer__mark-mask {
    opacity: 1;
    mask: url("../images/proto-wordmark.svg") left center / 100% auto no-repeat;
    -webkit-mask: url("../images/proto-wordmark.svg") left center / 100% auto
      no-repeat;
  }

  .site-footer__mark-searchlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle var(--proto-footer-wordmark-glow-radius) at
        var(--footer-mark-x, 42%) var(--footer-mark-y, 52%),
      var(--proto-footer-wordmark-glow-core) 0%,
      var(--proto-footer-wordmark-glow-mid) 24%,
      var(--proto-footer-wordmark-glow-edge) 48%,
      transparent 78%
    );
    opacity: 0.9;
    transition: opacity 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  html.dark .site-footer__mark-searchlight {
    opacity: 0.5;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    color: var(--site-footer-ink-muted);
    font-family: var(--proto-font-body);
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .site-footer__utilities {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
  }

  .site-footer__theme-toggle,
  .footer-theme-switch {
    position: relative;
    display: inline-flex;
    gap: 0;
    align-items: center;
    width: 4.625rem;
    height: 2.125rem;
    padding: 0.1875rem;
    border: 1px solid var(--proto-border-strong);
    border-radius: var(--proto-radius-full);
    background: var(--proto-background);
    box-shadow: var(--proto-footer-toggle-track-shadow);
    isolation: isolate;
  }

  .site-footer__theme-thumb,
  .footer-theme-switch__thumb {
    position: absolute;
    z-index: 0;
    inset-block: 0.1875rem;
    left: 0.1875rem;
    width: calc(50% - 0.1875rem);
    border: 1px solid var(--proto-foreground);
    border-radius: var(--proto-radius-full);
    background: var(--proto-foreground);
    box-shadow: var(--proto-footer-toggle-thumb-shadow);
    transform: translateX(0);
    transition:
      transform var(--proto-duration-normal) var(--proto-ease-decelerate),
      background var(--proto-duration-fast) var(--proto-ease-standard),
      border-color var(--proto-duration-fast) var(--proto-ease-standard);
    pointer-events: none;
  }

  .site-footer__theme-toggle:has(
      .theme-btn[data-theme="dark"][data-active="true"]
    )
    .site-footer__theme-thumb,
  .footer-theme-switch:has(.theme-btn[data-theme="dark"][data-active="true"])
    .footer-theme-switch__thumb {
    transform: translateX(100%);
  }

  .site-footer__theme-toggle .theme-btn,
  .footer-theme-switch .theme-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 50%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--proto-muted-foreground);
    cursor: pointer;
  }

  .site-footer__theme-toggle .theme-btn[data-active="true"],
  .footer-theme-switch .theme-btn[data-active="true"] {
    color: var(--proto-background);
  }

  .site-footer__theme-toggle .theme-btn:focus-visible,
  .footer-theme-switch .theme-btn:focus-visible {
    outline: 2px solid var(--site-footer-accent, var(--proto-tacet-orange));
    outline-offset: 0.125rem;
  }

  .site-footer__theme-icon,
  .site-footer__theme-icon svg,
  .footer-theme-switch__icon,
  .footer-theme-switch__icon svg {
    display: inline-flex;
    width: 0.9375rem;
    height: 0.9375rem;
  }

  .footer-theme-switch__icon svg {
    stroke-width: 2.15;
  }

  .site-footer__status {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--site-footer-rule);
    border-radius: var(--proto-radius-full);
    color: var(--site-footer-ink-strong);
    background: color-mix(
      in oklch,
      var(--site-footer-bg-lift),
      transparent 46%
    );
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
  }

  /* Proto C1 ships only the Tacet footer profile. */
  :where(body:has(.proto-footer), .page-shell--proto, .proto-footer) {
    --site-footer-accent: var(--proto-tacet-orange);
    --site-footer-bg: var(--proto-footer-tacet-bg-light);
    --site-footer-bg-soft: var(--proto-footer-tacet-bg-soft-light);
    --site-footer-bg-lift: var(--proto-footer-tacet-bg-lift-light);
    --site-footer-ink: var(--proto-footer-tacet-ink-light);
    --site-footer-ink-strong: var(--proto-footer-tacet-ink-strong-light);
    --site-footer-ink-muted: var(--proto-footer-tacet-ink-muted-light);
    --site-footer-rule: var(--proto-footer-tacet-rule-light);
    --site-footer-logo-filter: none;
    --site-footer-icon-filter: none;
    --site-footer-seam-surface: var(--proto-footer-tacet-bg-soft-light);
    --site-footer-backdrop: linear-gradient(
      135deg,
      var(--proto-footer-tacet-bg-lift-light) 0%,
      var(--proto-footer-tacet-bg-soft-light) 42%,
      var(--proto-footer-tacet-bg-light) 100%
    );
  }

  html.dark
    :where(body:has(.proto-footer), .page-shell--proto, .proto-footer),
  html.dark .site-footer.proto-footer {
    --site-footer-bg: var(--proto-footer-tacet-bg-dark);
    --site-footer-bg-soft: var(--proto-footer-tacet-bg-soft-dark);
    --site-footer-bg-lift: var(--proto-footer-tacet-bg-lift-dark);
    --site-footer-ink: var(--proto-footer-tacet-ink-dark);
    --site-footer-ink-strong: var(--proto-footer-tacet-ink-strong-dark);
    --site-footer-ink-muted: var(--proto-footer-tacet-ink-muted-dark);
    --site-footer-rule: var(--proto-footer-tacet-rule-dark);
    --site-footer-logo-filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(218%)
      hue-rotate(351deg) brightness(101%) contrast(90%);
    --site-footer-icon-filter: brightness(0) saturate(100%) invert(83%) sepia(7%) saturate(394%)
      hue-rotate(355deg) brightness(89%) contrast(88%);
    --site-footer-seam-surface: var(--proto-footer-tacet-bg-soft-dark);
    --site-footer-backdrop: var(--proto-footer-tacet-backdrop-dark);
  }

  @media (pointer: coarse) {
    .site-footer__social a {
      width: 2.75rem;
      height: 2.75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-footer__mark-searchlight,
    .footer-theme-switch__thumb {
      transition: none;
    }
  }

  @media (max-width: 56rem) {
    .site-footer__top {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }

    .site-footer__nav {
      grid-template-columns: repeat(3, minmax(8rem, 1fr));
      overflow-x: auto;
      padding-bottom: 0.25rem;
    }
  }

  @media (max-width: 42rem) {
    .site-footer {
      padding: 0.75rem;
    }

    .site-footer__inner {
      width: min(calc(100% - 1.5rem), var(--site-footer-section-max));
    }

    .site-footer__nav {
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }

    .site-footer__bottom {
      align-items: flex-start;
      flex-direction: column;
    }

    .site-footer__utilities {
      justify-content: flex-start;
    }
  }
}