/**
 * Kalemiyle Tanınır — the meteor's own visual system, fully namespaced
 * (meteor-kt-*) and independent from the turtle's styling in
 * assets/css/stories.css. Position/motion (transform, opacity) and the
 * hit-area width/height are set at runtime by
 * assets/js/kalemiyle-taninir-meteor.js; everything below is either
 * structural (how the pieces are laid out) or purely visual (glow,
 * stroke weight, color, type) — see that file's CONFIG block for the
 * motion/timing values instead.
 */

/* ── the link IS the hit area, and only ever translates ──
   The visible trail is thin, but this whole box is what's actually
   clickable/tappable, sized by JS from CONFIG.HIT_AREA_WIDTH_PX /
   HIT_AREA_HEIGHT_PX so that tunable value lives in one place.
   Rotation lives on #meteor-kt-heading instead (see below) so this
   element's own motion is pure translation -- see
   kalemiyle-taninir-meteor.js for why that's what makes a crossing
   read as one continuous sweep. */
.meteor-kt-link {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	opacity: 0;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	will-change: transform, opacity;
}

/* Reduced-motion resting state: a fixed, quiet position, always visible
   and reachable, no sweep. Deliberately placed off the turtle's own
   centered resting spot so the two never sit on top of each other.
   Applied by kalemiyle-taninir-meteor.js only when
   prefers-reduced-motion matches; the resting angle lives on the
   heading span below, consistent with rotation always living there. */
.meteor-kt-link.meteor-kt-static {
	top: 23%;
	left: 71%;
	transform: translate(-50%, -50%);
	opacity: 1;
}
.meteor-kt-link.meteor-kt-static .meteor-kt-heading {
	transform: rotate(26deg);
}

/* The rotating wrapper -- set once per crossing in JS (a meteor's angle
   is constant for its whole flight), never animated. A sibling of
   .meteor-kt-title below, not an ancestor of it, which is exactly why
   the title stays upright regardless of the meteor's current angle. */
.meteor-kt-heading {
	display: block;
	width: 100%;
	height: 100%;
}

.meteor-kt-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ── trail visibility — adjust here, not in JS ──
   One stroke, one width, one gradient (see the .php template's
   linearGradient) sharing the glow filter also defined there. This used
   to be two overlapping strokes at two different widths -- that
   mismatch, plus a round cap sitting mid-trail, was the real cause of
   the trail reading as fragmented rather than continuous; a single
   shape can't have an internal seam. Bump stroke-width and/or the
   filter's feGaussianBlur stdDeviation values (in the template)
   together if the trail still needs to read more strongly. */
.meteor-kt-trail {
	stroke-width: 2.3;
}
.meteor-kt-head {
	opacity: 0.95;
}
#meteor-kt-glow-layer {
	mix-blend-mode: screen;
}

/* ── the hover/focus story title ──
   Reuses the Axis Mundi turtle's own .turtle-label recipe as closely
   as appropriate (see assets/css/stories.css): hidden by default,
   faded in on hover/focus, plain italic type, no box/badge/button.
   One deliberate departure from the turtle -- see the .php template's
   docblock for why this element gets no focus-visible outline. */
.meteor-kt-title {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 14px);
	white-space: nowrap;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 0.95rem;
	letter-spacing: 0.09em;
	color: rgba(210, 216, 230, 0.75);
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
}

.meteor-kt-link:hover .meteor-kt-title,
.meteor-kt-link:focus-visible .meteor-kt-title {
	opacity: 1;
}

.meteor-kt-link:focus-visible {
	outline: none;
}

.meteor-kt-link:hover #meteor-kt-glow-layer,
.meteor-kt-link:focus-visible #meteor-kt-glow-layer {
	filter: url(#meteor-kt-glow) brightness(1.35);
}

@media (max-width: 640px) {
	.meteor-kt-link.meteor-kt-static { top: 20%; left: 68%; }
}