/*
 * The atmosphere layers, reproduced from the original at its own values.
 *
 * Every number here was read out of the source rather than judged by eye — the blur radii,
 * the opacities, the durations, the keyframe stops. docs/fidelity.md records where each one
 * came from, so a change made later can be checked against the original instead of against
 * somebody's memory of it. At the default intensity of 100% these render what the original
 * renders; the intensity control scales from there, which is a buyer's choice rather than a
 * reinterpretation of the design.
 *
 * WHY THESE ARE REAL ELEMENTS AND NOT ::before/::after
 *
 * Elementor's containers already own ::before — `.e-con::before` carries its Background
 * Overlay, setting `content: var(--background-overlay)`, and its stylesheet loads after
 * this one. A layer put there is not merely overridden, it is never generated. Raising
 * specificity would win the fight and lose the war: the buyer's own Background Overlay
 * would stop working on any element carrying an effect.
 *
 * So the decorative layers are real elements, inserted by assets/js/effects.js. The scrim
 * is the exception and stays in CSS on ::after, because it is not decoration — it is what
 * keeps a headline readable over a bright photograph, and it has to survive a visitor whose
 * JavaScript never arrives.
 */

.hedera-fx {
	/*
	 * A stacking context of its own, so a layer at z-index -1 sits behind the content and
	 * Elementor's Background Overlay but in front of the element's own background — rather
	 * than behind the page.
	 */
	isolation: isolate;
	position: relative;
	--hedera-effect-intensity: 1;
}

/*
 * Content sits above the layers. The stack itself is excluded, or it would rise with it;
 * so is the parallax photograph, which has to stay under the overlay (see below).
 */
.hedera-fx > *:not(.hedera-fx__layers):not(.hedera-fx__parallax) {
	position: relative;
	z-index: 1;
}

.hedera-fx__layers {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.hedera-fx__layers > * {
	position: absolute;
}

/* ── Cinematic scrim ─────────────────────────────────────────────────────────
 * Source: two stacked overlays on every page header —
 *   bg-gradient-to-b from-[#04170f]/80 via-[#04170f]/40 to-[#04170f]
 *   bg-black/20
 * Tailwind places from/via/to at 0%, 50% and 100%. The second, flat black layer is easy
 * to miss and is what stops a bright image washing the headline out.
 *
 * The original tints this differently per page — forest-950 behind the projects header,
 * forest-800 behind the story one — so the colour is a control. color-mix reproduces
 * Tailwind's alpha suffixes exactly: `#04170f/80` and
 * `color-mix(in srgb, #04170f 80%, transparent)` are the same colour.
 */

.hedera-fx--scrim {
	--hedera-scrim-colour: var(--hedera-forest-950, #04170f);
}

.hedera-fx--scrim::after {
	background:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--hedera-scrim-colour) 80%, transparent) 0%,
			color-mix(in srgb, var(--hedera-scrim-colour) 40%, transparent) 50%,
			var(--hedera-scrim-colour) 100%
		),
		rgba(0, 0, 0, 0.2);
	content: '';
	inset: 0;
	opacity: var(--hedera-effect-intensity);
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/*
 * Direction arrives as a class rather than as a custom property: "radial" is not a value
 * linear-gradient() accepts, and a property carrying it would have produced an invalid
 * rule and no scrim at all — a failure with nothing to see.
 */
.hedera-fx--scrim.hedera-scrim--up::after {
	background:
		linear-gradient(
			to top,
			color-mix(in srgb, var(--hedera-scrim-colour) 80%, transparent) 0%,
			color-mix(in srgb, var(--hedera-scrim-colour) 40%, transparent) 50%,
			var(--hedera-scrim-colour) 100%
		),
		rgba(0, 0, 0, 0.2);
}

.hedera-fx--scrim.hedera-scrim--edges::after {
	background:
		radial-gradient(
			ellipse at center,
			color-mix(in srgb, var(--hedera-scrim-colour) 40%, transparent) 0%,
			var(--hedera-scrim-colour) 100%
		),
		rgba(0, 0, 0, 0.2);
}

/* Source (HizmetlerimizClient.tsx): bg-gradient-to-t from-[#04170f] via-transparent
   to-[#04170f]/30 — solid at the foot, clear through the middle, a third at the top. */
.hedera-fx--scrim.hedera-scrim--floor::after {
	background: linear-gradient(
		to top,
		var(--hedera-scrim-colour) 0%,
		transparent 50%,
		color-mix(in srgb, var(--hedera-scrim-colour) 30%, transparent) 100%
	);
}

