/* ===== PAPER LAYER — the hidden hand-drawn "sketch world" easter egg =====
   EVERYTHING here is scoped under body.paper-mode, so the normal homepage is 100% untouched.
   It only activates when the gauge-charge ripple flips the page into paper mode. */

/* the paper sheet: over the gradient #bg (z0), below page content (z10). SWEEPS IN via a clip-path circle from the gauge — same idea as the colour ripple, so the bg changes while the content stays in place. */
#paperbg{position:fixed;inset:0;z-index:1;pointer-events:none;background-color:#d1ccba;background-image:url("assets/paper-tile.jpg");background-position:center top;background-repeat:repeat-y;background-size:100% auto;clip-path:circle(0% at 50% 50%);transition:clip-path 1.9s cubic-bezier(.25,.46,.45,.94);will-change:clip-path;}
body.paper-mode #paperbg{clip-path:circle(150% at 50% 50%);}

/* renderer canvases are always present (pre-rendered) but transparent until paper mode → they CROSSFADE in place (no draw-in, no disappear) */
canvas.inkcv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .85s ease;}
canvas.petcv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .85s ease;}   /* MUST be absolute in the BASE rule (not only under paper-mode) — otherwise on EXIT the petcv reverts to position:static, becomes an in-flow block at its full pixel size, and shoves the colour-cell layout apart (the "busted petals") */
#emblemInk{opacity:0!important;transition:none!important;}   /* the sketch emblem must be there INSTANTLY on enter (no fade) — it replaces the 3D one in place; the 3D still fades out behind it (aligned + same size) so it reads as a morph-to-pencil */
body.paper-mode canvas.inkcv,body.paper-mode canvas.petcv{opacity:1;}
body.paper-mode #emblemInk{opacity:1!important;}

/* the 3D bronze emblem CROSSFADES out as the pencil one fades in (it already has transition:opacity .45s) */
body.paper-mode #scene{opacity:0!important;}

/* INK LAYER: the live coloured text FADES to transparent (in place) as the pencil fades in — a look-swap, never a disappear */
.inked, .inked *{transition:color .6s ease,-webkit-text-fill-color .6s ease;}
.inked{position:relative;}
body.paper-mode .inked{opacity:1!important;}
body.paper-mode .inked, body.paper-mode .inked *{color:transparent!important;-webkit-text-fill-color:transparent!important;}

/* ===== ALL-SKETCH OVERRIDES — no colour anywhere on the paper, only graphite ===== */
body.paper-mode #petals.sketch-petals .pcell{background:transparent!important;border-right-color:rgba(58,54,49,.10)!important;transform:translateY(0);}
body.paper-mode #petals.sketch-petals .pcell .glass{display:none!important;}
body.paper-mode #petals.sketch-petals .pcell .sel{border-color:#3a3631!important;}
body.paper-mode #petals.sketch-petals .ptip{display:flex!important;}
body.paper-mode #petals.sketch-petals .ptip .pn{color:#3a3631!important;}
body.paper-mode #petals.sketch-petals .ptip .ph{color:#6a6258!important;}
body.paper-mode #petals.sketch-petals canvas.petcv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;}
body.paper-mode #petals.sketch-petals{transform:none!important;transition:none!important;}
body.paper-mode #petals.sketch-petals.gone{opacity:0;pointer-events:none;}
body.paper-mode #menuBtn.inked:hover .mt{max-width:0!important;opacity:0!important;}
body.paper-mode #menuBtn.inked .ml{transform:none!important;}
body.paper-mode #menuBtn.inked canvas.inkcv{transition:transform .3s cubic-bezier(.34,1.4,.5,1);transform-origin:center center;}
body.paper-mode #menuBtn.inked:hover canvas.inkcv{transform:scale(1.1);}
body.paper-mode.menu-open #emblemInk{z-index:59!important;}
body.paper-mode.menu-open #menuBackdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-color:#d1ccba!important;background-image:url("assets/paper-tile.jpg")!important;background-position:center top!important;background-repeat:repeat-y!important;background-size:100% auto!important;opacity:1;}
body.paper-mode #menuOverlay a{color:#3A3530!important;}
body.paper-mode #menuOverlay a:hover{color:#15110d!important;}
/* paper mode: the hover arrow snaps (no width animation) so the pencil swap renders at a stable width */
body.paper-mode #menuOverlay a .arr,body.paper-mode #menuOverlay a .shaft,body.paper-mode #menuOverlay a .head{transition:none!important;}
/* link whose HOVER frame isn't traced yet → keep the arrow collapsed on hover so the box never widens and the rest pencil never stretches */
body.paper-mode #menuOverlay a.pm-flat:hover .arr{margin-left:0!important;}
body.paper-mode #menuOverlay a.pm-flat:hover .shaft{width:0!important;}
body.paper-mode #menuOverlay a.pm-flat:hover .head{opacity:0!important;transform:translateX(-.32em)!important;}
body.paper-mode #spinmeter circle{stroke:#3a3631!important;}
body.paper-mode #spinmeter .arr{color:#3a3631!important;}
body.paper-mode #spinmeter.rev .mwrap>svg{transform:none!important;}
body.paper-mode #bglogo.inked{opacity:.6!important;}
body.paper-mode #bglogo.inked svg{opacity:0!important;}
body.paper-mode #soundtoggle.inked{border-color:transparent!important;background:transparent!important;box-shadow:none!important;}