/* =====================================================================
   DigitalRadar — Animations / Motion
   Scroll reveals, cursor glow, spotlight nos cards, botões magnéticos,
   ticker e parallax. Progressivo: só ativa com JS (.dr-js) e respeita
   prefers-reduced-motion.
   ===================================================================== */

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.dr-js [data-dr-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity .8s var(--dr-ease-out),
		transform .8s var(--dr-ease-out);
	transition-delay: var(--dr-reveal-delay, 0ms);
	will-change: opacity, transform;
}
.dr-js [data-dr-reveal="left"]  { transform: translateX(-44px); }
.dr-js [data-dr-reveal="right"] { transform: translateX(44px); }
.dr-js [data-dr-reveal="scale"] { transform: scale(.92); }
.dr-js [data-dr-reveal="blur"]  { filter: blur(8px); transition: opacity .8s var(--dr-ease-out), transform .8s var(--dr-ease-out), filter .8s var(--dr-ease-out); }

.dr-js [data-dr-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ---------- Cursor glow (radar) ---------- */
.dr-cursor-glow {
	position: fixed;
	top: 0; left: 0;
	width: 380px; height: 380px;
	margin: -190px 0 0 -190px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(circle, rgba(0, 180, 255, .12), rgba(0, 180, 255, 0) 60%);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity .5s var(--dr-ease);
	will-change: transform;
}
.dr-cursor-glow.is-active { opacity: 1; }

/* Anel fino que reage a links/cards */
.dr-cursor-ring {
	position: fixed;
	top: 0; left: 0;
	width: 26px; height: 26px;
	margin: -13px 0 0 -13px;
	border-radius: 50%;
	border: 1.5px solid rgba(0, 180, 255, .5);
	pointer-events: none;
	z-index: 9998;
	opacity: 0;
	transition: opacity .35s var(--dr-ease), width .3s var(--dr-ease), height .3s var(--dr-ease), border-color .3s var(--dr-ease), background .3s var(--dr-ease);
	will-change: transform;
}
.dr-cursor-ring.is-active { opacity: 1; }
.dr-cursor-ring.is-hover {
	width: 54px; height: 54px;
	margin: -27px 0 0 -27px;
	border-color: rgba(0, 180, 255, .9);
	background: rgba(0, 180, 255, .08);
}

/* ---------- Spotlight nos cards ---------- */
.dr-card { position: relative; --mx: 50%; --my: 50%; }
.dr-card::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	background: radial-gradient(260px circle at var(--mx) var(--my), rgba(0, 180, 255, .16), transparent 62%);
	opacity: 0;
	transition: opacity .45s var(--dr-ease);
	pointer-events: none;
	z-index: 1;
}
.dr-card:hover::after { opacity: 1; }
.dr-card__body { position: relative; z-index: 2; }

.dr-cat-card { --mx: 50%; --my: 50%; }
.dr-cat-card::before {
	background:
		radial-gradient(180px circle at var(--mx) var(--my), rgba(0, 180, 255, .14), transparent 60%),
		var(--dr-grad-surface);
}

/* ---------- Botões magnéticos ---------- */
[data-dr-magnetic] { will-change: transform; }
[data-dr-magnetic] > span { display: inline-block; will-change: transform; }

/* ---------- Header inteligente (esconde ao descer) ---------- */
.dr-header { transition: transform var(--dr-dur) var(--dr-ease), background var(--dr-dur) var(--dr-ease), border-color var(--dr-dur) var(--dr-ease); }
.dr-header.is-hidden { transform: translateY(-100%); }

/* ---------- Parallax helpers ---------- */
.dr-hero__radar, .dr-hero__glow { will-change: transform; }

