/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * Awtsmoos shared micro-interactions — one small motion language for every page.
 * Reusable entrance, feedback, and loading keyframes/classes. Rules of the road:
 *   - transform/opacity only (GPU-cheap), 150–400ms, ease-out curves
 *   - no !important, ever
 *   - colors only via CSS custom-property tokens (fallbacks keep standalone scans honest)
 *   - every interactive target keeps full :hover / :focus-visible / :active states
 *   - non-essential motion is silenced under prefers-reduced-motion
 *
 * Stagger pattern: add class="mi-fade-up" and style="--mi-i:3" — the item
 * animates in with delay = min(--mi-i, 8) * --mi-stagger-step.
 */

/* ================= Motion tokens ================= */
:root {
	--mi-dur-xs: 150ms;
	--mi-dur-sm: 220ms;
	--mi-dur-md: 320ms;
	--mi-dur-lg: 420ms;
	--mi-ease-out: cubic-bezier(.22, .61, .21, 1);
	--mi-ease-spring: cubic-bezier(.34, 1.45, .44, 1);
	--mi-stagger-step: 45ms;
	--mi-ring: var(--aw-focus-ring, #6ea8ff);
	--mi-gold: var(--accent-gold, #d4a94e);
}

/* ================= Keyframes (transform/opacity only) ================= */
@keyframes mi-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes mi-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes mi-pop {
	0% { opacity: 0; transform: scale(.86); }
	60% { opacity: 1; transform: scale(1.04); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes mi-sheet-in {
	from { opacity: 0; transform: translateY(10px) scale(.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mi-page-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes mi-spin {
	to { transform: rotate(360deg); }
}
@keyframes mi-shimmer-sweep {
	from { transform: translateX(-102%); }
	to { transform: translateX(102%); }
}
@keyframes mi-pulse-ring {
	0% { opacity: 0; transform: scale(.94); }
	35% { opacity: .75; }
	100% { opacity: 0; transform: scale(1.08); }
}
@keyframes mi-burst-pop {
	0% { transform: scale(.72); }
	45% { transform: scale(1.22); }
	100% { transform: scale(1); }
}
@keyframes mi-burst-ring {
	from { opacity: .9; transform: scale(.5); }
	to { opacity: 0; transform: scale(1.5); }
}

/* ================= Reusable utilities ================= */

/* Entrance: fade + rise, staggerable via --mi-i */
.mi-fade-up {
	animation: mi-fade-up var(--mi-dur-md) var(--mi-ease-out) both;
	animation-delay: calc(min(var(--mi-i, 0), 8) * var(--mi-stagger-step));
}
.mi-fade-in {
	animation: mi-fade-in var(--mi-dur-md) var(--mi-ease-out) both;
	animation-delay: calc(min(var(--mi-i, 0), 8) * var(--mi-stagger-step));
}
/* Feedback pop (typography controls, toggles) */
.mi-pop {
	animation: mi-pop var(--mi-dur-sm) var(--mi-ease-spring) both;
}
/* Loading shimmer sweep — GPU-cheap translate overlay, no background-position animation */
.mi-shimmer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.mi-shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg,
		transparent 20%,
		color-mix(in srgb, var(--aw-text, #f2f4f8) 32%, transparent) 50%,
		transparent 80%);
	transform: translateX(-102%);
	animation: mi-shimmer-sweep 1.5s var(--mi-ease-out) infinite;
	pointer-events: none;
}
/* Press feedback for icon buttons */
.mi-press {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out);
}
.mi-press:active {
	transform: scale(.94);
}
/* Lift on hover for cards/tiles */
.mi-lift {
	transition: transform var(--mi-dur-sm) var(--mi-ease-out), box-shadow var(--mi-dur-sm) var(--mi-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.mi-lift:hover {
		transform: translateY(-3px);
	}
}
.mi-lift:active {
	transform: translateY(-1px) scale(.99);
}
.mi-lift:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 3px;
}
/* Pulsing ring for the play CTA (decorative ::after, pointer-events none) */
.mi-pulse-ring {
	position: relative;
}
.mi-pulse-ring::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	border: 2px solid var(--mi-gold);
	opacity: 0;
	animation: mi-pulse-ring 2.4s var(--mi-ease-out) infinite;
	pointer-events: none;
}

/* ================= 1. Homepage ================= */
/* Hero entrance: media settles in, copy lines rise one after another on load. */
:where(body[data-geelooy-route="home"]) .shliach-hero-media {
	animation: mi-fade-in var(--mi-dur-lg) var(--mi-ease-out) both;
}
:where(body[data-geelooy-route="home"]) .shliach-hero-content > * {
	animation: mi-fade-up var(--mi-dur-md) var(--mi-ease-out) both;
}
:where(body[data-geelooy-route="home"]) .shliach-hero-content > :nth-child(1) { animation-delay: 70ms; }
:where(body[data-geelooy-route="home"]) .shliach-hero-content > :nth-child(2) { animation-delay: 140ms; }
:where(body[data-geelooy-route="home"]) .shliach-hero-content > :nth-child(3) { animation-delay: 210ms; }
:where(body[data-geelooy-route="home"]) .shliach-hero-content > :nth-child(4) { animation-delay: 280ms; }
:where(body[data-geelooy-route="home"]) .shliach-hero-content > :nth-child(5) { animation-delay: 340ms; }

/* Hero action buttons: lift on hover, press on tap, visible keyboard ring. */
:where(body[data-geelooy-route="home"]) .hero-actions a {
	color: inherit; /* explicit-color law: keep the cascade's chosen ink, change motion only */
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), box-shadow var(--mi-dur-sm) var(--mi-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="home"]) .hero-actions a:hover {
		transform: translateY(-2px);
	}
}
:where(body[data-geelooy-route="home"]) .hero-actions a:active {
	transform: translateY(0) scale(.96);
}
:where(body[data-geelooy-route="home"]) .hero-actions a:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 3px;
}
/* Hero search button micro-interaction (omnibox submit). */
:where(body[data-geelooy-route="home"]) .search-shell .search button,
:where(body[data-geelooy-route="home"]) .search-shell button[type="submit"] {
	color: inherit; /* explicit-color law: motion only, keep the cascade's chosen ink */
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), filter var(--mi-dur-xs) ease;
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="home"]) .search-shell .search button:hover,
	:where(body[data-geelooy-route="home"]) .search-shell button[type="submit"]:hover {
		transform: scale(1.05);
	}
}
:where(body[data-geelooy-route="home"]) .search-shell .search button:active,
:where(body[data-geelooy-route="home"]) .search-shell button[type="submit"]:active {
	transform: scale(.93);
}
:where(body[data-geelooy-route="home"]) .search-shell .search button:focus-visible,
:where(body[data-geelooy-route="home"]) .search-shell button[type="submit"]:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}

