/* Component styles live in global CSS to keep the project minimal. */

.siteHeader {
  position: sticky;
  top: var(--space-0);
  z-index: var(--z-header);
  background: var(--header-bg);
  border-bottom: var(--border-1) solid transparent;
  box-shadow: var(--shadow-sm);
  --header-t: 0;
  --header-inv: calc(1 - var(--header-t));
  --header-pad-top: calc(
    var(--size-header-hero-pad-top) +
      (var(--size-header-sticky-pad-top) - var(--size-header-hero-pad-top)) *
      var(--header-t)
  );
  --header-pad-bottom: calc(
    var(--size-header-hero-pad-bottom) +
      (var(--size-header-sticky-pad-bottom) - var(--size-header-hero-pad-bottom)) *
      var(--header-t)
  );
  /* Gap only matters while the hero logo row exists */
  --header-gap: calc(var(--size-header-hero-gap) * var(--header-inv));
  --header-nav-pad-top: calc(
    var(--size-header-hero-nav-pad-top) +
      (var(--size-header-sticky-nav-pad-top) - var(--size-header-hero-nav-pad-top)) *
      var(--header-t)
  );
  --logo-header-current-height: calc(
    var(--logo-header-hero-height) +
      (var(--logo-header-sticky-height) - var(--logo-header-hero-height)) *
      var(--header-t)
  );
}

.siteHeader::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-1);
  background: var(--color-border);
  opacity: var(--header-t);
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.headerInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--header-gap);
  padding-top: var(--header-pad-top);
  padding-bottom: var(--header-pad-bottom);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  justify-content: center;
  padding-block: var(--space-3);
}

.brandHero {
  opacity: var(--header-inv);
  transform: translateY(calc(var(--size-header-logo-slide-y) * var(--header-t)));
  transition: opacity var(--motion-fast) var(--motion-ease);
  /* Smoothly collapse the hero logo block out of layout so the sticky nav lands higher */
  max-height: calc((var(--logo-header-hero-height) + var(--space-9)) * var(--header-inv));
  padding-block: calc(var(--space-3) * var(--header-inv));
  overflow: hidden;
}

.siteHeader[data-mode="sticky"] .brandHero,
html[data-header="sticky"] .siteHeader .brandHero {
  pointer-events: none;
  opacity: 0;
  max-height: 0;
  padding-block: 0;
  overflow: hidden;
}

html[data-header="sticky"] .siteHeader {
  --header-t: 1;
}

html[data-header="sticky"] .siteHeader .brandSticky {
  opacity: 1;
  pointer-events: auto;
}

html[data-header="sticky"] .siteHeader .headerNavLinksCentered {
  opacity: 0;
  pointer-events: none;
}

html[data-header="sticky"] .siteHeader .headerNavLinksLeft,
html[data-header="sticky"] .siteHeader .headerNavLinksRight {
  opacity: 1;
  pointer-events: auto;
}

.brandSticky {
  display: inline-flex;
  grid-column: 2;
  padding-block: var(--space-1);
  opacity: var(--header-t);
  transform: translateY(calc(var(--size-header-logo-slide-y) * var(--header-inv) * -1));
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--motion-ease);
  flex-direction: column;
  align-items: center;
  gap: var(--space-0);
  position: relative;
  align-self: center;
}

.siteHeader[data-mode="hero"] .brandSticky {
  pointer-events: none;
}

.siteHeader[data-mode="sticky"] .brandSticky {
  pointer-events: auto;
}

.brandStickyName {
  font: var(--text-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  opacity: var(--header-t);
  position: absolute;
  left: 50%;
  top: calc(100% + (var(--space-1) * var(--header-t)));
  transform: translateX(-50%) translateY(calc(var(--space-1) * var(--header-inv) * -1));
  white-space: nowrap;
  max-height: calc(var(--size-header-sticky-name-max-height) * var(--header-t));
  overflow: hidden;
}

.brand:hover {
  text-decoration: none;
}

.brandLogo {
  height: var(--logo-header-current-height);
  width: auto;
  object-fit: contain;
}
/* Header nav layout */
.headerNavRow {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--header-nav-pad-top);
  transform: translateY(calc(var(--size-header-nav-slide-y) * var(--header-t) * -1));
}