/* ---------- Ticker / feed de categorias ---------- */
.dr-ticker {
	position: relative;
	display: flex;
	overflow: hidden;
	gap: 0;
	padding-block: .9rem;
	border-block: 1px solid var(--dr-border);
	background:
		linear-gradient(90deg, var(--dr-bg) 0%, transparent 6%, transparent 94%, var(--dr-bg) 100%),
		var(--dr-bg-2);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	user-select: none;
}
.dr-ticker__track {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	flex: none;
	padding-left: 2.5rem;
	animation: dr-ticker 38s linear infinite;
}
.dr-ticker:hover .dr-ticker__track { animation-play-state: paused; }
.dr-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	font-family: var(--dr-font-alt);
	font-weight: var(--dr-fw-semi);
	font-size: var(--dr-fs-sm);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dr-text-dim);
	white-space: nowrap;
	transition: color var(--dr-dur-fast) var(--dr-ease);
}
.dr-ticker__item:hover { color: var(--dr-neon); }
.dr-ticker__item::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--dr-neon);
	box-shadow: var(--dr-glow-sm);
}
@keyframes dr-ticker { to { transform: translateX(-50%); } }

/* ---------- Shimmer dos placeholders ---------- */
.dr-card--placeholder .dr-card__placeholder::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(0,180,255,.10) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: dr-shimmer 2.4s var(--dr-ease) infinite;
}
@keyframes dr-shimmer { to { transform: translateX(100%); } }

/* ---------- Reduced motion: tudo visível, sem follow/ticker ---------- */
@media (prefers-reduced-motion: reduce) {
	.dr-js [data-dr-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
	.dr-cursor-glow, .dr-cursor-ring { display: none !important; }
	.dr-ticker__track { animation: none; }
	.dr-card--placeholder .dr-card__placeholder::after { animation: none; }
	.dr-header.is-hidden { transform: none; }
}

/* ---------- Touch: sem cursores customizados ---------- */
@media (hover: none) {
	.dr-cursor-glow, .dr-cursor-ring { display: none !important; }
}

/* =====================================================================
   MIX DE REFERÊNCIAS — camada de acabamento "estúdio"
   Aditiva: não altera os efeitos já existentes.
   ===================================================================== */

/* ---------- Grão tátil sobre tudo (Henning Larsen / studios) ---------- */
.dr-body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}

/* ---------- Revelação de imagem com máscara (Henning Larsen) ----------
   A imagem do card "sobe" por trás de uma máscara ao entrar na viewport.
   Não toca no transform (o zoom de hover continua intacto). */
.dr-js .dr-card[data-dr-reveal] .dr-card__img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1s var(--dr-ease-out), transform var(--dr-dur-slow) var(--dr-ease);
}
.dr-js .dr-card[data-dr-reveal].is-in .dr-card__img {
	clip-path: inset(0 0 0 0);
}

/* ---------- Sublinhado editorial no título do card (The Ringer) ---------- */
.dr-card__title a {
	padding-bottom: 2px;
	background-image: linear-gradient(var(--dr-neon), var(--dr-neon));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: color var(--dr-dur-fast) var(--dr-ease), background-size .45s var(--dr-ease);
}
.dr-card:hover .dr-card__title a,
.dr-card__title a:hover { background-size: 100% 2px; }

/* ---------- Barra do título que se "desenha" ao revelar (refinamento) ---------- */
.dr-js .dr-section__head[data-dr-reveal] .dr-section__title::before {
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform .7s var(--dr-ease-out) .12s;
}
.dr-js .dr-section__head[data-dr-reveal].is-in .dr-section__title::before {
	transform: scaleY(1);
}

/* ---------- Microinteração calma nos links de seção ---------- */
.dr-section__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: color var(--dr-dur-fast) var(--dr-ease), transform var(--dr-dur) var(--dr-ease);
}
.dr-section__link:hover { color: var(--dr-neon); transform: translateX(4px); }

/* ---------- Reduced motion: máscara e desenho desativados ---------- */
@media (prefers-reduced-motion: reduce) {
	.dr-js .dr-card[data-dr-reveal] .dr-card__img { clip-path: none !important; }
	.dr-js .dr-section__head[data-dr-reveal] .dr-section__title::before { transform: none !important; }
}