/* Hope – nádej: the pencil ribbon + section doodles (assets/js/doodle.js).
   Slots are empty anchors; the SVG overlay reads their boxes and draws there.
   Positions were measured against the text column at 1280 / 1440 / 375 (no glyph overlap). */

/* slots: free zones the layout keeps for the drawings (defensive relative on the host) */
:where(main > section:has(> .doodle-slot), footer:has(> .doodle-slot)) { position: relative; }
.doodle-slot {
    position: absolute; pointer-events: none; visibility: hidden;
    right: clamp(24px, 4vw, 64px); width: 150px; aspect-ratio: 1 / 1;
}
.doodle-slot[data-doodle="start"] { top: clamp(84px, 12vh, 140px); width: clamp(110px, 12vw, 150px); }
.doodle-slot[data-doodle="heart-tree"] { top: calc(50% - 75px); }
.doodle-slot[data-doodle="kite"] { left: clamp(24px, 4vw, 64px); right: auto; top: calc(73% - 75px); }
.doodle-slot[data-doodle="house"] { width: 120px; top: calc(30% - 60px); }
.doodle-slot[data-doodle="sun"] { top: calc(50% - 75px); }
.doodle-slot[data-doodle="hills"] {
    top: auto; bottom: 8px; right: clamp(16px, 3vw, 48px);
    width: clamp(260px, 44vw, 640px); aspect-ratio: 3 / 1;
}
@media (max-width: 699px) {
    .doodle-slot { right: 10px; width: 100px; }
    .doodle-slot[data-doodle="start"] { top: 84px; width: 30vw; }
    .doodle-slot[data-doodle="heart-tree"] { top: calc(45% - 50px); }
    .doodle-slot[data-doodle="kite"] { left: auto; right: 10px; width: 88px; top: calc(64% - 44px); }
    .doodle-slot[data-doodle="house"] { width: 68px; top: calc(31% - 34px); }
    .doodle-slot[data-doodle="sun"] { top: calc(50% - 50px); }
    .doodle-slot[data-doodle="hills"] { right: 8px; bottom: 6px; width: 74vw; }
}

/* overlay: covers the document, never catches the pointer, never widens the page */
.dd-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 0;
    overflow: clip; pointer-events: none; z-index: 20; contain: layout style;
}
.dd-overlay svg { display: block; width: 100%; height: 100%; overflow: hidden; }

/* the ribbon: ink on light grounds, paper on dark ones (gradient built by the script) */
.dd-ribbon {
    fill: none; stroke: url(#dd-ink); stroke-width: 3.5px;
    stroke-linecap: round; stroke-linejoin: round;
}
.dd-pencil { opacity: 0; will-change: transform; transition: opacity 0.18s ease-out; }
.dd-pencil.is-on { opacity: 1; }
.dd-pencil path { stroke: url(#dd-ink); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }
.dd-pencil .dd-pencil-body { fill: #FFD21F; }
.dd-pencil .dd-pencil-wood { fill: #FFF; }
.dd-pencil .dd-pencil-tip { fill: #111; }

/* drawings: one group per slot; --dd-ink comes from the section ground */
.dd-draw { color: var(--dd-ink, #111); }
.dd-draw path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.dd-draw .dd-leaf { stroke: #1F9A3E; }
.dd-draw .dd-fill { stroke: none; transform-box: fill-box; transform-origin: center; }
.dd-draw .dd-fill-sun { fill: #FFD21F; }
.dd-draw .dd-fill-leaf { fill: #1F9A3E; }
.js:not(.reduce) .dd-draw .dd-fill { transform: scale(0); }
.js:not(.reduce) .dd-draw .dd-fill.is-in { animation: dd-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes dd-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
@media (max-width: 699px) {
    .dd-ribbon { stroke-width: 3px; }
}