/* ==========================================================================
   MOTION: hero entrance, background drift, the cursor orb, reduced motion.
   (The panel movement itself lives in showcase.css, next to the panel states.)
   ========================================================================== */

/* ---------- Hero: lines slide up from behind a mask ----------
   The "before" state only applies once <html> has the class "js" (set in index.html),
   and main.js adds "is-loaded" to play it. */
.js .hero__title .line__inner {
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease);
}
.js .hero__title .line:nth-child(2) .line__inner { transition-delay: 90ms; }
.js .hero__title .line:nth-child(3) .line__inner { transition-delay: 180ms; }
.js.is-loaded .hero__title .line__inner { transform: none; }

.js .hero__brand,
.js .hero__foot { opacity: 0; transition: opacity var(--dur-slow) var(--ease) 420ms; }
.js.is-loaded .hero__brand,
.js.is-loaded .hero__foot { opacity: 1; }

/* ---------- Background light shapes drift very slowly ---------- */
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(4vw, -3vh, 0); }
}
.ambient span { animation: drift 38s ease-in-out infinite alternate; }
.ambient span:nth-child(2) { animation-duration: 46s; animation-direction: alternate-reverse; }
.ambient span:nth-child(3) { animation-duration: 52s; }

/* ---------- The cursor orb: a small glossy lens (created by js/orb.js) ---------- */
.orb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;   /* centre it on the pointer */
  pointer-events: none;      /* never blocks clicks */
  opacity: 0;
  transition: opacity 300ms var(--ease);
  will-change: transform;
}
.orb.is-visible { opacity: 1; }

.orb__lens {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* glass: a bright highlight top-left fading to clear, with a fine rim */
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0.04) 70%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 0 0 1px rgba(25, 20, 12, 0.12),
    0 6px 16px -6px rgba(40, 32, 20, 0.35);
  -webkit-backdrop-filter: blur(2px) saturate(1.3);
  backdrop-filter: blur(2px) saturate(1.3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Over a link or button: grows a little */
.orb.is-hovering .orb__lens { transform: scale(1.55); }
/* Over a glass panel: becomes the panel's light (its glow brightens, see js/glass.js) */
.orb.is-on-glass .orb__lens {
  /* a firmer outline so it stays findable on bright glass, plus a soft glow */
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(25, 20, 12, 0.22),
    inset 0 -6px 10px -4px rgba(40, 32, 20, 0.16),
    0 0 26px 6px rgba(255, 255, 255, 0.6),
    0 8px 18px -6px rgba(40, 32, 20, 0.35);
}

/* ---------- Reduced motion: everything appears in place ----------
   showcase.js, glass.js and orb.js also check this setting. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
  .js .hero__title .line__inner { transform: none; }
  .js .hero__brand, .js .hero__foot { opacity: 1; }
}