/* =============================================================================
   MORAINE — CUSTOM STYLESHEET
   Everything Tailwind can't express cleanly lives here: the signature Friction
   Map animation, the gold gradient border, scroll reveal, and focus states.
   Tailwind handles all layout/spacing/colour utilities in the markup.

   CONTENTS
     1. Typographic utilities
     2. Gold gradient edge (the accent device)
     3. Focus & accessibility
     4. Navigation state
     5. SIGNATURE — the Friction Map
     6. Scroll reveal
     7. Reduced motion
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. TYPOGRAPHIC UTILITIES
   -------------------------------------------------------------------------- */

/* The mono eyebrow that labels every section. Used site-wide. */
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
   2. GOLD GRADIENT EDGE
   A 1px gold hairline that only appears on hover/focus. This is the accent
   device — used sparingly so it stays premium rather than decorative.
   Applied via class="gold-edge" on any element with a border-radius.
   -------------------------------------------------------------------------- */

.gold-edge { position: relative; }

.gold-edge::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(197, 160, 89, 0.55),
    rgba(197, 160, 89, 0) 42%,
    rgba(197, 160, 89, 0) 58%,
    rgba(212, 175, 55, 0.45)
  );
  opacity: 0;
  transition: opacity 0.45s ease;

  /* Mask trick: paint only the 1px border, punch out the fill */
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.gold-edge:hover::after,
.gold-edge:focus-within::after { opacity: 1; }


/* ---------------------------------------------------------------------------
   3. FOCUS & ACCESSIBILITY
   Visible, on-brand keyboard focus. Never remove this.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid #C5A059;
  outline-offset: 3px;
  border-radius: 2px;
}


/* ---------------------------------------------------------------------------
   4. NAVIGATION STATE
   -------------------------------------------------------------------------- */

/* Current page in the nav — set with class="nav-link is-active" per page */
.nav-link.is-active {
  color: #0A192F;
  font-weight: 500;
}

.nav-link.is-active::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 3px;
  background: #C5A059;
}


/* ---------------------------------------------------------------------------
   5. SIGNATURE — THE FRICTION MAP  (index.html hero)
   Tangled manual handoffs (drift) are swept by a gold scanline and resolve
   into one orchestrated pipeline. This is the page's memorable moment.

   SWAP: to replace with your own graphic, drop the <svg id="friction-map">
   from index.html and delete this block.
   -------------------------------------------------------------------------- */

/* -- BEFORE: the manual drift. Dashed, jittering, unresolved. -- */
#friction-map .drift {
  stroke-dasharray: 3 5;
  opacity: 0.9;
  animation: fm-jitter 2.6s ease-in-out infinite;
}
#friction-map .drift:nth-of-type(2n) { animation-delay: -0.7s; }
#friction-map .drift:nth-of-type(3n) { animation-delay: -1.4s; }

@keyframes fm-jitter {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1.5px, -1.5px); }
}

/* -- THE RESOLVE: gold scanline sweeps left to right -- */
#friction-map .scan {
  opacity: 0;
  animation: fm-sweep 3.2s cubic-bezier(0.6, 0, 0.2, 1) 1.1s forwards;
}

@keyframes fm-sweep {
  0%   { transform: translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(560px); opacity: 0; }
}

/* -- AFTER: the clean pipeline draws in behind the scanline -- */
#friction-map .clean-path {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: fm-draw 3.2s cubic-bezier(0.6, 0, 0.2, 1) 1.1s forwards;
}

@keyframes fm-draw {
  to { stroke-dashoffset: 0; }
}

/* -- The old mess fades back as the new system takes over -- */
#friction-map .settle {
  opacity: 0.28;
  animation: fm-fade 3.2s cubic-bezier(0.6, 0, 0.2, 1) 1.1s forwards;
}

@keyframes fm-fade {
  to { opacity: 0.07; }
}

/* -- Pipeline stages pop in, in sequence -- */
#friction-map .node-clean {
  opacity: 0;
  animation: fm-pop 0.5s ease forwards;
}
#friction-map .node-clean:nth-of-type(1) { animation-delay: 1.7s; }
#friction-map .node-clean:nth-of-type(2) { animation-delay: 2.3s; }
#friction-map .node-clean:nth-of-type(3) { animation-delay: 2.9s; }
#friction-map .node-clean:nth-of-type(4) { animation-delay: 3.5s; }

@keyframes fm-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}


/* ---------------------------------------------------------------------------
   6. SCROLL REVEAL
   Elements with class="reveal" fade up as they enter the viewport.
   The .in class is applied by assets/js/main.js via IntersectionObserver.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease,
              transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}


/* ---------------------------------------------------------------------------
   7. REDUCED MOTION
   Quality floor: if the user asked for less motion, they get none.
   Everything lands in its final state immediately.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html { scroll-behavior: auto; }

  .reveal { opacity: 1; transform: none; }

  #friction-map .clean-path { stroke-dashoffset: 0; }
  #friction-map .node-clean { opacity: 1; }
  #friction-map .settle     { opacity: 0.07; }
  #friction-map .scan       { display: none; }
}