/* ==========================================================================
   Row-level scroll animations — admin-facing class system

   Source reference: the five "*-animation.html" developer-reference pages
   under reference-img/Deutsch Miller animation/ (footer, row-lines,
   trace-line, manifesto, tile). Each demo plays on page load; here the same
   CSS keyframes/timings are reproduced but gated behind a ".dm-inview"
   class that inc/js/dm-animations.js adds via IntersectionObserver, so the
   animation instead plays once when the row scrolls into view.

   USAGE — apply two classes to the Row's own "Extra Class Name" field:
     1. an ENABLE class (dm-line-animation, dm-trace-animation,
        dm-manifesto-animation, dm-tile-animation) — turns the mechanism on
        and is what dm-animations.js watches for.
     2. a STYLE class (dm-line-footer, dm-line-rows, dm-trace-line,
        dm-manifesto-quote, dm-tile-cards) — tunes durations/delays to match
        one of the five reference designs. Add a new STYLE class alongside
        the same enable class to reuse a mechanism elsewhere with different
        timing, rather than editing the enable class itself.

   Then, inside that row's own HTML (a WPBakery Raw HTML/Text block), tag
   the elements that should actually animate with the INNER HOOK classes
   documented above each block below (.dm-flow, .dm-draw, .dm-trace,
   .dm-wipe-y, .dm-mask-rise, .dm-tile-panel/.dm-tile-content/.dm-tile-line).
   Hook classes are shared across all five pairs — the enable class on the
   row decides which timing variables they pick up.
   ========================================================================== */

