:root {
	--antologa-primary: #078282;
	--antologa-secondary: #004F71;
	/* Deep navy for marketing fills — never remapped in dark (secondary becomes interactive blue). */
	--antologa-brand-navy-fill: #004F71;
	/* Heading/label ink: navy in light, remaps to --dm-text in dark (not interactive blue). */
	--antologa-heading-ink: var(--antologa-secondary);
	--antologa-tertiary: #C45A32;
	/* Alias: Notion/CLAUDE spelling — keep both until consumers converge */
	--antologa-terciary: var(--antologa-tertiary);
	--antologa-contrast: #E1A951;
	--antologa-sand: #C4B6A6;

	/* ── Dark-mode ladder (canonical; homepage --hp-* aliases these) ─────────
	   Cool charcoal immersion. Page void stays deep; paper lifts clearly so
	   cards/sidebars read as elevated surfaces (not flat charcoal). */
	--dm-bg: #080b0e;
	--dm-bg-elevated: #10161b;
	--dm-surface: #1c252c;
	--dm-surface-2: #273038;
	--dm-overlay: rgba(8, 11, 14, 0.78);
	--dm-hero-scrim-top: rgba(8, 11, 14, 0.35);
	--dm-hero-scrim-mid: rgba(8, 11, 14, 0.55);
	--dm-hero-scrim-bottom: rgba(8, 11, 14, 0.92);
	--dm-border: rgba(255, 255, 255, 0.12);
	--dm-border-strong: rgba(255, 255, 255, 0.20);
	--dm-text: #e8eaec;
	--dm-text-muted: rgba(232, 234, 236, 0.66);
	--dm-text-disabled: rgba(232, 234, 236, 0.38);
	--dm-primary-interactive: #1aa8a8;
	--dm-primary-hover: #0ab7b7;
	--dm-contrast-hover: #f0c56a;
	--dm-tertiary-text: #e07a52;
	--dm-navy-interactive: #3a8bb5;
	--dm-success: #4ade80;
	--dm-warning: #f5b942;
	--dm-danger: #ef7355;
	--dm-info: #5bb4e5;
	--dm-focus: color-mix(in srgb, var(--dm-primary-interactive) 45%, transparent);
	--antologa-white: #F8F8F8;
	--antologa-light-gray: #E8E8E8;
	--antologa-gray: #9E9E9E;
	--antologa-dark: #282828;
	--antologa-valid: #26b050;
	--antologa-error: #e50000;

	/* Extended neutral & semantic palette (added June 2026 per CSS Standards) */
	/* Surfaces — light backgrounds */
	--antologa-pure-white:    #ffffff; /* true white, distinct from --antologa-white (#F8F8F8) */
	/* Ink that stays white in dark mode (CTA labels, pin halos, nb--dark chrome). */
	--antologa-ink:           #ffffff;
	/* Card / panel paper — remaps to --dm-surface in dark. Prefer this over
	   --antologa-white for backgrounds (white stays light ink for dark chrome). */
	--antologa-paper:         #ffffff;
	--antologa-surface:       #f5f5f5;
	--antologa-surface-alt:   #f0f0f0;
	--antologa-surface-cool:  #f8fafc;
	--antologa-surface-cool2: #f3f4f6;
	--antologa-surface-cool3: #eef2f6;
	/* Borders / hairlines */
	--antologa-border:        #e5e7eb;
	--antologa-border-warm:   #e0dfd9;
	--antologa-border-2:      #e0e0e0;
	--antologa-border-warm2:  #e6e6e3;
	--antologa-border-cool:   #cbd5e1;
	/* Muted text / icons */
	--antologa-gray-mid:      #505050;
	--antologa-slate-400:     #94a3b8;
	--antologa-warmgray-500:  #9a9a95;
	--antologa-slate-500:     #6b7280;
	--antologa-slate-400b:    #9ca3af;
	--antologa-warmgray-600:  #8a8a85;
	--antologa-warmgray-700:  #7a7a75;
	/* Near-black text */
	--antologa-near-black:    #1a1a1a;
	--antologa-slate-900:     #111827;
	/* Brand-adjacent shades */
	--antologa-primary-dark:  #056666;
	--antologa-contrast-dark: #b07d10;
	/* Semantics */
	--antologa-error-soft:    #ef5350;
	--antologa-danger:        #c62828;
	--antologa-success:       #2e7d32;
	--antologa-warning:       #f57f17;
	/* Status tint backgrounds */
	--antologa-danger-bg:     #ffebee;
	--antologa-success-bg:    #e8f5e9;
	--antologa-info-bg:       #e3f2fd;
	--antologa-info-bg2:      #e0f7fa;
	--antologa-warning-bg:    #fdf4e3;
	--antologa-warning-bg2:   #fff9c4;

	/* Extended neutrals — grays (luminance scale) */
	--antologa-black:         #000000;
	--antologa-gray-800:      #444444;
	--antologa-gray-700:      #555555;
	--antologa-gray-650:      #616161;
	--antologa-gray-600:      #666666;
	--antologa-gray-550:      #717171;
	--antologa-gray-400:      #aaaaaa;
	--antologa-gray-350:      #bdbdbd;
	--antologa-warmgray-400:  #b0b0aa;
	--antologa-slate-300:     #d1d5db;
	--antologa-slate-700:     #374151;
	/* Extended neutrals — off-white surfaces */
	--antologa-surface-50:    #fafafa;
	--antologa-surface-cool0: #f9fafb;
	--antologa-surface-warm:  #f4f5f3;
	--antologa-surface-warm2: #f5f5f3;
	--antologa-surface-warm3: #f0ede8;
	--antologa-surface-warm4: #eeede9;
	--antologa-surface-cool4: #eef1f4;
	--antologa-border-3:      #ebebeb;
	/* Teal tints */
	--antologa-primary-tint:    #d5f0f0;
	--antologa-primary-tint-50: #eef6f6;
	/* Accent colors */
	--antologa-blue-600:      #005a7a;
	--antologa-blue-650:      #006080;
	--antologa-blue-500:      #1565c0;
	--antologa-blue-400:      #3a7abf;
	--antologa-teal-700:      #00796b;
	--antologa-teal-800:      #056b6b;
	--antologa-gold-700:      #9a6c18;
	--antologa-navy-900:      #0b2239;
	--antologa-purple-500:    #7b5ea7;

	/* Map — Wonder type colors (must match WONDER_COLORS in antologa-maps.js and HexColors in WonderTypeExtensions.cs) */
	--map-waterfall:      #0ABCBC;
	--map-river:          #0891B2;
	--map-lake:           #078282;
	--map-trail:          #2E9E58;
	--map-beach:          #D4941A;
	--map-forest:         #1B6B40;
	--map-cave:           #1A5C5C;
	--map-volcano:        #CC2828;
	--map-lagoon:         #00789A;
	--map-canyon:         #C45A32;
	--map-island:         #C49A28;
	--map-marine:         #004F71;
	--map-valley:         #5A7C2A;
	--map-hotsprings:     #B84A20;
	--map-nationalpark:   #187B38;
	--map-reef:           #005F8A;
	--map-wetlands:       #2D9A7A;
	--map-historicalsite: #9B6B2A;
	--map-viewpoint:      #002D45;
	--map-ruins:          #8B4A18;
	--map-museum:         #7A3C1A;
	--map-attraction:     #C4204C;

	/* Map — Listing type colors */
	--map-listing-accommodation: #078282;
	--map-listing-tour:          #C45A32;
	--map-listing-guide:         #004F71;
	--map-listing-restaurant:    #CC3333;
	--map-listing-carrental:     #003A5C;
	--map-listing-transportation:#0891B2;
	--map-listing-spawellness:   #2D7A6A;
	--map-listing-shop:          #C49A28;
	--map-listing-travelpackage: #E1A951;
	--map-listing-event:         #2E9E58;

	/* Map — Difficulty colors */
	--map-diff-easy:     #2E9E58;
	--map-diff-moderate: #D4941A;
	--map-diff-hard:     #C45A32;
	--map-diff-expert:   #CC2828;

	/* Map — Nearby category colors */
	--map-nearby-emergency: #CC2828;
	--map-nearby-tourism:   #078282;
	--map-nearby-transit:   #004F71;

	/* Animation Timing Tiers (per animations-guide.md) */
	--timing-instant: 0.1s;
	--timing-micro: 0.2s;
	--timing-quick: 0.3s;
	--timing-standard: 0.5s;
	--timing-slow: 0.8s;
	--timing-parallax: 20s;

	/* Animation Easing Functions (per animations-guide.md) */
	--ease-standard: ease-in-out;
	--ease-bounce: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	--text-primary: var(--antologa-dark);
	--text-secondary: var(--antologa-gray);
	--text-dark: var(--antologa-dark);
	--text-body: var(--antologa-dark);

	/* ── Typesetting contract (Platform Typesetting Fix) ─────────────────────
	   Inter = display/headings; Nunito = body/UI. Major-third scale (~1.25) from
	   body 1rem. Keep readable floors: captions/eyebrows ≥ 0.75rem; prose measure
	   ~65ch; flush-left for reading. MudTheme Typography mirrors these rem values.
	   Prefer var(--font-*) / var(--fs-*) in feature CSS — no new bare Inter/Nunito. */
	--font-heading: Inter, system-ui, sans-serif;
	--font-body: Nunito, system-ui, sans-serif;

	--fs-overline: 0.75rem;
	--fs-caption: 0.75rem;
	--fs-body2: 0.875rem;
	--fs-button: 0.875rem;
	--fs-body1: 1rem;
	--fs-subtitle2: 1rem;
	--fs-subtitle1: 1.125rem;
	--fs-h6: 1.25rem;
	--fs-h5: 1.5rem;
	--fs-h4: 1.75rem;
	--fs-h3: 2.25rem;
	--fs-h2: 2.75rem;
	--fs-h1: 3.5rem;

	--lh-display: 1.15;
	--lh-heading: 1.25;
	--lh-ui: 1.4;
	--lh-body: 1.55;
	--lh-prose: 1.7;

	--ls-tight: -0.02em;
	--ls-normal: 0;
	--ls-wide: 0.06em;
	--ls-eyebrow: 0.14em;

	--measure-narrow: 45ch;
	--measure-prose: 65ch;
	--measure-wide: 75ch;

	/* ── Breakpoints (MudBlazor-aligned source of truth) ─────────────────────
	   Use these literal px values in @media queries (custom props are not
	   valid inside @media in all browsers). Keep the set short:
	     sm 600  — phone → compact tablet (Mud Sm)
	     md 960  — tablet → mid layout (Mud Md)
	     lg 1280 — app chrome flip: bottom nav ↔ desktop header (Mud Lg)
	     xl 1440 — optional wide content max-width only
	   QA viewports (375 / 768 / 1280 / 1440) are for visual testing, not new cutoffs.
	   Do not add layout cutoffs at 768, 48rem, 900, or 1024 except while migrating
	   existing rules onto 600 / 960 / 1280. */
	--bp-sm: 600px;
	--bp-md: 960px;
	--bp-lg: 1280px;
	--bp-xl: 1440px;

	/* Page gutter + compact card gap (catalog grids stay 2-up on phone). */
	--page-gutter: 1rem;
	--page-gutter-lg: 1.5rem;
	--card-gap-sm: 0.75rem;

	/* ── Bottom chrome stack (traveler mobile nav + safe area) ───────────────
	   Do NOT set --bottom-nav-height: 0px on :root — that kills var(..., fallback)
	   for consumers (help chat, wonders shell). Set height only when the nav is
	   visible (≤1280 + body:has), and force 0 on desktop (min-width 1281).
	   Listing book bar stacks ABOVE the site nav via --lst-mobile-bar-height. */
	--bottom-nav-safe: env(safe-area-inset-bottom, 0px);
	--lst-mobile-bar-height: 0px;
	--bottom-chrome: calc(var(--bottom-nav-height, 0px) + var(--bottom-nav-safe));
	--bottom-chrome-with-listing: calc(var(--bottom-chrome) + var(--lst-mobile-bar-height));
}

