/* digotech/divider — view.js sets --dg-divider-draw (0 → 1) on the block from the scroll position; 1 = fully drawn
   (no script, reduced motion). The box takes no height in the flow: it overlaps half of each neighbour's padding.
   In the "Divider" pattern the row group is that box, so the line runs edge to edge across the gutter. */
.wp-block-digotech-divider{--dg-divider-draw:1;--dg-divider-stroke:2}
/* the line draws as its top edge rises from the bottom of the screen through the next 60% of the screen height: a CSS
   scroll timeline, so nothing is written on the page while scrolling (each write would re-check the :has() rules);
   view.js does the same only where scroll timelines are missing */
@property --dg-divider-draw{syntax:"<number>";inherits:true;initial-value:1}
@keyframes dg-divider-draw{from{--dg-divider-draw:0}to{--dg-divider-draw:1}}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .wp-block-digotech-divider{animation:dg-divider-draw linear both;animation-timeline:view();animation-range:cover 0% cover 60vh}
    /* in a row the row clips (overflow hidden), so it is the line's nearest scroll box: follow the row on the page instead */
    .dg-divider-row{view-timeline:--dg-divider-row}
    .dg-divider-row > .wp-block-digotech-divider{animation-timeline:--dg-divider-row}
  }
}
/* :root lifts these over WordPress's flow-layout margin (:root :where(.is-layout-flow) > *) whatever the print order */
:root :is(.wp-block-digotech-divider,.dg-divider-row){--dg-divider-top:calc(var(--gap-section) / -2);position:relative;height:var(--gap-section);margin-block:var(--dg-divider-top) calc(var(--gap-section) / -2);overflow:hidden;pointer-events:none}
:root .dg-divider-row{padding-inline:var(--s-4)}
:root .dg-divider-row > .wp-block-digotech-divider{position:static;height:auto;margin:0;overflow:visible}
/* a banded section (also when it sits inside a shared template part) keeps its own padding, so a divider beside it adds one gap-section slot: same air around the line as between plain sections */
:root :is(.dots,.wp-block-template-part:has(> .dots)) + :is(.wp-block-digotech-divider,.dg-divider-row){--dg-divider-top:calc(var(--gap-section) / 2);margin-block:var(--dg-divider-top) calc(var(--gap-section) / -2)}
/* the parent theme zeroes the top margin of a full-width block that follows another (specificity 0,3,0): the divider keeps the one chosen above */
.wp-block-post-content > .alignfull + .alignfull:is(.wp-block-digotech-divider,.dg-divider-row){margin-block-start:var(--dg-divider-top)}
:root :is(.wp-block-digotech-divider,.dg-divider-row):has(+ :is(.dots,.wp-block-template-part:has(> .dots))){margin-block:calc(var(--gap-section) / -2) calc(var(--gap-section) / 2)}
.wp-block-digotech-divider svg{position:absolute;inset:0;width:100%;height:100%}
.wp-block-digotech-divider path{fill:none;stroke:var(--accent-fill);stroke-width:var(--dg-divider-stroke);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--dg-divider-draw))}
/* the dot sits where the path steps up: x 600/1200 = 50%, y 20/120 = 1/6 of the box */
.wp-block-digotech-divider__dot{position:absolute;left:50%;top:calc(100% / 6);width:var(--s-3);height:var(--s-3);border-radius:50%;background:var(--accent-fill);transform:translate(-50%,-50%);opacity:var(--dg-divider-draw)}
