/*
Theme Name: OTA Nightfall
Theme URI: https://otamanagement.com/
Template: powder
Author: SPORK (Spork Designs) × Claude Fable 5
Author URI: https://sporkdesigns.com/
Description: A Powder child theme for OTA Management — deep-teal "Nightfall" dark aesthetic with electric cyan instrumentation, crimson undertones, and a token-driven motion system. Revenue, refined.
Version: 1.1.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: ota-nightfall
*/

/* Tokens
---------------------------------------- */

:root {
	--ota-glow-cyan: 0 0 24px rgba(0, 242, 254, 0.35);
	--ota-glow-cyan-soft: 0 0 60px rgba(0, 242, 254, 0.12);
	--ota-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ota-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ota-card-border: 1px solid var(--wp--preset--color--panel-edge);
	--ota-card-radius: 6px;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Keyboard focus must survive the dark theme */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent) !important;
	outline-offset: 2px;
}

/* Serif flourish — <em> inside headings becomes an editorial italic */

h1 em,
h2 em,
h3 em,
.ota-serif {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--accent);
}

/* Eyebrow refinement — mono instrumentation voice */

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--plex-mono) !important;
	font-size: var(--wp--preset--font-size--xx-small) !important;
	letter-spacing: 0.18em !important;
	color: var(--wp--preset--color--accent);
}

/* Data voice — metrics, labels, chips */

.wp-block-quote cite,
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--white-50);
}

.ota-mono {
	font-family: var(--wp--preset--font-family--plex-mono);
	letter-spacing: 0.02em;
}

.ota-mono a {
	overflow-wrap: anywhere;
}

/* Cards
---------------------------------------- */

.ota-card {
	background: linear-gradient(165deg, rgba(18, 53, 64, 0.5) 0%, rgba(10, 40, 49, 0.35) 45%, rgba(2, 13, 18, 0.55) 100%);
	border: var(--ota-card-border);
	border-radius: var(--ota-card-radius);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: relative;
	overflow: hidden;
	transition: border-color 0.35s var(--ota-ease-out), transform 0.35s var(--ota-ease-out), box-shadow 0.35s var(--ota-ease-out);
}

.ota-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.4), transparent);
	opacity: 0;
	transition: opacity 0.35s var(--ota-ease-out);
	pointer-events: none;
}

.ota-card:hover {
	border-color: rgba(0, 242, 254, 0.35);
	box-shadow: var(--ota-glow-cyan-soft), 0 24px 48px -24px rgba(2, 13, 18, 0.9);
}

.ota-card:hover::before {
	opacity: 1;
}

/* Crimson-anchored card — structural voice */

.ota-card-crimson {
	border-color: var(--wp--preset--color--crimson-40);
}

.ota-card-crimson:hover {
	border-color: var(--wp--preset--color--crimson);
	box-shadow: 0 24px 60px -20px rgba(124, 29, 44, 0.45);
}

/* Rotating conic border ring — the "live" card */

@property --ota-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.ota-card-ring::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--ota-card-radius);
	padding: 1px;
	background: conic-gradient(from var(--ota-angle), rgba(0, 242, 254, 0.8), transparent 25%, rgba(124, 29, 44, 0.7) 50%, transparent 75%, rgba(0, 242, 254, 0.8));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: ota-ring-spin 9s linear infinite;
	pointer-events: none;
}

@keyframes ota-ring-spin {
	to { --ota-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
	.ota-card-ring::after {
		animation: none;
	}
}

/* 3D tilt — JS sets --tilt-x / --tilt-y */

.ota-tilt {
	transform-style: preserve-3d;
	transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
	will-change: transform;
}

.ota-tilt > * {
	transform: translateZ(24px);
}

@media (prefers-reduced-motion: reduce), (hover: none) {
	.ota-tilt {
		transform: none !important;
	}
	.ota-tilt > * {
		transform: none !important;
	}
}

/* Stats dashboard strip — overlaps the hero bottom */

.ota-stats-band {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--wp--preset--spacing--80) * -1) !important;
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
	border: 1px solid var(--wp--preset--color--panel-edge);
	border-radius: var(--ota-card-radius);
	background: linear-gradient(165deg, rgba(10, 40, 49, 0.9), rgba(2, 13, 18, 0.95)) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 30px 70px -30px rgba(2, 13, 18, 0.9);
}

