/* Andonasty Ink — Motion group, ported 1:1 from the Claude Design project "Andonasty Ink & Riso"
   (components/motion-tokens, hero-kinetic, glitch-heading, marquee-stack, sticker-motion, reveal-wipe).
   Values are the ones tuned there; tokens come from theme.json → --wp--custom--motion--*.
   prefers-reduced-motion (or body.reduced-motion) freezes everything; body.force-motion (?motion=on) overrides it for review. */

:root {
  --m-snap: var(--wp--custom--motion--dur-snap, 90ms);
  --m-fast: var(--wp--custom--motion--dur-fast, 180ms);
  --m-dur: var(--wp--custom--motion--dur, 380ms);
  --m-slow: var(--wp--custom--motion--dur-slow, 900ms);
  --m-marquee: var(--wp--custom--motion--dur-marquee, 26s);
  --m-ease-snap: var(--wp--custom--motion--ease-snap, cubic-bezier(.16, 1, .3, 1));
  --m-ease-out: var(--wp--custom--motion--ease-out, cubic-bezier(.2, .7, .2, 1));
  --m-ease-strobe: var(--wp--custom--motion--ease-strobe, steps(5, end));
  --m-stagger: var(--wp--custom--motion--stagger, 45ms);
  --m-glitch: var(--wp--custom--motion--offset-glitch, 4px);
  --m-riso: var(--wp--custom--motion--offset-riso, 6px);
  --m-wobble: var(--wp--custom--motion--wobble, 2.5deg);
  --c-ink: var(--wp--preset--color--ink, #141210);
  --c-ink-2: var(--wp--preset--color--ink-2, #1E1B18);
  --c-ink-40: var(--wp--preset--color--ink-40, #3A3632);
  --c-paper: var(--wp--preset--color--paper, #F3EFE6);
  --c-paper-60: var(--wp--preset--color--paper-60, #C9C3B8);
  --c-crimson: var(--wp--preset--color--crimson, #E51A3F);
  --c-acid: var(--wp--preset--color--acid, #EDE21C);
  --c-teal: var(--wp--preset--color--teal, #2BC4B6);
  --c-magenta: var(--wp--preset--color--magenta, #FF3FA4);
}

/* ============ Motion tokens card: live riso shift, rgb split, wobble ============ */
.riso-live { position: relative; animation: risoshift 2.4s var(--m-ease-snap) infinite; }
@keyframes risoshift { 0%, 100% { text-shadow: var(--m-riso) var(--m-riso) 0 var(--c-crimson), calc(var(--m-glitch) * -1) -3px 0 var(--c-teal); } 50% { text-shadow: 2px 3px 0 var(--c-crimson), -1px -1px 0 var(--c-teal); } }
.rgb-split { position: relative; animation: rgbsplit 1.6s steps(3, end) infinite; }
@keyframes rgbsplit { 0%, 70%, 100% { text-shadow: none; } 75% { text-shadow: calc(var(--m-glitch) * -1) 0 var(--c-crimson), var(--m-glitch) 0 var(--c-teal); } 85% { text-shadow: var(--m-glitch) 0 var(--c-crimson), calc(var(--m-glitch) * -1) 0 var(--c-acid); } }

/* ============ Kinetic hero: letters assemble on --ds-stagger with --ds-ease-snap, loop every 7 s ============ */
.stage { position: relative; overflow: hidden; background: var(--c-ink); border: 3px solid var(--c-paper); box-shadow: 12px 12px 0 var(--c-crimson); }
.breathe { position: relative; }
.breathe::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 90% at 15% 0%, rgba(229, 26, 63, 0.35), transparent 60%); animation: breathe 7s ease-in-out infinite; }
.breathe > * { position: relative; z-index: 2; }
@keyframes breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.kin { display: inline-block; }
.kin__w { display: inline-block; white-space: nowrap; }
.kin__w > span { display: inline-block; opacity: 0; animation: assemble 7s var(--m-ease-snap) infinite; animation-delay: calc(var(--i, 0) * var(--m-stagger)); }
.kin.riso, .kin.riso .kin__w > span { text-shadow: var(--m-riso) var(--m-riso) 0 var(--c-crimson); }
.kin.once .kin__w > span { animation-iteration-count: 1; animation-duration: var(--m-slow); animation-name: assemble-once; animation-fill-mode: forwards; }
@keyframes assemble { 0% { opacity: 0; transform: translateY(0.45em) rotate(-7deg) scaleY(1.3); } 14%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-0.2em) rotate(3deg); } }
@keyframes assemble-once { 0% { opacity: 0; transform: translateY(0.45em) rotate(-7deg) scaleY(1.3); } 100% { opacity: 1; transform: none; } }
.lbl { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--paper-40); }
.lbl.is-acid { color: var(--c-acid); }
/* Primary button: the DS .cta hover — presses 3 px into its shadow */
.wp-block-button__link { transition: transform var(--m-fast) var(--m-ease-snap), box-shadow var(--m-fast), background var(--m-fast), color var(--m-fast); }
.wp-block-button:not(.is-style-outline):not(.is-style-ink) .wp-block-button__link:hover { transform: translate(3px, 3px); }

/* ============ Glitch heading: crimson + teal plates behind the text, 4 px, steps(3) ============ */
.gl { position: relative; display: inline-block; z-index: 0; }
.gl::before, .gl::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; text-shadow: none; }
.gl::before { color: var(--c-crimson); z-index: -1; }
.gl::after { color: var(--c-teal); z-index: -1; }
.gl.auto::before { animation: gx 4s steps(3, end) infinite; }
.gl.auto::after { animation: gx 4s steps(3, end) infinite reverse; }
@keyframes gx { 0%, 88%, 100% { transform: translate(0, 0); clip-path: none; } 90% { transform: translate(calc(var(--m-glitch) * -1), 2px); clip-path: inset(10% 0 55% 0); } 94% { transform: translate(var(--m-glitch), -2px); clip-path: inset(60% 0 12% 0); } 97% { transform: translate(-3px, 0); clip-path: inset(35% 0 40% 0); } }
.gl.hov:hover::before, .gl.play::before { animation: gh 0.45s steps(3, end) infinite; }
.gl.hov:hover::after, .gl.play::after { animation: gh 0.45s steps(3, end) infinite reverse; }
.gl.hov:hover, .gl.play { animation: jitter 0.45s steps(3, end) infinite; }
@keyframes gh { 0% { transform: translate(-5px, 1px); clip-path: inset(5% 0 70% 0); } 33% { transform: translate(5px, -2px); clip-path: inset(55% 0 18% 0); } 66% { transform: translate(-3px, 3px); clip-path: inset(30% 0 45% 0); } 100% { transform: translate(4px, 0); clip-path: inset(75% 0 5% 0); } }
@keyframes jitter { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } }
/* Outline button: fills paper, splits, jitters (DS .glbtn) */
.is-style-outline .wp-block-button__link:hover, .glbtn:hover { background: var(--c-paper); color: var(--c-ink); text-shadow: -3px 0 var(--c-crimson), 3px 0 var(--c-teal); animation: jitter 0.12s steps(2, end) infinite; }

/* ============ Marquee stack: three bands, three speeds, alternating directions, hover pauses ============ */
.mq-stack { border-top: 3px solid var(--c-ink); }
.mq { overflow: hidden; border-bottom: 3px solid var(--c-ink); }
.mq.is-acid { background: var(--c-acid); color: var(--c-ink); }
.mq.is-ink { background: var(--c-ink-2); color: var(--c-paper-60); border-bottom-color: var(--c-ink-40); }
.mq.is-crimson { background: var(--c-crimson); color: var(--c-paper); }
.mq__track { display: flex; align-items: center; gap: 18px; white-space: nowrap; padding: 12px 0; width: max-content; margin: 0; text-transform: uppercase; animation: mq-track var(--m-marquee) linear infinite; }
.mq.is-fast .mq__track { animation-duration: 18s; }
.mq.is-slow .mq__track { animation-duration: 34s; }
.mq.is-reverse .mq__track { animation-direction: reverse; }
.mq:hover .mq__track { animation-play-state: paused; }
.mq__track .cond { font-family: var(--wp--preset--font-family--display-cond); font-weight: 900; }
.mq.is-acid .mq__track { font-family: var(--wp--preset--font-family--display-cond); font-weight: 900; font-size: 34px; }
.mq.is-ink .mq__track { font-family: var(--wp--preset--font-family--mono); font-size: 15px; letter-spacing: 0.14em; }
.mq.is-crimson .mq__track { font-family: var(--wp--preset--font-family--display-cond); font-weight: 900; font-size: 44px; }
.mq__track .star { color: var(--c-crimson); }
.mq.is-ink .mq__track .star { color: var(--c-acid); }
.mq.is-crimson .mq__track .star { color: var(--c-ink); }
@keyframes mq-track { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Sticker motion: wobble ±2.5° at rest with three phases, straighten on hover, peel ============ */
.stk, .sticker.stk { animation: wb 3.4s ease-in-out infinite; }
.stk.w2, .stk:nth-of-type(3n+2) { animation-duration: 4.2s; animation-delay: -1.1s; }
.stk.w3, .stk:nth-of-type(3n) { animation-duration: 2.8s; animation-delay: -0.6s; }
@keyframes wb { 0%, 100% { transform: rotate(calc(var(--m-wobble) * -1)); } 50% { transform: rotate(var(--m-wobble)); } }
.stk:hover { transform: rotate(0deg) scale(1.04); animation-play-state: paused; transition: transform var(--m-fast) var(--m-ease-snap); }
.peel { position: relative; overflow: hidden; transform: rotate(-2deg); transition: transform var(--m-fast) var(--m-ease-snap); }
.peel > i { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-left: 0 solid transparent; border-bottom: 0 solid rgba(20, 18, 16, 0.55); transition: all var(--m-fast) var(--m-ease-snap); }
.peel:hover { transform: rotate(0deg) translate(-2px, -2px); }
.peel:hover > i { border-left-width: 22px; border-bottom-width: 22px; }

/* ============ Reveal & wipe: rows enter from below once, 45 ms apart; acid curtain between pages ============ */
.rv { opacity: 0; transform: translateY(28px); transition: opacity var(--m-dur) var(--m-ease-out), transform var(--m-dur) var(--m-ease-out); transition-delay: calc(var(--i, 0) * var(--m-stagger)); }
.rv.in { opacity: 1; transform: none; }
.rv.is-card { border-left: 4px solid var(--c-crimson); background: var(--c-ink); padding: 18px; }
.wipe { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--c-acid); color: var(--c-ink); pointer-events: none; clip-path: inset(0 0 0 100%); font-family: var(--wp--preset--font-family--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; font-size: 26px; }
.wipe.is-in { animation: wipe-in var(--m-dur) var(--m-ease-snap) forwards; }
.wipe.is-out { clip-path: inset(0 0 0 0); animation: wipe-out var(--m-dur) var(--m-ease-snap) forwards; }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipe-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

/* ============ Texture: live grain and CRT scanlines (always on, very faint) ============ */
.grain { position: fixed; inset: -15%; pointer-events: none; z-index: 30; opacity: 0.1; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); animation: grainshift 0.48s steps(2, end) infinite; }
@keyframes grainshift { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } 100% { transform: translate(3%, 1%); } }
.scan { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.35; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 4px); animation: scanroll 6s linear infinite; }
.scan.is-soft { opacity: 0.22; }
@keyframes scanroll { from { background-position-y: 0; } to { background-position-y: 120px; } }

