/*
 * Hanse Studio · Phase K Stripe-tier base styles
 *
 * Loaded AFTER tokens-stripe.css + style.css. Overrides:
 *   - body background with gradient mesh + mouse-tracked glow
 *   - typography variable settings (Fraunces opsz + SOFT + wght axes)
 *   - floating orbs decoration (2 pseudo-elements w drift animation)
 *   - reusable Stripe-signature primitives (.hs-stripe-card, .hs-stripe-cta, .hs-stripe-divider, .hs-stripe-nav)
 *   - reduced-motion guard
 *
 * Sections-stripe.css overrides per-section legacy classes during K3.x rebuild.
 *
 * @package HanseStudio · Phase K · 2026-05-13
 */

/* ============================================================================
 * Body — gradient mesh background overrides legacy
 * ========================================================================== */

body.hs-body {
	background:
		radial-gradient(
			600px circle at var(--hs-mouse-x) var(--hs-mouse-y),
			var(--hs-gold-veil) 0%,
			transparent 60%
		),
		var(--hs-gradient-mesh);
	background-attachment: fixed;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	font-family: var(--hs-font-body);
	color: var(--hs-ink-white);
	line-height: 1.6;
	transition: background-image var(--hs-duration-fast) var(--hs-ease-out);
}

/* ============================================================================
 * Floating gradient orbs — decorative bg, low-z behind everything.
 * 2 orbs drift on independent timing (12s + 14.4s) for parallax depth.
 * NOTE: existing hs-noise + hs-progress overlay z-indexes are 8000 + 9100.
 * Orbs sit at z-index 0 (behind .hs-body content z-1+).
 * ========================================================================== */

body.hs-body > .hs-orb {
	position: fixed;
	pointer-events: none;
	z-index: 0;
	border-radius: 50%;
	filter: blur(80px);
	mix-blend-mode: screen;
	opacity: 0.6;
	will-change: transform;
}

body.hs-body > .hs-orb--a {
	top: 8%;
	right: 12%;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, var(--hs-gold-soft) 0%, transparent 70%);
	animation: hs-orb-drift-a var(--hs-duration-orb) ease-in-out infinite alternate;
}

body.hs-body > .hs-orb--b {
	bottom: 12%;
	left: 8%;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(26, 45, 82, 0.5) 0%, transparent 70%);
	animation: hs-orb-drift-b calc(var(--hs-duration-orb) * 1.2) ease-in-out infinite alternate;
}

@keyframes hs-orb-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-80px, 60px, 0) scale(1.08); }
}

@keyframes hs-orb-drift-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(120px, -80px, 0) scale(0.94); }
}

/* ============================================================================
 * Typography — Stripe-tier Fraunces variable axes
 * NOTE: applies only to elements w .hs-display / .hs-h1 / .hs-h2 / .hs-h3
 * or section-scoped headings. Legacy h1/h2/h3 untouched until K3.x rewrites
 * each section to use new classes.
 * ========================================================================== */

.hs-body .hs-display,
.hs-body .hs-h1,
.hs-body .hs-h2,
.hs-body .hs-h3 {
	font-family: var(--hs-font-display);
	font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 500;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--hs-ink-white);
}

.hs-body .hs-display,
.hs-body .hs-h1 {
	font-size: clamp(2.5rem, 6vw, 5rem);
	letter-spacing: -0.035em;
}

.hs-body .hs-h2 {
	font-size: clamp(2rem, 4vw, 3.5rem);
}

.hs-body .hs-h3 {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}

/* ============================================================================
 * Gradient text-clip on accent words (used in K3.1 hero "zarabiają")
 * Animated 8s shift to add cinematic gold movement.
 * ========================================================================== */

.hs-body .hs-gradient-accent,
.hs-body .hs-accent-word {
	background: var(--hs-text-gradient);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-style: italic;
	font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 500;
	animation: hs-text-gradient-shift var(--hs-duration-glow) ease-in-out infinite;
}