/* ================= 2. Search page ================= */
/* Result cards stagger in — --mi-i is set per card by rangeResults.js */
:where(body[data-geelooy-route="search"]) .result.mi-fade-up {
	will-change: transform, opacity;
}
/* Search input focus glow */
:where(body[data-geelooy-route="search"]) .search-input-wrap {
	transition: box-shadow var(--mi-dur-sm) var(--mi-ease-out), border-color var(--mi-dur-sm) ease;
}
:where(body[data-geelooy-route="search"]) .search-input-wrap:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mi-ring) 45%, transparent),
		0 8px 28px color-mix(in srgb, var(--mi-ring) 18%, transparent);
}
/* Loading shimmer sweeps the search bar while the form is busy */
:where(body[data-geelooy-route="search"]) .search-form.searching .search-bar {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
:where(body[data-geelooy-route="search"]) .search-form.searching .search-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: linear-gradient(100deg,
		transparent 25%,
		color-mix(in srgb, var(--mi-ring) 28%, transparent) 50%,
		transparent 75%);
	transform: translateX(-102%);
	animation: mi-shimmer-sweep 1.4s var(--mi-ease-out) infinite;
	pointer-events: none;
}
/* Submit button: spinner while searching (form gets .searching + aria-busy in searchView.js) */
:where(body[data-geelooy-route="search"]) .search-submit {
	position: relative;
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), filter var(--mi-dur-xs) ease;
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="search"]) .search-submit:hover {
		filter: brightness(1.08);
	}
}
:where(body[data-geelooy-route="search"]) .search-submit:active {
	transform: scale(.95);
}
:where(body[data-geelooy-route="search"]) .search-submit:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}
:where(body[data-geelooy-route="search"]) .search-form.searching .search-submit::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-start: .55em;
	vertical-align: -.12em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: mi-spin .7s linear infinite;
}
/* Show-more continuation control */
:where(body[data-geelooy-route="search"]) .library-load-more {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), box-shadow var(--mi-dur-sm) var(--mi-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="search"]) .library-load-more:hover {
		transform: translateY(-2px);
	}
}
:where(body[data-geelooy-route="search"]) .library-load-more:active {
	transform: scale(.97);
}
:where(body[data-geelooy-route="search"]) .library-load-more:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 3px;
}

