/**
 * Powershift Glyphs - shared front-end and editor styles.
 *
 * Three layers here:
 *   1. the glyph itself (line art in currentColor), unchanged since v1
 *   2. the shared motion vocabulary (pwr-*), lifted from the canvas artboards
 *   3. the hexagon frame, built from Design's spec - see includes/class-pwr-glyph-frame.php
 *
 * The per-glyph keyframes (k-*) live in assets/glyph-motion.css, which is
 * generated - don't hand-edit that one.
 */

/* --- surface tokens ------------------------------------------------------
   The site ground is ink, so that is the default. A light card or band sets
   these two on itself and every glyph inside it with surface "auto" follows:

       .your-light-card { --pwr-surface-bg: #ffffff; --pwr-surface-fg: #0f212c; }

   bg is the surface's own colour; fg is what reads against it.            */

:root {
	--pwr-surface-bg: #0f212c;
	--pwr-surface-fg: #ffffff;
}

.pwr-glyph-block.is-surface-dark {
	--pwr-surface-bg: #0f212c;
	--pwr-surface-fg: #ffffff;
}

.pwr-glyph-block.is-surface-light {
	--pwr-surface-bg: #ffffff;
	--pwr-surface-fg: #0f212c;
}

/* is-surface-auto deliberately sets neither, so it inherits the container's. */

/* --- block box ----------------------------------------------------------- */

.pwr-glyph-block {
	margin: 0;
	/* --pwr-glyph-size is set inline per block by render.php. */
	--pwr-glyph-size: 168px;
}

.pwr-glyph-block .pwr-glyph-frame {
	display: block;
	width: var(--pwr-glyph-size);
	height: var(--pwr-glyph-size);
	max-width: 100%;
}

.pwr-glyph-block.has-text-align-center,
.pwr-glyph-block.aligncenter {
	text-align: center;
}

.pwr-glyph-block.aligncenter .pwr-glyph-frame {
	margin-inline: auto;
}

.pwr-glyph-block.alignright .pwr-glyph-frame {
	margin-inline-start: auto;
}

.pwr-glyph-caption {
	margin-block-start: 0.75em;
	font-size: 0.8125rem;
	line-height: 1.45;
}

/* --- the glyph ----------------------------------------------------------
   Colour comes from the wrapper, so the theme palette and the block's own
   text-colour control both drive it through currentColor.                */

.pwr-glyph {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 3.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

.pwr-glyph .pwr-fill {
	fill: currentColor;
	stroke: none;
}

.pwr-glyph .pwr-dash {
	stroke-dasharray: 1 2;
}

/* --- the hexagon frame --------------------------------------------------
   One shape for the whole set. The ring paints in the wrapper's colour (so
   the WordPress colour control is the accent); only the art group is
   recoloured when a frame is present. Bare glyphs are untouched, which is
   why existing content renders exactly as it did before v2.              */

.pwr-hex {
	fill: none;
	stroke: none;
	stroke-width: 5.6;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	stroke-miterlimit: 4;
}

.is-frame-solid .pwr-hex {
	fill: currentColor;
	stroke: currentColor;
}

.is-frame-stroke .pwr-hex {
	stroke: currentColor;
	stroke-dasharray: 1 2;
	/* The ring traces on clockwise from the top-right edge as the glyph starts. */
	animation: pwr-draw 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) 0s both;
}

/* Solid: the glyph reads as a hole punched in the hexagon, so it takes the
   surface's own colour. Stroke: the glyph is what contrasts with the surface. */

.is-frame-solid .pwr-glyph-art {
	color: var(--pwr-surface-bg, #0f212c);
}

.is-frame-stroke .pwr-glyph-art {
	color: var(--pwr-surface-fg, #ffffff);
}

/* --- shared motion vocabulary ------------------------------------------- */

@keyframes pwr-draw { from { stroke-dashoffset: 1.2; } to { stroke-dashoffset: 0; } }
@keyframes pwr-rdraw { from { stroke-dashoffset: -1.2; } to { stroke-dashoffset: 0; } }
@keyframes pwr-retrace { 0%, 50% { stroke-dashoffset: 0; } 60% { stroke-dashoffset: -1.05; } 60.01%, 68% { stroke-dashoffset: 1.2; } 82%, 100% { stroke-dashoffset: 0; } }
@keyframes pwr-rretrace { 0%, 50% { stroke-dashoffset: 0; } 60% { stroke-dashoffset: 1.05; } 60.01%, 68% { stroke-dashoffset: -1.2; } 82%, 100% { stroke-dashoffset: 0; } }
@keyframes pwr-erase { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1.05; } }
@keyframes pwr-wipe { from { clip-path: inset(-3px 100% -3px -3px); } to { clip-path: inset(-3px -3px -3px -3px); } }
@keyframes pwr-rwipe { from { clip-path: inset(-3px -3px -3px 100%); } to { clip-path: inset(-3px -3px -3px -3px); } }
@keyframes pwr-rise { from { clip-path: inset(100% -3px -3px -3px); } to { clip-path: inset(-3px -3px -3px -3px); } }
@keyframes pwr-drain { from { clip-path: inset(-3px -3px -3px -3px); } to { clip-path: inset(100% -3px -3px -3px); } }
@keyframes pwr-fall { from { clip-path: inset(-3px -3px 100% -3px); } to { clip-path: inset(-3px -3px -3px -3px); } }
@keyframes pwr-show { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes pwr-hide { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes pwr-flicker { 0%, 6% { visibility: hidden; } 6.01%, 20% { visibility: visible; } 20.01%, 26% { visibility: hidden; } 26.01%, 60% { visibility: visible; } 60.01%, 64% { visibility: hidden; } 64.01%, 100% { visibility: visible; } }
@keyframes pwr-blink { 0%, 12% { visibility: visible; } 12.01%, 18% { visibility: hidden; } 18.01%, 40% { visibility: visible; } 40.01%, 44% { visibility: hidden; } 44.01%, 100% { visibility: visible; } }
@keyframes pwr-spin { to { transform: rotate(360deg); } }
@keyframes pwr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* --- playback states ----------------------------------------------------
   The clip-path reset below deliberately skips .pwr-glyph-art: that element's
   clip is the hexagon mask, not an animation, and unclipping it would let the
   artwork spill over the ring when motion is off.                        */

/* "When scrolled into view": hold the first frame until view.js says go. */
.pwr-glyph-block.is-waiting .pwr-glyph * {
	animation-play-state: paused;
}

.pwr-glyph-block.is-playing .pwr-glyph * {
	animation-play-state: running;
}

/* "Still": the glyph's resting state - the same treatment reduced motion gets. */
.pwr-glyph-block.is-still .pwr-glyph * {
	animation: none !important;
	stroke-dashoffset: 0 !important;
	visibility: visible !important;
	transform: none !important;
}

.pwr-glyph-block.is-still .pwr-glyph *:not(.pwr-glyph-art) {
	clip-path: none !important;
}

.pwr-glyph-block.is-still .pwr-glyph .pwr-extra {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.pwr-glyph * {
		animation: none !important;
		stroke-dashoffset: 0 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.pwr-glyph *:not(.pwr-glyph-art) {
		clip-path: none !important;
	}

	.pwr-glyph .pwr-extra {
		display: none !important;
	}
}

/* Editors only: a retired glyph slug still sitting in post content. */
.pwr-glyph-missing {
	padding: 0.75em 1em;
	border-left: 3px solid #d8391f;
	background: #fdf3f1;
	color: #6b1f12;
	font-size: 0.875rem;
}