/*
Theme Name: diio_WP_theme
Theme URI: https://example.com/
Author: Dionatan Simioni
Description: Tema de blocos escuro (com modo claro opcional) em azul e fúcsia, com estética de terminal e animações, feito para um site pessoal com blog e portfólio.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.4.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diio-wp-theme
Tags: blog, portfolio, dark, block-patterns, full-site-editing, one-column, wide-blocks
*/

/* ---------- Tokens ---------- */

:root {
	--diio-blue: var(--wp--preset--color--accent);
	--diio-fuchsia: var(--wp--preset--color--accent-2);
	--diio-violet: var(--wp--preset--color--accent-3);
	--diio-gradient: var(--wp--preset--gradient--accent);
	--diio-shimmer: linear-gradient(90deg, var(--diio-blue), var(--diio-violet), var(--diio-fuchsia), var(--diio-violet), var(--diio-blue));
	--diio-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--diio-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--diio-dots: rgba(160, 166, 214, 0.07);
	--diio-code: #ffb3ec;
	--diio-blob-opacity: 0.45;
	color-scheme: dark;
}

/* ---------- Modo claro (opcional, ativado pelo botão no cabeçalho) ---------- */

:root[data-theme="light"] {
	--wp--preset--color--base: #f6f6fc;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--border: #dcdff0;
	--wp--preset--color--contrast: #14162e;
	--wp--preset--color--muted: #535985;
	--wp--preset--color--accent: #2563eb;
	--wp--preset--color--accent-2: #c026a8;
	--wp--preset--color--accent-3: #7c3aed;
	--wp--preset--gradient--accent: linear-gradient(120deg, #2563eb 0%, #7c3aed 50%, #c026a8 100%);
	--diio-dots: rgba(20, 22, 46, 0.07);
	--diio-code: #a21c8c;
	--diio-blob-opacity: 0.22;
	color-scheme: light;
}

/* ---------- Base ---------- */

body {
	overflow-x: clip;
	background-image: radial-gradient(var(--diio-dots) 1px, transparent 1px);
	background-size: 28px 28px;
}

::selection {
	background: var(--diio-fuchsia);
	color: #fff;
}

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--diio-fuchsia);
	outline-offset: 3px;
	border-radius: 4px;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease;
}

/* Links do conteúdo: sublinhado em gradiente que cresce no hover */
.wp-block-post-content a:not(.wp-element-button),
.wp-block-term-description a {
	text-decoration: none;
	background-image: var(--diio-gradient);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--diio-ease), color 0.2s ease;
}

.wp-block-post-content a:not(.wp-element-button):hover,
.wp-block-term-description a:hover {
	background-size: 100% 2px;
	color: var(--diio-fuchsia);
}

/* ---------- Header ---------- */

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 75%, transparent);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-site-blocks > header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--diio-gradient);
	opacity: 0.35;
	transition: opacity 0.3s ease;
}

.wp-site-blocks > header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	box-shadow: 0 10px 30px -15px rgba(155, 92, 255, 0.45);
}

.wp-site-blocks > header.is-scrolled::after {
	opacity: 1;
}

.admin-bar .wp-site-blocks > header {
	top: var(--wp-admin--admin-bar--height, 0);
}

.site-header {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	transition: padding 0.3s var(--diio-ease);
}

.is-scrolled .site-header {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.site-brand {
	gap: 0.35rem;
}

.site-prompt {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	background: var(--diio-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: transform 0.4s var(--diio-spring);
}

.site-brand:hover .site-prompt {
	transform: rotate(-8deg) scale(1.15);
}

.site-brand .wp-block-site-title a {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	background-image: var(--diio-gradient);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px;
	transition: background-size 0.3s var(--diio-ease), color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background-size: 100% 2px;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Botão de tema claro/escuro ---------- */

.header-actions {
	gap: var(--wp--preset--spacing--30);
}

.diio-theme-toggle {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.35s var(--diio-spring), box-shadow 0.3s ease;
}

.diio-theme-toggle:hover {
	border-color: var(--diio-fuchsia);
	transform: rotate(-12deg) scale(1.08);
	box-shadow: 0 0 18px -4px var(--diio-fuchsia);
}

.diio-theme-toggle:active {
	transform: scale(0.92);
}

.diio-theme-toggle svg {
	grid-area: 1 / 1;
	width: 1.15rem;
	height: 1.15rem;
	transition: transform 0.6s var(--diio-spring), opacity 0.3s ease;
}

/* No modo escuro aparece a lua; no claro, o sol. */
.diio-theme-toggle .icon-sun {
	opacity: 0;
	transform: rotate(-90deg) scale(0.4) translateY(1.5rem);
	color: #f59e0b;
}

.diio-theme-toggle .icon-moon {
	color: var(--diio-violet);
}

[data-theme="light"] .diio-theme-toggle .icon-sun {
	opacity: 1;
	transform: none;
}

[data-theme="light"] .diio-theme-toggle .icon-moon {
	opacity: 0;
	transform: rotate(90deg) scale(0.4) translateY(-1.5rem);
}

/* Transição de tema com círculo (View Transitions API) */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

/* ---------- Footer ---------- */

.site-footer {
	position: relative;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--diio-blue), var(--diio-fuchsia), transparent);
}

.site-footer p {
	margin: 0;
}

.site-footer .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--muted);
}

