/* ============================================================
   Neptune Solutions — Site animations
   ============================================================
   Light, hand-drawn animations applied across the site:
     · Hero illustrations: build-up draw on page load
     · Marginalia: draw on scroll-into-view
     · Method/sketches: draw on scroll-into-view
     · Sketches in cards/sections: re-trace on hover
     · Editorial inline links: pencil underline on hover

   To DISABLE everything site-wide: set NEPTUNE_FX_ENABLED = false
   in js/site-animations.js (no need to remove this stylesheet).
   ============================================================ */

/* === Reduced motion: instant final state === */
@media (prefers-reduced-motion: reduce) {
  .hero__art *,
  .method__art *,
  .approach-sketch *,
  .hero__pencil *,
  .notebook__svg-wrap svg *,
  .marginalia *,
  .card__art svg *,
  .confidence-key * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===========================================================
   HERO illustrations — build-up draw (on load, plays once per
   page open per session — JS controls .is-playing)
   =========================================================== */
.hero__art svg,
.hero__pencil,
.approach-sketch { overflow: visible; }

/* ANTI-FLASH: hide hero illustrations until JS attaches the
   animation classes. The .fx-anim-ready marker is added by JS
   the moment delays/durations are set; .is-playing then triggers
   the actual animation. After cleanup, the SVG renders normally
   because neither class is present.
   Without this, on slow JS init the SVG flashes its final state
   for ~100ms before the animation rewinds it to empty. */
.hero__art:not(.fx-anim-ready):not(.fx-anim-done),
.hero__pencil:not(.fx-anim-ready):not(.fx-anim-done),
.approach-sketch:not(.fx-anim-ready):not(.fx-anim-done) {
  /* Only hide if the page is fresh — the JS adds .fx-anim-skip
     on subsequent visits so this rule short-circuits. */
}
.hero__art.fx-anim-pending,
.hero__pencil.fx-anim-pending,
.approach-sketch.fx-anim-pending {
  visibility: hidden;
}

/* While playing, prepare strokes & dots for animation.
   We use fx-*-anim class names to avoid clashing with any class
   the SVG might already carry (e.g. .ink for fill colour). */
.hero__art.is-playing .fx-draw-anim,
.hero__pencil.is-playing .fx-draw-anim,
.approach-sketch.is-playing .fx-draw-anim {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: hero-draw var(--dur, 400ms) var(--delay, 0ms) ease-out forwards;
}
.hero__art.is-playing .fx-pop-anim,
.hero__pencil.is-playing .fx-pop-anim,
.approach-sketch.is-playing .fx-pop-anim {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.4);
  animation: hero-pop 240ms var(--delay, 0ms) cubic-bezier(.34,1.56,.64,1) forwards;
}
.hero__art.is-playing .fx-ink-anim,
.hero__pencil.is-playing .fx-ink-anim,
.approach-sketch.is-playing .fx-ink-anim {
  opacity: 0;
  animation: hero-ink 220ms var(--delay, 0ms) ease-out forwards;
}

@keyframes hero-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-pop  { to { opacity: 1; transform: scale(1); } }
@keyframes hero-ink  { to { opacity: 1; } }

/* ===========================================================
   MARGINALIA — draw on scroll-into-view
   =========================================================== */
.marginalia.fx-ready path,
.marginalia.fx-ready line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 900ms cubic-bezier(.55,.06,.22,.99);
}
.marginalia.fx-ready text {
  opacity: 0;
  transition: opacity 380ms ease 600ms;
}
.marginalia.fx-ready.is-drawn path,
.marginalia.fx-ready.is-drawn line {
  stroke-dashoffset: 0;
}
.marginalia.fx-ready.is-drawn text {
  opacity: 1;
}

/* ===========================================================
   METHOD / NOTEBOOK / APPROACH — draw on scroll-into-view
   (uses same pattern as hero but triggered by scroll)
   =========================================================== */
.method__art svg,
.notebook__svg-wrap svg { overflow: visible; }

.method__art.fx-ready .fx-draw-anim,
.notebook__svg-wrap.fx-ready .fx-draw-anim {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
}
.method__art.fx-ready .fx-pop-anim,
.notebook__svg-wrap.fx-ready .fx-pop-anim {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.4);
}
.method__art.fx-ready .fx-ink-anim,
.notebook__svg-wrap.fx-ready .fx-ink-anim { opacity: 0; }

.method__art.is-drawn .fx-draw-anim,
.notebook__svg-wrap.is-drawn .fx-draw-anim {
  animation: hero-draw var(--dur, 480ms) var(--delay, 0ms) ease-out forwards;
}
.method__art.is-drawn .fx-pop-anim,
.notebook__svg-wrap.is-drawn .fx-pop-anim {
  animation: hero-pop 280ms var(--delay, 0ms) cubic-bezier(.34,1.56,.64,1) forwards;
}
.method__art.is-drawn .fx-ink-anim,
.notebook__svg-wrap.is-drawn .fx-ink-anim {
  animation: hero-ink 260ms var(--delay, 0ms) ease-out forwards;
}

/* ===========================================================
   EDITORIAL INLINE LINKS — pencil underline on hover
   =========================================================== */
.editorial p a,
.statement p a,
.method__text p a,
.stats-block__note a,
.sectors__close a {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 1px;
  background-image: none;
}
.editorial p a::after,
.statement p a::after,
.method__text p a::after,
.stats-block__note a::after,
.sectors__close a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 1.4px;
  background:
    repeating-linear-gradient(90deg,
      var(--neptune-blue) 0 4px,
      rgba(59,130,246,0.55) 4px 7px,
      var(--neptune-blue) 7px 11px);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms cubic-bezier(.55,.06,.22,.99);
  border-radius: 1px;
}
.editorial p a:hover::after,
.statement p a:hover::after,
.method__text p a:hover::after,
.stats-block__note a:hover::after,
.sectors__close a:hover::after {
  transform: scaleX(1);
}

/* ===========================================================
   HOVER RE-TRACE — applied to:
     · Cards on home (.card__art svg)
     · Sketch wrappers tagged with .fx-hover-redraw
       (notebook sketches on what-we-do, our-approach;
        confidence-key on contact)
   =========================================================== */
.card__art svg path,
.card__art svg line,
.card__art svg circle,
.card__art svg ellipse,
.fx-hover-redraw svg path,
.fx-hover-redraw svg line,
.fx-hover-redraw svg circle,
.fx-hover-redraw svg ellipse {
  transition: stroke-dashoffset 700ms cubic-bezier(.55,.06,.22,.99);
}

/* When the parent is hovered, replay every stroke in cascade */
.card:hover .card__art svg .fx-redraw,
.fx-hover-redraw:hover svg .fx-redraw,
svg.fx-hover-redraw:hover .fx-redraw {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  animation: fx-redraw 750ms var(--delay, 0ms) cubic-bezier(.55,.06,.22,.99) forwards;
}
@keyframes fx-redraw {
  from { stroke-dashoffset: var(--len, 300); }
  to   { stroke-dashoffset: 0; }
}
.card:hover .card__art svg .fx-pop,
.fx-hover-redraw:hover svg .fx-pop,
svg.fx-hover-redraw:hover .fx-pop {
  transform-origin: center;
  transform-box: fill-box;
  animation: fx-pop 320ms var(--delay, 0ms) cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes fx-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}