.headerNavLinks {
  display: none;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space-6) + (var(--space-2) * var(--header-t)));
}

.headerNavLinksCentered {
  grid-column: 2;
  opacity: var(--header-inv);
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.siteHeader[data-mode="hero"] .headerNavLinksCentered {
  pointer-events: auto;
}

.siteHeader[data-mode="sticky"] .headerNavLinksCentered {
  pointer-events: none;
}

.headerNavLinksLeft {
  grid-column: 2;
  justify-content: center;
  opacity: var(--header-t);
  transform: translateX(calc(var(--size-header-nav-split-x) * var(--header-inv)));
  pointer-events: none;
  padding-right: calc(var(--space-5) * var(--header-t));
  white-space: nowrap;
  align-self: center;
}

.siteHeader[data-mode="sticky"] .headerNavLinksLeft {
  pointer-events: auto;
}

.headerNavLinksRight {
  grid-column: 2;
  justify-content: center;
  opacity: var(--header-t);
  transform: translateX(calc(var(--size-header-nav-split-x) * var(--header-inv) * -1));
  pointer-events: none;
  padding-left: calc(var(--space-5) * var(--header-t));
  white-space: nowrap;
  align-self: center;
}

.siteHeader[data-mode="sticky"] .headerNavLinksRight {
  pointer-events: auto;
}

.headerTools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  opacity: calc(0.92 + 0.08 * var(--header-inv));
  transform: scale(calc(0.9 + 0.1 * var(--header-inv)));
  align-self: center;
}

.navLink {
  font: var(--text-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
}

.navLink:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.navLink:focus-visible {
  outline: var(--border-2) solid var(--focus-ring);
  outline-offset: var(--space-1);
  border-radius: var(--radius-sm);
}

.themeToggle {
  display: inline-flex;
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  gap: var(--space-1);
}

.headerTools .themeToggle {
  background: transparent;
  border-color: transparent;
  padding: var(--space-0);
}

.headerTools .themeToggle:hover {
  border-color: var(--color-border);
}

.headerTools .themeButton {
  padding: var(--space-1) var(--space-1);
}

.headerTools .themeButton[aria-pressed="true"] {
  background: transparent;
  border-color: transparent;
}

/* Mobile menu */
.mobileMenu {
  grid-column: 1;
  justify-self: start;
  position: relative;
}

.hamburgerButton {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--color-border);
  background: var(--color-surface);
}

.hamburgerButton::-webkit-details-marker {
  display: none;
}

.hamburgerButton:hover {
  border-color: var(--color-accent);
}

.hamburgerButton:focus-visible {
  outline: var(--border-2) solid var(--focus-ring);
  outline-offset: var(--space-1);
}

.hamburgerIcon {
  display: grid;
  gap: var(--space-1);
}

.hamburgerBar {
  display: block;
  width: var(--space-6);
  height: var(--border-2);
  background: var(--color-text-muted);
  border-radius: var(--radius-pill);
}

.mobileNav {
  position: absolute;
  left: var(--space-0);
  top: calc(var(--space-8) + var(--space-2));
  min-width: var(--size-mobile-nav-min-width);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.mobileNavLink {
  font: var(--text-body-sm);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.mobileNavLink:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}

.mobileMenu:not([open]) .mobileNav {
  display: none;
}

/* Product card logo layout */
.cardTitleRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cardTitleStack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cardLogo {
  width: var(--size-card-logo);
  height: var(--size-card-logo);
  border-radius: var(--size-card-logo-radius);
  background: var(--color-surface-alt);
  border: var(--border-1) solid var(--color-border);
  object-fit: contain;
}

.themeButton {
  appearance: none;
  background: transparent;
  border: var(--border-1) solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.themeButton[aria-pressed="true"] {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

.themeButton:focus-visible {
  outline: var(--border-2) solid var(--focus-ring);
  outline-offset: var(--space-1);
}

.themeIcon {
  display: inline-flex;
}

.srOnly {
  position: absolute;
  width: var(--space-1);
  height: var(--space-1);
  padding: var(--space-0);
  margin: calc(var(--space-1) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: var(--space-0);
}

/* Subtle logo center glow (pseudo-element; PNG unchanged) */
.logoGlow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logoGlow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 42%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-accent) 22%, transparent) 0%,
    transparent 70%
  );
  filter: blur(14px);
  opacity: var(--logo-glow-opacity);
  z-index: 0;
  animation: logoGlowBreath var(--motion-logo-glow) var(--motion-ease) infinite;
}