.site-footer .wp-block-social-links a {
	color: inherit;
	transition: color 0.2s ease, transform 0.35s var(--diio-spring);
}

.site-footer .wp-block-social-link:nth-child(odd) a:hover {
	color: var(--diio-blue);
	transform: translateY(-4px) rotate(-8deg);
}

.site-footer .wp-block-social-link:nth-child(even) a:hover {
	color: var(--diio-fuchsia);
	transform: translateY(-4px) rotate(8deg);
}

/* ---------- Layout ---------- */

.site-main {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.section {
	margin-top: var(--wp--preset--spacing--60);
}

.section-header {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px dashed var(--wp--preset--color--border);
}

/* Barra em gradiente que desliza sob o cabeçalho da seção */
.section-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 4rem;
	height: 2px;
	background: var(--diio-gradient);
	transform-origin: left;
	transition: transform 0.9s var(--diio-ease) 0.2s;
}

.diio-js .section-header.reveal::after {
	transform: scaleX(0);
}

.diio-js .section-header.reveal.is-visible::after {
	transform: scaleX(1);
}

.section-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.section-title::before {
	content: "// ";
	color: var(--diio-fuchsia);
	opacity: 0.8;
}

.section-link {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.section-link a {
	display: inline-block;
	text-decoration: none;
	transition: transform 0.3s var(--diio-spring), color 0.2s ease;
}

.section-link a:hover {
	color: var(--diio-fuchsia);
	transform: translateX(4px);
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	isolation: isolate;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Bolhas de luz azul e fúcsia flutuando atrás do hero */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(420px, 70vw);
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(90px);
	opacity: var(--diio-blob-opacity);
	pointer-events: none;
}

.hero::before {
	top: -15%;
	left: -25%;
	background: var(--diio-blue);
	animation: diio-float-a 16s ease-in-out infinite alternate;
}

.hero::after {
	bottom: -25%;
	right: -20%;
	background: var(--diio-fuchsia);
	animation: diio-float-b 19s ease-in-out infinite alternate;
}

.hero > * {
	animation: diio-rise 0.9s var(--diio-ease) both;
}

.hero > :nth-child(2) { animation-delay: 0.12s; }
.hero > :nth-child(3) { animation-delay: 0.24s; }
.hero > :nth-child(4) { animation-delay: 0.36s; }

.terminal-line {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--muted);
}

.terminal-line .prompt {
	margin-right: 1ch;
	color: var(--diio-fuchsia);
}

.terminal-line.is-typing::after {
	content: "▋";
	margin-left: 2px;
	color: var(--diio-blue);
	animation: diio-blink 0.9s steps(1) infinite;
}

.hero-title {
	margin-top: var(--wp--preset--spacing--20);
}

.hero-title .cursor {
	color: var(--diio-fuchsia);
	animation: diio-blink 1.1s steps(1) infinite;
}

.hero .hero-lead {
	max-width: 60ch;
}

.hero-lead {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

.gradient-text {
	background: var(--diio-shimmer);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: diio-shimmer 6s linear infinite;
}

/* ---------- Botões ---------- */

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	background-size: 200% 100%;
	background-position: 0% 50%;
	transition: background-position 0.6s var(--diio-ease), transform 0.35s var(--diio-spring), box-shadow 0.3s ease;
}

/* Reflexo que atravessa o botão */
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--diio-ease);
	pointer-events: none;
}

.wp-block-button__link:hover {
	background-position: 100% 50%;
	transform: translateY(-3px);
	box-shadow: 0 12px 30px -12px rgba(240, 64, 200, 0.7), 0 6px 20px -10px rgba(77, 148, 255, 0.7);
}

.wp-block-button__link:hover::after {
	transform: translateX(120%);
}

.wp-block-button__link:active {
	transform: translateY(0) scale(0.97);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(240, 64, 200, 0.1);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Cards (projetos) ---------- */

.card {
	position: relative;
	isolation: isolate;
	height: 100%;
	overflow: hidden;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	transform-style: preserve-3d;
	transition: transform 0.4s var(--diio-ease), box-shadow 0.4s ease, border-color 0.3s ease;
	will-change: transform;
}

/* Borda em gradiente azul → fúcsia */
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	background: var(--diio-gradient);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* Holofote que segue o mouse */
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 64, 200, 0.16), rgba(77, 148, 255, 0.08) 40%, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.card:hover {
	border-color: transparent;
	box-shadow: 0 20px 40px -20px rgba(155, 92, 255, 0.55);
}

