/*
 * "Fly Fighter-Z" — a single decorative fighter-jet silhouette that does an
 * occasional straight horizontal flyby across the hero section, in a
 * randomly-chosen direction each pass (assets/js/hero-jet.js drives the
 * randomization/timing and toggles the two keyframes below; this file only
 * owns the visuals). Nose points right in the source SVG — is-facing-left
 * mirrors it via scaleX(-1) for right-to-left passes, since a top-down jet
 * silhouette (unlike the symmetric hero-birds shapes) isn't left/right
 * symmetric enough to skip that.
 */
.hero-jet-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}
.hero-jet {
	position: absolute;
	top: 20%;
	left: 0;
	opacity: 0;
}
.hero-jet__craft {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.hero-jet.is-facing-left .hero-jet__craft {
	transform: scaleX(-1);
}
.hero-jet__body {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * TFA (Thrust Force Animation) — the animated engine-exhaust flame behind
 * Fighter-Z. Positioned at "right: 100%" (flush against the craft's own
 * left edge) because the source art's nose points right by default, so the
 * tail is on the left — a child of .hero-jet__craft flips together with the
 * body when is-facing-left mirrors the craft, so the flame keeps trailing
 * the tail rather than ending up stuck on the nose.
 */
.hero-jet-thrust {
	position: absolute;
	top: 50%;
	right: 100%;
	height: 38%;
	transform: translateY(-50%);
	background: linear-gradient(to left, rgba(255, 226, 130, 0.95), rgba(255, 140, 40, 0.65) 55%, rgba(255, 80, 20, 0) 100%);
	clip-path: polygon(0 15%, 100% 50%, 0 85%);
	transform-origin: right center;
	animation: hero-jet-thrust-flicker 0.18s ease-in-out infinite alternate;
}
@keyframes hero-jet-thrust-flicker {
	0%   { transform: translateY(-50%) scaleX(1); opacity: 1; }
	100% { transform: translateY(-50%) scaleX(0.82); opacity: 0.82; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-jet-thrust { animation: none; }
}

/*
 * No opacity fade during the flight itself — only at 0%/100% (the exact
 * edges), held via animation-fill-mode:forwards until hero-jet.js sets
 * animation:none for the pause between flights, which is what actually
 * reveals/hides it (falling back to the base .hero-jet{opacity:0} rule).
 * A fade partway through used to run identically in both directions, but
 * only looked right for left-to-right: by the time it faded out near
 * left:100%, the box's own width had already carried it past the
 * container's right edge, so overflow:hidden was already clipping it —
 * the fade was invisible cleanup. Right-to-left has no equivalent natural
 * clip near left:0% (the box never goes negative), so that same fade
 * ran while it was still fully on-screen, reading as vanishing early.
 */
@keyframes hero-jet-fly-ltr {
	0%   { left: 0%; opacity: 1; }
	100% { left: 100%; opacity: 1; }
}
@keyframes hero-jet-fly-rtl {
	0%   { left: 100%; opacity: 1; }
	100% { left: calc(0% - 200px); opacity: 1; }
}

.hero-jet-sound-toggle {
	position: absolute;
	bottom: 24px;
	left: 24px;
	z-index: 3;
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-white);
	cursor: pointer;
	transition: background var(--transition-base), transform var(--transition-base);
}
.hero-jet-sound-toggle:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.06); }
.hero-jet-sound-toggle.is-playing { background: var(--color-primary); }
.hero-jet-sound-icon { width: 20px; height: 20px; }
.hero-jet-sound-icon--on { display: none; }
.hero-jet-sound-toggle.is-playing .hero-jet-sound-icon--off { display: none; }
.hero-jet-sound-toggle.is-playing .hero-jet-sound-icon--on { display: block; }

@media (prefers-reduced-motion: reduce) {
	.hero-jet-layer { display: none; }
}
@media (max-width: 640px) {
	.hero-jet-layer { display: none; }
}