/* OKC Addons — base layer.
 *
 * The source theme rendered these sections with the Tailwind Play CDN plus
 * assets/css/main.css. This file reproduces the parts of that environment the
 * widgets depend on, scoped to `.okc-w` so nothing leaks into Astra/Elementor:
 *   1. the theme @font-face declarations (were in okc/style.css)
 *   2. the Tailwind Preflight resets the layouts assume
 *   3. main.css global rules that are visible inside these sections
 *   4. keyframes shared by more than one widget
 */

/* ==========================================================================
   1. FONTS  (from wp-content/themes/okc/style.css)
   ========================================================================== */
@font-face {
	font-family: "Pragmatica";
	src: url("../fonts/Pragmatica-Book.woff2") format("woff2"),
		url("../fonts/Pragmatica-Book.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pragmatica";
	src: url("../fonts/Pragmatica-BookObl.woff2") format("woff2"),
		url("../fonts/Pragmatica-BookObl.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Pragmatica";
	src: url("../fonts/Pragmatica-Bold.woff2") format("woff2"),
		url("../fonts/Pragmatica-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pragmatica";
	src: url("../fonts/Pragmatica-BoldObl.woff2") format("woff2"),
		url("../fonts/Pragmatica-BoldObl.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Pragmatica";
	src: url("../fonts/Pragmatica-Black.woff2") format("woff2"),
		url("../fonts/Pragmatica-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pragmatica Book";
	src: url("../fonts/Pragmatica-Book.woff2") format("woff2"),
		url("../fonts/Pragmatica-Book.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Pragmatica Cond";
	src: url("../fonts/PragmaticaCond-Black.woff2") format("woff2"),
		url("../fonts/PragmaticaCond-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Worker";
	src: url("../fonts/Worker-Black.woff2") format("woff2"),
		url("../fonts/Worker-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Worker";
	src: url("../fonts/Worker-BoldSlanted.woff2") format("woff2"),
		url("../fonts/Worker-BoldSlanted.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Modern Dolly";
	src: url("../fonts/Modern_Dolly.woff2") format("woff2"),
		url("../fonts/Modern_Dolly.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. RESET  (Tailwind Preflight + main.css `*` reset, scoped to widgets)
   ========================================================================== */
.okc-w,
.okc-w *,
.okc-w *::before,
.okc-w *::after {
	box-sizing: border-box;
	border: 0 solid currentColor;
	margin: 0;
	padding: 0;
}

.okc-w {
	font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: left;
}

.okc-w h1,
.okc-w h2,
.okc-w h3,
.okc-w h4,
.okc-w h5,
.okc-w h6 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}

.okc-w p {
	margin: 0;
}

.okc-w ol,
.okc-w ul {
	list-style: none;
}

.okc-w a {
	color: inherit;
	text-decoration: inherit;
	transition: all 0.3s ease;
}

.okc-w button {
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: all 0.3s ease;
}

.okc-w img,
.okc-w svg,
.okc-w video {
	display: block;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

/* main.css applied this to every image on the page. */
.okc-w img {
	transition: transform 0.3s ease;
}

.okc-w img:hover {
	transform: scale(1.02);
}

.okc-w button:hover,
.okc-w .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.okc-w .card {
	transition: all 0.3s ease;
}

.okc-w .card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Elementor wraps every widget; these keep full-bleed sections full-bleed. */
.elementor-widget-okc-hero .elementor-widget-container,
.elementor-widget-okc-marquee .elementor-widget-container {
	overflow: visible;
}

/* ==========================================================================
   3. SHARED KEYFRAMES  (from main.css)
   ========================================================================== */
@keyframes okc-kenburns {
	0%   { transform: scale(1); }
	100% { transform: scale(1.1); }
}

@keyframes okc-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes okc-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-15px); }
}

@keyframes okc-spin-slow {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes okc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes okc-slide-right {
	from { opacity: 0; transform: translateX(-50px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes okc-slide-left {
	from { opacity: 0; transform: translateX(50px); }
	to   { opacity: 1; transform: translateX(0); }
}

.okc-w .okc-animate-float     { animation: okc-float 3s ease-in-out infinite; }
.okc-w .okc-animate-spin-slow { animation: okc-spin-slow 20s linear infinite; }

/* main.css `.scroll-animate`, driven by IntersectionObserver in okc-addons.js */
.okc-w .scroll-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s ease-out;
}

.okc-w .scroll-animate.active {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.okc-w .scroll-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}