.card:hover::before,
.card:hover::after {
	opacity: 1;
}

.card .project-thumb,
.card .wp-block-post-featured-image {
	overflow: hidden;
	margin: calc(var(--wp--preset--spacing--30) * -1) calc(var(--wp--preset--spacing--30) * -1) var(--wp--preset--spacing--30);
}

.card .project-thumb img,
.card .wp-block-post-featured-image img {
	border-radius: 0;
	transition: transform 0.7s var(--diio-ease), filter 0.7s ease;
}

.card:hover .project-thumb img,
.card:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
	filter: saturate(1.2);
}

.card .wp-block-post-title {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.card .wp-block-post-title a {
	text-decoration: none;
}

.card .project-text,
.card .wp-block-post-excerpt {
	margin-bottom: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* O título vira um link que cobre o card inteiro */
.card {
	display: flex;
	flex-direction: column;
}

.card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card .wp-block-post-title a:focus-visible {
	outline: none;
}

.card:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--diio-fuchsia);
	outline-offset: 3px;
}

.card:hover .wp-block-post-title a {
	color: var(--diio-blue);
}

.card .project-info {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* ---------- Miniatura do projeto ---------- */

.project-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card .project-thumb,
.card .wp-block-post-featured-image {
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
}

.project-thumb.is-banner {
	overflow: hidden;
	border-radius: 14px;
}

.project-thumb.is-banner.is-icon {
	aspect-ratio: 4 / 1;
}

.project-thumb.is-icon {
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--wp--preset--gradient--button);
}

.project-thumb.has-icon-color-blue {
	background: linear-gradient(135deg, #1c3f9e, #2f6bff);
}

.project-thumb.has-icon-color-violet {
	background: linear-gradient(135deg, #43208f, #7c3aed);
}

.project-thumb.has-icon-color-fuchsia {
	background: linear-gradient(135deg, #7d1a74, #c42fb4);
}

.project-thumb svg {
	width: clamp(2.75rem, 22%, 4.5rem);
	height: auto;
	aspect-ratio: 1;
	transition: transform 0.45s var(--diio-spring);
}

.project-thumb.is-banner svg {
	width: clamp(3rem, 8%, 5rem);
}

.card:hover .project-thumb svg {
	transform: scale(1.15) rotate(-6deg);
}

/* ---------- Informações do projeto ---------- */

.project-info {
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.project-info p {
	margin: 0;
}

.project-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--muted);
}

.project-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var(--wp--preset--color--contrast);
}

.project-status::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}

.project-status.is-active::before {
	background: var(--diio-fuchsia);
	animation: diio-pulse 2s ease-out infinite;
}

.project-status.is-done::before {
	background: var(--diio-blue);
}

.project-status.is-paused::before {
	background: var(--diio-violet);
}

.project-techs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-techs a {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--diio-spring);
}

.project-techs a:hover {
	border-color: var(--diio-fuchsia);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}

.project-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.project-link {
	text-decoration: none;
}

/* Tecnologias e links externos ficam acima do link do card */
.card .project-techs a,
.card .project-link {
	position: relative;
	z-index: 3;
}

.project-info.is-compact > * + * {
	margin-top: 0.75rem;
}

.project-info.is-full {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.project-details {
	margin: 0;
}

.project-row {
	display: grid;
	grid-template-columns: minmax(7rem, 1fr) 3fr;
	gap: var(--wp--preset--spacing--30);
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--wp--preset--color--border);
}

.project-row:first-child {
	padding-top: 0;
}

.project-row dt {
	color: var(--wp--preset--color--muted);
}

.project-row dd {
	margin: 0;
}

.project-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40) !important;
}

.project-actions .wp-block-button__link {
	background-image: var(--wp--preset--gradient--button);
	color: #fff;
	text-decoration: none;
}

.project-info-placeholder {
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Lista de posts ---------- */

.post-list .wp-block-post-template > li {
	position: relative;
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: padding-left 0.35s var(--diio-ease), background-color 0.3s ease;
}

.post-list .wp-block-post-template > li::before {
	content: ">";
	position: absolute;
	top: var(--wp--preset--spacing--30);
	left: 0.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	color: var(--diio-fuchsia);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.25s ease, transform 0.35s var(--diio-spring);
}

.post-list .wp-block-post-template > li:hover {
	padding-left: 1.5rem;
	background: linear-gradient(90deg, rgba(77, 148, 255, 0.07), transparent 70%);
}

.post-list .wp-block-post-template > li:hover::before {
	opacity: 1;
	transform: none;
}

.post-list .wp-block-post-template > li:last-child {
	border-bottom: 0;
}

.post-row {
	gap: var(--wp--preset--spacing--30);
}

.post-row .wp-block-post-date {
	min-width: 11ch;
}

.post-row .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.post-row .wp-block-post-title a {
	text-decoration: none;
}

.post-list .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
}

