/* ============================================================
   OPTIC — MOTION PLUS (styles)
   Additive only. No layout, colour or type is redefined here;
   these rules add hover indicators, nav state and float loops.
   ============================================================ */

/* --- Nav: transparent over the hero, solid + blurred after --- */
header {
  transition:
    background-color 0.25s ease,
    backdrop-filter 0.25s ease,
    border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}

header.is-solid {
  background-color: rgba(255,255,255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: #1c1c1c;
}

/* --- Nav links: hairline indicator slides in on hover --- */
header nav a {
  position: relative;
}

header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: #4DA6FF;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

header nav a:hover::after,
header nav a[data-status="active"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- Scroll cue: a slow, endless float --- */
@keyframes optic-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

[data-cue] {
  animation: optic-float 2.8s ease-in-out infinite;
}

/* --- Footer / CTA links get the same magnetic-feeling lift --- */
footer a,
form button {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.25s ease;
}

footer a:hover,
form button:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  header,
  header nav a::after,
  [data-cue],
  footer a,
  form button {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}