/* ==========================================================================
   ORNAMENTS — styling hooks for the inline-SVG library in inc/icons.php
   (hs_icon() = 24px line icons, hs_ornament() = illustrations / dividers).
   1. Tokens   2. Icons   3. Ornament base   4. Colour classes   5. Idle motion
   Everything reads the theme tokens with a hard-coded fallback, so it also renders outside the theme.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — gold/saffron accents re-map per tone scope so they stay visible
   ========================================================================== */
:root {
	--o-gold: var(--antique-gold, #D9A441);
	--o-gold-soft: var(--gold-soft, #E9C47B);
	--o-saffron: var(--saffron, #F47A1F);
	--o-saffron-bright: var(--saffron-bright, #FF9A4D);
	--o-deep: var(--deep-saffron, #C94E12);
	--o-ivory: var(--warm-ivory, #F6EBDD);
	--o-ink: var(--sanctum-black, #0B0907);
	--o-sindoor: var(--sindoor-red, #B73420);
}

/* Light surfaces: bronze-gold and mid-saffron keep ≥ 3:1 against ivory. */
.tone-ivory {
	--o-gold: #A8761F;
	--o-gold-soft: #C79A3F;
	--o-saffron: var(--saffron-mid, #DE6418);
	--o-saffron-bright: var(--saffron, #F47A1F);
	--o-ivory: var(--sanctum-black, #0B0907);
}

/* Saffron band: accents go ink / ivory. */
.tone-saffron {
	--o-gold: var(--sanctum-black, #0B0907);
	--o-gold-soft: rgba(11, 9, 7, 0.7);
	--o-saffron: var(--warm-ivory, #F6EBDD);
	--o-saffron-bright: #fff;
	--o-ivory: var(--sanctum-black, #0B0907);
}


/* ==========================================================================
   2. ICONS — .icon.icon--{name}; default size 1.25em (an explicit `size` arg sets width/height attributes)
   ========================================================================== */
.icon {
	display: inline-block;
	flex: none;
	vertical-align: -0.22em;
	overflow: visible;
	color: inherit;
}

/* Size / weight modifiers (CSS beats the width/height attributes). */
.icon--xs { width: 0.875em; height: 0.875em; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }
.icon--xl { width: 2.5em; height: 2.5em; }
.icon--2xl { width: 3.5em; height: 3.5em; }
.icon--thin { stroke-width: 1.1; }
.icon--bold { stroke-width: 1.9; }

/* Two-tone hooks used inside the multi-part icons. Set --icon-accent on any ancestor (e.g. gold or saffron). */
.icon .i-accent { stroke: var(--icon-accent, currentColor); }
.icon .i-accent-fill { fill: var(--icon-accent, currentColor); stroke: none; }
.icon .i-fill { fill: currentColor; stroke: none; }
.icon .i-dim { opacity: 0.42; }

/* Toggle state for star / heart / bookmark (e.g. a saved item). */
.icon.is-filled { fill: currentColor; }


/* ==========================================================================
   3. ORNAMENT BASE — .ornament.ornament--{name}; sizes to its container
   ========================================================================== */
.ornament {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	color: inherit;
}

.ornament[aria-hidden="true"] { pointer-events: none; }

/* Opt-in: constant on-screen line weight regardless of how large the illustration is scaled. */
.ornament--crisp * { vector-effect: non-scaling-stroke; }

/* Opt-in: one colour only — every gold / saffron / ivory accent follows `color` (watermarks, tinted overlays). */
.ornament--mono {
	--o-gold: currentColor;
	--o-gold-soft: currentColor;
	--o-saffron: currentColor;
	--o-saffron-bright: currentColor;
	--o-deep: currentColor;
	--o-ivory: currentColor;
	--o-core: currentColor;
	--o-ink: currentColor;
}

/* Wide strips: they fill their container's width and keep a fixed, readable height. */
.ornament--rangoli-border { height: var(--rangoli-h, 28px); }
.ornament--temple-skyline { height: var(--skyline-h, auto); }

/* Frame corners: place in a positioned parent, flip for the other three corners. */
.ornament--corner { width: var(--corner-size, 96px); height: auto; }
.is-flip-x { transform: scaleX(-1); }
.is-flip-y { transform: scaleY(-1); }
.is-flip-xy { transform: scale(-1, -1); }


/* ==========================================================================
   4. COLOUR CLASSES (used on shapes inside the SVG markup)
   ========================================================================== */
/* stroke colour */
.o-stroke { stroke: currentColor; }
.o-gold { stroke: var(--o-gold); }
.o-gold-soft { stroke: var(--o-gold-soft); }
.o-saffron { stroke: var(--o-saffron); }
.o-saffron-bright { stroke: var(--o-saffron-bright); }
.o-ivory { stroke: var(--o-ivory); }
.o-ink { stroke: var(--o-ink); }
.o-core { stroke: var(--o-core, #FFF1D6); }

/* solid fills (stroke removed) */
.o-fill { fill: currentColor; stroke: none; }
.o-fill-gold { fill: var(--o-gold); stroke: none; }
.o-fill-gold-soft { fill: var(--o-gold-soft); stroke: none; }
.o-fill-saffron { fill: var(--o-saffron); stroke: none; }
.o-fill-saffron-bright { fill: var(--o-saffron-bright); stroke: none; }
.o-fill-ivory { fill: var(--o-ivory); stroke: none; }
.o-fill-core { fill: var(--o-core, #FFF1D6); stroke: none; }
.o-fill-ink { fill: var(--o-ink); stroke: none; }

/* translucent washes (stroke stays) — give line-art a little body */
.o-wash { fill: currentColor; fill-opacity: 0.07; }
.o-wash-2 { fill: currentColor; fill-opacity: 0.14; }
.o-wash-gold { fill: var(--o-gold); fill-opacity: 0.12; }
.o-wash-gold-2 { fill: var(--o-gold); fill-opacity: 0.24; }
.o-wash-saffron { fill: var(--o-saffron); fill-opacity: 0.2; }
.o-wash-saffron-2 { fill: var(--o-saffron); fill-opacity: 0.38; }

/* opacity layering */
.o-soft { opacity: 0.6; }
.o-faint { opacity: 0.32; }
.o-ghost { opacity: 0.16; }
.o-none { stroke: none; }
.o-nofill { fill: none; }

/* gradient stops for glows (radialGradient / linearGradient inside the SVG) */
.o-s-saffron { stop-color: var(--o-saffron); }
.o-s-bright { stop-color: var(--o-saffron-bright); }
.o-s-deep { stop-color: var(--o-deep); }
.o-s-gold { stop-color: var(--o-gold); }
.o-s-gold-soft { stop-color: var(--o-gold-soft); }
.o-s-ivory { stop-color: var(--o-ivory); }


/* ==========================================================================
   5. IDLE MOTION — slow, ceremonial, CSS-only. Off for prefers-reduced-motion and for .ornament--static.
   ========================================================================== */
@keyframes hs-flicker {
	0%, 100% { transform: scale(1, 1) skewX(0deg); }
	16% { transform: scale(0.965, 1.05) skewX(-2.2deg); }
	34% { transform: scale(1.03, 0.97) skewX(1.6deg); }
	52% { transform: scale(0.98, 1.035) skewX(-1deg); }
	71% { transform: scale(1.02, 0.985) skewX(2deg); }
	86% { transform: scale(0.99, 1.02) skewX(-1.2deg); }
}

@keyframes hs-glow {
	0%, 100% { opacity: 0.78; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.07); }
}

@keyframes hs-spin {
	to { transform: rotate(360deg); }
}

@keyframes hs-spin-rev {
	to { transform: rotate(-360deg); }
}

@keyframes hs-sway {
	0%, 100% { transform: skewY(0deg) scaleX(1); }
	50% { transform: skewY(-2.4deg) scaleX(0.985); }
}

@keyframes hs-swing {
	0%, 100% { transform: rotate(-1.4deg); }
	50% { transform: rotate(1.4deg); }
}

@keyframes hs-pulse {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.4); }
}

@keyframes hs-flow {
	to { stroke-dashoffset: -48; }
}

@keyframes hs-breathe {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.ornament:not(.ornament--static) .o-flame,
	.ornament:not(.ornament--static) .o-flame-in,
	.ornament:not(.ornament--static) .o-glow,
	.ornament:not(.ornament--static) .o-spin,
	.ornament:not(.ornament--static) .o-spin-rev,
	.ornament:not(.ornament--static) .o-flag,
	.ornament:not(.ornament--static) .o-pulse {
		transform-box: fill-box;
		transform-origin: 50% 50%;
	}

	.ornament:not(.ornament--static) .o-flame {
		transform-origin: 50% 100%;
		animation: hs-flicker 3.7s ease-in-out infinite;
	}

	.ornament:not(.ornament--static) .o-flame-in {
		transform-origin: 50% 100%;
		animation: hs-flicker 2.9s ease-in-out -1.1s infinite;
	}

	.ornament:not(.ornament--static) .o-glow {
		animation: hs-glow 5.2s ease-in-out infinite;
	}

	.ornament:not(.ornament--static) .o-spin {
		animation: hs-spin 180s linear infinite;
	}

	.ornament:not(.ornament--static) .o-spin-rev {
		animation: hs-spin-rev 240s linear infinite;
	}

	.ornament:not(.ornament--static) .o-flag {
		transform-origin: 0 50%;
		animation: hs-sway 7s ease-in-out infinite;
	}

	.ornament:not(.ornament--static) .o-swing {
		transform-box: fill-box;
		transform-origin: 50% 0;
		animation: hs-swing 8s ease-in-out infinite;
	}

	.ornament:not(.ornament--static) .o-pulse {
		animation: hs-pulse 4.6s ease-in-out infinite;
	}

	.ornament:not(.ornament--static) .o-pulse.d1 { animation-delay: -0.6s; animation-duration: 4.1s; }
	.ornament:not(.ornament--static) .o-pulse.d2 { animation-delay: -1.7s; animation-duration: 5.3s; }
	.ornament:not(.ornament--static) .o-pulse.d3 { animation-delay: -2.4s; animation-duration: 4.7s; }
	.ornament:not(.ornament--static) .o-pulse.d4 { animation-delay: -3.3s; animation-duration: 5.9s; }
	.ornament:not(.ornament--static) .o-pulse.d5 { animation-delay: -0.2s; animation-duration: 6.4s; }

	.ornament:not(.ornament--static) .o-flow {
		stroke-dasharray: 2 10;
		animation: hs-flow 9s linear infinite;
	}

	.ornament:not(.ornament--static) .o-breathe {
		animation: hs-breathe 6s ease-in-out infinite;
	}
}

/* Hook for JS: add .is-paused while an ornament is off-screen to stop its idle loops. */
.ornament.is-paused * {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.ornament *,
	.icon * {
		animation: none !important;
	}
}

.hs-reduced .ornament *,
.hs-reduced .icon * {
	animation: none !important;
}