/**
 * TrustPlay Partners — Global CSS
 * Design tokens, keyframes, and utility classes.
 *
 * @package TrustPlay_Partners
 */

/* =========================================================
   1. Custom Properties
   ========================================================= */
:root {
	/* Core palette */
	--tp-bg:              #0d1219;
	--tp-fg:              #e8e4d9;
	--tp-card:            hsl(240, 12%, 8%);
	--tp-border:          hsl(240, 10%, 15%);
	--tp-muted:           hsl(240, 8%, 55%);
	--tp-secondary:       hsl(240, 10%, 14%);

	/* Gold */
	--tp-gold:            hsl(43, 74%, 49%);
	--tp-gold-light:      hsl(43, 74%, 58%);
	--tp-gold-dark:       hsl(43, 74%, 38%);

	/* Mystic purple */
	--tp-purple:          hsl(280, 60%, 45%);
	--tp-purple-light:    hsl(275, 50%, 60%);

	/* Gradients */
	--tp-grad-gold:       linear-gradient(135deg, hsl(36, 80%, 50%), hsl(40, 85%, 65%));
	--tp-grad-mystic:     linear-gradient(135deg, hsl(280, 60%, 45%), hsl(240, 20%, 8%));
	--tp-grad-dark:       linear-gradient(180deg, hsl(240, 15%, 5%), hsl(240, 20%, 8%));

	/* Shadows */
	--tp-shadow-gold:     0 0 40px -10px hsl(43, 74%, 49%, 0.4);
	--tp-shadow-mystic:   0 0 60px -15px hsl(280, 60%, 45%, 0.3);

	/* Typography */
	--tp-font-display:    'Cinzel', serif;
	--tp-font-body:       'Raleway', sans-serif;

	/* Layout */
	--tp-content-width:   1280px;
	--tp-wide-width:      1400px;
	--tp-radius:          0.5rem;

	/* Transitions */
	--tp-transition:      0.3s ease;
}

/* =========================================================
   2. Reset / Base
   ========================================================= */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--tp-bg);
	color: var(--tp-fg);
	font-family: var(--tp-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tp-font-display);
	line-height: 1.2;
	margin-top: 0;
}

a {
	color: var(--tp-gold);
	text-decoration: none;
	transition: color var(--tp-transition);
}

a:hover {
	color: var(--tp-gold-light);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* =========================================================
   3. Keyframes
   ========================================================= */

/* Fog / mist */
@keyframes fog-drift {
	0%   { transform: translateX(-10%) translateY(0);    opacity: 0.3; }
	50%  { transform: translateX(5%)   translateY(-5px); opacity: 0.15; }
	100% { transform: translateX(-10%) translateY(0);    opacity: 0.3; }
}

@keyframes pulse-glow {
	0%, 100% { opacity: 0.4; }
	50%       { opacity: 0.8; }
}

/* TV static */
@keyframes tv-static {
	0%   { background-position: 0    0;    }
	10%  { background-position: -5%  -10%; }
	20%  { background-position: -15% 5%;   }
	30%  { background-position: 7%   -25%; }
	40%  { background-position: -5%  25%;  }
	50%  { background-position: -15% 10%;  }
	60%  { background-position: 15%  0%;   }
	70%  { background-position: 0%   15%;  }
	80%  { background-position: 3%   35%;  }
	90%  { background-position: -10% 10%;  }
	100% { background-position: 0    0;    }
}

@keyframes glitch-skew {
	0%   { transform: skew(0deg);  }
	2%   { transform: skew(2deg);  }
	4%   { transform: skew(0deg);  }
	40%  { transform: skew(0deg);  }
	42%  { transform: skew(-1deg); }
	44%  { transform: skew(0deg);  }
	100% { transform: skew(0deg);  }
}

@keyframes scanline {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(100vh); }
}

@keyframes glitch-text {
	0%, 100% { clip-path: inset(0 0 0 0);    transform: translate(0);         }
	5%        { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); }
	10%       { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); }
	15%       { clip-path: inset(0 0 0 0);    transform: translate(0);         }
	50%       { clip-path: inset(0 0 0 0);    transform: translate(0);         }
	52%       { clip-path: inset(40% 0 30% 0); transform: translate(3px, 1px);  }
	54%       { clip-path: inset(0 0 0 0);    transform: translate(0);         }
}

@keyframes flicker {
	0%, 100% { opacity: 1;   }
	3%        { opacity: 0.6; }
	6%        { opacity: 1;   }
	7.5%      { opacity: 0.8; }
	9%        { opacity: 1;   }
	50%       { opacity: 1;   }
	52%       { opacity: 0.7; }
	53%       { opacity: 1;   }
}

@keyframes color-shift {
	0%, 100% { filter: hue-rotate(0deg);                  }
	5%        { filter: hue-rotate(10deg) saturate(1.5);  }
	10%       { filter: hue-rotate(-5deg);                }
	15%       { filter: hue-rotate(0deg);                 }
}