/* ── Organic aurora ──────────────────────────────────────────────────────────
 * Source: two blurred circles behind the story section.
 *   top-[-10%] left-[-10%] w-[60%] h-[60%] bg-[#0a3e2c] blur-[120px] opacity-[0.15]
 *     animate-[move-orb_25s_infinite_linear]
 *   bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#aee2c2] blur-[150px] opacity-[0.05]
 *     animate-[move-orb_35s_infinite_linear_reverse]
 * The two differ in every value, which is what stops the pair reading as one shape.
 */

.hedera-fx__aurora-a,
.hedera-fx__aurora-b {
	border-radius: 9999px;
	/* A 120px blur repainted sixty times a second is what makes a page stutter under
	   the wheel; promoted to its own layer it is blurred once and moved. */
	will-change: transform;
}

.hedera-fx__aurora-a {
	animation: hedera-move-orb 25s infinite linear;
	background: var(--hedera-forest-800, #0a3e2c);
	filter: blur(120px);
	height: 60%;
	left: -10%;
	opacity: calc(0.15 * var(--hedera-effect-intensity));
	top: -10%;
	width: 60%;
}

.hedera-fx__aurora-b {
	animation: hedera-move-orb 35s infinite linear reverse;
	background: var(--hedera-sage-200, #aee2c2);
	bottom: -10%;
	filter: blur(150px);
	height: 50%;
	opacity: calc(0.05 * var(--hedera-effect-intensity));
	right: -10%;
	width: 50%;
}

@keyframes hedera-move-orb {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}

	50% {
		transform: translate(10%, 15%) scale(1.2);
	}
}

/* ── Film grain ──────────────────────────────────────────────────────────────
 * Source: an overlay at opacity 0.03 with mix-blend-overlay, holding a noise tile inset
 * by -200% so the drift never exposes an edge, stepped twice a second.
 *
 * The tile is the original's noise.svg inlined as a data URI: same feTurbulence, same
 * baseFrequency of 0.65 and three octaves, one fewer request.
 */

.hedera-fx__grain {
	animation: hedera-noise 1s steps(2) infinite;
	will-change: transform;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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");
	inset: -200%;
	mix-blend-mode: overlay;
	opacity: calc(0.03 * var(--hedera-effect-intensity));
}

@keyframes hedera-noise {
	0%,
	100% {
		transform: translate(0, 0);
	}

	10% {
		transform: translate(-5%, -10%);
	}

	20% {
		transform: translate(-15%, 5%);
	}

	30% {
		transform: translate(7%, -25%);
	}

	40% {
		transform: translate(-5%, 25%);
	}

	50% {
		transform: translate(-15%, 10%);
	}

	60% {
		transform: translate(15%, 0);
	}

	70% {
		transform: translate(0, 15%);
	}

	80% {
		transform: translate(3%, 35%);
	}

	90% {
		transform: translate(-10%, 10%);
	}
}

/* ── Floating pollen ─────────────────────────────────────────────────────────
 * Source: twelve 4px dots in sage, each with its own random position, opacity, blur and
 * animation timing. Built at run time because they are random per mount in the original
 * too — twelve fixed positions would match one screenshot and differ every other time.
 */

.hedera-fx__pollen {
	inset: 0;
}

.hedera-fx__pollen span {
	animation-iteration-count: infinite;
	animation-name: hedera-float;
	animation-timing-function: ease-in-out;
	background: var(--hedera-sage-200, #aee2c2);
	border-radius: 9999px;
	display: block;
	height: 4px;
	position: absolute;
	width: 4px;
}

@keyframes hedera-float {
	0%,
	100% {
		opacity: 0.3;
		transform: translateY(0) translateX(0) scale(1);
	}

	33% {
		opacity: 0.6;
		transform: translateY(-30px) translateX(20px) scale(1.1);
	}

	66% {
		opacity: 0.4;
		transform: translateY(-15px) translateX(-20px) scale(0.9);
	}
}

/* ── Background parallax ─────────────────────────────────────────────────────
 * Source: the page headers move their background image down 150px over the first 500px of
 * scroll and fade it to 0.4 over the first 300, with the image itself at scale-110 so the
 * movement never uncovers an edge. Both are driven by the page's scroll position rather
 * than the element's, so a header behaves the same wherever it sits.
 *
 * The host's own background is hidden and redrawn on this layer, because the host cannot
 * be transformed without taking its content along.
 */

.hedera-fx--parallax {
	--hedera-parallax-y: 0px;
	--hedera-parallax-opacity: 1;
}

.hedera-fx--parallax.is-parallaxed {
	background-image: none !important;
	overflow: hidden;
}

/*
 * Not in the layer stack with the others: it is the photograph, and it has to sit under
 * Elementor's Background Overlay (the container's ::before, which has no z-index of its
 * own) rather than over it. z-index -1 inside the isolated context puts it there.
 */
.hedera-fx__parallax {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	opacity: var(--hedera-parallax-opacity);
	position: absolute;
	transform: translateY(var(--hedera-parallax-y)) scale(1.1);
	will-change: transform;
	z-index: -1;
}

/* ── Smooth scrolling ────────────────────────────────────────────────────────
 * Elementor's stylesheet asks the browser for its own smooth scrolling (html
 * { scroll-behavior: smooth }). With the theme's Lenis-style scrolling running, every step
 * it takes would then be animated a second time by the browser, and the page crawls. Lenis
 * ships the same rule for the same reason; the attribute is set only while the script is
 * driving the scroll, so a phone keeps the browser's behaviour.
 */

html[data-hedera-smooth] {
	scroll-behavior: auto !important;
}

/* ── Motion preferences ──────────────────────────────────────────────────────
 * The original does not honour this, which is a fault rather than a feature: a visitor who
 * has asked their operating system to stop moving things is telling every site, not only
 * the ones that thought about it. The layers stay — the design is unchanged — they simply
 * stop moving.
 */

@media (prefers-reduced-motion: reduce) {
	.hedera-fx__aurora-a,
	.hedera-fx__aurora-b,
	.hedera-fx__grain,
	.hedera-fx__pollen span {
		animation: none;
	}

	.hedera-fx__parallax {
		transform: scale(1.1);
	}
}

/* ── The hero's own scrim ────────────────────────────────────────────────────
 * The home page's hero does not use the page-header scrim; it uses two gradients of its
 * own, and the difference is why a headline reads there and washes out under the other.
 *
 *   bg-gradient-to-r from-[#04170f]/95 via-[#0a3e2c]/70 to-transparent
 *   bg-gradient-to-t from-[#04170f]/60 via-transparent to-[#04170f]/30
 *
 * Dark down the left where the words are, clearing to the photograph on the right, with a
 * second pass darkening the foot of the frame and, more lightly, the top.
 */

.hedera-fx--scrim.hedera-scrim--hero::after {
	background:
		linear-gradient(
			to top,
			color-mix(in srgb, var(--hedera-forest-950, #04170f) 60%, transparent) 0%,
			transparent 50%,
			color-mix(in srgb, var(--hedera-forest-950, #04170f) 30%, transparent) 100%
		),
		linear-gradient(
			to right,
			color-mix(in srgb, var(--hedera-forest-950, #04170f) 95%, transparent) 0%,
			color-mix(in srgb, var(--hedera-forest-800, #0a3e2c) 70%, transparent) 50%,
			transparent 100%
		);
}

/* ── Drifting light motes ────────────────────────────────────────────────────
 * Fifteen small lights over the hero, at opacity 0.5 and blended to screen so they add
 * light rather than paint over it. Unlike the pollen these are deterministic in the source
 * — position, size and timing all derive from the index — so they are here too.
 *
 *   width/height: (i % 3) + 2 px      left: (i * 17) % 100 %      top: (i * 23) % 100 %
 *   duration: 18 + (i % 5) * 4 s      delay: -((i * 5) % 10) s
 */

.hedera-fx__motes {
	inset: 0;
	mix-blend-mode: screen;
	opacity: calc(0.5 * var(--hedera-effect-intensity));
}

.hedera-fx__motes span {
	animation-iteration-count: infinite;
	animation-name: hedera-float-pollen;
	animation-timing-function: linear;
	background: linear-gradient(to top right, var(--hedera-sage-200, #aee2c2), #fff);
	border-radius: 9999px;
	display: block;
	filter: blur(1px);
	position: absolute;
}

/* Source: globals.css. The drift is 100px right and 100px up with a quarter turn, fading
   in over the first tenth and out over the last. */
@keyframes hedera-float-pollen {
	0% {
		opacity: 0;
		transform: translate(0, 0) rotate(0deg);
	}

	10% {
		opacity: 0.4;
	}

	90% {
		opacity: 0.4;
	}

	100% {
		opacity: 0;
		transform: translate(100px, -100px) rotate(90deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hedera-fx__motes span {
		animation: none;
	}
}