/* makeover.css: visual layer for the home page makeover. Loaded after style.css.
   Palette is the site's own (--ink, --sky, --up, --down, the crayon ink and the nav crayon colours). No new colours of note.
   Everything that moves is switched off under prefers-reduced-motion at the bottom of this file, and js/makeover.js
   does not start the heavy effects at all in that case. */

/* ---------- 1. crayon cursor (vendor/crayon-cursor) ---------- */
/* The host the vendored CanvasManager draws into (it looks up #canvas-container). Fixed, full window, above everything
   including the create modal, and it can never take a click: pointer-events none, so links, buttons and inputs underneath work as before. */
.mk-crayon-host{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.mk-crayon-host canvas{display:block;pointer-events:none!important}

/* ---------- 2a. wobbly underline (vendor/wobbly-underline) on the sidebar nav ---------- */
/* The vendored script.js swaps the class of the one element with class "container" (left or right, instant, posN) and
   the vendored style.css does the rest with stroke-dash transitions. Those rules are kept below with the same names,
   re-pointed at #mk-snake (the script rewrites the wrapper's whole class attribute, so nothing here may key on a second class)
   and recoloured to the nav's red crayon. Vertical placement is set from js/makeover.js through --snake-x and --snake-y. */
#mk-snake{position:relative;overflow:hidden;padding:0 0 6px}
#mk-snake .snake{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none;z-index:3;
  transition:transform 500ms;transform:translate(var(--snake-x,0px),calc(var(--snake-y,0px) - 50%));visibility:hidden;filter:url(#crayon)}
#mk-snake .snake[data-ready]{visibility:visible}
#mk-snake .snake path{fill:none;stroke:#e8453c;stroke-dasharray:29 100;stroke-width:1.9px;stroke-linecap:round}
#mk-snake.left .snake path{stroke-dashoffset:0;transform:translateX(0);transition:stroke-dasharray 500ms,stroke-dashoffset 500ms,transform 500ms}
#mk-snake.right .snake path{stroke-dashoffset:-70px;transform:translateX(-60%);transition:stroke-dasharray 500ms,stroke-dashoffset 500ms,transform 500ms}
#mk-snake.instant .snake path{transition:none}
#mk-snake .nav{position:relative;z-index:2}
/* the snake replaces the static red scribble under the active label, but only once it is actually in place */
@media (min-width:821px){.side.mk-snake-on .nav a.active>span::after{display:none}}
@media (max-width:820px){#mk-snake{flex:1 1 auto;width:100%;min-width:0;padding:0;overflow:visible}#mk-snake .snake{display:none}}

/* ---------- 2b. random underline (vendor/random-underline) on inline text links ---------- */
/* The vendored script finds [data-draw-line] and a [data-draw-line-box] inside it, and GSAP DrawSVG draws a random hand drawn stroke into the box on hover. */
[data-draw-line]{position:relative}
.mk-ul-box{position:absolute;left:0;right:0;bottom:-.42em;height:.62em;color:#e8453c;pointer-events:none;display:block}
.mk-ul-box svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible!important}
.mk-ul-box svg path{stroke-width:3.5px;vector-effect:non-scaling-stroke}
.foot-in .mk-ul-box{color:#ffd84a}
.ap-editor-link .mk-ul-box{color:var(--down)}
.foot-in a[data-draw-line]:hover{text-decoration:none}

/* ---------- 3. svg drawing animation (vendor/svg-drawing) ---------- */
/* Pairs: [final art][line drawing]. The vendored script strokes the line drawing on, then adds .show to the previous sibling
   (the final art) and .hide to the drawing. .mk-armed holds the final art back only while the drawing is about to run. */
.mk-fill{transition:opacity .5s ease}
.mk-fill.mk-armed:not(.show){opacity:0}
.mk-fill.show{opacity:1}
.mk-line-drawing{transition:opacity .5s ease}
.mk-line-drawing.hide{opacity:0}
.sun>svg{position:absolute;inset:0}
.sun>svg.mk-line-drawing{fill:none}
/* sized from the font, not the heading width: the live heading is one long phrase that wraps to two lines, so a width driven height put the stroke through the text */
.mk-h1-ul{position:absolute;left:-2%;bottom:-.3em;width:104%;height:.5em;pointer-events:none;overflow:visible}
.mk-h1-ul path{fill:none;stroke:#e8453c;stroke-width:6.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;filter:url(#crayon)}
.hero-copy h1{position:relative;padding-bottom:.12em}

/* ---------- 4 and 6. distorted buttons (vendor/distorted-buttons) and mo.js bursts (vendor/mojs-icons) ---------- */
/* The glitch is a feTurbulence filter driven by the vendored GSAP timeline. Its filter definitions are lifted from the vendored index.html at run time into this hidden svg. */
.mk-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
/* the anchor the mo.js burst is parented to: fixed at the clicked button's box, above the modal, never clickable */
.mk-burst-anchor{position:fixed;pointer-events:none;z-index:9990;left:0;top:0;width:0;height:0}
#create-trigger{position:relative}

/* ---------- 5. polaroid stack to grid (vendor/polaroid-stack) ---------- */
/* While a card is in flight the card's own hover transition must not fight the vendored dynamics.js transform. */
.tok.mk-flying{transition:none!important;pointer-events:none;will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  #mk-snake .snake,#mk-snake .snake path{transition:none!important}
  .mk-fill,.mk-line-drawing{transition:none}
  .mk-fill.mk-armed:not(.show){opacity:1}
  .mk-crayon-host{display:none}
}