/* ================= 3. Games catalog ================= */
/* Card hover: lift + gentle tilt. transform-only, GPU-cheap. */
:where(body[data-geelooy-route="games"]) .gameCard {
	transition: transform var(--mi-dur-sm) var(--mi-ease-out), box-shadow var(--mi-dur-sm) var(--mi-ease-out), border-color var(--mi-dur-sm) ease;
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="games"]) .gameCard:hover {
		transform: perspective(900px) rotateX(2deg) translateY(-7px);
		box-shadow: 0 22px 44px rgba(0, 0, 0, .45);
	}
}
:where(body[data-geelooy-route="games"]) .gameCard:active {
	transform: translateY(-2px) scale(.985);
}
:where(body[data-geelooy-route="games"]) .gameCard:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 3px;
}
/* Play-button pulse on the featured CTA */
:where(body[data-geelooy-route="games"]) .primaryCta {
	position: relative;
}
:where(body[data-geelooy-route="games"]) .primaryCta::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: inherit;
	border: 2px solid var(--mi-gold);
	opacity: 0;
	animation: mi-pulse-ring 2.4s var(--mi-ease-out) infinite;
	pointer-events: none;
}
/* Quick-launch tiles: lift + press */
:where(body[data-geelooy-route="games"]) .quickLaunch a {
	color: inherit; /* explicit-color law: motion only, keep the cascade's chosen ink */
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), background-color var(--mi-dur-xs) ease;
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="games"]) .quickLaunch a:hover {
		transform: translateY(-2px);
	}
}
:where(body[data-geelooy-route="games"]) .quickLaunch a:active {
	transform: scale(.97);
}
:where(body[data-geelooy-route="games"]) .quickLaunch a:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}

/* ================= 4. Social feed ================= */
/* Card entrance — feed-river.js adds .mi-fade-up + --mi-i per card */
.feed-card.mi-fade-up {
	will-change: transform, opacity;
}
/* Like-button burst: icon pops, golden ring blooms out (transform/opacity only) */
.feed-action {
	position: relative;
}
.feed-action[data-action="like"].mi-burst img {
	animation: mi-burst-pop var(--mi-dur-md) var(--mi-ease-spring);
}
.feed-action[data-action="like"].mi-burst::after {
	content: "";
	position: absolute;
	inset: 18%;
	border-radius: 50%;
	border: 2px solid var(--mi-gold);
	opacity: 0;
	animation: mi-burst-ring 450ms var(--mi-ease-out) both;
	pointer-events: none;
}
/* Feed mode tabs: already transition; add a decisive press */
.feed-mode-btn:active {
	transform: scale(.94);
}
/* Empty/error CTA lift */
.feed-empty__cta {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), box-shadow var(--mi-dur-sm) var(--mi-ease-out);
}
.feed-empty__cta:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}

/* ================= 5. Reader ================= */
/* Page fade: the reader swaps full documents on navigation, so the load-time
   fade-in IS the page transition (transform/opacity only). */
.post-reader-localized-context #realPost {
	animation: mi-page-fade var(--mi-dur-md) var(--mi-ease-out) both;
}
/* Typography sheet arrival */
.post-reader-localized-context .typography-details:not(.hidden-details) {
	animation: mi-sheet-in var(--mi-dur-sm) var(--mi-ease-out) both;
	transform-origin: top right;
}
/* Typography trigger button: pressed state + visible focus */
.post-reader-localized-context #typographyBtn {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out);
}
.post-reader-localized-context #typographyBtn[aria-expanded="true"] {
	transform: scale(.92);
}
.post-reader-localized-context #typographyBtn:active {
	transform: scale(.88);
}
.post-reader-localized-context #typographyBtn:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}
/* Font steppers: press + the Aa readout pops on every change (JS adds .mi-pop) */
.post-reader-localized-context .font-adjust-btn {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.post-reader-localized-context .font-adjust-btn:hover {
		transform: scale(1.12);
	}
}
.post-reader-localized-context .font-adjust-btn:active {
	transform: scale(.86);
}
.post-reader-localized-context .font-adjust-btn:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}
.post-reader-localized-context .font-size-display.mi-pop {
	animation: mi-pop var(--mi-dur-sm) var(--mi-ease-spring) both;
}
/* Sheet close + toggles share the same tactile press */
.post-reader-localized-context .scribe-lens-close,
.post-reader-localized-context .awtsmoos-toggle-label {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out);
}
.post-reader-localized-context .scribe-lens-close:active {
	transform: scale(.88) rotate(90deg);
}
.post-reader-localized-context .scribe-lens-close:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}