.ota-stats-band .wp-block-column {
	position: relative;
}

.ota-stats-band .wp-block-column + .wp-block-column::before {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--40) * -0.5);
	top: 10%;
	height: 80%;
	width: 1px;
	background: var(--wp--preset--color--white-10);
}

@media (max-width: 781px) {
	.ota-stats-band .wp-block-column + .wp-block-column::before {
		display: none;
	}
}

/* Ruled services list — quieter tier under the lever cards */

.ota-svc-row {
	border-top: 1px solid var(--wp--preset--color--panel-edge);
	padding-top: var(--wp--preset--spacing--30) !important;
	padding-bottom: var(--wp--preset--spacing--30) !important;
	transition: border-color 0.3s var(--ota-ease-out), background 0.3s var(--ota-ease-out);
}

.ota-svc-row:hover {
	border-top-color: var(--wp--preset--color--accent-50);
	background: linear-gradient(180deg, var(--wp--preset--color--accent-10), transparent 60%);
}

/* Big lever ordinals */

.ota-lever-num {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-large);
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--preset--color--crimson);
	letter-spacing: 0.04em;
	line-height: 1;
}

/* Category dots for marquee pills */

.ota-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 9px;
	vertical-align: 1px;
}

.ota-dot--ota { background: var(--wp--preset--color--accent); box-shadow: 0 0 6px var(--wp--preset--color--accent-50); }
.ota-dot--pms { background: #b23a4d; box-shadow: 0 0 6px rgba(178, 58, 77, 0.5); }
.ota-dot--cm { background: var(--wp--preset--color--white); }
.ota-dot--rms { background: var(--wp--preset--color--mist); }

/* Chips & pills
---------------------------------------- */

.ota-pill {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--white-80);
	background: var(--wp--preset--color--white-10);
	border: 1px solid var(--wp--preset--color--panel-edge);
	border-radius: 100px;
	padding: 8px 18px !important;
	white-space: nowrap;
	transition: border-color 0.25s var(--ota-ease-out), color 0.25s var(--ota-ease-out), box-shadow 0.25s var(--ota-ease-out);
}

.ota-pill:hover,
.ota-pill:focus-visible {
	border-color: var(--wp--preset--color--accent-50);
	color: var(--wp--preset--color--accent);
	box-shadow: var(--ota-glow-cyan-soft);
}

/* Pill as a group: logo + name + hidden detail copy */

.wp-block-group.ota-pill {
	align-items: center;
	cursor: pointer;
}

.ota-pill .ota-pill-name {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: 0.06em;
	white-space: nowrap;
	margin: 0;
}

.ota-pill .ota-pill-logo,
.ota-pill .ota-pill-logo img {
	border-radius: 4px;
	display: block;
}

/* Light tile behind favicons so every mark reads on Nightfall */
.ota-pill .ota-pill-logo img,
.ota-popover-head img {
	background: rgba(234, 246, 246, 0.92);
	padding: 2px;
}

/* Stat labels never break mid-word */
.ota-stats-band .ota-mono {
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Detail copy hidden on the front end, dimmed but editable in the editor */

.ota-pill .ota-pill-desc {
	display: none;
}

.editor-styles-wrapper .ota-pill .ota-pill-desc {
	display: block !important;
	font-size: 11px;
	max-width: 220px;
	white-space: normal;
	opacity: 0.55;
}

/* Genie popover — one shared element, built by behaviors.js */

.ota-popover {
	position: fixed;
	z-index: 9999;
	width: min(320px, calc(100vw - 32px));
	background: linear-gradient(165deg, rgba(18, 53, 64, 0.96) 0%, rgba(2, 13, 18, 0.98) 100%);
	border: 1px solid var(--wp--preset--color--accent-50);
	border-radius: 8px;
	box-shadow: var(--ota-glow-cyan-soft), 0 24px 60px -20px rgba(2, 13, 18, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: 18px 20px;
	pointer-events: none;
	opacity: 0;
	transform-origin: 50% calc(100% + 12px);
	transform: scale(0.4) translateY(10px);
	filter: blur(8px);
	transition: opacity 0.28s var(--ota-ease-out), transform 0.34s var(--ota-ease-spring), filter 0.28s var(--ota-ease-out);
}

.ota-popover.is-open {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

.ota-popover.is-below {
	transform-origin: 50% -12px;
}

.ota-popover::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 10px;
	height: 10px;
	transform: translateX(-50%) rotate(45deg);
	background: rgba(2, 13, 18, 0.98);
	border-right: 1px solid var(--wp--preset--color--accent-50);
	border-bottom: 1px solid var(--wp--preset--color--accent-50);
}

.ota-popover.is-below::after {
	bottom: auto;
	top: -6px;
	border: none;
	border-left: 1px solid var(--wp--preset--color--accent-50);
	border-top: 1px solid var(--wp--preset--color--accent-50);
	background: rgba(18, 53, 64, 0.96);
}

.ota-popover-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.ota-popover-head img {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	object-fit: contain;
}

.ota-popover-name {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--white);
	margin: 0;
	line-height: 1.2;
}

.ota-popover-cat {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 2px 0 0;
}

.ota-popover-desc {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--white-80);
	line-height: var(--wp--custom--line-height--medium);
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ota-popover {
		transition: opacity 0.2s ease;
		transform: none;
		filter: none;
	}
}

