/**
 * Orsozox Liquid Glass — core layer.
 *
 * Applies the glass skin + motion system to the EXISTING Jannah markup.
 * Nothing here requires the custom front page, which is what makes the
 * "builder mode" (option 2) work: the same visual language, no markup change.
 *
 * @package Orsozox_Child
 */

/* ============================================================
   1. AMBIENT BACKGROUND — the light that the glass refracts
   ============================================================ */

.orsz-aurora {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 900ms var(--orsz-ease);
}

.orsz-aurora.is-ready {
	opacity: 1;
}

.orsz-aurora i {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(70px);
	will-change: transform;
}

.orsz-aurora i:nth-child(1) {
	width: 46vw;
	height: 46vw;
	top: -12vw;
	inset-inline-start: -8vw;
	background: var(--orsz-aurora-1);
	animation: orsz-float-1 26s var(--orsz-ease) infinite;
}

.orsz-aurora i:nth-child(2) {
	width: 38vw;
	height: 38vw;
	top: 24vh;
	inset-inline-end: -10vw;
	background: var(--orsz-aurora-2);
	animation: orsz-float-2 32s var(--orsz-ease) infinite;
}

.orsz-aurora i:nth-child(3) {
	width: 34vw;
	height: 34vw;
	bottom: -10vw;
	inset-inline-start: 28vw;
	background: var(--orsz-aurora-3);
	animation: orsz-float-3 29s var(--orsz-ease) infinite;
}

@keyframes orsz-float-1 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}

@keyframes orsz-float-2 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
	50%      { transform: translate3d(-7vw, -6vh, 0) scale(1); }
}

@keyframes orsz-float-3 {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(4vw, -5vh, 0) scale(1.15); }
}

/* ============================================================
   1b. FLOATING MOTES — the warm dust that gives the glass depth
   ============================================================
   Built from CSS gradients only: one element, twelve dots, no images and
   no per-particle DOM. Two of them drift on independent loops so the
   pattern never visibly repeats.
*/

