/* Partiu — Animations
 * Sempre respeita prefers-reduced-motion.
 */

@keyframes partiu-fade-up {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes partiu-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes partiu-scale-in {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes partiu-slide-right {
	from { opacity: 0; transform: translate3d(-20px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes partiu-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes partiu-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}
@keyframes partiu-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
@keyframes partiu-arrow-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(4px); }
}

/* Scroll reveal — inicia oculto, fica visível quando .in-view é adicionado */
.reveal {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 600ms var(--transition), transform 600ms var(--transition);
	will-change: opacity, transform;
}
.reveal.in-view {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
.reveal-stagger > *        { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 500ms var(--transition), transform 500ms var(--transition); }
.reveal-stagger.in-view > * { opacity: 1; transform: translate3d(0, 0, 0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 560ms; }

/* Hover refinado nos post cards */
.post-card {
	position: relative;
	isolation: isolate;
}
.post-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255,137,6,.08), transparent 40%);
	opacity: 0;
	transition: opacity 400ms var(--transition);
	pointer-events: none;
	z-index: -1;
}
.post-card:hover::before { opacity: 1; }

.post-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,14,23,.3) 0%, transparent 50%);
	opacity: 0;
	transition: opacity 400ms var(--transition);
	z-index: 1;
}
.post-card:hover .post-card-media::after { opacity: 1; }

/* "Ler mais" arrow animado ao hover */
.post-card-body::after {
	content: "→";
	position: absolute;
	bottom: 1.25rem;
	right: 1.25rem;
	color: var(--accent);
	font-weight: 800;
	font-size: 18px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 300ms var(--transition), transform 300ms var(--transition);
	pointer-events: none;
}
.post-card:hover .post-card-body::after {
	opacity: 1;
	transform: translateX(0);
	animation: partiu-arrow-nudge 1.5s ease-in-out infinite;
}

/* Category pill pulse sutil on hover */
.cat-pill {
	position: relative;
	overflow: hidden;
}
.cat-pill::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
	transform: translateX(-100%);
	transition: transform 600ms var(--transition);
}
a:hover > .cat-pill::before,
.cat-pill:hover::before {
	transform: translateX(100%);
}

/* Site nav: underline com slide mais suave */
.site-nav a::after {
	transition: transform 400ms cubic-bezier(.65, 0, .35, 1);
}

/* Header search hover com expansão */
.header-search {
	overflow: hidden;
	position: relative;
}
.header-search::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--surface-2);
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms var(--transition);
	z-index: -1;
}
.header-search:hover::after { transform: scaleX(1); }
.header-search { position: relative; isolation: isolate; }

/* Theme toggle rotate on click */
.theme-toggle svg {
	transition: transform 500ms cubic-bezier(.65, 0, .35, 1);
}
.theme-toggle:active svg { transform: rotate(180deg); }

/* Hero featured — subtle parallax */
.hero-featured img {
	transition: transform 800ms cubic-bezier(.25, .1, .25, 1);
	will-change: transform;
}
.hero-featured:hover img { transform: scale(1.06); }

.hero-featured .hero-content > * {
	transition: transform 400ms var(--transition);
}
.hero-featured:hover h2 {
	transform: translateY(-4px);
}

/* Section header — underline grow */
.section-header {
	position: relative;
}
.section-header::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 60px;
	height: 4px;
	background: var(--accent);
	transition: width 500ms var(--transition);
}
.section-header:hover::after { width: 120px; }

/* See all link com arrow */
.see-all {
	transition: color var(--dur) var(--transition), letter-spacing var(--dur) var(--transition);
}
.see-all:hover { letter-spacing: 0.03em; }

/* Featured section — variante "1 grande + 3 pequenos" */
.section-feature-cards {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 1.5rem;
}
@media (max-width: 900px) {
	.section-feature-cards { grid-template-columns: 1fr; }
}

.section-feature-main {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--surface-2);
	box-shadow: var(--shadow);
	display: block;
}
.section-feature-main img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	transition: transform 700ms var(--transition);
}
.section-feature-main:hover img { transform: scale(1.05); }
.section-feature-main::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(15,14,23,.92) 0%, rgba(15,14,23,.35) 45%, transparent 70%);
}
.section-feature-main .content {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 2rem;
	color: #fffffe;
	z-index: 1;
}
.section-feature-main h3 {
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.15;
	color: #fffffe;
	margin: .5rem 0 .25rem;
}
.section-feature-main .post-meta { color: rgba(255,255,255,.75); }

.section-feature-side {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	gap: 1rem;
}

/* Lista numerada — "Mais lidas" style */
.section-list {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
}
.numbered-list { list-style: none; padding: 0; margin: 0; counter-reset: item; }
.numbered-list li {
	display: grid;
	grid-template-columns: auto 88px 1fr;
	gap: 1rem;
	align-items: center;
	padding: .85rem 0;
	border-bottom: 1px solid var(--border);
	counter-increment: item;
	transition: padding var(--dur) var(--transition), background var(--dur) var(--transition);
	border-radius: var(--radius-sm);
}
@media (max-width: 560px) {
	.numbered-list li { grid-template-columns: auto 68px 1fr; gap: .75rem; }
}
.numbered-list li:last-child { border-bottom: 0; }
.numbered-list li::before {
	content: counter(item, decimal-leading-zero);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -0.05em;
	min-width: 2.5ch;
	text-align: center;
}
.numbered-list li:hover { padding-left: .5rem; padding-right: .5rem; background: var(--surface-2); }

.numbered-list .thumb {
	position: relative;
	width: 88px;
	height: 66px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}
@media (max-width: 560px) {
	.numbered-list .thumb { width: 68px; height: 51px; }
}
.numbered-list .thumb img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	transition: transform 500ms var(--transition);
}
.numbered-list li:hover .thumb img { transform: scale(1.08); }

.numbered-list .text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.numbered-list .title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(.95rem, 1.4vw, 1.05rem);
	line-height: 1.3;
	color: var(--ink);
	transition: color var(--dur) var(--transition);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.numbered-list li:hover .title { color: var(--accent-2); }
.numbered-list .meta {
	font-size: 12px;
	color: var(--ink-muted);
}

/* Marquee / ticker para categorias — opcional no futuro */
.category-chips {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	padding: .5rem 0;
	scrollbar-width: none;
	margin-bottom: 1rem;
}
.category-chips::-webkit-scrollbar { display: none; }
.category-chips a {
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--font-display);
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--ink-soft);
	transition: all var(--dur) var(--transition);
	white-space: nowrap;
}
.category-chips a:hover {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
	transform: translateY(-2px);
}
.category-chips a.active {
	background: var(--accent);
	color: var(--ink);
	border-color: var(--accent);
}

/* Reading progress bar (opcional no single) */
.reading-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-3));
	width: 0%;
	z-index: 1000;
	transition: width 80ms linear;
}

/* View transitions (Chrome 111+) */
@supports (view-transition-name: none) {
	.post-card-title { view-transition-name: unset; }
}

/* Accessibility: respect reduced motion */
@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;
	}
	.reveal, .reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}
}