/*
Theme Name: Tobi Portfolio
Theme URI: TODO-https://oluwatobiololade.com
Author: Oluwatobi Ololade
Description: Dark-mode editorial portfolio for Oluwatobi Ololade ("Tobi"), product designer. Big serif type, generous spacing, one accent color, and layered motion (parallax + micro-interactions) that never hurts performance or accessibility. See portfolio-home-redesign-spec.md.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tobi-portfolio
Tags: portfolio, blog, full-site-editing, block-styles
*/

/* ---------------------------------------------------------------------------
   Small global CSS. Everything section-specific lives in assets/css/motion.css
   (layout + motion for this design are inseparable: the layout itself is
   animated). Design tokens are the theme.json presets.
   --------------------------------------------------------------------------- */

/*
 * Token aliases so the accent can be re-themed in one place (spec 3, Color).
 * Elements (and `motion.js`) should prefer the alias; changing the alias value
 * re-themes every accent use.
 */
:root {
	--accent: var(--wp--preset--color--accent);
	--line: var(--wp--preset--color--line);
}

html {
	scroll-behavior: smooth;
}

/* Focus ring: 2px accent outline, 3px offset, animates in (spec 7). */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	transition: outline-offset 0.15s var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
}

/*
 * Skip link: first element inside <body>, targets #main. Visually hidden until
 * focused, then pinned to the top-left corner above everything else.
 */
.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;

	/* Off the canvas (and out of the flow) until it is focused. */
	transform: translateY(-64px);
	opacity: 0;
	pointer-events: none;
}

.skip-link:focus {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Short page-load fade (spec 7, "Page load"). */
@keyframes tobi-page-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.js body {
	animation: tobi-page-in 0.4s var(--ease-out, cubic-bezier(0.2, 0.7, 0.2, 1)) both;
}

/* Internal-link fade-out before navigation (spec 7; toggled by motion.js). */
.js body.is-leaving {
	animation: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	/* Jumping instant to the target beats a smooth crawl past it. */
	html {
		scroll-behavior: auto;
	}

	.js body {
		animation: none;
	}
}