.ota-chip-current,
.ota-chip-past {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 100px;
	padding: 4px 12px !important;
	width: fit-content;
}

.ota-chip-current {
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-10);
	border: 1px solid var(--wp--preset--color--accent-50);
}

.ota-chip-past {
	color: var(--wp--preset--color--white-60);
	background: transparent;
	border: 1px solid var(--wp--preset--color--white-20);
}

/* Marquee (partner ticker) — JS clones the track for a seamless loop
---------------------------------------- */

.ota-marquee {
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ota-marquee .ota-marquee-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	animation: ota-marquee-scroll var(--ota-marquee-duration, 40s) linear infinite;
}

.ota-marquee:hover .ota-marquee-track {
	animation-play-state: paused;
}

@keyframes ota-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ota-marquee .ota-marquee-track {
		animation: none;
		flex-wrap: wrap !important;
		width: auto;
	}
	.ota-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Hero network canvas — JS injects <canvas> into .ota-network
---------------------------------------- */

.ota-network {
	position: relative;
}

/* Canvas sits above the cover overlay (z-index 1) but below the
   inner container, which shares z-index 1 and comes later in the DOM. */
.ota-network > canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* Section furniture
---------------------------------------- */

/* Crimson horizon line — the section break voice */

.ota-glow-line {
	border: none !important;
	height: 1px !important;
	width: 100% !important;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--crimson) 35%, #b23a4d 50%, var(--wp--preset--color--crimson) 65%, transparent) !important;
	opacity: 0.9;
}

/* Faint blueprint grid backdrop */

.ota-grid-bg {
	background-image:
		linear-gradient(rgba(0, 242, 254, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 242, 254, 0.03) 1px, transparent 1px);
	background-size: 56px 56px;
}

/* Numbered section index — mono ordinal before section headings */

.ota-index {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--crimson);
}

.ota-index::after {
	content: " /";
	color: var(--wp--preset--color--white-20);
}

/* Counters (count-up on scroll via JS) */

.ota-counter {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-variant-numeric: tabular-nums;
}

/* Portfolio map
---------------------------------------- */

.ota-map svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Land dots need ≥3:1 non-text contrast on Nightfall */
.ota-map .ota-map-dots circle {
	fill: #2e6b7c;
	r: 1.9px;
}

@media (max-width: 781px) {
	.ota-map .ota-map-dots circle {
		r: 2.4px;
	}
}

.ota-map .ota-pin {
	fill: var(--wp--preset--color--accent);
	r: 4.5px;
	filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.9));
}

.ota-map .ota-pin-ring {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1;
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
	animation: ota-pin-pulse 3s var(--ota-ease-out) infinite;
}

.ota-map .ota-pin-label {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	fill: var(--wp--preset--color--white-80);
	paint-order: stroke;
	stroke: var(--wp--preset--color--black);
	stroke-width: 4px;
	stroke-linejoin: round;
}

@media (max-width: 781px) {
	.ota-map .ota-pin-label {
		display: none;
	}
	.ota-map .ota-pin {
		r: 6px;
	}
}

@keyframes ota-pin-pulse {
	0% { opacity: 0.8; transform: scale(0.4); }
	70% { opacity: 0; transform: scale(2.6); }
	100% { opacity: 0; transform: scale(2.6); }
}

