/* MILO — illustration palette + draw-on loop. Imagery stays low-key in both
   themes (one colour grade). Concepts override --acc / --acc-d / --acc-l. */
.art {
  --a0: #0c0b0a; --a1: #161412; --a2: #211e1b; --a3: #312d29; --a4: #4a443d;
  --a5: #776d61; --a6: #b5a893; --a7: #e8dfcf;
  --acc: #6f1d24; --acc-d: #3d1216; --acc-l: #9a4a4f;
  position: relative; overflow: hidden; background: var(--a1); isolation: isolate;
}
.art .art-svg { display: block; width: 100%; height: 100%; }
.art .f0 { fill: var(--a0); } .art .f1 { fill: var(--a1); } .art .f2 { fill: var(--a2); } .art .f3 { fill: var(--a3); }
.art .f4 { fill: var(--a4); } .art .f5 { fill: var(--a5); } .art .f6 { fill: var(--a6); } .art .f7 { fill: var(--a7); }
.art .fa { fill: var(--acc); } .art .fad { fill: var(--acc-d); } .art .fal { fill: var(--acc-l); }
.art .st { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .s0 { stroke: var(--a0); } .art .s1 { stroke: var(--a1); } .art .s2 { stroke: var(--a2); } .art .s3 { stroke: var(--a3); }
.art .s4 { stroke: var(--a4); } .art .s5 { stroke: var(--a5); } .art .s6 { stroke: var(--a6); } .art .s7 { stroke: var(--a7); }
.art .sa { stroke: var(--acc-l); }
.art .w0 { stroke-width: .6; } .art .w1 { stroke-width: 1; } .art .w2 { stroke-width: 1.6; } .art .w3 { stroke-width: 2.4; } .art .w4 { stroke-width: 3.6; } .art .w6 { stroke-width: 6; }
.art .tx { fill: var(--a6); font-family: inherit; }
/* film grain + vignette, consistent across all images */
.art::after, .grade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: url(../img/grain.png); background-size: 180px; mix-blend-mode: overlay; opacity: .16;
}
/* draw-on loop (class toggled by core.js) */
.art.is-drawing .st { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; animation: art-draw var(--u, 1s) cubic-bezier(.45, .05, .25, 1) var(--d, 0s) both; }
.art.is-drawing [data-f] { animation: art-fill 1.3s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) both; }
.art .art-svg { transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1); }
.art.is-fading .art-svg { opacity: 0; }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
@keyframes art-fill { from { opacity: 0; } to { opacity: 1; } }
/* page-turning calendar loop */
.art .pg { transform-box: fill-box; transform-origin: 50% 0; animation: pg-turn 9s cubic-bezier(.55, .05, .3, 1) infinite; }
.art .pg.p2 { animation-delay: 3s; } .art .pg.p3 { animation-delay: 6s; }
@keyframes pg-turn {
  0%, 8% { transform: scaleY(1); opacity: 1; }
  26% { transform: scaleY(-.02); opacity: 1; }
  34% { transform: scaleY(-.42); opacity: 0; }
  92% { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
.art .slow-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: slow-spin 16s linear infinite; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
.art .breath { transform-box: fill-box; transform-origin: 50% 100%; animation: breath 7s ease-in-out infinite; }
@keyframes breath { 50% { transform: translateY(-1.2%); } }
@media (prefers-reduced-motion: reduce) {
  .art.is-drawing .st, .art.is-drawing [data-f] { animation: none; stroke-dasharray: none; }
  .art .pg, .art .slow-spin, .art .breath { animation: none; }
}