/* ============ Lab extras (Andonasty Motion Lab v14, not part of the Claude Design Motion group) ============ */
.squeegee { position: relative; display: inline-block; clip-path: inset(0 100% 0 0); }
.squeegee::after { content: ''; position: absolute; top: -0.1em; bottom: -0.1em; left: 0; width: 8px; background: var(--c-acid); box-shadow: -24px 0 24px 8px rgba(229, 26, 63, 0.6); opacity: 0; }
.in .squeegee, .squeegee.in, .squeegee:hover { animation: sq-reveal 1200ms cubic-bezier(.7, 0, .2, 1) forwards; }
.in .squeegee::after, .squeegee.in::after, .squeegee:hover::after { animation: sq-blade 1200ms cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes sq-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes sq-blade { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.drop-in { opacity: 0.001; transform: translateY(-120px) rotate(-24deg) scale(1.3); }
.in .drop-in, .drop-in.in { animation: sticker-drop 700ms cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes sticker-drop { 0% { opacity: 0; transform: translateY(-120px) rotate(-24deg) scale(1.3); } 70% { opacity: 1; transform: translateY(6px) rotate(2deg) scale(0.96); } 100% { opacity: 1; transform: translateY(0) rotate(calc(var(--m-wobble) * -1)) scale(1); } }
.drip-wrap { position: relative; display: inline-block; }
.drip { position: absolute; left: -2%; right: -2%; bottom: -0.06em; height: 0.34em; pointer-events: none; z-index: -1; filter: url(#ink-goo); opacity: 0.88; }
.drip .bar { position: absolute; inset: 0; background: var(--c-acid); transform: rotate(-1deg); }
.drip i, .band .edge i, .has-edge .edge i { position: absolute; top: 55%; width: var(--w, 12px); height: var(--h, 60px); background: var(--c-acid); border-radius: 0 0 40% 40%; transform-origin: top center; transform: scaleY(0); }
.drip i::after, .band .edge i::after, .has-edge .edge i::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: calc(var(--w, 12px) * 1.5); height: calc(var(--w, 12px) * 1.5); margin-left: calc(var(--w, 12px) * -0.75); background: inherit; border-radius: 50%; }
.drip.crimson .bar, .drip.crimson i { background: var(--c-crimson); }
.in .drip i, .drip.in i, .drip-wrap:hover .drip i { animation: drip-fall 1400ms cubic-bezier(.6, 0, .3, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes drip-fall { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.band, .has-edge { position: relative; }
.band .edge, .has-edge .edge { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 3; filter: url(#ink-goo); pointer-events: none; }
/* WordPress constrains a group's children to the content width; the edge must span the whole section. */
.is-layout-constrained > .edge { max-width: none !important; margin: 0 !important; }
.band .edge i, .has-edge .edge i { top: 0; }
/* A strip inside the filter that overlaps the section edge, so the drips merge with it instead of hanging as loose blobs. */
.band .edge .bar, .has-edge .edge .bar { position: absolute; left: 0; right: 0; top: -14px; height: 18px; background: var(--c-acid); transform: none; }
.edge.is-crimson .bar { background: var(--c-crimson); }
.edge.is-paper .bar { background: var(--c-paper); }
.edge.is-ink .bar { background: var(--c-ink); }
.edge.is-crimson i { background: var(--c-crimson); }
.edge.is-paper i { background: var(--c-paper); }
.edge.is-ink i { background: var(--c-ink); }
.band.in .edge i, .has-edge.in .edge i, .in .has-edge .edge i { animation: drip-fall 1800ms cubic-bezier(.6, 0, .3, 1) forwards; animation-delay: var(--d, 0ms); }
.mq.has-edge { overflow: visible; }
.mq.has-edge > .mq__clip { overflow: hidden; }
.drip.is-acid .bar, .drip.is-acid i { background: var(--c-acid); }
.drip.is-crimson .bar, .drip.is-crimson i { background: var(--c-crimson); }
.kin.drip-wrap { display: inline-block; position: relative; }
.gimg { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
.gimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gimg .c1, .gimg .c2 { opacity: 0; }
.gimg .c1 { filter: url(#ink-tint-crimson); }
.gimg .c2 { filter: url(#ink-tint-teal); }
.gimg .scanline { position: absolute; left: 0; right: 0; height: 14%; background: var(--c-paper); opacity: 0; mix-blend-mode: difference; pointer-events: none; }
.gimg:hover .c1, .gimg.play .c1 { opacity: 1; animation: img-a 900ms steps(1, end) infinite; }
.gimg:hover .c2, .gimg.play .c2 { opacity: 1; animation: img-b 900ms steps(1, end) infinite; }
.gimg:hover .base, .gimg.play .base { animation: img-base 900ms steps(1, end) infinite; }
.gimg:hover .scanline, .gimg.play .scanline { animation: scanline 900ms linear infinite; }
.gimg.play .c1, .gimg.play .c2, .gimg.play .base, .gimg.play .scanline { animation-iteration-count: 1; }
@keyframes img-base { 0%, 100% { transform: none; filter: none; } 10% { transform: translateX(-6px); } 30% { transform: translateX(8px) scaleY(1.02); } 45% { transform: none; filter: saturate(3) contrast(1.4); } 60% { transform: translateX(-10px); filter: none; } 80% { transform: translateX(4px) scaleY(0.98); } }
@keyframes img-a { 0% { clip-path: inset(0 0 0 0); transform: translateX(-10px); opacity: 0.6; } 10% { clip-path: inset(4% 0 78% 0); transform: translateX(-34px); opacity: 1; } 25% { clip-path: inset(52% 0 22% 0); transform: translateX(28px); } 40% { clip-path: inset(0 0 0 0); transform: translateX(-12px); opacity: 0.5; } 55% { clip-path: inset(30% 0 50% 0); transform: translateX(-26px); opacity: 1; } 70% { clip-path: inset(72% 0 6% 0); transform: translateX(36px); } 85% { clip-path: inset(14% 0 64% 0); transform: translateX(-18px); } 100% { clip-path: inset(0 0 100% 0); transform: none; } }
@keyframes img-b { 0% { clip-path: inset(0 0 0 0); transform: translateX(10px); opacity: 0.6; } 10% { clip-path: inset(58% 0 16% 0); transform: translateX(32px); opacity: 1; } 25% { clip-path: inset(8% 0 74% 0); transform: translateX(-28px); } 40% { clip-path: inset(0 0 0 0); transform: translateX(12px); opacity: 0.5; } 55% { clip-path: inset(80% 0 3% 0); transform: translateX(24px); opacity: 1; } 70% { clip-path: inset(34% 0 44% 0); transform: translateX(-38px); } 85% { clip-path: inset(46% 0 30% 0); transform: translateX(20px); } 100% { clip-path: inset(0 0 100% 0); transform: none; } }
@keyframes scanline { 0% { top: -14%; opacity: 0.35; } 100% { top: 100%; opacity: 0.35; } }
.bleed img { filter: url(#ink-bleed); }
.duo { position: relative; overflow: hidden; }
.duo img { transition: filter 250ms ease, transform 400ms ease; }
.duo:hover img { filter: url(#ink-duotone); transform: scale(1.06) rotate(-1deg); }
.plate { position: relative; z-index: 2; text-shadow: 0 0 4px var(--c-ink), 0 0 10px var(--c-ink), 0 0 18px var(--c-ink); }

/* ============ Reduced motion: the OS setting (unless body.force-motion) or the user's toggle ============ */
@media (prefers-reduced-motion: reduce) {
  body:not(.force-motion) *, body:not(.force-motion) *::before, body:not(.force-motion) *::after { animation: none !important; transition-duration: 1ms !important; }
  body:not(.force-motion) .kin__w > span, body:not(.force-motion) .rv, body:not(.force-motion) .squeegee, body:not(.force-motion) .drop-in { opacity: 1; transform: none; clip-path: none; }
  body:not(.force-motion) .drip i, body:not(.force-motion) .edge i { transform: scaleY(1); }
  body:not(.force-motion) .wipe { display: none; }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation: none !important; transition-duration: 1ms !important; }
body.reduced-motion .kin__w > span, body.reduced-motion .rv, body.reduced-motion .squeegee, body.reduced-motion .drop-in { opacity: 1; transform: none; clip-path: none; }
body.reduced-motion .drip i, body.reduced-motion .edge i { transform: scaleY(1); }
body.reduced-motion .wipe { display: none; }