/* ============================================================
   MERIDIAN — PHASE 5: cursor, magnetic buttons, scroll progress,
   section-connecting lines, hero entrance, responsive + a11y polish
   ============================================================ */

/* ---- Skip link ---- */
.skip-link {
  position: fixed;
  top: -60px;
  left: var(--gutter);
  z-index: 1000;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-sm);
  transition: top var(--dur-fast) var(--ease-architectural);
}
.skip-link:focus {
  top: 1rem;
}

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 150;
  background: transparent;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transform-origin: left;
}

/* ---- Custom cursor (fine pointers only — see js/polish.js) ---- */
.cursor-dot, .cursor-ring { display: none; }
html.has-fine-pointer .cursor-dot,
html.has-fine-pointer .cursor-ring {
  display: block;
  position: fixed;
  top: 0; left: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
html.has-fine-pointer body { cursor: none; }
html.has-fine-pointer a,
html.has-fine-pointer button,
html.has-fine-pointer input,
html.has-fine-pointer textarea,
html.has-fine-pointer select,
html.has-fine-pointer .project-item { cursor: none; }

.cursor-dot {
  width: 6px; height: 6px;
  background: var(--ink);
  transition: opacity var(--dur-fast) var(--ease-architectural);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--charcoal);
  transition: width var(--dur-fast) var(--ease-architectural),
              height var(--dur-fast) var(--ease-architectural),
              border-color var(--dur-fast) var(--ease-architectural),
              background var(--dur-fast) var(--ease-architectural),
              opacity var(--dur-fast) var(--ease-architectural);
  display: flex; align-items: center; justify-content: center;
}
.cursor-ring span {
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ivory);
  opacity: 0;
  font-family: var(--font-sans);
  transition: opacity var(--dur-fast) var(--ease-architectural);
}
html.has-fine-pointer.cursor-hidden .cursor-dot,
html.has-fine-pointer.cursor-hidden .cursor-ring { opacity: 0; }

.cursor-ring.is-cta {
  width: 52px; height: 52px;
  background: var(--ink);
  border-color: var(--ink);
}
.cursor-ring.is-view {
  width: 68px; height: 68px;
  background: var(--accent);
  border-color: var(--accent);
}
.cursor-ring.is-explore {
  width: 46px; height: 46px;
  background: transparent;
  border-color: var(--charcoal);
}
.cursor-ring.is-open {
  width: 44px; height: 44px;
  background: var(--paper);
  border-color: var(--charcoal);
}
.cursor-ring.is-contact {
  width: 58px; height: 58px;
  background: var(--accent);
  border-color: var(--accent);
}
.cursor-ring.is-view span,
.cursor-ring.is-contact span { opacity: 1; }
.cursor-ring.is-open span { opacity: 1; color: var(--charcoal); }

/* ---- Magnetic buttons ---- */
.magnetic {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-architectural);
  will-change: transform;
}

/* ---- Section-connecting lines ---- */
.section-line {
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-architectural);
  margin: 0 var(--gutter);
}
.section-line.is-visible { transform: scaleX(1); }

/* ---- Hero entrance (pure CSS — no JS dependency; the blanket
   prefers-reduced-motion rule in animations.css neutralizes this) ---- */
@keyframes meridianRevealUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-title  { animation: meridianRevealUp 0.9s var(--ease-architectural) both; }
.hero-sub    { animation: meridianRevealUp 0.9s var(--ease-architectural) 0.15s both; }
.hero-actions{ animation: meridianRevealUp 0.9s var(--ease-architectural) 0.3s both; }
.hero-meta   { animation: meridianRevealUp 0.9s var(--ease-architectural) 0.45s both; }

/* ---- Project number transition (Phase 3 grid — subtle refinement) ---- */
.project-index { transition: transform var(--dur-mid) var(--ease-architectural); }
.project-item:hover .project-index,
.project-item:focus-visible .project-index { transform: translateY(-4px); }

/* ---- Small-screen refinements (down to 360px) ---- */
@media (max-width: 480px) {
  .north-mark { width: 26px; height: 26px; top: calc(var(--header-h) + 10px); }
  .hero-meta { gap: 1rem; }
  .case-inner { padding-inline: 1.25rem; }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
  .field-row--three { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  :root { --gutter: 1.1rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .filter-bar { gap: 0.85rem; }
}

/* ---- Reduced motion: fully disable Phase 5 motion, keep the UI usable ---- */
@media (prefers-reduced-motion: reduce) {
  .magnetic { transition: none !important; transform: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  html.has-fine-pointer body,
  html.has-fine-pointer a,
  html.has-fine-pointer button { cursor: auto !important; }
  .section-line { transition: none; transform: scaleX(1); }
  .scroll-progress-fill { transition: none; }
}

/* ---- Print: strip decorative chrome ---- */
@media print {
  .site-header, .mobile-menu, .grid-overlay, .north-mark, .scroll-cue,
  .cursor-dot, .cursor-ring, .scroll-progress, .case-study, .skip-link { display: none !important; }
}