/*
 * File: entrelace/engine/fil.css (made by entrelace/build_engine.py from jv-trace/engine/trace.css, names of its own)
 * Date: 2026-10-23 00:20 UTC
 * Version: 0.3.0 (Tracé 0.1.1, renamed)
 * The thread's ink, its pen tip, its comet and its idle loop. Its colour, its weight and the pen's speed are Divi
 * variables (« Entrelace · Encre », « Entrelace · Épaisseur », « Entrelace · Vitesse »), printed by the plugin as --jvs-ink,
 * --jvs-w and --jvs-speed; the values below are the prototype's, used until the variables say otherwise.
 * The modules themselves take no room on the page: they only declare the line.
 */
:root { --jvs-ink: #e5d09a; --jvs-w: 1.45px; --jvs-speed: 1; --jvs-ease: cubic-bezier(.2, .8, .2, 1); }

/* The declarations: no room, no box, nothing to see on the page. */
.jv_scene { position: absolute !important; left: 0; top: 0; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none; }
.jv_scene .jvs-zone, .jv_scene .jvs-pt { display: block; width: 0; height: 0; }

/* The ink, over the page's backgrounds, under what has its own layer. */
.jvs-ink { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 1; }
svg path.jvs-main, svg path.jvs-ghost, svg path.jvs-trail { fill: none; stroke: var(--jvs-ink); stroke-linecap: round; stroke-linejoin: round; }
svg path.jvs-main { stroke-width: var(--jvs-w); opacity: .95; }
svg path.jvs-ghost { stroke-width: calc(var(--jvs-w) * .448); opacity: .26; }
svg path.jvs-trail { stroke-width: calc(var(--jvs-w) * 1.517); opacity: 0; transition: opacity .7s var(--jvs-ease); }
svg path.jvs-trail.jvs-halo { stroke-width: calc(var(--jvs-w) * 7.586); }
svg path.jvs-trail.jvs-on { opacity: .9; transition-duration: .2s; }
svg path.jvs-trail.jvs-halo.jvs-on { opacity: .13; }
.jvs-tip { opacity: 0; transition: opacity .45s var(--jvs-ease); }
.jvs-tip.jvs-on { opacity: 1; transition-duration: .15s; }
.jvs-tip circle { stroke: none; }

/* The live end: the reader stops, the pen keeps doodling a loop where the line ends, until the page moves again. */
.jvs-idle { opacity: 0; transition: opacity .3s var(--jvs-ease); pointer-events: none; }
.jvs-idle.jvs-on { opacity: 1; transition-duration: .6s; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--jvs-ink) 70%, transparent)); }
.jvs-idle path { fill: none; stroke: var(--jvs-ink); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.jvs-idle path.jvs-main { stroke-width: calc(var(--jvs-w) * 1.241); opacity: 1; }
.jvs-idle path.jvs-ghost { stroke-width: calc(var(--jvs-w) * .483); opacity: .3; transform: translate(.7px, .5px); }
.jvs-idle.jvs-on path { animation: jvs-doodle 2.4s cubic-bezier(.45, 0, .3, 1) .5s infinite; }
@keyframes jvs-doodle { 0% { stroke-dashoffset: 1; } 45% { stroke-dashoffset: 0; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) { .jvs-idle.jvs-on path { animation: none; stroke-dashoffset: 0; } }

/* A zone that holds still: the thread goes on down its margin, with a pen tip of its own. */
.jvs-lane { position: absolute; left: 0; top: 0; width: 48px; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.jvs-ptip { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .45s var(--jvs-ease); }
.jvs-ptip.jvs-on { opacity: 1; transition-duration: .15s; }
.jvs-ptip::before { content: ''; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #fff 0 7%, var(--tc, rgba(179, 224, 255, .6)) 20%, transparent 68%); }

/* On the notebook (jv-scenes): one light at a time, as on the prototype, where it jumps from stroke to stroke: the
   notebook's goes out at once while the thread's shows, and shows at once when a sketch takes the pen back. */
.jvs-pen .jv-ink > .jv-tip, .jvs-pen .jv-ink > .jv-trail { opacity: 0 !important; transition: none !important; }
.jvs-cut .jv-ink > .jv-tip, .jvs-cut .jv-ink > .jv-trail { transition: none !important; }

/* The Visual Builder: each Tracé is a small tag just above its column, its name, its zone and its number of points.
   The tag is the module's own box, so Divi outlines it and opens its settings on a click, where its points are listed
   as any parent module's items. Out of the flow, as on the page: the column keeps the page's layout (no gap for it). */
.jv_scene.jvs-vb { position: absolute !important; left: 0; top: -24px; display: block !important; width: max-content !important; max-width: 100%; height: 20px !important; margin: 0 !important;
  padding: 0 !important; overflow: visible !important; pointer-events: auto; z-index: 30; }
.jvs-badge { display: inline-block; vertical-align: top; height: 20px; padding: 3px 7px; border-radius: 6px; opacity: .78; white-space: nowrap;
  background: rgba(20, 20, 24, .86); color: #e5d09a; font: 600 11px/14px system-ui, sans-serif; letter-spacing: .02em; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.jvs-badge b { font-weight: 700; color: #fff; }
.jvs-vb .jv_scene_point { position: absolute !important; left: 0; top: 0; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;
  overflow: hidden !important; visibility: hidden; }