/* Linkbio do Tiro Seguro: abertura de filme e cenas. Mobile primeiro. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--lb-bg);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--lb-bg);
	color: var(--lb-text);
	font-family: var(--lb-font-texto);
	font-size: 1rem;
	line-height: 1.45;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--lb-accent);
	outline-offset: 3px;
}

/* Camadas de película -------------------------------------------------- */

.grao,
.vinheta {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 40;
}

.grao {
	inset: -64px;
	opacity: 0.16;
	mix-blend-mode: overlay;
	background-image: url("../img/fundo/grao-256.webp");
	background-size: 256px 256px;
	animation: grao 0.5s steps(4) infinite;
}

.vinheta {
	background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
	z-index: 39;
}

@keyframes grao {
	0% { transform: translate3d(0, 0, 0); }
	25% { transform: translate3d(-23px, 17px, 0); }
	50% { transform: translate3d(31px, -9px, 0); }
	75% { transform: translate3d(-11px, -29px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* Letterbox (só existe durante a abertura) ------------------------------ */

.letterbox,
.pular {
	display: none;
}

.anim .letterbox {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

.letterbox__barra {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.5%;
	background: #000;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 var(--lb-gutter) 10px;
	overflow: hidden;
}

.letterbox__barra--topo {
	top: 0;
}

.letterbox__barra--base {
	bottom: 0;
	align-items: flex-start;
	padding-top: 10px;
}

.letterbox__info {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lb-text-2);
	font-variant-numeric: tabular-nums;
	opacity: 0;
}

.anim .pular {
	display: block;
	position: fixed;
	right: var(--lb-gutter);
	bottom: calc(14px + env(safe-area-inset-bottom));
	z-index: 51;
	padding: 8px 14px;
	border: 1px solid rgba(242, 242, 239, 0.25);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.6);
	color: var(--lb-text-2);
	font: 600 0.75rem/1 var(--lb-font-texto);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Página -------------------------------------------------------------- */

.pagina {
	position: relative;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: calc(40px + env(safe-area-inset-top)) var(--lb-gutter) calc(32px + env(safe-area-inset-bottom));
}

/* Abertura ------------------------------------------------------------ */

.abertura {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-bottom: 28px;
}

.abertura__simbolo {
	position: relative;
	width: 84px;
	aspect-ratio: 410 / 341;
	margin-bottom: 18px;
}

.abertura__logo,
.abertura__brilho {
	position: absolute;
	inset: 0;
	-webkit-mask: url("../img/logo-simbolo.svg") center / contain no-repeat;
	mask: url("../img/logo-simbolo.svg") center / contain no-repeat;
}

.abertura__logo {
	background: var(--lb-text);
}

/* Brilho laranja que atravessa o símbolo uma vez */
.abertura__brilho {
	background: linear-gradient(105deg, transparent 35%, var(--lb-accent) 50%, transparent 65%) no-repeat;
	background-size: 250% 100%;
	background-position: 150% 0;
	opacity: 0;
}

.abertura__titulo {
	margin: 0;
	font-family: var(--lb-font-titulo);
	font-weight: 400;
	font-size: clamp(3.5rem, 17vw, 7.5rem);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.abertura__bio {
	max-width: 22em;
	margin: 12px 0 0;
	color: var(--lb-text-2);
	font-size: 1rem;
}

/* Cenas (cards) ------------------------------------------------------- */

.cenas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.cena {
	--cena-altura: 168px;
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--cena-altura);
	height: 100%;
	padding: 48px 56px 16px 18px;
	border-radius: var(--lb-raio);
	overflow: hidden;
	text-decoration: none;
	background: var(--lb-surface);
	box-shadow: inset 0 0 0 1px rgba(242, 242, 239, 0.08);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cenas__item--larga .cena {
	--cena-altura: 232px;
}

/* Imagem da cena: placeholder em degradê até chegar a foto do Fotograma */
.cena__imagem {
	position: absolute;
	inset: -14px;
	z-index: -2;
	background:
		radial-gradient(ellipse 60% 70% at var(--ph-x, 70%) var(--ph-y, 35%), rgba(255, 107, 26, 0.32), transparent 70%),
		linear-gradient(135deg, #22272a 0%, #111416 60%, #0c0e0f 100%);
	will-change: transform;
}

.cena__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--img-x, 60%) 50%;
	display: block;
}

.cena::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(12, 14, 15, 0.7) 0%, rgba(12, 14, 15, 0) 32%),
		linear-gradient(to top, rgba(12, 14, 15, 0.94) 0%, rgba(12, 14, 15, 0.55) 45%, rgba(12, 14, 15, 0.05) 100%);
}

[data-card="site"] { --ph-x: 85%; --ph-y: 30%; --img-x: 55%; }
[data-card="loja"] { --ph-x: 65%; --ph-y: 45%; --img-x: 62%; }
[data-card="profissionais"] { --ph-x: 30%; --ph-y: 20%; --img-x: 82%; }
[data-card="clubes"] { --ph-x: 70%; --ph-y: 35%; --img-x: 58%; }
[data-card="destaque"] { --ph-x: 80%; --ph-y: 50%; --img-x: 64%; }

.cena__selo {
	position: absolute;
	top: 14px;
	left: 18px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--lb-accent);
	color: var(--lb-bg);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cena__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cena__titulo {
	font-family: var(--lb-font-titulo);
	font-size: 2rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.cenas__item--larga .cena__titulo {
	font-size: 2.5rem;
}

.cena__apoio {
	color: #c9cdcf;
	font-size: 0.9375rem;
}

.cena__seta {
	position: absolute;
	right: 14px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(242, 242, 239, 0.1);
	box-shadow: inset 0 0 0 1px rgba(242, 242, 239, 0.18);
	font-size: 1.125rem;
	line-height: 1;
	transition: background 0.25s ease, color 0.25s ease;
}

.cena__seta .icone {
	width: 18px;
	height: 18px;
}

@media (hover: hover) {
	.cena:hover {
		box-shadow: inset 0 0 0 1px rgba(255, 107, 26, 0.6), 0 12px 40px -18px rgba(255, 107, 26, 0.45);
	}
	.cena:hover .cena__seta {
		background: var(--lb-accent);
		color: var(--lb-bg);
	}
}

.cena:active {
	transform: scale(0.985);
}

/* Rodapé -------------------------------------------------------------- */

.rodape {
	margin-top: 36px;
	text-align: center;
	color: var(--lb-text-2);
	font-size: 0.875rem;
}

.rodape__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.rodape__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	text-decoration: none;
	color: var(--lb-text);
}

.rodape__links a:hover {
	color: var(--lb-accent);
}

.rodape__links .icone {
	width: 20px;
	height: 20px;
}

/* Estado inicial da abertura (só com .anim) --------------------------- */

.anim .abertura__simbolo,
.anim .abertura__titulo,
.anim .abertura__bio,
.anim .cenas__item,
.anim .rodape {
	opacity: 0;
	visibility: hidden;
}

/* Desktop ------------------------------------------------------------- */

@media (min-width: 760px) {
	.pagina {
		padding-top: 72px;
		padding-left: 32px;
		padding-right: 32px;
	}

	.abertura {
		padding-bottom: 48px;
	}

	.abertura__simbolo {
		width: 104px;
	}

	.abertura__bio {
		font-size: 1.125rem;
	}

	/* Site          | Loja (3 linhas)
	   Profissionais | Loja
	   Clubes        | Loja
	   Destaque (largura total) */
	.cenas {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.cena {
		--cena-altura: 200px;
		padding: 56px 64px 22px 24px;
	}

	.cenas__item--loja {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.cenas__item--destaque {
		grid-column: 1 / -1;
	}

	.cenas__item--destaque .cena {
		--cena-altura: 380px;
	}

	.cenas__item--larga .cena__titulo {
		font-size: 3.25rem;
	}

	.cena__titulo {
		font-size: 2.25rem;
	}

	.cena__selo {
		top: 20px;
		left: 24px;
	}

	.cena__seta {
		right: 20px;
		bottom: 22px;
		width: 40px;
		height: 40px;
	}
}

/* Reduced motion: tudo pronto, só um fade curto ----------------------- */

@media (prefers-reduced-motion: reduce) {
	.grao {
		animation: none;
	}
	.pagina {
		animation: aparecer 0.3s ease-out both;
	}
	.cena,
	.cena__seta {
		transition: none;
	}
	.cena:active {
		transform: none;
	}
}

@keyframes aparecer {
	from { opacity: 0; }
	to { opacity: 1; }
}