@keyframes hs-text-gradient-shift {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* ============================================================================
 * Mono eyebrow (used widely in K3 sections — § eyebrow headers)
 * Reuses existing .hs-eyebrow if Maciej had one; new .hs-stripe-eyebrow
 * for explicit Stripe-tier opt-in.
 * ========================================================================== */

.hs-body .hs-stripe-eyebrow,
.hs-body .hs-mono-caps {
	font-family: var(--hs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--hs-gold);
}

/* ============================================================================
 * Stripe-signature glass card primitive
 * Used by services, portfolio tiles, testimonial, FAQ, etc.
 * ========================================================================== */

.hs-stripe-card {
	background: var(--hs-card-bg);
	border: 1px solid var(--hs-border-subtle);
	border-radius: 12px;
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
	transition:
		background var(--hs-duration-fast) var(--hs-ease-out),
		border-color var(--hs-duration-fast) var(--hs-ease-out),
		transform var(--hs-duration-base) var(--hs-ease-out),
		box-shadow var(--hs-duration-base) var(--hs-ease-out);
}

.hs-stripe-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--hs-card-border-gradient);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--hs-duration-fast) var(--hs-ease-out);
	pointer-events: none;
}

.hs-stripe-card:hover,
.hs-stripe-card:focus-within {
	background: var(--hs-card-bg-hover);
	border-color: var(--hs-border-bright);
	transform: translateY(-2px);
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.2),
		0 0 0 1px var(--hs-gold-veil);
}

.hs-stripe-card:hover::before,
.hs-stripe-card:focus-within::before {
	opacity: 1;
}

/* ============================================================================
 * Stripe-signature gold CTA gradient button
 * ========================================================================== */

.hs-stripe-cta,
a.hs-stripe-cta,
button.hs-stripe-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1.625rem;
	background: var(--hs-cta-gradient);
	color: var(--hs-bg-navy);
	font-family: var(--hs-font-body);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
	border-radius: 8px;
	border: 1px solid var(--hs-gold-rich);
	box-shadow:
		0 4px 24px rgba(200, 161, 83, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	cursor: pointer;
	text-decoration: none;
	transition:
		transform var(--hs-duration-fast) var(--hs-ease-out),
		box-shadow var(--hs-duration-fast) var(--hs-ease-out);
}

.hs-stripe-cta:hover,
.hs-stripe-cta:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		0 8px 32px rgba(200, 161, 83, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
	outline: none;
}

.hs-stripe-cta--ghost {
	background: transparent;
	color: var(--hs-ink-white);
	border-color: var(--hs-border-bright);
	box-shadow: none;
}

.hs-stripe-cta--ghost:hover,
.hs-stripe-cta--ghost:focus-visible {
	background: var(--hs-card-bg);
	border-color: var(--hs-gold);
	box-shadow: 0 0 0 3px var(--hs-gold-veil);
}

/* ============================================================================
 * Stripe-signature section divider hairline
 * ========================================================================== */

.hs-stripe-divider {
	height: 1px;
	background: var(--hs-divider);
	border: 0;
	margin: 0;
	width: 100%;
}

/* ============================================================================
 * Backdrop-blur nav overlay (Stripe-style sticky nav on scroll)
 * Applies via .hs-scrolled class added by main.js IntersectionObserver
 * ========================================================================== */

.hs-nav.hs-scrolled,
.hs-nav.hs-stripe-nav {
	background: rgba(15, 31, 61, 0.72);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border-bottom: 1px solid var(--hs-border-subtle);
}

[data-theme="light"] .hs-nav.hs-scrolled,
[data-theme="light"] .hs-nav.hs-stripe-nav {
	background: rgba(248, 244, 236, 0.84);
	border-bottom-color: var(--hs-border-subtle);
}

/* ============================================================================
 * Reduced motion guard — kill orbs + animations + transitions
 * ========================================================================== */

@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;
	}

	body.hs-body > .hs-orb {
		animation: none !important;
		transform: none !important;
	}

	body.hs-body .hs-gradient-accent,
	body.hs-body .hs-accent-word {
		animation: none !important;
		background-position: 0% 50% !important;
	}
}