/* ── Dark theme — remap semantic tokens so feature CSS keeps working ────────
   Toggle via html[data-theme="dark"] (early boot JS + ThemeModeState).
   Brand primaries stay; surfaces/text/borders/tints invert. */
html[data-theme="dark"] {
	color-scheme: dark;

	/* Paper / page canvas: void stays --dm-bg; cards lift to --dm-surface.
	   Keep --antologa-ink / --antologa-white as light chrome inks. */
	--antologa-pure-white: var(--dm-surface);
	--antologa-paper: var(--dm-surface);
	--antologa-off-white: var(--dm-bg-elevated);
	--antologa-light-gray: var(--dm-border-strong);
	--antologa-gray: #9e9e9e;
	--antologa-dark: var(--dm-text);
	--antologa-near-black: var(--dm-text);
	--antologa-slate-900: var(--dm-text);
	--antologa-slate-700: rgba(232, 234, 236, 0.82);
	--antologa-slate-500: var(--dm-text-muted);
	--antologa-slate-400: rgba(232, 234, 236, 0.55);
	--antologa-slate-400b: rgba(232, 234, 236, 0.55);
	--antologa-slate-300: var(--dm-border-strong);
	--antologa-gray-mid: rgba(232, 234, 236, 0.72);
	--antologa-gray-800: rgba(232, 234, 236, 0.78);
	--antologa-gray-700: rgba(232, 234, 236, 0.72);
	--antologa-gray-650: rgba(232, 234, 236, 0.68);
	--antologa-gray-600: rgba(232, 234, 236, 0.64);
	--antologa-gray-550: rgba(232, 234, 236, 0.58);
	--antologa-gray-400: rgba(232, 234, 236, 0.50);
	--antologa-gray-350: rgba(232, 234, 236, 0.42);
	--antologa-warmgray-400: rgba(232, 234, 236, 0.50);
	--antologa-warmgray-500: var(--dm-text-muted);
	--antologa-warmgray-600: rgba(232, 234, 236, 0.60);
	--antologa-warmgray-700: rgba(232, 234, 236, 0.72);

	/* Navy as body/heading ink fails on dark paper — lift for readability.
	   Deep navy fills still available via --antologa-navy-900. */
	--antologa-secondary: var(--dm-navy-interactive, #3a8bb5);
	--antologa-heading-ink: var(--dm-text);

	--antologa-surface: var(--dm-bg);
	--antologa-surface-alt: var(--dm-bg-elevated);
	--antologa-surface-cool: var(--dm-bg-elevated);
	--antologa-surface-cool2: var(--dm-surface);
	--antologa-surface-cool3: var(--dm-surface-2);
	--antologa-surface-cool4: var(--dm-surface-2);
	--antologa-surface-50: var(--dm-bg-elevated);
	--antologa-surface-cool0: var(--dm-bg-elevated);
	/* Page canvases (tour-guides, explore shells) — must stay void, not paper */
	--antologa-surface-warm: var(--dm-bg);
	--antologa-surface-warm2: var(--dm-bg-elevated);
	--antologa-surface-warm3: var(--dm-surface);
	--antologa-surface-warm4: var(--dm-surface-2);

	--antologa-border: var(--dm-border);
	--antologa-border-2: var(--dm-border);
	--antologa-border-3: var(--dm-border);
	--antologa-border-warm: var(--dm-border);
	--antologa-border-warm2: var(--dm-border);
	--antologa-border-cool: var(--dm-border-strong);

	--antologa-primary-tint: color-mix(in srgb, var(--antologa-primary) 22%, var(--dm-surface));
	--antologa-primary-tint-50: color-mix(in srgb, var(--antologa-primary) 14%, var(--dm-surface));
	--antologa-primary-dark: var(--dm-primary-interactive);

	--antologa-danger-bg: color-mix(in srgb, var(--dm-danger) 16%, var(--dm-surface));
	--antologa-success-bg: color-mix(in srgb, var(--dm-success) 16%, var(--dm-surface));
	--antologa-info-bg: color-mix(in srgb, var(--dm-info) 16%, var(--dm-surface));
	--antologa-info-bg2: color-mix(in srgb, var(--antologa-primary) 14%, var(--dm-surface));
	--antologa-warning-bg: color-mix(in srgb, var(--dm-warning) 16%, var(--dm-surface));
	--antologa-warning-bg2: color-mix(in srgb, var(--antologa-contrast) 14%, var(--dm-surface));

	--antologa-error-soft: var(--dm-danger);
	--antologa-danger: var(--dm-danger);
	--antologa-success: var(--dm-success);
	--antologa-warning: var(--dm-warning);
	--antologa-valid: var(--dm-success);
	--antologa-error: var(--dm-danger);
	--antologa-gold-700: var(--dm-contrast-hover);
	--antologa-contrast-dark: var(--dm-contrast-hover);

	--text-primary: var(--dm-text);
	--text-secondary: var(--dm-text-muted);
	--text-dark: var(--dm-text);
	--text-body: var(--dm-text);
}

html[data-theme="dark"] body {
	background-color: var(--dm-bg);
	color: var(--dm-text);
}

/* Pages that used --antologa-white as page paper (not as light ink) */
html[data-theme="dark"] .dashboard-page-container,
html[data-theme="dark"] .dashboard-sidebar,
html[data-theme="dark"] .login-full-page-container {
	background: var(--dm-bg) !important;
}

html[data-theme="dark"] .dashboard-sidebar {
	border-right-color: var(--dm-border) !important;
}

html[data-theme="dark"] .dashboard-sidebar-logo-divider {
	background: var(--dm-border) !important;
}

/* Mud surfaces that hard-code light paper when theme class is present */
html[data-theme="dark"] .mud-theme-dark,
html[data-theme="dark"] .mud-palette-dark {
	--mud-palette-black: #0e1316;
	--mud-palette-background: var(--dm-bg);
	--mud-palette-surface: var(--dm-surface);
	--mud-palette-drawer-background: var(--dm-bg-elevated);
	--mud-palette-appbar-background: var(--dm-bg-elevated);
}

/* Soften common light-only mixes when dark is active */
html[data-theme="dark"] .mud-paper:not(.mud-transparent),
html[data-theme="dark"] .mud-card,
html[data-theme="dark"] .mud-dialog,
html[data-theme="dark"] .mud-dialog-content,
html[data-theme="dark"] .mud-popover,
html[data-theme="dark"] .mud-list,
html[data-theme="dark"] .mud-menu,
html[data-theme="dark"] .mud-drawer,
html[data-theme="dark"] .mud-expansion-panels,
html[data-theme="dark"] .mud-expansion-panel,
html[data-theme="dark"] .mud-tabs-panels,
html[data-theme="dark"] .mud-table-container,
html[data-theme="dark"] .mud-table {
	background-color: var(--dm-surface);
	color: var(--dm-text);
	border-color: var(--dm-border);
	box-shadow: 0 1px 0 var(--dm-border), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Dialog close X — ActionDefault is too faint on light and dark surfaces (BUG-004). */
.mud-dialog .mud-dialog-title .mud-button-root,
.mud-dialog .mud-dialog-title .mud-icon-button {
	color: var(--antologa-near-black, #1a1a1a) !important;
	opacity: 1 !important;
}

html[data-theme="dark"] .mud-dialog .mud-dialog-title .mud-button-root,
html[data-theme="dark"] .mud-dialog .mud-dialog-title .mud-icon-button {
	color: var(--dm-text) !important;
}

/* Lift branded paper cards off the void canvas */
html[data-theme="dark"] .tg-card,
html[data-theme="dark"] .lc-card,
html[data-theme="dark"] .tdc-card,
html[data-theme="dark"] .exp-card,
html[data-theme="dark"] .exp-sort-group,
html[data-theme="dark"] .exp-skeleton,
html[data-theme="dark"] .partners-pillar-card,
html[data-theme="dark"] .partners-plan-card,
html[data-theme="dark"] .press-angle-card,
html[data-theme="dark"] .press-contact-card {
	background-color: var(--dm-surface);
	border-color: var(--dm-border-strong);
	box-shadow: 0 1px 0 var(--dm-border), 0 10px 28px rgba(0, 0, 0, 0.40);
}

/* Explore chrome panels match navbar void; listing cards stay --dm-surface */
html[data-theme="dark"] .fs-inner,
html[data-theme="dark"] .exp-ad__card {
	background-color: var(--dm-bg);
	border-color: var(--dm-border);
	box-shadow: none;
}

/* Immersion hero scrims — charcoal void instead of light-mode navy/teal washes */
html[data-theme="dark"] .exp-hero__scrim,
html[data-theme="dark"] .sr-hero__scrim {
	background: linear-gradient(
		to bottom,
		var(--dm-hero-scrim-top) 0%,
		var(--dm-hero-scrim-mid) 48%,
		var(--dm-hero-scrim-bottom) 100%
	);
}

html[data-theme="dark"] .home-hero__scrim {
	background: linear-gradient(
		180deg,
		rgba(8, 11, 14, 0.58) 0%,
		rgba(8, 11, 14, 0.32) 38%,
		rgba(8, 11, 14, 0.90) 100%
	);
}

html[data-theme="dark"] .tg-hero {
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--dm-bg) 78%, var(--antologa-secondary)) 0%,
			color-mix(in srgb, var(--dm-bg) 55%, var(--antologa-primary)) 55%,
			color-mix(in srgb, var(--dm-bg) 82%, transparent) 100%
		),
		url("/img/pictures/hero03.jpg") center / cover no-repeat;
}