/* ================= 6. Email ================= */
/* Send button: press feedback, visible focus, and a spinner while aria-busy.
   composeModal.js already toggles aria-busy + disabled during transmit. */
:where(body[data-geelooy-route="mail"]) .compose-action-send {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), filter var(--mi-dur-xs) ease;
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="mail"]) .compose-action-send:hover:not(:disabled) {
		filter: brightness(1.07);
	}
}
:where(body[data-geelooy-route="mail"]) .compose-action-send:active:not(:disabled) {
	transform: scale(.95);
}
:where(body[data-geelooy-route="mail"]) .compose-action-send:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}
:where(body[data-geelooy-route="mail"]) .compose-action-send[aria-busy="true"]::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-start: .55em;
	vertical-align: -.12em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: mi-spin .7s linear infinite;
}
/* Compose FAB: hover lift + press */
:where(body[data-geelooy-route="mail"]) .fab-compose {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out), box-shadow var(--mi-dur-sm) var(--mi-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	:where(body[data-geelooy-route="mail"]) .fab-compose:hover {
		transform: translateY(-2px) scale(1.04);
	}
}
:where(body[data-geelooy-route="mail"]) .fab-compose:active {
	transform: scale(.93);
}
:where(body[data-geelooy-route="mail"]) .fab-compose:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 3px;
}
/* Cancel / secondary compose actions share the press */
:where(body[data-geelooy-route="mail"]) .compose-action-cancel {
	transition: transform var(--mi-dur-xs) var(--mi-ease-out);
}
:where(body[data-geelooy-route="mail"]) .compose-action-cancel:active {
	transform: scale(.95);
}
:where(body[data-geelooy-route="mail"]) .compose-action-cancel:focus-visible {
	outline: 2px solid var(--mi-ring);
	outline-offset: 2px;
}

/* ================= Reduced motion =================
   Non-essential motion is silenced: entrances render in their final state,
   hover lifts and pulses stop, spinners/shimmers freeze. */
@media (prefers-reduced-motion: reduce) {
	.mi-fade-up,
	.mi-fade-in,
	.mi-pop,
	.mi-shimmer::after,
	.mi-pulse-ring::after,
	.feed-action[data-action="like"].mi-burst img,
	.feed-action[data-action="like"].mi-burst::after,
	:where(body[data-geelooy-route="home"]) .shliach-hero-media,
	:where(body[data-geelooy-route="home"]) .shliach-hero-content > *,
	:where(body[data-geelooy-route="search"]) .search-form.searching .search-bar::after,
	:where(body[data-geelooy-route="search"]) .search-form.searching .search-submit::after,
	:where(body[data-geelooy-route="games"]) .primaryCta::after,
	.post-reader-localized-context #realPost,
	.post-reader-localized-context .typography-details:not(.hidden-details),
	.post-reader-localized-context .font-size-display.mi-pop,
	:where(body[data-geelooy-route="mail"]) .compose-action-send[aria-busy="true"]::after {
		animation: none;
	}
	.mi-lift,
	.mi-press,
	:where(body[data-geelooy-route="home"]) .hero-actions a,
	:where(body[data-geelooy-route="home"]) .search-shell .search button,
	:where(body[data-geelooy-route="home"]) .search-shell button[type="submit"],
	:where(body[data-geelooy-route="search"]) .search-submit,
	:where(body[data-geelooy-route="search"]) .library-load-more,
	:where(body[data-geelooy-route="games"]) .gameCard,
	:where(body[data-geelooy-route="games"]) .gameCard:hover,
	:where(body[data-geelooy-route="games"]) .gameCard:active,
	:where(body[data-geelooy-route="games"]) .quickLaunch a,
	.post-reader-localized-context #typographyBtn,
	.post-reader-localized-context #typographyBtn[aria-expanded="true"],
	.post-reader-localized-context .font-adjust-btn,
	.post-reader-localized-context .scribe-lens-close,
	:where(body[data-geelooy-route="mail"]) .compose-action-send,
	:where(body[data-geelooy-route="mail"]) .fab-compose,
	:where(body[data-geelooy-route="mail"]) .compose-action-cancel {
		transition: none;
		transform: none;
	}
}