.orsz-motes {
	position: absolute;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	opacity: var(--orsz-mote-opacity);
	background-image:
		radial-gradient(2.5px 2.5px at 12% 18%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(1.8px 1.8px at 27% 62%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(3px 3px at 41% 12%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(2px 2px at 58% 74%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(2.6px 2.6px at 73% 29%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(1.6px 1.6px at 86% 56%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(2.2px 2.2px at 34% 88%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(1.9px 1.9px at 66% 8%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(2.8px 2.8px at 8% 78%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(1.7px 1.7px at 92% 86%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(2.1px 2.1px at 49% 44%, var(--orsz-mote) 50%, transparent 51%),
		radial-gradient(2.4px 2.4px at 20% 40%, var(--orsz-mote) 50%, transparent 51%);
	background-repeat: no-repeat;
	animation: orsz-motes-drift 46s linear infinite;
	will-change: transform;
}

/* Second layer: larger, slower, opposite direction. */
.orsz-motes + .orsz-motes,
.orsz-motes--b {
	opacity: calc(var(--orsz-mote-opacity) * 0.55);
	animation-duration: 72s;
	animation-direction: reverse;
	transform: scale(1.4) rotate(16deg);
}

@keyframes orsz-motes-drift {
	0%   { transform: translate3d(0, 0, 0); }
	25%  { transform: translate3d(-1.6%, -2.4%, 0); }
	50%  { transform: translate3d(1.3%, -3.6%, 0); }
	75%  { transform: translate3d(1.9%, -1.5%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* Keep the real content above the aurora. */
#tie-wrapper,
#tie-container {
	position: relative;
	z-index: 1;
}

/* ============================================================
   2. THE GLASS SURFACE
   ============================================================ */

.orsz-glass,
.container-wrapper,
.mag-box,
#tie-wrapper .widget,
.sidebar .widget,
.tie-popup,
#autocomplete-suggestions,
.entry-content .wp-block-group,
.tie-slider-nav span,
.search-in-main-nav {
	-webkit-backdrop-filter: blur(var(--orsz-glass-blur)) saturate(var(--orsz-glass-saturate));
	backdrop-filter: blur(var(--orsz-glass-blur)) saturate(var(--orsz-glass-saturate));
	background: var(--orsz-glass-bg);
	border: 1px solid var(--orsz-glass-border);
	box-shadow: var(--orsz-glass-shadow), var(--orsz-glass-inner);
	border-radius: var(--orsz-radius);
}

/* Specular highlight — the "wet" edge that reads as real glass. */
.orsz-glass::after,
.container-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		150deg,
		rgba(255, 255, 255, 0.50) 0%,
		rgba(255, 255, 255, 0.08) 28%,
		transparent 55%
	);
	opacity: 0.9;
}

/* The lit rim. Painted as an inset ring so it never shifts the layout. */
.orsz-glass,
.container-wrapper,
.mag-box,
#tie-wrapper .widget,
.sidebar .widget {
	box-shadow:
		var(--orsz-glass-shadow),
		var(--orsz-glass-inner),
		inset 0 0 0 1px color-mix(in srgb, var(--orsz-accent) 22%, transparent);
}

[data-orsz-theme="dark"] .orsz-glass::after,
[data-orsz-theme="dark"] .container-wrapper::after {
	background: linear-gradient(
		150deg,
		rgba(232, 199, 102, 0.16) 0%,
		rgba(232, 199, 102, 0.04) 30%,
		transparent 58%
	);
}

/* Warm gold rim on dark surfaces, matching the reference art. */
[data-orsz-theme="dark"] .orsz-glass,
[data-orsz-theme="dark"] .container-wrapper,
[data-orsz-theme="dark"] .mag-box,
[data-orsz-theme="dark"] #tie-wrapper .widget,
[data-orsz-theme="dark"] .sidebar .widget {
	box-shadow:
		var(--orsz-glass-shadow),
		var(--orsz-glass-inner),
		inset 0 0 0 1px color-mix(in srgb, var(--orsz-accent-alt) 34%, transparent),
		inset 0 1px 22px -14px color-mix(in srgb, var(--orsz-accent-alt) 45%, transparent);
}

.container-wrapper,
.mag-box {
	position: relative;
	overflow: hidden;
}

/* Images shouldn't be blurred by the overlay gradient. */
.container-wrapper img,
.mag-box img {
	position: relative;
	z-index: 1;
}

/* ---------- Header becomes a floating glass bar ---------- */

#theme-header,
#header-inner {
	-webkit-backdrop-filter: blur(calc(var(--orsz-glass-blur) + 6px)) saturate(var(--orsz-glass-saturate));
	backdrop-filter: blur(calc(var(--orsz-glass-blur) + 6px)) saturate(var(--orsz-glass-saturate));
}

#main-nav,
.main-nav-boxed .main-menu-wrapper {
	background: var(--orsz-glass-bg-strong) !important;
	border-bottom: 1px solid var(--orsz-glass-border);
	box-shadow: var(--orsz-glass-inner);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumb,
.tie-breadcrumbs {
	background: var(--orsz-glass-bg-weak);
	border: 1px solid var(--orsz-glass-border);
	border-radius: var(--orsz-radius-pill);
	padding: 8px 18px;
	box-shadow: var(--orsz-glass-inner);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ---------- Buttons ---------- */

.orsz-btn,
a.more-link,
.tie-btn,
button[type="submit"],
input[type="submit"] {
	position: relative;
	overflow: hidden;
	border-radius: var(--orsz-radius-pill) !important;
	background: linear-gradient(135deg, var(--orsz-accent), var(--orsz-accent-alt)) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 8px 24px -8px var(--orsz-accent), var(--orsz-glass-inner);
	transition: transform var(--orsz-dur-fast) var(--orsz-ease),
	            box-shadow var(--orsz-dur) var(--orsz-ease);
}

.orsz-btn:hover,
a.more-link:hover,
.tie-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 14px 34px -10px var(--orsz-accent), var(--orsz-glass-inner);
}

.orsz-btn:active,
a.more-link:active,
.tie-btn:active {
	transform: translateY(0) scale(0.985);
}

/* ============================================================
   3. MOTION SYSTEM
   ============================================================ */

/* ---------- 3a. Scroll reveal ---------- */

/*
 * REVEAL MUST NEVER BE THE ONLY THING KEEPING CONTENT VISIBLE.
 *
 * `opacity: 0` is applied ONLY when JavaScript has confirmed it can take the
 * animation back off again. The `orsz-js` class is added by an early inline
 * script (see inc/assets.php) before first paint, so:
 *
 *   - JS disabled / blocked / failing to parse  -> content is simply visible,
 *   - JS running                                -> the animation plays as designed.
 *
 * WHY THIS WAS CHANGED
 * --------------------
 * The rule used to be unconditional. With JS broken the page rendered a
 * 12,589px document whose every section was invisible, and even with JS
 * working the safety net only covered `innerHeight * 1.5` — measured 969px on
 * a 646px-tall phone, while 24 of 37 reveal elements sat below that line and
 * 22 of them stayed at opacity 0 for good. Scrolling eventually brought some
 * back, which is why a refresh or a scroll appeared to "fix" the page.
 */
html.orsz-js [data-orsz-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity var(--orsz-dur-slow) var(--orsz-ease-out),
	            transform var(--orsz-dur-slow) var(--orsz-ease-out);
	transition-delay: var(--orsz-delay, 0ms);
	will-change: opacity, transform;
}

html.orsz-js [data-orsz-reveal].is-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

html.orsz-js [data-orsz-reveal="scale"] {
	transform: scale(0.94);
}

html.orsz-js [data-orsz-reveal="scale"].is-in {
	transform: scale(1);
}

html.orsz-js [data-orsz-reveal="left"] {
	transform: translate3d(-28px, 0, 0);
}

html.orsz-js [data-orsz-reveal="right"] {
	transform: translate3d(28px, 0, 0);
}

html.orsz-js [data-orsz-reveal="left"].is-in,
html.orsz-js [data-orsz-reveal="right"].is-in {
	transform: translate3d(0, 0, 0);
}

/* ---------- 3b. Card hover lift ---------- */

.orsz-lift {
	transition: transform var(--orsz-dur) var(--orsz-ease),
	            box-shadow var(--orsz-dur) var(--orsz-ease);
}

.orsz-lift:hover {
	transform: translateY(-6px);
	box-shadow: var(--orsz-glass-shadow-lg), var(--orsz-glass-inner);
}

/* ---------- 3c. Page transition veil ---------- */

.orsz-veil {
	position: fixed;
	inset: 0;
	z-index: 99999;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(135deg, var(--orsz-accent), var(--orsz-accent-alt));
	transition: opacity 260ms var(--orsz-ease);
}

.orsz-veil.is-on {
	opacity: 0.16;
}

/*
 * Content fades in on arrival.
 *
 * This animation must NEVER target `body` or `#tie-wrapper` with `both`
 * fill-mode: on heavy pages the animation can be interrupted (or the class
 * removed late), and `both` would pin the element at the `from` keyframe —
 * i.e. opacity 0 — leaving the visitor with a blank page. It is applied to
 * an inner region instead, and the base state is always fully visible.
 */
.orsz-enter-target {
	animation: orsz-enter 520ms var(--orsz-ease-out) 1 normal both;
}

html:not(.orsz-entering) .orsz-enter-target {
	animation: none;
	opacity: 1;
	transform: none;
}

@keyframes orsz-enter {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Hard safety net: no animation may ever hide the page itself. */
body,
#tie-wrapper,
#tie-container,
#orsz-home,
.orsz-shell {
	opacity: 1;
}

/* ---------- 3d. Reading progress ---------- */

#orsz-progress {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 99998;
	background: linear-gradient(90deg, var(--orsz-accent), var(--orsz-accent-alt));
	box-shadow: 0 0 12px var(--orsz-accent);
	pointer-events: none;
}

[dir="rtl"] #orsz-progress {
	transform-origin: 100% 50%;
}

/* ---------- 3e. Theme toggle ---------- */

#orsz-theme-toggle {
	position: fixed;
	inset-inline-end: 22px;
	bottom: 92px;
	z-index: 9999;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--orsz-radius-pill);
	border: 1px solid var(--orsz-glass-border);
	background: var(--orsz-glass-bg-strong);
	-webkit-backdrop-filter: blur(var(--orsz-glass-blur)) saturate(var(--orsz-glass-saturate));
	backdrop-filter: blur(var(--orsz-glass-blur)) saturate(var(--orsz-glass-saturate));
	box-shadow: var(--orsz-glass-shadow), var(--orsz-glass-inner);
	color: var(--orsz-ink);
	cursor: pointer;
	transition: transform var(--orsz-dur) var(--orsz-ease-spring),
	            box-shadow var(--orsz-dur) var(--orsz-ease);
}

#orsz-theme-toggle:hover {
	transform: scale(1.10) rotate(12deg);
	box-shadow: var(--orsz-glass-shadow-lg), var(--orsz-glass-inner);
}

#orsz-theme-toggle:active {
	transform: scale(0.94);
}

#orsz-theme-toggle svg {
	width: 22px;
	height: 22px;
	transition: opacity var(--orsz-dur) var(--orsz-ease),
	            transform var(--orsz-dur) var(--orsz-ease-spring);
}

#orsz-theme-toggle .orsz-ico-sun {
	display: none;
}

[data-orsz-theme="dark"] #orsz-theme-toggle .orsz-ico-sun {
	display: block;
}

[data-orsz-theme="dark"] #orsz-theme-toggle .orsz-ico-moon {
	display: none;
}

/* ============================================================
   4. DARK MODE SURFACES (Jannah markup)
   ============================================================
   The dark theme is the showcase: a deep midnight field lit by warm gold,
   which is where the glass reads most like real glass.
*/

/*
 * The dark background.
 *
 * Jannah prints `#tie-body{background-color:#f7f8f8}` as inline CSS in
 * <head>, and inline wins over any stylesheet rule that is not itself
 * inline. Rather than fight it with !important on the same property, the
 * deep colour is painted with background-image layers, which Jannah never
 * sets. The result is a fully opaque midnight field regardless of what the
 * parent theme declares.
 */
[data-orsz-theme="dark"] body,
[data-orsz-theme="dark"] #tie-body,
[data-orsz-theme="dark"] #tie-wrapper {
	background-color: var(--orsz-page-bg) !important;
	background-image:
		/* opaque base, then the warm and cool lights on top */
		linear-gradient(180deg, #0b1220 0%, #0d1526 45%, #0a1019 100%),
		radial-gradient(90% 60% at 12% 0%, rgba(201, 153, 47, 0.16) 0%, transparent 60%),
		radial-gradient(80% 55% at 88% 6%, rgba(232, 199, 102, 0.11) 0%, transparent 58%),
		radial-gradient(120% 70% at 50% 100%, rgba(96, 124, 186, 0.16) 0%, transparent 62%);
	background-attachment: scroll, fixed, fixed, fixed;
	background-repeat: no-repeat;
	color: var(--orsz-ink);
}

/* Jannah also tints several wrappers; neutralise them on dark. */
[data-orsz-theme="dark"] .tie-container,
[data-orsz-theme="dark"] .main-content,
[data-orsz-theme="dark"] .wide-next-prev {
	background-color: transparent !important;
}

/* ---- Legibility fixes on dark ----
 * These are the elements that Jannah gives a muted grey, which becomes
 * unreadable once the page is dark. Each is re-coloured explicitly.
 */
[data-orsz-theme="dark"] .post-shortlink,
[data-orsz-theme="dark"] .post-shortlink input,
[data-orsz-theme="dark"] .post-shortlink code {
	color: var(--orsz-ink-soft) !important;
}

[data-orsz-theme="dark"] .post-shortlink input,
[data-orsz-theme="dark"] .post-shortlink code {
	background: var(--orsz-glass-bg-weak) !important;
	border: 1px solid var(--orsz-glass-border) !important;
	color: var(--orsz-ink) !important;
}

[data-orsz-theme="dark"] .post-shortlink .shortlink-btn,
[data-orsz-theme="dark"] .post-shortlink button,
[data-orsz-theme="dark"] .post-shortlink a {
	background: linear-gradient(135deg, var(--orsz-accent), var(--orsz-accent-alt)) !important;
	color: #1a1408 !important;
	font-weight: 700;
}

/* Breadcrumbs, tags, post-meta and captions: raise contrast. */
[data-orsz-theme="dark"] .breadcrumb,
[data-orsz-theme="dark"] .tie-breadcrumbs,
[data-orsz-theme="dark"] .breadcrumb a,
[data-orsz-theme="dark"] .post-tags,
[data-orsz-theme="dark"] .post-tags a,
[data-orsz-theme="dark"] .entry-content figcaption,
[data-orsz-theme="dark"] .wp-caption-text {
	color: var(--orsz-ink-soft) !important;
}

[data-orsz-theme="dark"] .post-tags a {
	background: var(--orsz-glass-bg-weak) !important;
	border: 1px solid var(--orsz-glass-border) !important;
	border-radius: var(--orsz-radius-pill);
	padding: 5px 14px;
}

/* Any hard-coded brown/grey Jannah uses on meta text. */
[data-orsz-theme="dark"] .post-meta,
[data-orsz-theme="dark"] .post-meta a,
[data-orsz-theme="dark"] .date,
[data-orsz-theme="dark"] .meta-item {
	color: var(--orsz-ink-mute) !important;
}

[data-orsz-theme="dark"] .post-meta a:hover {
	color: var(--orsz-accent-alt) !important;
}

[data-orsz-theme="dark"] .entry-content,
[data-orsz-theme="dark"] .post-title a,
[data-orsz-theme="dark"] h1, [data-orsz-theme="dark"] h2,
[data-orsz-theme="dark"] h3, [data-orsz-theme="dark"] h4,
[data-orsz-theme="dark"] h5, [data-orsz-theme="dark"] h6 {
	color: var(--orsz-ink);
}

[data-orsz-theme="dark"] .post-meta,
[data-orsz-theme="dark"] .entry-content p,
[data-orsz-theme="dark"] .entry-content li {
	color: var(--orsz-ink-soft);
}

[data-orsz-theme="dark"] #footer,
[data-orsz-theme="dark"] #site-info {
	background-color: #070c16 !important;
}