html[data-theme="dark"] .tg-hero__title {
	color: var(--dm-text);
}

html[data-theme="dark"] .pp-hero__scrim,
html[data-theme="dark"] .post-hero--immersive .post-hero__scrim,
html[data-theme="dark"] .lpm-hero__scrim,
html[data-theme="dark"] .bpp-hero--immersive .bpp-hero__scrim,
html[data-theme="dark"] .shop-hero__scrim,
html[data-theme="dark"] .ltm-hero__scrim,
html[data-theme="dark"] .ltm--gastro .ltm-hero__scrim,
html[data-theme="dark"] .ltm--spa .ltm-hero__scrim {
	background: linear-gradient(
		to bottom,
		var(--dm-hero-scrim-top),
		var(--dm-hero-scrim-bottom)
	);
}

html[data-theme="dark"] .shop-featured__scrim {
	background: linear-gradient(
		to top,
		var(--dm-hero-scrim-bottom) 0%,
		var(--dm-hero-scrim-mid) 55%,
		transparent 100%
	);
}

/* Marketing navy bands — stay brand navy in light; charcoal immersion in dark */
html[data-theme="dark"] .partners-hero,
html[data-theme="dark"] .partners-cta-section,
html[data-theme="dark"] .biz-hero,
html[data-theme="dark"] .biz-cta-section,
html[data-theme="dark"] .agency-hero,
html[data-theme="dark"] .agency-cta-section,
html[data-theme="dark"] .guide-hero,
html[data-theme="dark"] .guide-cta-section,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .about-serve-section,
html[data-theme="dark"] .about-cta-section,
html[data-theme="dark"] .press-hero,
html[data-theme="dark"] .press-kit-section,
html[data-theme="dark"] .careers-looking-section,
html[data-theme="dark"] .help-hero {
	background: var(--dm-bg) !important;
}

