/* Decorative motion — ORC lab header & chrome. Non-interactive; see lab-motion.mjs for pause. */

.site-header__deck {
  position: relative;
  flex: 1 1 5rem;
  min-width: 2.5rem;
  max-width: 14rem;
  align-self: stretch;
  min-height: 44px;
  pointer-events: none;
  overflow: hidden;
  container-type: inline-size;
}

.site-header__waterline {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 10px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-accent) 35%, var(--color-border-subtle)) 22%,
    color-mix(in srgb, var(--color-accent) 45%, var(--color-border-subtle)) 50%,
    color-mix(in srgb, var(--color-accent) 35%, var(--color-border-subtle)) 78%,
    transparent
  );
  opacity: 0.55;
}

.header-sailboat-track {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 52px;
  height: 28px;
  will-change: transform;
  animation: header-sail-drift 28s ease-in-out infinite;
}

.header-sailboat {
  display: block;
  width: 52px;
  height: 28px;
  color: var(--color-ink);
  will-change: transform;
  animation: header-sail-bob 4.8s ease-in-out infinite;
}

.header-sailboat .sail-accent {
  fill: color-mix(in srgb, var(--color-accent) 72%, var(--color-ink));
}

.header-sailboat .hull {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-sailboat .mast {
  stroke: var(--color-muted);
  stroke-width: 1;
}

@keyframes header-sail-drift {
  0%,
  100% {
    transform: translateX(4cqi);
  }
  50% {
    transform: translateX(calc(100cqi - 56px));
  }
}

@keyframes header-sail-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-0.6deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.6deg);
  }
}

@keyframes header-water-shimmer {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.72;
  }
}

html:not(.lab-motion--paused):not(.lab-motion--reduce) .site-header__waterline {
  animation: header-water-shimmer 6s ease-in-out infinite;
}

/* Footer nav — quiet hover lift (color unchanged in styles.css) */
.site-footer__nav-link {
  transition: transform 160ms ease, color 160ms ease;
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
  transform: translateY(-1px);
}

/* Hero sail plan — barely-there idle when not docked / flipping */
@keyframes lab-plan-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.985;
  }
}

html:not(.lab-motion--paused):not(.lab-motion--reduce) #sail-plan:not(.sail-plan--docked):not(.sail-plan--flip) .diagram-host {
  animation: lab-plan-breathe 14s ease-in-out infinite;
}

@media (max-width: 900px) {
  .site-header__deck {
    flex: 1 1 2.5rem;
    max-width: 6rem;
  }
}

@media (max-width: 399px) {
  .site-header__deck {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-sailboat-track,
  .header-sailboat,
  .site-header__waterline,
  #sail-plan .diagram-host {
    animation: none !important;
  }

  .header-sailboat-track {
    left: 50%;
    transform: translateX(-50%);
  }

  .site-footer__nav-link {
    transition: none;
  }

  .site-footer__nav-link:hover,
  .site-footer__nav-link:focus-visible {
    transform: none;
  }
}

html.lab-motion--reduce .header-sailboat-track,
html.lab-motion--reduce .header-sailboat,
html.lab-motion--reduce .site-header__waterline,
html.lab-motion--reduce #sail-plan .diagram-host {
  animation: none !important;
}

html.lab-motion--reduce .header-sailboat-track {
  left: 50%;
  transform: translateX(-50%);
}

html.lab-motion--paused .header-sailboat-track,
html.lab-motion--paused .header-sailboat,
html.lab-motion--paused .site-header__waterline,
html.lab-motion--paused #sail-plan .diagram-host {
  animation-play-state: paused;
}