/* Links and interactive accents turn gold on dark. */
[data-orsz-theme="dark"] a,
[data-orsz-theme="dark"] .post-title a:hover {
	color: var(--orsz-accent-alt);
}

[data-orsz-theme="dark"] #main-nav,
[data-orsz-theme="dark"] .main-nav-boxed .main-menu-wrapper {
	border-bottom-color: color-mix(in srgb, var(--orsz-accent-alt) 26%, transparent);
}

/* The top bar keeps its brand colour but gains a gold hairline. */
[data-orsz-theme="dark"] #top-nav {
	box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--orsz-accent-alt) 24%, transparent);
}

/* ============================================================
   5. SMOOTH SCROLLING + FOCUS RINGS
   ============================================================ */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-orsz-reveal] { opacity: 1; transform: none; }
	.orsz-aurora i { animation: none; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--orsz-accent);
	outline-offset: 2px;
	border-radius: var(--orsz-radius-xs);
}

/* ============================================================
   6. MOBILE REFINEMENTS
   ============================================================ */

/* ---------- Builder mode shell (option 2) ---------- */

.orsz-shell {
	position: relative;
	display: block;
	width: 100%;
}

/* Give the builder's own blocks the glass treatment without moving them. */
.orsz-mode-builder-shell .mag-box,
.orsz-mode-builder-shell .container-wrapper {
	border-radius: var(--orsz-radius);
}

/* The header shrinks its padding once the visitor scrolls. */
#theme-header.orsz-scrolled #header-inner {
	padding-top: 6px;
	padding-bottom: 6px;
	transition: padding var(--orsz-dur) var(--orsz-ease);
}

@media (max-width: 782px) {
	#orsz-theme-toggle {
		inset-inline-end: 14px;
		bottom: 78px;
		width: 44px;
		height: 44px;
	}

	.orsz-aurora i {
		filter: blur(50px);
	}
}