html[data-theme="dark"] .partners-types-section,
html[data-theme="dark"] .biz-tools-section,
html[data-theme="dark"] .agency-tools-section,
html[data-theme="dark"] .guide-tools-section {
	background: linear-gradient(160deg, var(--dm-bg) 0%, var(--dm-bg-elevated) 100%) !important;
}

/* Auth frosted frames — surface glass instead of light gray wash */
html[data-theme="dark"] .login-white-frame,
html[data-theme="dark"] .fp-white-frame,
html[data-theme="dark"] .pa-white-frame {
	background-color: color-mix(in srgb, var(--dm-surface) 72%, transparent) !important;
	border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .about-hero-overlay {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--dm-bg) 82%, var(--antologa-secondary)) 0%,
		color-mix(in srgb, var(--dm-bg) 58%, var(--antologa-primary)) 55%,
		color-mix(in srgb, var(--dm-bg) 88%, transparent) 100%
	);
}

html[data-theme="dark"] .login-split-panel--business .login-split-panel__scrim,
html[data-theme="dark"] .login-split-panel--admin .login-split-panel__scrim {
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--dm-bg) 80%, transparent),
		color-mix(in srgb, var(--dm-bg) 62%, transparent)
	);
}

/* Search/explore hero pill — lift above charcoal scrim */
html[data-theme="dark"] .sb-pill {
	background: var(--dm-surface-2);
	border-color: var(--dm-border-strong);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* Search field ink on dark strip / pill (BUG-008) */
html[data-theme="dark"] .sb-section__label,
html[data-theme="dark"] .sb-section__placeholder,
html[data-theme="dark"] .sb-section__value,
html[data-theme="dark"] .sb-location-auto input,
html[data-theme="dark"] .sb-location-auto input::placeholder {
	color: var(--dm-text) !important;
}

html[data-theme="dark"] .sb-location-auto input::placeholder {
	color: var(--dm-text-muted) !important;
}

html[data-theme="dark"] .mud-alert {
	color: var(--dm-text);
}

html[data-theme="dark"] .mud-chip:not(.mud-chip-color-primary):not(.mud-chip-color-secondary):not(.mud-chip-color-error):not(.mud-chip-color-success):not(.mud-chip-color-warning):not(.mud-chip-color-info) {
	background-color: var(--dm-surface-2);
	color: var(--dm-text);
}

html[data-theme="dark"] .mud-input-control .mud-input-outlined-border {
	border-color: var(--dm-border-strong) !important;
}

html[data-theme="dark"] .mud-input.mud-input-outlined,
html[data-theme="dark"] .mud-input-outlined .mud-input-slot,
html[data-theme="dark"] .mud-select.mud-select,
html[data-theme="dark"] .mud-picker .mud-input-control {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

html[data-theme="dark"] .mud-input > input,
html[data-theme="dark"] .mud-input > textarea,
html[data-theme="dark"] .mud-select .mud-select-input,
html[data-theme="dark"] .mud-input-label {
	color: var(--dm-text);
}

html[data-theme="dark"] .mud-navmenu,
html[data-theme="dark"] .mud-nav-link {
	color: var(--dm-text-muted);
}

html[data-theme="dark"] .mud-nav-link.active,
html[data-theme="dark"] .mud-nav-link:hover {
	color: var(--dm-primary-interactive) !important;
}

/* Traveler bottom nav visible below Mud Lg — only when .nb-bottom-nav is in the DOM */
@media (max-width: 1280px) {
	body:has(.nb-bottom-nav) {
		--bottom-nav-height: 5rem;
	}
}

@media (max-width: 600px) {
	body:has(.nb-bottom-nav) {
		--bottom-nav-height: 4.5rem;
	}
}

/* Desktop: nav is hidden — chrome stack must be zero */
@media (min-width: 1281px) {
	:root {
		--bottom-nav-height: 0px;
	}
}

/* Skip-to-main-content link — visually hidden, revealed on keyboard focus */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background: var(--antologa-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus {
    top: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY: Respect motion preferences
   Disable animations for users with vestibular disorders, migraines, or
   motion sensitivity. This reduces animation duration to near-instant
   while preserving layout and functionality.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL RESPONSIVE SCALING
   Phone/tablet: rem clamps only. Desktop (≥1024): 16px at 1440×900 and up.
   Smaller desktops get CSS zoom (rem + Mud px) so the recommended size still
   fits — never magnify a large monitor. Boot JS sets --desktop-scale (<1).
   ────────────────────────────────────────────────────────────────────────── */
html {
	font-size: clamp(15px, 0.3vw + 13.5px, 16px);
	overflow-x: clip;
	/* Honor / Huawei / Android: stop browser font boosting that makes the UI feel “zoomed past” the screen */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (min-width: 1024px) {
	html {
		font-size: 16px;
	}

	html.desktop-fit-zoom {
		--app-w: calc(100vw / var(--desktop-scale, 1));
		--app-h: calc(100dvh / var(--desktop-scale, 1));
		zoom: var(--desktop-scale, 1);
		width: var(--app-w);
		height: var(--app-h);
		overflow: hidden;
	}

	html.desktop-fit-zoom body {
		width: 100%;
		height: 100%;
		max-width: none;
		overflow-x: clip;
		overflow-y: auto;
	}

	html.desktop-fit-zoom .mud-layout,
	html.desktop-fit-zoom .mud-main-content {
		height: 100%;
		min-height: 100%;
		max-width: none;
		overflow: auto;
	}

	/* ── Locked shells (height: 100dvh + overflow hidden / position fixed) ──
	   Raw 100dvh is the pre-zoom window. After contain-scale they must fill
	   the 1440×900 canvas or they clip / leave gaps. */
	html.desktop-fit-zoom .login-full-page-container,
	html.desktop-fit-zoom .fp-full-page-container,
	html.desktop-fit-zoom .pa-full-page-container,
	html.desktop-fit-zoom .dashboard-page-container,
	html.desktop-fit-zoom .dashboard-page-grid,
	html.desktop-fit-zoom .dashboard-sidebar,
	html.desktop-fit-zoom .dashboard-content,
	html.desktop-fit-zoom .auth-skeleton-shell,
	html.desktop-fit-zoom .auth-skeleton-sidebar,
	html.desktop-fit-zoom .mobile-nav-overlay,
	html.desktop-fit-zoom .cp__deck,
	html.desktop-fit-zoom .ob-shell-grid,
	html.desktop-fit-zoom .ob-shell-image-col,
	html.desktop-fit-zoom .ob-shell-content-col {
		height: 100% !important;
		max-height: 100%;
		min-height: 0;
	}

	html.desktop-fit-zoom .login-full-page-container,
	html.desktop-fit-zoom .fp-full-page-container,
	html.desktop-fit-zoom .pa-full-page-container,
	html.desktop-fit-zoom .mobile-nav-overlay,
	html.desktop-fit-zoom .sb-backdrop,
	html.desktop-fit-zoom #welcome-overlay,
	html.desktop-fit-zoom #splash-screen,
	html.desktop-fit-zoom .lga-lightbox {
		inset: 0;
		width: auto;
		height: auto;
		max-height: none;
	}

	html.desktop-fit-zoom .wm-page {
		height: calc(100% - var(--wm-nav-height) - var(--wm-bottom-nav-height));
		max-height: calc(100% - var(--wm-nav-height) - var(--wm-bottom-nav-height));
	}

	html.desktop-fit-zoom .login-white-frame,
	html.desktop-fit-zoom .fp-white-frame,
	html.desktop-fit-zoom .pa-white-frame {
		max-height: calc(var(--app-h) - 1.5rem);
		overflow-y: auto;
	}

	/* ── First-screen / min-height pages ──
	   100dvh/100vh here is “fill the window”. After zoom that must be the
	   canvas, or heroes overflow the first screen. Public pages sit under the
	   6rem NavBar, so those shells subtract it. */
	html.desktop-fit-zoom .home-hero {
		min-height: calc((var(--app-h) - 6rem) * 0.9);
	}

	html.desktop-fit-zoom .hh-section,
	html.desktop-fit-zoom .hh-panel,
	html.desktop-fit-zoom .exp-wrapper,
	html.desktop-fit-zoom .sr-wrapper,
	html.desktop-fit-zoom .shop-page,
	html.desktop-fit-zoom .tg-page,
	html.desktop-fit-zoom .pp-wrapper,
	html.desktop-fit-zoom .nf-page,
	html.desktop-fit-zoom .legal-documents-page,
	html.desktop-fit-zoom .post-container,
	html.desktop-fit-zoom .pco-page-wrapper,
	html.desktop-fit-zoom .pcf-page-wrapper,
	html.desktop-fit-zoom .psu-page-wrapper,
	html.desktop-fit-zoom .dvh-100 {
		min-height: calc(var(--app-h) - 6rem);
	}

	html.desktop-fit-zoom .wi-shell,
	html.desktop-fit-zoom .wl-page,
	html.desktop-fit-zoom .wl-split,
	html.desktop-fit-zoom .wc-shell-container,
	html.desktop-fit-zoom .direct-book {
		min-height: var(--app-h);
	}

	html.desktop-fit-zoom .sub-return-wrapper {
		min-height: calc(var(--app-h) - 4rem);
	}

	/* ── Panes that subtract chrome from the viewport ── */
	html.desktop-fit-zoom .msv-wrap {
		height: calc(var(--app-h) - 7rem);
	}

	html.desktop-fit-zoom .itin-map {
		height: calc(var(--app-h) - 9rem);
	}

	html.desktop-fit-zoom .hcw-panel,
	html.desktop-fit-zoom .help-docs-sidebar {
		max-height: calc(var(--app-h) - 7rem);
	}

	html.desktop-fit-zoom .lga-lightbox__inner {
		max-width: 90%;
		max-height: 90%;
	}

	html.desktop-fit-zoom .lga-lightbox__photo-wrap {
		max-height: 80%;
	}

	html.desktop-fit-zoom .lga-lightbox__img {
		max-width: 90%;
		max-height: 75%;
	}

	html.desktop-fit-zoom .mud-dialog:not(.mud-dialog-fullscreen) {
		max-height: min(92%, calc(var(--app-h) - 2rem));
	}

	/* Listing preview: content scrolls inside the sheet (BUG-002 @ 125% zoom). */
	html.desktop-fit-zoom .lpm-dialog.mud-dialog:not(.mud-dialog-fullscreen),
	html.desktop-fit-zoom .mud-dialog.lpm-dialog:not(.mud-dialog-fullscreen) {
		max-height: calc(var(--app-h) - 1.5rem) !important;
	}

	html.desktop-fit-zoom .lpm-dialog .mud-dialog-content {
		max-height: calc(var(--app-h) - 1.5rem);
	}

	html.desktop-fit-rem {
		font-size: calc(16px * var(--desktop-scale, 1));
	}
}

html.antologa-maui-shell {
	--page-gutter: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

@media (max-width: 600px) {
	/* Tighter rem on phones so map chrome fits narrow CSS viewports (~360–412) */
	html {
		font-size: clamp(13px, 0.15vw + 12.5px, 15px);
	}

	:root {
		--page-gutter: 0.75rem;
		--card-gap-sm: 0.6rem;
	}

	/* Prevent iOS/Android input focus zoom that leaves the page “stuck” scaled up */
	.mud-input input,
	.mud-input textarea,
	.help-search-field input,
	.blg-topbar__search input {
		font-size: 16px !important;
	}
}

/* Inset dialog sheets — never full-bleed cards on phone. */
@media (max-width: 600px) {
	.mud-dialog-container .mud-dialog:not(.mud-dialog-fullscreen) {
		max-width: calc(100% - 1.5rem) !important;
		width: calc(100% - 1.5rem);
		margin: 0.75rem;
		max-height: 90dvh;
		border-radius: 1rem;
	}

	.mud-dialog-container .mud-dialog:not(.mud-dialog-fullscreen) .mud-dialog-content {
		overflow-y: auto;
		min-height: 0;
		max-height: calc(90dvh - 5.5rem);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Hide scrollbars platform-wide ────────────────────────────────────────────
   Visual style relies on overflow scrolling (wheel / touch / trackpad) without
   visible chrome. Scroll behavior is unchanged; only the bar is suppressed.
   !important beats local thin/styled scrollbar rules (dashboard, wonders, auth).
   ────────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	scrollbar-width: none !important; /* Firefox */
	-ms-overflow-style: none !important; /* legacy Edge */
}

*::-webkit-scrollbar {
	display: none !important; /* Chrome, Safari, Chromium Edge */
	width: 0 !important;
	height: 0 !important;
}

/* ── Tables on small screens ──────────────────────────────────────────────────
   Let wide tables (esp. the admin dashboard grids) scroll horizontally instead of
   squishing/clipping on phones and tablets. Global so no per-table markup is needed;
   overflow still works; the bar itself is hidden by the platform-wide rule above.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.mud-table-container {
		overflow-x: auto;
	}
}

/* ── Session-timeout warning overlay ──────────────────────────────────────── */
.session-timeout-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--antologa-dark) 55%, transparent);
	backdrop-filter: blur(2px);
}

.session-timeout-card {
	background: var(--antologa-paper);
	border-radius: 1rem;
	padding: 2rem;
	width: min(90vw, 22rem);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.session-timeout-icon {
	font-size: 2.5rem !important;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--antologa-primary);
	margin-bottom: 0.75rem;
}

@font-face {
    font-family: Nunito;
    src: url('../fonts/Nunito-VariableFont.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url('../fonts/Inter-VariableFont.ttf') format('truetype');
    font-display: swap;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-body1);
	line-height: var(--lh-body);
	color: var(--text-body);
	overflow-x: clip;
	max-width: 100%;
}

.no-underline-autocomplete {
	background: none !important;
}

	/* Target the specific pseudo-elements for the text variant line */
	.no-underline-autocomplete::before,
	.no-underline-autocomplete::after {
		background: none !important;
	}

	/* Ensure the hover effect line is also gone */
	.no-underline-autocomplete:hover::before {
		background: none !important;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
	font-family: var(--font-body);
	line-height: var(--lh-body);
}

/* Type utilities — prefer these over one-off rem sizes for new work */
.type-display {
	font-family: var(--font-heading);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-tight);
}

.type-prose {
	font-family: var(--font-body);
	font-size: var(--fs-body1);
	line-height: var(--lh-prose);
	max-width: var(--measure-prose);
	text-align: left;
}

.type-measure {
	max-width: var(--measure-prose);
}

.type-measure--narrow { max-width: var(--measure-narrow); }
.type-measure--wide { max-width: var(--measure-wide); }

.type-eyebrow {
	font-family: var(--font-heading);
	font-size: var(--fs-overline);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	line-height: var(--lh-ui);
}

.text-center{
	text-align: center !important;
}


	.dvh-100 {
		min-height: 100dvh;
		height: 100%;
		width: 100%;
	}

	.h-100-p {
		height: 100% !important;
	}

	.w-100-p {
		width: 100% !important;
	}

	.hw-100 {
		height: 100% !important;
		width: 100% !important;
	}


	.background-landscape02-img {
		background-image: url(../img/pictures/landscape02.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.bg-transparent {
		background-color: transparent !important;
	}

	.bg-antologa-primary {
		background-color: var(--antologa-primary) !important;
	}

	.bg-antologa-secondary {
		background-color: var(--antologa-secondary) !important;
	}

	.bg-antologa-tertiary {
		background-color: var(--antologa-tertiary) !important;
	}

	.bg-antologa-contrast {
		background-color: var(--antologa-contrast) !important;
	}

	.bg-antologa-white {
		background-color: var(--antologa-paper) !important;
	}

	.bg-antologa-light-gray {
		background-color: var(--antologa-light-gray) !important;
	}

	.bg-antologa-gray {
		background-color: var(--antologa-gray) !important;
	}

	.bg-antologa-dark {
		background-color: var(--antologa-dark) !important;
	}


	.text-antologa-primary {
		color: var(--antologa-primary) !important;
	}

	.text-antologa-secondary {
		color: var(--antologa-secondary) !important;
	}

	.text-antologa-tertiary {
		color: var(--antologa-tertiary) !important;
	}

	.text-antologa-contrast {
		color: var(--antologa-contrast) !important;
	}

	.text-antologa-white {
		color: var(--antologa-white) !important;
	}

	.text-antologa-light-gray {
		color: var(--antologa-light-gray);
	}

	.text-antologa-gray {
		color: var(--antologa-gray) !important;
	}

	.text-antologa-dark {
		color: var(--antologa-dark) !important;
	}

	.valid.modified:not([type=checkbox]) {
		outline: 1px solid var(--antologa-valid);
	}

	.invalid {
		outline: 1px solid var(--antologa-error);
	}

	.validation-message {
		color: var(--antologa-error);
	}

	.blazor-error-boundary {
		background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
		padding: 1rem 1rem 1rem 3.7rem;
		color: white;
	}

		.blazor-error-boundary::after {
			content: "An error has occurred."
		}

@keyframes subtle-zoom {
	0%, 100% {
		transform: scale(1.05);
	}

	50% {
		transform: scale(1.08);
	}
}

/* Grid gap override for Antologa standard */
.antologa-grid {
	gap: 2rem !important; /* 32px */
}

/* Subtle zoom animation helper */
.subtle-zoom-effect {
	animation: subtle-zoom 8s ease-in-out infinite;
}
/* ── Circuit-connecting indicator ─────────────────────────────────────────────
   Slim indeterminate bar pinned to the top of the viewport, visible from first
   paint until the Blazor circuit is interactive. MainLayout adds .app-ready to
   <body> (via antologaReady in site.js) on its first interactive render. */
.app-connecting {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	background: transparent;
	overflow: hidden;
	pointer-events: none;
}

	.app-connecting::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 40%;
		background: linear-gradient(90deg, var(--antologa-primary, #078282), var(--antologa-secondary, #004F71));
		border-radius: 999px;
		animation: app-connecting-slide 1.1s ease-in-out infinite;
	}

body.app-ready .app-connecting {
	display: none;
}

@keyframes app-connecting-slide {
	0% {
		left: -40%;
	}

	100% {
		left: 100%;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   STANDARD ANIMATIONS (Consolidated, per animations-guide.md)
   These keyframes are the standard animations used throughout the app.
   Use timing/easing CSS variables for consistency.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(1.53rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(16px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes popIn {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes parallaxZoom {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.08);
	}
}