/*
 * OddFX — Frontend Styles
 * Minimal CSS for CLS prevention and layout transitions.
 */

/*
 * Style containment only — layout containment breaks sticky positioning,
 * flex/grid participation, and some page builder layouts.
 */
[data-oddfx-stabilized],
[data-oddfx-shrinkwrap],
[data-oddfx-balanced],
[data-oddfx-flow] {
	contain: style;
}

/* Smooth height transition during font swap */
.oddfx-stabilized {
	overflow: hidden;
	transition: min-height var(--oddfx-transition, 150ms) ease-out;
}

/* Shrinkwrap container transition */
.oddfx-shrinkwrap {
	transition: max-width var(--oddfx-transition, 150ms) ease-out;
}

/* Balanced headline */
.oddfx-balanced {
	text-wrap: unset; /* Override browser text-wrap: balance if we handle it */
}

/* Flow-around line positioning */
.oddfx-flow-line {
	display: block;
	pointer-events: auto;
}

/* ===== Interactive Effects ===== */

/* Effect container base */
[data-oddfx-effect] {
	position: relative;
	overflow: visible;
}

/* Pending effects (below fold, not yet initialized) — hint browser to skip rendering */
[data-oddfx-effect="pending"] {
	content-visibility: auto;
}

/* Character spans used by all effects */
.oddfx-fx-char {
	display: inline;
	line-height: inherit;
}

/* Space characters: pre-wrap preserves the space but allows word breaks */
.oddfx-fx-space {
	white-space: pre-wrap;
}

/* Chain effect — grab cursor */
.oddfx-chain {
	cursor: grab;
}

.oddfx-chain:active {
	cursor: grabbing;
}

/* Scatter effect — pointer cursor */
.oddfx-scatter {
	cursor: pointer;
}

/* Magnetic effect — default cursor is fine */

/* Wave effect — subtle visual hint */
.oddfx-wave {
	cursor: default;
}

/* ===== Element Effects ===== */

/* Tilt effect */
.oddfx-tilt {
	transform-style: preserve-3d;
}

/* Magnetic pull — subtle hover indication */
.oddfx-magnet-pull {
	cursor: pointer;
}

/* Parallax hover container */
.oddfx-parallax {
	overflow: hidden;
}

/* Scroll reveal — hidden by default until JS initializes */
.oddfx-reveal {
	will-change: opacity, transform;
}

/* Elastic drag */
.oddfx-elastic {
	cursor: grab;
}

.oddfx-elastic:active {
	cursor: grabbing;
}

/* Pixel shatter */
.oddfx-shatter {
	cursor: pointer;
}

/* Float / bob */
.oddfx-float {
	will-change: transform;
}

/* ===== CSS-Only Visual Effects ===== */

/* Animated gradient text */
.oddfx-gradient-text {
	background: linear-gradient(
		90deg,
		var(--oddfx-gradient-1, #667eea),
		var(--oddfx-gradient-2, #764ba2),
		var(--oddfx-gradient-3, #f093fb),
		var(--oddfx-gradient-1, #667eea)
	);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: oddfx-gradient-shift var(--oddfx-gradient-speed, 6s) ease-in-out infinite;
}

@keyframes oddfx-gradient-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Animated gradient background */
.oddfx-gradient-bg {
	background: linear-gradient(
		var(--oddfx-gradient-angle, 135deg),
		var(--oddfx-gradient-1, #667eea),
		var(--oddfx-gradient-2, #764ba2),
		var(--oddfx-gradient-3, #f093fb),
		var(--oddfx-gradient-1, #667eea)
	);
	background-size: 400% 400%;
	animation: oddfx-bg-shift var(--oddfx-gradient-speed, 8s) ease infinite;
}

@keyframes oddfx-bg-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Noise / grain overlay */
.oddfx-noise {
	position: relative;
}

.oddfx-noise::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--oddfx-noise-opacity, 0.05);
	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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 256px 256px;
	z-index: 1;
	border-radius: inherit;
}

/* Hover shine sweep */
.oddfx-shine {
	position: relative;
	overflow: hidden;
}

.oddfx-shine::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(255, 255, 255, 0.3) 45%,
		rgba(255, 255, 255, 0.1) 50%,
		transparent 55%
	);
	transform: translateX(-100%);
	z-index: 1;
	pointer-events: none;
}

.oddfx-shine:hover::before {
	transform: translateX(100%);
	transition: transform 0.6s ease;
}

/* Marquee / infinite ticker */
.oddfx-marquee {
	overflow: hidden;
	white-space: nowrap;
}

.oddfx-marquee-track {
	display: inline-flex;
	gap: var(--oddfx-marquee-gap, 2rem);
	animation: oddfx-marquee-scroll var(--oddfx-marquee-speed, 20s) linear infinite;
}

.oddfx-marquee:hover .oddfx-marquee-track {
	animation-play-state: paused;
}

@keyframes oddfx-marquee-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ===== Enhancement Features ===== */

/* Typewriter blinking cursor */
.oddfx-typewriter-active::after {
	content: '|';
	animation: oddfx-blink 0.7s step-end infinite;
	font-weight: 100;
	margin-left: 1px;
}

@keyframes oddfx-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* Spotlight container */
.oddfx-spotlight {
	cursor: none;
}