@keyframes vignette-pulse {
	0%, 100% { opacity: 0.6; }
	50%       { opacity: 0.8; }
}

@keyframes tp-slide-up {
	from { opacity: 0; transform: translateY(2rem); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* =========================================================
   4. Animation Utilities
   ========================================================= */
.tp-animate-fog        { animation: fog-drift   12s ease-in-out infinite; }
.tp-animate-pulse-glow { animation: pulse-glow   3s ease-in-out infinite; }

/* Scroll-triggered entrance */
.tp-animate-in {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.tp-animate-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.tp-animate-in--delay-1 { transition-delay: 0.1s; }
.tp-animate-in--delay-2 { transition-delay: 0.2s; }
.tp-animate-in--delay-3 { transition-delay: 0.35s; }
.tp-animate-in--delay-4 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
	.tp-animate-in,
	.tp-animate-in.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tp-animate-fog,
	.tp-animate-pulse-glow,
	.tp-tv-glitch-container {
		animation: none;
	}
}

/* =========================================================
   5. TV / Glitch Effects
   ========================================================= */
.tp-tv-glitch-container {
	animation: flicker 4s linear infinite, color-shift 6s ease-in-out infinite;
}

.tp-tv-scanline {
	position: relative;
}

.tp-tv-scanline::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: hsl(43, 74%, 49%, 0.08);
	animation: scanline 3s linear infinite;
	pointer-events: none;
	z-index: 20;
}

.tp-tv-static {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
	background-size: 256px 256px;
	animation: tv-static 0.5s steps(10) infinite;
}

.tp-tv-lines {
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		hsl(0, 0%, 0%, 0.03) 2px,
		hsl(0, 0%, 0%, 0.03) 4px
	);
}

.tp-tv-vignette {
	background: radial-gradient(ellipse at center, transparent 50%, var(--tp-bg) 100%);
	animation: vignette-pulse 5s ease-in-out infinite;
}

.tp-glitch-text {
	position: relative;
}

.tp-glitch-text::before,
.tp-glitch-text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--tp-bg);
}

.tp-glitch-text::before {
	color: hsl(0, 80%, 50%, 0.7);
	animation: glitch-text 4s infinite linear alternate-reverse;
	z-index: -1;
}

.tp-glitch-text::after {
	color: hsl(200, 80%, 50%, 0.7);
	animation: glitch-text 3s infinite linear alternate;
	animation-delay: 0.1s;
	z-index: -1;
}

/* =========================================================
   6. Typography Utilities
   ========================================================= */
.tp-gold-text {
	color: var(--tp-gold);
}

.tp-text-gradient-gold {
	background: var(--tp-grad-gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.tp-muted-text {
	color: var(--tp-muted);
}

/* =========================================================
   7. Button Utilities
   ========================================================= */
.tp-btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 2rem;
	background: var(--tp-grad-gold);
	color: var(--tp-bg) !important;
	font-family: var(--tp-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: none;
	border-radius: var(--tp-radius);
	cursor: pointer;
	box-shadow: var(--tp-shadow-gold);
	transition: opacity var(--tp-transition), box-shadow var(--tp-transition), transform var(--tp-transition);
}

.tp-btn-gold:hover {
	opacity: 0.9;
	box-shadow: 0 0 50px -8px hsl(43, 74%, 49%, 0.6);
	transform: translateY(-1px);
}

.tp-btn-outline-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 2rem;
	background: transparent;
	color: var(--tp-gold) !important;
	font-family: var(--tp-font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 1px solid var(--tp-gold);
	border-radius: var(--tp-radius);
	cursor: pointer;
	transition: background var(--tp-transition), color var(--tp-transition), transform var(--tp-transition);
}

.tp-btn-outline-gold:hover {
	background: hsl(43, 74%, 49%, 0.1);
	color: var(--tp-gold-light) !important;
	transform: translateY(-1px);
}

/* WP block button overrides */
.wp-block-button .tp-btn-gold,
.wp-block-button .tp-btn-outline-gold {
	border-radius: var(--tp-radius);
}

/* =========================================================
   8. Layout Utilities
   ========================================================= */
.tp-container {
	width: 100%;
	max-width: var(--tp-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

@media (min-width: 768px) {
	.tp-container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.tp-section {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

@media (min-width: 768px) {
	.tp-section {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}
}

/* Inner pages: only clear the fixed navbar (~4.5rem) instead of the
   full section spacing, so content starts closer to the top menu. */
.tp-main.tp-section {
	padding-top: 1rem;
}

@media (min-width: 768px) {
	.tp-main.tp-section {
		padding-top: 3.5rem;
	}
}

/* =========================================================
   9. Card Utility
   ========================================================= */
.tp-card {
	background: var(--tp-card);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
}

/* =========================================================
   10. Divider / Separator
   ========================================================= */
.tp-divider-gold {
	width: 4rem;
	height: 2px;
	background: var(--tp-grad-gold);
	margin: 1rem auto 0;
	border: none;
}