.logoGlow > * {
  position: relative;
  z-index: 1;
}

@keyframes logoGlowBreath {
  0% {
    opacity: var(--logo-glow-opacity);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: calc(var(--logo-glow-opacity) * 0.97);
    transform: translate(-50%, -50%) scale(1.01);
  }
  100% {
    opacity: var(--logo-glow-opacity);
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logoGlow::before {
    animation: none;
  }
}

.hero {
  margin-top: var(--space-4);
  padding-block: var(--space-9);
}

.heroInner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

.heroLeft {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}

.heroLogoWrap {
  display: flex;
  justify-content: center;
}

.heroLogoImage {
  height: var(--logo-hero-height);
  width: auto;
  object-fit: contain;
}

.heroLogo {
  width: fit-content;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.heroTitle {
  margin: var(--space-0);
  font: var(--text-display);
  font-weight: var(--font-weight-bold);
}

.heroSubtext {
  margin: var(--space-0);
  color: var(--color-text-muted);
}

.heroCtas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mascotCard {
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--content-max);
}

.mascotIcon {
  width: fit-content;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  border: var(--border-1) solid var(--color-border);
}

.mascotText {
  margin: var(--space-0);
  font: var(--text-body-sm);
  color: var(--color-text-muted);
}

.mascotSectionWrap {
  margin-top: var(--space-5);
  display: flex;
  justify-content: center;
}

@media (min-width: 52rem) {
  .headerNavRow {
    grid-template-columns: 1fr auto 1fr auto;
    grid-template-rows: 1fr;
  }

  .headerTools {
    grid-column: 4;
    grid-row: 1;
  }

  .headerNavLinks {
    display: flex;
  }

  .headerNavLinksCentered {
    grid-column: 1 / span 3;
    grid-row: 1;
  }

  .headerNavLinksLeft {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    padding-right: calc(var(--space-6) * var(--header-t));
  }

  .brandSticky {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .headerNavLinksRight {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    padding-left: calc(var(--space-6) * var(--header-t));
  }

  /* Only the sticky split nav should be clickable in sticky mode.
     In hero mode, keep these layers non-interactive so the centered nav receives clicks. */
  .siteHeader[data-mode="sticky"] .headerNavLinksLeft,
  .siteHeader[data-mode="sticky"] .headerNavLinksRight {
    pointer-events: auto;
  }

  .mobileMenu {
    display: none;
  }

  .heroLeft {
    align-items: center;
    text-align: center;
  }
}

.productTitleRow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.productLogo {
  width: var(--size-product-logo);
  height: var(--size-product-logo);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
}

.loadingScreen {
  min-height: var(--size-loading-min-height);
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--space-5);
}

.loadingStack {
  width: 100%;
  max-width: var(--size-loading-max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: var(--border-1) solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.loadingBrand {
  height: var(--size-loading-brand-height);
  width: auto;
  object-fit: contain;
}

.loadingTitleRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.loadingProductMark {
  width: var(--size-loading-product-mark);
  height: var(--size-loading-product-mark);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  border: var(--border-1) solid var(--color-border);
}

.loadingTitleText {
  font: var(--text-h3);
  font-weight: var(--font-weight-bold);
}

.spinner {
  width: var(--size-loading-spinner);
  height: var(--size-loading-spinner);
  border-radius: var(--radius-pill);
  border: var(--border-2) solid var(--color-border);
  border-top-color: var(--color-accent);
  animation: spin var(--motion-spin) linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}