/* ---------- Single ---------- */

.post-meta {
	gap: 0.75rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.post-meta .wp-block-post-terms a {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--diio-spring);
}

.post-meta .wp-block-post-terms a::before {
	content: "#";
	color: var(--diio-fuchsia);
}

.post-meta .wp-block-post-terms a:hover {
	border-color: var(--diio-fuchsia);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}

.post-navigation {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-content :where(img) {
	border-radius: 8px;
}

.wp-block-post-featured-image img {
	border-radius: 14px;
}

/* Barra de progresso de leitura (criada pelo JS em posts e projetos) */
.diio-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0);
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 3px;
	background: var(--diio-gradient);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
	box-shadow: 0 0 12px rgba(240, 64, 200, 0.6);
	pointer-events: none;
}

/* ---------- Estilo de bloco "Terminal" (core/group) ---------- */

.is-style-terminal {
	position: relative;
	padding: calc(var(--wp--preset--spacing--30) + 1.75rem) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 30px 60px -30px rgba(77, 148, 255, 0.35), 0 20px 50px -30px rgba(240, 64, 200, 0.3);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.is-style-terminal::before {
	content: "";
	position: absolute;
	top: 0.9rem;
	left: 1rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: #ff5f56;
	box-shadow: 1.25rem 0 0 #ffbd2e, 2.5rem 0 0 #27c93f;
}

/* ---------- 404 ---------- */

.glitch {
	position: relative;
	margin: 0;
	font-size: clamp(5rem, 20vw, 10rem);
	line-height: 1;
	background: var(--diio-shimmer);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: diio-shimmer 5s linear infinite;
}

.glitch::before,
.glitch::after {
	content: "404";
	position: absolute;
	inset: 0;
	-webkit-text-fill-color: currentColor;
	pointer-events: none;
}

.glitch::before {
	color: var(--diio-blue);
	animation: diio-glitch 2.8s infinite steps(1);
}

.glitch::after {
	color: var(--diio-fuchsia);
	animation: diio-glitch 2.8s infinite steps(1) reverse;
}

/* ---------- Animação de entrada ao rolar ---------- */

.diio-js .reveal {
	opacity: 0;
	transform: translateY(28px) scale(0.98);
	transition: opacity 0.8s var(--diio-ease), transform 0.8s var(--diio-ease);
	transition-delay: var(--reveal-delay, 0ms);
}

.diio-js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Easter egg: chuva de pinguins ---------- */

.diio-penguin {
	position: fixed;
	top: -3rem;
	z-index: 9999;
	font-size: 2rem;
	pointer-events: none;
	animation: diio-fall var(--fall-duration, 3s) linear forwards;
}

/* ---------- Diversos ---------- */

:not(pre) > code {
	padding: 0.15em 0.4em;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	color: var(--diio-code);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
}

.wp-block-search__input,
.wp-block-comments input:not([type="submit"]),
.wp-block-comments textarea {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-search__input:focus,
.wp-block-comments input:not([type="submit"]):focus,
.wp-block-comments textarea:focus {
	outline: none;
	border-color: var(--diio-fuchsia);
	box-shadow: 0 0 0 3px rgba(240, 64, 200, 0.2);
}

/* ---------- Keyframes ---------- */

@keyframes diio-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--diio-fuchsia) 60%, transparent); }
	100% { box-shadow: 0 0 0 0.4em transparent; }
}

@keyframes diio-blink {
	50% { opacity: 0; }
}

@keyframes diio-rise {
	from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: none; }
}

@keyframes diio-shimmer {
	to { background-position: 200% center; }
}

@keyframes diio-float-a {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(18%, 12%) scale(1.1); }
	100% { transform: translate(35%, -5%) scale(0.95); }
}

@keyframes diio-float-b {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-20%, -15%) scale(1.15); }
	100% { transform: translate(-35%, 5%) scale(0.9); }
}

@keyframes diio-glitch {
	0%, 86%, 100% { transform: none; clip-path: inset(0 0 100% 0); }
	88% { transform: translate(-4px, 2px); clip-path: inset(20% 0 55% 0); }
	91% { transform: translate(4px, -2px); clip-path: inset(60% 0 15% 0); }
	94% { transform: translate(-2px, 0); clip-path: inset(40% 0 35% 0); }
}

@keyframes diio-fall {
	to { transform: translateY(calc(100vh + 6rem)) rotate(var(--fall-rotate, 360deg)); }
}

/* ---------- Acessibilidade: menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.diio-js .reveal {
		opacity: 1;
		transform: none;
	}
}