/*
Theme Name: Revontuli
Theme URI: https://example.com/revontuli
Author: JP Online
Description: A minimal dark block theme inspired by the northern lights. Midnight-blue base, aurora green and violet accents, built for small one-page company and portfolio sites.
Version: 1.2.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: revontuli
Tags: block-patterns, block-styles, full-site-editing, one-column, dark
*/

/* ---------------------------------------------------------
   Aurora signature: a soft animated glow behind the hero.
   Respects prefers-reduced-motion.
--------------------------------------------------------- */

.revontuli-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.revontuli-hero::before,
.revontuli-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	pointer-events: none;
}

.revontuli-hero::before {
	width: 55vw;
	height: 55vw;
	max-width: 720px;
	max-height: 720px;
	top: -20%;
	left: -10%;
	background: radial-gradient(closest-side, #2ee6a8 0%, transparent 70%);
	animation: revontuli-drift-a 18s ease-in-out infinite alternate;
}

.revontuli-hero::after {
	width: 50vw;
	height: 50vw;
	max-width: 640px;
	max-height: 640px;
	bottom: -25%;
	right: -12%;
	background: radial-gradient(closest-side, #7c5cff 0%, transparent 70%);
	animation: revontuli-drift-b 22s ease-in-out infinite alternate;
}

@keyframes revontuli-drift-a {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(6vw, 4vh) scale(1.12); }
}

@keyframes revontuli-drift-b {
	from { transform: translate(0, 0) scale(1.08); }
	to   { transform: translate(-5vw, -4vh) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.revontuli-hero::before,
	.revontuli-hero::after {
		animation: none;
	}
}

/* Aurora text treatment for highlighted words in headings */
.revontuli-aurora-text {
	background: linear-gradient(100deg, #2ee6a8 0%, #58c7f3 50%, #7c5cff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Buttons: subtle lift + glow on hover */
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(46, 230, 168, 0.35);
}

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

/* Header nav link hover */
.wp-block-navigation a:hover {
	color: #2ee6a8;
}

/* Visible keyboard focus on dark background */
:where(a, button, .wp-block-button__link):focus-visible {
	outline: 2px solid #2ee6a8;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Card style for service/project boxes */
.revontuli-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.revontuli-card:hover {
	border-color: rgba(46, 230, 168, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

/* Thin aurora line used as a divider */
.revontuli-divider {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, #2ee6a8 30%, #7c5cff 70%, transparent);
	opacity: 0.5;
}

/* ---------------------------------------------------------
   Showcase frames: wrap an Image block to present it as a
   browser window or a phone. Add the class to the Image
   block via Advanced -> Additional CSS class(es).
--------------------------------------------------------- */

/* Browser window frame for website screenshots */
.revontuli-frame-browser {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	overflow: hidden;
	background: #12122b;
	padding-top: 2.4rem;
	position: relative;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.revontuli-frame-browser::before {
	content: "";
	position: absolute;
	top: 0.95rem;
	left: 1.1rem;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: #2ee6a8;
	box-shadow: 1.15rem 0 0 #58c7f3, 2.3rem 0 0 #7c5cff;
	opacity: 0.85;
}

.revontuli-frame-browser img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	margin: 0;
}

/* Phone frame for app screenshots */
.revontuli-frame-phone {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 2.4rem;
	overflow: hidden;
	background: #12122b;
	padding: 0.9rem;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.revontuli-frame-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.6rem;
	margin: 0;
}

/* Eyebrow label used above showcase headings */
.revontuli-eyebrow {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}