/*
 * The flying photo, the counter's bounce, and the two pieces of markup
 * `assets/counters.js` creates. See includes/counters.php.
 *
 * ⚠️ EVERY RULE HERE MATCHES SOMETHING THAT EXISTS. The child theme has paid four times for
 * "a rule that matches nothing looks exactly like a rule that was never written" (D-158, D-159), so the
 * three generated classes are listed here together with who creates them:
 *
 *   .irkn-fly                     the flying copy of the photo (JS)
 *   .irkn-hdr__pill.is-bumped     the counter while it ticks up (JS adds, removes itself)
 *   .irkn-hdr__act.is-hit         the ♥ / 🛒 icon while the item lands (JS)
 *   .irkn-wl__added               the heart after an add, on the clone page (JS)
 *   .irkn-added                   "Prekė įdėta į krepšelį." under the product page's button (JS)
 *   .irkn-sr                      the screen-reader announcement (JS)
 *   .irkn-btn.is-loading          a card button while its request is in flight (JS)
 *
 * The tokens come from `.irkn-land` in `assets/landing.css`, with the same fallbacks the rest of the
 * child theme uses, so this file cannot render a default when a token is missing.
 */

/* =====================================================================
   The flight
   ===================================================================== */

.irkn-fly {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.28);
	overflow: hidden;
	display: grid;
	place-items: center;
	will-change: transform, opacity;
}

.irkn-fly img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * What flies when there is no picture to fly. The clone is missing about a third of its media files
 * (D-070), and a sold-out product's card is exactly where a heart still works — so this is a real
 * state, not a fallback nobody will see.
 */
.irkn-fly--glyph {
	border-radius: 999px;
	background: var(--irkn-blue, #203ba6);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

/* =====================================================================
   The counter and the icon
   ===================================================================== */

.irkn-hdr__pill.is-bumped {
	animation: irkn-pill-bump 0.5s ease;
}

@keyframes irkn-pill-bump {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.45);
	}
	100% {
		transform: scale(1);
	}
}

/*
 * A ring that expands out of the icon and fades. `box-shadow` rather than `transform`, because the
 * circle is already a rounded pill and scaling it would nudge the whole header row.
 */
.irkn-hdr__act.is-hit {
	animation: irkn-act-hit 0.7s ease;
}

@keyframes irkn-act-hit {
	0% {
		box-shadow: 0 0 0 0 rgba(32, 59, 166, 0.45);
	}
	70% {
		box-shadow: 0 0 0 9px rgba(32, 59, 166, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(32, 59, 166, 0);
	}
}

/*
 * ⚠️ THE VISITOR'S OWN SETTING WINS. `counters.js` already skips the flight, but the two animations
 * above are CSS and would still run on a machine that asks for less motion.
 */
@media (prefers-reduced-motion: reduce) {
	.irkn-hdr__pill.is-bumped,
	.irkn-hdr__act.is-hit {
		animation: none;
	}
}

/* =====================================================================
   The card button while its request is in flight
   ===================================================================== */

.irkn-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* After the add it becomes the way to the cart: same button, quiet second state. */
.irkn-btn.is-added {
	border-color: var(--irkn-blue, #203ba6);
	color: var(--irkn-blue, #203ba6);
}

/* =====================================================================
   The heart after an add (created by JS, so not styled by wishlist.css)
   ===================================================================== */

.irkn-wl__added {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	min-height: 44px;
}

.irkn-wl__added .irkn-wl__feedback {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--irkn-blue, #203ba6);
	font-size: 14px;
	font-weight: 700;
}

.irkn-wl__added .irkn-wl__browse {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--irkn-ink2, #43506a);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: underline;
}

.irkn-wl__added .irkn-wl__browse:hover {
	color: var(--irkn-blue, #203ba6);
}

/* =====================================================================
   "Prekė įdėta į krepšelį." under the product page's button
   ===================================================================== */

.irkn-added {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--irkn-ink2, #43506a);
}

.irkn-added a {
	color: var(--irkn-blue, #203ba6);
	font-weight: 700;
	text-decoration: underline;
}

/* One quiet fade so a second add is noticed rather than looking like nothing happened. */
.irkn-added.is-new {
	animation: irkn-added-in 0.45s ease;
}

@keyframes irkn-added-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =====================================================================
   Screen-reader only
   ===================================================================== */

.irkn-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}