/* EasyPaint page: sketchbook look (draft A), hero timelapse, brush swatches, surface picker, view tools. */
/* S1: the hero paints itself (the real timelapse) */
.hero-paint { position: relative; margin: 0; }
.hero-paint video { display: block; width: 100%; height: auto; border-radius: 6px; background: #EFEDE6; }
.hero-paint figcaption { margin-top: 10px; font-size: .92rem; color: var(--muted); }

/* S2: brush swatches */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-top: 26px; }
.swatch { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.swatch img { display: block; width: 100%; height: auto; }
.swatch figcaption { padding: 10px 12px 12px; font-size: .9rem; color: var(--muted); }
.swatch figcaption b { display: block; color: var(--text); font-size: 1rem; }
html.motion .swatch:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* S3: surface picker */
.surface-pick { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 26px; }
.surface-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.surface-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.surface-stage img.on { opacity: 1; }
.surface-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.surface-tabs button { font: inherit; font-size: .95rem; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.surface-tabs button[aria-selected="true"] { background: var(--button); border-color: var(--button); color: var(--on-accent); }
.surface-about h3 { margin: 0 0 6px; }
@media (max-width: 760px) { .surface-pick { grid-template-columns: 1fr; } }

/* S4: look at it fresh (view tools, like the app: the picture never changes) */
.fresh { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 26px; }
.fresh-view { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-alt); aspect-ratio: 16 / 10; display: grid; place-items: center; }
.fresh-view img { width: 100%; height: auto; display: block; transition: transform .45s var(--ease), filter .45s var(--ease); transform: rotate(var(--turn, 0deg)) scaleX(var(--flip, 1)); }
.fresh-view.grey img { filter: grayscale(1); }
.fresh-view.squint img { filter: blur(7px); }
.fresh-view.grey.squint img { filter: grayscale(1) blur(7px); }
.fresh-badge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(31,30,29,.8); color: #fff; font-size: .85rem; opacity: 0; transition: opacity .3s; pointer-events: none; }
.fresh-view.changed .fresh-badge { opacity: 1; }
.fresh-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.fresh-tools button { font: inherit; font-size: .95rem; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.fresh-tools button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.fresh-tools kbd, .fresh kbd { font: 600 .8rem/1 "Segoe UI", system-ui, sans-serif; padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
@media (max-width: 760px) { .fresh { grid-template-columns: 1fr; } }

.features.nine { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

/* Hand-drawn doodles (used by drafts A and D): each path draws itself once on screen */
.doodle { position: absolute; pointer-events: none; overflow: visible; z-index: 2; }
.doodle path, .doodle circle { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.doodle text { fill: currentColor; stroke: none; font: 22px "Ink Free", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
html.motion .doodle path { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 1.8s var(--ease) var(--delay, .2s); }
html.motion .doodle.in path { stroke-dashoffset: 0; }
@media (max-width: 760px) { .doodle.wide-only { display: none; } }

/* Sketchbook look */

@media (prefers-color-scheme: dark) {
  html[data-app="easypaint"]:root {
    --bg: #F5F4EE; --surface: #FAF9F5; --surface-alt: #F0EEE6; --line: #E0DDD2;
    --text: #1F1E1D; --muted: #5B5A55; --subtle: #6F6D66; --on-accent: #FFFFFF;
    --accent: #BE6097; --accent-soft: #F4E5EC; --link: #974676; --link-hover: #843A66; --button: #A55081; --button-hover: #974676;
    --soon: #8A5A12; --soon-soft: #F6ECD6; color-scheme: light;
  }
}

body.sketchbook { background: #F4F0E6 url(../images/easypaint/paper-sketch.jpg) center top / 1280px auto repeat; }
.sketchbook main section { position: relative; }
.sketchbook h1, .sketchbook h2, .sketchbook .card h3, .sketchbook .swatch b { font-family: "Ink Free", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-weight: 700; letter-spacing: 0; }
.sketchbook h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; }
.sketchbook .flourish path { stroke: #3B3A37; }
/* A4 sticky notes */
.sketchbook .card.sticky { position: relative; background: #FFF4B0; color: #1F1E1D; border: 0; border-radius: 3px; box-shadow: 0 10px 18px rgba(60,50,20,.14); rotate: -1.2deg; }
.sketchbook .card.sticky:nth-child(3n+2) { background: #FDE0EC; rotate: 1deg; }
.sketchbook .card.sticky:nth-child(3n) { background: #DDEFFA; rotate: -.5deg; }
.sketchbook .card.sticky .muted { color: #4A4945; }
.sketchbook .card.sticky .icon { color: #A55081; background: rgba(255,255,255,.6); }
.sketchbook .card.sticky::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: -4deg; background: rgba(214,204,170,.72); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sketchbook .swatch { border-radius: 3px; box-shadow: 0 6px 14px rgba(60,50,20,.1); }
/* A5 polaroids */
.sketchbook .hero-paint.polaroid { background: #fff; padding: 14px 14px 58px; border-radius: 2px; box-shadow: 0 16px 34px rgba(40,30,10,.2); rotate: 1.6deg; }
.sketchbook .hero-paint.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 1.25rem "Ink Free", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; color: #2D2C2A; }
.sketchbook .surface-stage.polaroid, .sketchbook .fresh-view.polaroid { border: 12px solid #fff; border-bottom-width: 40px; border-radius: 2px; box-shadow: 0 14px 30px rgba(40,30,10,.18); }
.sketchbook .surface-stage.polaroid { rotate: -1deg; }
.sketchbook .fresh-view.polaroid { rotate: .8deg; }
.sketchbook .doodle { color: #3B3A37; }