/*
Theme Name: WP Base
Theme URI: https://github.com/kostas-makatsoris/Tools
Author: Kostas
Author URI: https://kostas.dev
Description: Reusable, white-label block theme (parent). Brand-driven via brand.json + theme.json design tokens, light/dark color modes, React-island integration, and a portable lib/ architecture. Child themes override tokens + brand only. Versioning is owned by Tools (see Tools/versions), not by this file.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-base
Tags: full-site-editing, block-patterns, block-styles, custom-colors, wide-blocks, accessibility-ready, blog, portfolio

WP Base, (C) 2026 Kostas. Distributed under the terms of the GNU GPL v2 or later.
*/

/* ------------------------------------------------------------------ *
 * Progressive enhancement — only rules theme.json cannot express.    *
 * Tokens (colors/fonts/spacing) live in theme.json; a brand's child  *
 * theme overrides them. Keep this file token-referencing, not        *
 * brand-specific.                                                    *
 * ------------------------------------------------------------------ */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

:where(:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

p {
	text-wrap: pretty;
}

pre {
	overflow-x: auto;
}

html {
	scroll-behavior: smooth;
}

/* Video hero overlay */
.wpbase-video-hero {
	position: relative;
	overflow: hidden;
}

.wpbase-video-hero video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
}

.wpbase-video-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/* Hero heading entrance animation */
@keyframes wpbase-hero-heading-entrance {
	0% {
		opacity: 0;
		transform: translateX(-120px) rotate(-8deg);
		color: var(--wp--preset--color--accent-1);
	}
	40% {
		opacity: 1;
		transform: translateX(10px) rotate(2deg);
		color: var(--wp--preset--color--accent-2);
	}
	70% {
		transform: translateX(-5px) rotate(-1deg);
		color: var(--wp--preset--color--accent-3);
	}
	100% {
		opacity: 1;
		transform: translateX(0) rotate(0deg);
		color: var(--wp--preset--color--contrast);
	}
}

.wpbase-hero-entrance {
	animation: wpbase-hero-heading-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.wpbase-hero-entrance {
		animation: none;
	}
	.wpbase-parallax-section .wpbase-parallax-layer {
		transform: none !important;
	}
}

/* Parallax scroll section (driven by assets/js/frontend.js, data-speed attrs) */
.wpbase-parallax-section {
	position: relative;
	overflow: hidden;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpbase-parallax-layer {
	position: absolute;
	will-change: transform;
	transition: none;
}

.wpbase-parallax-bg {
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--wp--preset--color--accent-1) 0%, transparent 70%);
	opacity: 0.15;
	top: -100px;
	left: -150px;
	z-index: 0;
}

.wpbase-parallax-mid {
	width: 300px;
	height: 300px;
	border: 3px solid var(--wp--preset--color--accent-1);
	border-radius: var(--wp--custom--border-radius--large, 24px);
	opacity: 0.25;
	top: 40px;
	right: 8%;
	z-index: 1;
	transform: rotate(15deg);
}

.wpbase-parallax-dot {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2);
	opacity: 0.3;
	bottom: 60px;
	left: 15%;
	z-index: 1;
}

.wpbase-parallax-dot-sm {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	opacity: 0.4;
	top: 30%;
	right: 25%;
	z-index: 1;
}

.wpbase-parallax-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 700px;
	padding: var(--wp--preset--spacing--40);
}