/*
Theme Name: Jesrae Dev
Theme URI: https://jesrae.dev
Author: Jesrae
Author URI: https://jesrae.dev
Description: Custom software and AI app development for small businesses across the US and Canada. A full site editing (block) theme for jesrae.dev — built for WordPress 7.0, edit everything in the Site Editor, no page builder plugin needed.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jesrae-dev
Tags: full-site-editing, block-patterns, one-page, business, portfolio

This theme is intentionally minimal in style.css — nearly all design tokens
live in theme.json so they're editable live in the Site Editor (Appearance
→ Editor → Styles) without touching code.
*/

/* ============================================================
   HEADER — sticky with backdrop blur on scroll, asphalt-tinted
   ============================================================ */

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	background-color: rgba(21, 23, 26, 0.88) !important;
}

/* ============================================================
   FOUNDATIONS — easing, grain texture, base feel
   ============================================================ */

:root {
	/* A custom cubic-bezier reads as more "designed" than ease/ease-in-out —
	   slight overshoot-free deceleration, the curve used throughout. */
	--jd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--jd-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--jd-duration: 0.9s;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Faint blueprint grid across the whole site — the industrial equivalent
   of the old paper grain. Pure CSS, no image request. */
body {
	position: relative;
	background-image:
		linear-gradient(rgba(236, 232, 222, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(236, 232, 222, 0.05) 1px, transparent 1px);
	background-size: 44px 44px;
}

/* ============================================================
   SCROLL REVEAL — staggered, eased entrance for sections
   ============================================================ */

.jd-reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity var(--jd-duration) var(--jd-ease), transform var(--jd-duration) var(--jd-ease);
	will-change: opacity, transform;
}

.jd-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered children: direct block children of a revealed section fade in
   slightly after one another rather than all at once. JS adds the
   .jd-stagger-ready class once observed; CSS handles the cascade via
   nth-child delays so no JS timing logic is needed per-element. */
.jd-reveal.jd-stagger > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s var(--jd-ease), transform 0.8s var(--jd-ease);
}

.jd-reveal.jd-stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

.jd-reveal.jd-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.jd-reveal.jd-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.jd-reveal.jd-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.jd-reveal.jd-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.jd-reveal.jd-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.jd-reveal.jd-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
	.jd-reveal,
	.jd-reveal.jd-stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   HERO LOAD SEQUENCE — choreographed entrance on first paint
   ============================================================ */

.jd-hero-eyebrow,
.jd-hero-headline,
.jd-hero-sub,
.jd-hero-cta,
.jd-hero-visual {
	opacity: 0;
	animation: jd-rise 1s var(--jd-ease) forwards;
}

.jd-hero-eyebrow  { animation-delay: 0.1s; }
.jd-hero-headline { animation-delay: 0.25s; }
.jd-hero-sub      { animation-delay: 0.45s; }
.jd-hero-cta      { animation-delay: 0.6s; }
.jd-hero-visual   { animation-delay: 0.4s; animation-duration: 1.2s; }

@keyframes jd-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jd-hero-eyebrow,
	.jd-hero-headline,
	.jd-hero-sub,
	.jd-hero-cta,
	.jd-hero-visual {
		opacity: 1;
		animation: none;
	}
}

/* Gentle ambient float on the hero illustration — barely-there, reads as
   "alive" rather than "animated." Pauses automatically with reduced motion. */
.jd-hero-visual svg {
	width: 100%;
	height: auto;
	max-width: 440px;
	display: block;
	margin: 0 auto;
	animation: jd-float 7s var(--jd-ease-soft) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.jd-hero-visual svg {
		animation: none;
	}
}

/* ============================================================
   CARDS — refined hover choreography (lift + shadow + gold edge)
   ============================================================ */

.jd-card {
	transition: transform 0.5s var(--jd-ease), box-shadow 0.5s var(--jd-ease), border-color 0.4s var(--jd-ease-soft);
	position: relative;
	overflow: hidden;
}

.jd-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--wp--preset--color--brass), transparent 40%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.5s var(--jd-ease-soft);
	pointer-events: none;
}

.jd-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.jd-card:hover::after {
	opacity: 1;
}

/* ============================================================
   BUTTONS — industrial hard-edge offset shadow
   ============================================================ */

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 6px 6px 0 var(--wp--preset--color--workshop-green);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--wp--preset--color--workshop-green);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
	transform: translate(0, 0);
	box-shadow: 4px 4px 0 var(--wp--preset--color--workshop-green);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
		animation: none;
	}
}

/* ============================================================
   PORTRAIT & MEDIA FRAMING
   ============================================================ */

.jd-portrait img {
	border-radius: 2px;
	border: 1px solid var(--wp--preset--color--rule-line);
	transition: transform 0.6s var(--jd-ease), box-shadow 0.6s var(--jd-ease);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.jd-portrait:hover img {
	transform: translateY(-4px);
	box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   SECTION DIVIDERS — refined hairline rule instead of bold blocks
   ============================================================ */

.wp-block-separator.is-style-wide {
	opacity: 0.9;
}

/* ============================================================
   FINAL CTA — radial gold glow, the one dramatic moment on the page
   ============================================================ */

.jd-final-cta {
	position: relative;
	overflow: hidden;
}

.jd-final-cta::before {
	content: "";
	position: absolute;
	top: -20%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 900px;
	aspect-ratio: 1.6 / 1;
	background: radial-gradient(ellipse at center, rgba(245, 197, 24, 0.10) 0%, rgba(245, 197, 24, 0) 70%);
	pointer-events: none;
	z-index: 0;
}

.jd-final-cta > * {
	position: relative;
	z-index: 1;
}

/* ============================================================
   SELECTION & FOCUS — small premium touches
   ============================================================ */

::selection {
	background: var(--wp--preset--color--brass);
	color: var(--wp--preset--color--ink);
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 3px;
}