/* ==========================================================================
   Finer design layer — world-class micro-interactions
   Custom cursor · scroll progress · magnetic buttons · card tilt
   · animated underlines · button sheen · back-to-top · refined focus
   All effects are gated to fine pointers and disabled for reduced-motion.
   ========================================================================== */

/* Scroll progress bar ------------------------------------------------------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  z-index: 1400; pointer-events: none;
  box-shadow: 0 0 10px rgba(184, 134, 11, 0.5);
  transition: width 0.08s linear;
}

/* Back-to-top -------------------------------------------------------------- */
.to-top {
  position: fixed; left: 20px; bottom: 22px; z-index: 1150;
  width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
  background: var(--surface); color: var(--navy-700); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(14px) scale(0.9);
  pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s, color 0.2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--navy-800); color: #fff; transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .to-top { left: 14px; bottom: 16px; width: 42px; height: 42px; } }
body.sticky-on .to-top { bottom: 90px; }
@media (max-width: 720px) { body.sticky-on .to-top { bottom: 116px; } }

/* Custom cursor (desktop, fine pointer only) ------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor * { cursor: none !important; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none;
    border-radius: 999px; transform: translate(-50%, -50%);
    will-change: transform; mix-blend-mode: normal;
  }
  .cursor-dot { width: 7px; height: 7px; background: var(--gold-600); transition: width 0.2s, height 0.2s, background 0.2s; }
  .cursor-ring {
    width: 34px; height: 34px; border: 1.5px solid rgba(184, 134, 11, 0.55);
    transition: width 0.22s var(--ease), height 0.22s var(--ease), border-color 0.22s, background 0.22s, opacity 0.22s;
  }
  .cursor-ring.hot { width: 56px; height: 56px; border-color: rgba(184, 134, 11, 0.9); background: rgba(184, 134, 11, 0.08); }
  .cursor-ring.down { width: 26px; height: 26px; }
  .cursor-dot.hot { background: var(--gold-500); }
  .cursor-hidden { opacity: 0 !important; }
  /* keep text caret usable in fields */
  .has-cursor input, .has-cursor textarea, .has-cursor select { cursor: text !important; }
  .has-cursor select { cursor: pointer !important; }
}

/* Magnetic / sheen buttons ------------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn-gold::after, .btn-navy::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease); pointer-events: none;
}
.btn-gold:hover::after, .btn-navy:hover::after { left: 130%; }

/* Animated link underline (footer & rail & dropdown text links) ------------ */
.footer-col a, .rail-links a, .crumbs a {
  background-image: linear-gradient(var(--gold-400), var(--gold-400));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease), color 0.2s;
}
.footer-col a:hover, .crumbs a:hover { background-size: 100% 1.5px; }

/* Card lift gets a soft gold edge on hover (tilt handled in JS) ------------- */
.card, .spec-card, .story-card, .logo-tile, .quote-card, .post-card,
.badge-thumb, .person-card { transform-style: preserve-3d; will-change: transform; }
.tilt-glow { position: relative; }
.tilt-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 160, 23, 0.10), transparent 60%);
  opacity: 0; transition: opacity 0.3s; z-index: 1;
}
.tilt-glow:hover::before { opacity: 1; }

/* Hero seal subtle float --------------------------------------------------- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cred-card .seal-img { animation: floaty 5s ease-in-out infinite; }

/* Gold animated gradient on hero italic ------------------------------------ */
.hero h1 em {
  background: linear-gradient(100deg, var(--gold-300), var(--gold-500), var(--gold-300));
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-300);
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }

/* Refined keyboard focus (don't show ring on mouse) ------------------------ */
.btn:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }

/* Reduced motion / touch — disable the flourishes ------------------------- */
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .has-cursor, .has-cursor * { cursor: auto !important; }
  .cred-card .seal-img, .hero h1 em { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-gold::after, .btn-navy::after { display: none; }
  .scroll-progress { transition: none; }
}