@media (prefers-reduced-motion: reduce) {
	.ota-map .ota-pin-ring {
		animation: none;
		opacity: 0.35;
		transform: scale(1.6);
	}
}

/* Header
---------------------------------------- */

.ota-header {
	background: rgba(2, 13, 18, 0.72) !important;
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--wp--preset--color--white-10);
}

/* Buttons — cyan glow on hover */

.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: var(--ota-glow-cyan);
}

/* Motion extensions (superset of Powder's fadeIn/fadeInUp)
---------------------------------------- */

.motion-fadeInLeft,
.motion-fadeInRight,
.motion-scaleIn,
.motion-blurIn {
	animation-name: ota-motion;
	animation-duration: var(--powder-motion-slow);
	animation-delay: var(--powder-motion-delay, 0s);
	animation-timing-function: var(--ota-ease-out);
	animation-fill-mode: both;
	will-change: opacity, transform;
}

.motion-fadeInLeft {
	--ota-from: translateX(calc(var(--powder-motion-distance, 30px) * -1));
}

.motion-fadeInRight {
	--ota-from: translateX(var(--powder-motion-distance, 30px));
}

.motion-scaleIn {
	--ota-from: scale(0.92);
	animation-timing-function: var(--ota-ease-spring);
}

.motion-blurIn {
	--ota-from: translateY(12px);
	animation-name: ota-motion-blur;
	animation-duration: 0.8s;
}

@keyframes ota-motion {
	from { opacity: 0; transform: var(--ota-from, none); }
	to { opacity: 1; transform: none; }
}

@keyframes ota-motion-blur {
	from { opacity: 0; transform: var(--ota-from, none); filter: blur(10px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
	.motion-fadeInLeft,
	.motion-fadeInRight,
	.motion-scaleIn,
	.motion-blurIn {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

/* Hero headline entrance — class-driven, runs once on load */

.ota-hero-title {
	animation: ota-hero-rise 1s var(--ota-ease-out) both;
}

.ota-hero-sub {
	animation: ota-hero-rise 1s 0.15s var(--ota-ease-out) both;
}

.ota-hero-actions {
	animation: ota-hero-rise 1s 0.3s var(--ota-ease-out) both;
}

@keyframes ota-hero-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ota-hero-title,
	.ota-hero-sub,
	.ota-hero-actions {
		animation: none;
	}
}

/* Lever diagrams — small animated SVG instruments
---------------------------------------- */

.ota-lever-svg {
	width: 72px;
	height: 72px;
	display: block;
}

.ota-lever-svg .ota-anim-dash {
	stroke-dasharray: 6 8;
	animation: ota-dash-flow 2.4s linear infinite;
}

.ota-lever-svg .ota-anim-sweep {
	stroke-dasharray: 120 200;
	stroke-dashoffset: 120;
	animation: ota-sweep 3.2s var(--ota-ease-out) infinite alternate;
}

.ota-lever-svg .ota-anim-bar-a {
	animation: ota-bar-a 2.8s var(--ota-ease-out) infinite alternate;
}

.ota-lever-svg .ota-anim-bar-b {
	animation: ota-bar-b 2.8s var(--ota-ease-out) infinite alternate;
}

@keyframes ota-dash-flow {
	to { stroke-dashoffset: -28; }
}

@keyframes ota-sweep {
	to { stroke-dashoffset: 40; }
}

@keyframes ota-bar-a {
	from { transform: scaleX(0.55); }
	to { transform: scaleX(1); }
}

@keyframes ota-bar-b {
	from { transform: scaleX(1); }
	to { transform: scaleX(0.55); }
}

@media (prefers-reduced-motion: reduce) {
	.ota-lever-svg .ota-anim-dash,
	.ota-lever-svg .ota-anim-sweep,
	.ota-lever-svg .ota-anim-bar-a,
	.ota-lever-svg .ota-anim-bar-b {
		animation: none;
	}
}

/* Guide page — code voice
---------------------------------------- */

.ota-kbd {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 0.85em;
	background: var(--wp--preset--color--abyss);
	border: 1px solid var(--wp--preset--color--panel-edge);
	border-radius: 4px;
	padding: 2px 8px;
	color: var(--wp--preset--color--accent);
}