/* ---- Keyframes ---- */
@keyframes dm-flow      { from { opacity: 0; transform: translateY(var(--dm-flow-y, 18px)); } to { opacity: 1; transform: translateY(0); } }
@keyframes dm-draw      { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dm-trace     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dm-wipe-y    { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dm-rise      { from { transform: translateY(110%); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes dm-tile-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-tile-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes dm-tile-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ==========================================================================
   Inner hook classes — shared by every enable class below. Inert (held at
   their "from" state) until the row's own ".dm-inview" class is present.
   ========================================================================== */

/* .dm-flow — fade + rise entrance for ordinary content (headings, copy,
   a rule, an attribution line). Reference: footer/row-lines' ".flow",
   manifesto's ".rule"/".attrib". */
[class*="-animation"] .dm-flow {
	opacity: 0;
	transform: translateY(var(--dm-flow-y, 18px));
	will-change: opacity, transform;
}

[class*="-animation"].dm-inview .dm-flow {
	animation: dm-flow var(--dm-flow-dur, 2000ms) cubic-bezier(.16, .84, .24, 1) both;
	animation-delay: var(--dm-flow-delay, 0ms);
}

/* .dm-draw — an SVG <path> that draws itself in. The path MUST carry
   pathLength="1" in the markup (as the reference SVGs do) so
   stroke-dasharray/-dashoffset:1 work regardless of the path's real
   length. Reference: footer's ".line", row-lines' ".rule". */
[class*="-animation"] .dm-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

[class*="-animation"].dm-inview .dm-draw {
	animation: dm-draw var(--dm-draw-dur, 1500ms) linear both;
	animation-delay: var(--dm-draw-delay, 200ms);
}

/* .dm-trace — left-to-right clip-path reveal of a whole block/image.
   Reference: trace-line's ".line", tile's accent line reuses the same
   idea vertically (see .dm-tile-line below). */
[class*="-animation"] .dm-trace {
	clip-path: inset(0 100% 0 0);
}

[class*="-animation"].dm-inview .dm-trace {
	animation: dm-trace var(--dm-trace-dur, 1800ms) linear both;
	animation-delay: var(--dm-trace-delay, 200ms);
}

/* .dm-wipe-y — top-to-bottom clip-path reveal. Reference: manifesto's
   side ".edge" curves. */
[class*="-animation"] .dm-wipe-y {
	clip-path: inset(0 0 100% 0);
}

[class*="-animation"].dm-inview .dm-wipe-y {
	animation: dm-wipe-y var(--dm-edge-dur, 2600ms) cubic-bezier(.4, 0, .2, 1) both;
	animation-delay: var(--dm-edge-delay, 0ms);
}

/* .dm-mask-rise — an overflow-hidden mask around one line of content; the
   line rises up from below the mask. Reference: manifesto's ".line" quote
   rows. Stagger multiple lines with an inline "style='--d:150ms'" (etc.)
   on the DIRECT CHILD, one --line-step apart, matching the reference's
   150ms cadence. */
[class*="-animation"] .dm-mask-rise {
	overflow: hidden;
}

[class*="-animation"] .dm-mask-rise > * {
	display: block;
	transform: translateY(110%);
	opacity: 0;
}

[class*="-animation"].dm-inview .dm-mask-rise > * {
	animation: dm-rise var(--dm-mask-dur, 1400ms) cubic-bezier(.25, .46, .45, .94) both;
	animation-delay: var(--d, 0ms);
}

/* .dm-tile-panel / .dm-tile-content / .dm-tile-line — a staggered card
   group (background panel fade, foreground content rise, accent line
   draw). Wrap each card in an element carrying its own
   "style='--stagger:200ms'" (etc., --dm-tile-stagger-step apart) so
   dm-tile-cards' 200ms cadence lines up card-by-card, then give the panel/
   content/line their class inside it. Reference: tile-animation.html. */
[class*="-animation"] .dm-tile-panel {
	opacity: 0;
}

[class*="-animation"].dm-inview .dm-tile-panel {
	animation: dm-tile-fade var(--dm-tile-fade-dur, 1200ms) ease-out both;
	animation-delay: var(--stagger, 0ms);
}

[class*="-animation"] .dm-tile-content {
	opacity: 0;
	transform: translateY(24px);
}

[class*="-animation"].dm-inview .dm-tile-content {
	animation: dm-tile-rise var(--dm-tile-fade-dur, 1200ms) cubic-bezier(.2, .7, .3, 1) both;
	animation-delay: calc(var(--dm-tile-fg-delay, 200ms) + var(--stagger, 0ms));
}

[class*="-animation"] .dm-tile-line {
	transform: scaleY(0);
	transform-origin: top center;
}

[class*="-animation"].dm-inview .dm-tile-line {
	animation: dm-tile-line var(--dm-tile-line-dur, 1200ms) cubic-bezier(.4, 0, .2, 1) both;
	animation-delay: calc(var(--dm-tile-line-delay, 200ms) + var(--stagger, 0ms));
}

/* ==========================================================================
   Enable classes — add one to the Row's "Extra Class Name" field to turn
   a mechanism on. dm-animations.js watches for these exact selectors.
   ========================================================================== */

/* .dm-line-animation — SVG line-draw + flowing content.
   Inner markup: an inline <svg> with one or more <path class="dm-draw"
   pathLength="1">, plus any content wrapped in .dm-flow.
   Pair with: .dm-line-footer or .dm-line-rows. */
.dm-line-animation { position: relative; }

/* .dm-trace-animation — single left-to-right reveal of a whole image/board.
   Inner markup: the image/board wrapped in one .dm-trace element.
   Pair with: .dm-trace-line. */
.dm-trace-animation { position: relative; }

/* .dm-manifesto-animation — masked quote-line rise + side edge wipes +
   flowing rule/attribution.
   Inner markup: each quote line wrapped in .dm-mask-rise (direct child
   staggered via --d), side art wrapped in .dm-wipe-y, rule/attribution
   wrapped in .dm-flow.
   Pair with: .dm-manifesto-quote. */
.dm-manifesto-animation { position: relative; }

/* .dm-tile-animation — staggered panel/content/line tile cards.
   Inner markup: each card wrapped in an element carrying inline
   "--stagger", containing .dm-tile-panel, .dm-tile-content and
   .dm-tile-line children.
   Pair with: .dm-tile-cards. */
.dm-tile-animation { position: relative; }

/* ==========================================================================
   Style classes — pair with an enable class above to set that context's
   durations/delays (colors stay in the row's own markup, e.g.
   style="stroke:var(--dm-straw)" on a .dm-draw path).
   ========================================================================== */

/* footer-animation.html */
.dm-line-footer {
	--dm-flow-dur: 2000ms;
	--dm-draw-dur: 1500ms;
	--dm-draw-delay: 200ms;
}

/* row-lines-animation.html ("Spec rows") */
.dm-line-rows {
	--dm-flow-dur: 2000ms;
	--dm-draw-dur: 700ms;
	--dm-draw-delay: 0ms;
}

/* trace-line-animation.html */
.dm-trace-line {
	--dm-trace-dur: 1800ms;
	--dm-trace-delay: 200ms;
}

/* manifesto-animation.html */
.dm-manifesto-quote {
	--dm-mask-dur: 1400ms;
	--dm-edge-dur: 2600ms;
	--dm-flow-dur: 900ms;
	--dm-flow-delay: 950ms;
}

/* tile-animation.html */
.dm-tile-cards {
	--dm-tile-fade-dur: 1200ms;
	--dm-tile-fg-delay: 200ms;
	--dm-tile-line-delay: 200ms;
	--dm-tile-line-dur: 1200ms;
}

/* ==========================================================================
   Accessibility — skip straight to the resolved end state.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[class*="-animation"] .dm-flow,
	[class*="-animation"] .dm-draw,
	[class*="-animation"] .dm-trace,
	[class*="-animation"] .dm-wipe-y,
	[class*="-animation"] .dm-mask-rise > *,
	[class*="-animation"] .dm-tile-panel,
	[class*="-animation"] .dm-tile-content,
	[class*="-animation"] .dm-tile-line {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		stroke-dashoffset: 0 !important;
	}
}