/* ==========================================================================
   Nyx Lofi — extra effects
   Things theme.json can't express: film grain, lantern glow, pixel-corner
   buttons, a couple of opt-in block style variants. Kept deliberately light
   — most of the look lives in theme.json so it stays editable in the
   Site Editor without touching this file.
   ========================================================================== */

/* -- Film grain, over everything, very quiet -------------------------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -- Lantern glow band, used on the front-page hero and 404 ----------- */
.nyx-hero-glow {
	position: relative;
	overflow: hidden;
}
.nyx-hero-glow::before {
	content: "";
	position: absolute;
	inset: -10% -10% auto -10%;
	height: 70%;
	background: radial-gradient(circle at 50% 20%, rgba(244, 200, 105, 0.28) 0%, rgba(244, 200, 105, 0) 62%);
	animation: nyx-glow-breathe 7s ease-in-out infinite;
	pointer-events: none;
}
.nyx-hero-glow > * {
	position: relative;
	z-index: 1;
}
@keyframes nyx-glow-breathe {
	0%, 100% { opacity: 0.75; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(1%); }
}
@media (prefers-reduced-motion: reduce) {
	.nyx-hero-glow::before { animation: none; }
}

/* -- The gold rule under a page title ---------------------------------- */
.nyx-rule.wp-block-separator {
	max-width: 90px;
	border: none;
	height: 3px;
	opacity: 1;
	box-shadow: 0 0 10px rgba(224, 168, 76, 0.6);
}

/* -- Pixel-corner buttons, layered on top of the theme.json button ----- */
.wp-block-button__link {
	position: relative;
	border: 2px solid var(--wp--preset--color--ink);
	box-shadow: 3px 3px 0 0 var(--wp--preset--color--lantern-bright);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wp-block-button__link:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 0 var(--wp--preset--color--lantern-bright);
}
.wp-block-button__link:active {
	transform: translate(1px, 1px);
	box-shadow: 1px 1px 0 0 var(--wp--preset--color--lantern-bright);
}

/* -- Opt-in block style variants (pick these from the block's Styles tab) */

/* Image block > Styles > "Pixel Crisp" — keeps pixel-art screenshots
   sharp instead of letting the browser smooth/blur them when scaled. */
.is-style-pixel-crisp img {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
}

/* Group/Cover block > Styles > "Lantern Panel" — a retro dialogue-box
   treatment for pulling out a quote, tip, or callout. */
.is-style-lantern-panel {
	background-color: var(--wp--preset--color--charcoal-raised);
	border: 2px solid var(--wp--preset--color--lantern);
	box-shadow: 5px 5px 0 0 var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--50);
}

/* -- Selection + scrollbar, small polish -------------------------------- */
::selection {
	background: var(--wp--preset--color--lantern);
	color: var(--wp--preset--color--ink);
}
html {
	scrollbar-color: var(--wp--preset--color--lantern) var(--wp--preset--color--ink);
	scrollbar-width: thin;
}
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: var(--wp--preset--color--ink);
}
::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--charcoal-raised);
	border: 2px solid var(--wp--preset--color--ink);
}

/* -- Sticky header gets a soft shadow once content scrolls beneath it -- */
.wp-block-group[style*="position:sticky"] {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* -- Responsive embeds (the hero video) keep their frame + glow -------- */
.wp-block-embed__wrapper {
	border: 1px solid var(--wp--preset--color--hairline);
}

/* -- Readability backstop for post lists / archives ---------------------
   theme.json sets colors for the block versions of these (post-excerpt,
   post-title, etc.), but some patterns/plugins render posts with the
   older "classic" class names (.entry-content, .entry-summary) and ship
   their own black text color at higher specificity than our theme.json
   output. This forces every text node inside a post list or single post
   back to a readable color no matter what generated the markup, while
   still letting any block that explicitly picked its own color (via the
   editor's color picker, which adds a has-*-color class or inline
   style="color:...") win, since those are more specific than this rule. */
.wp-block-post-template,
.wp-block-query,
.entry-content,
.entry-summary,
.entry-title,
article.post,
.hentry {
	color: var(--wp--preset--color--parchment) !important;
}
.wp-block-post-template a:not(.wp-block-button__link),
.wp-block-query a:not(.wp-block-button__link),
.entry-content a:not(.wp-block-button__link),
.entry-summary a:not(.wp-block-button__link),
.entry-title a {
	color: var(--wp--preset--color--lantern) !important;
}
.wp-block-post-template a:not(.wp-block-button__link):hover,
.wp-block-query a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):hover,
.entry-summary a:not(.wp-block-button__link):hover,
.entry-title a:hover {
	color: var(--wp--preset--color--lantern-bright) !important;
}