/* =================================================================
   US Expat — motion & "global" visual system (motion.css)
   Pure CSS + tiny vanilla JS hooks (motion.js). All motion uses
   --ease-calm (cubic-bezier(.22,1,.36,1)), 250–600ms, and honors
   prefers-reduced-motion. Reveal states are gated on .usx-js so
   no-JS visitors always see full content. No layout-shifting
   animations: opacity + transform only.
   ================================================================= */

:root {
	--usx-gold: var(--sand, #C9A86A);
	--usx-indigo: #16356B;
}

/* ------------------------------------------------------ 1. Scroll reveal */
.usx-js [data-usx-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity .6s var(--ease-calm),
		transform .6s var(--ease-calm);
	transition-delay: var(--usx-d, 0s);
	will-change: opacity, transform;
}
.usx-js [data-usx-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Headlines lead, body copy follows. */
.usx-js .section-head[data-usx-reveal] h2 { transition: inherit; }
.usx-js .section-head[data-usx-reveal] .section-head__lead {
	opacity: 0; transform: translateY(12px);
	transition: opacity .55s var(--ease-calm) .14s, transform .55s var(--ease-calm) .14s;
}
.usx-js .section-head[data-usx-reveal].is-in .section-head__lead { opacity: 1; transform: none; }

/* Eyebrow rule draws in from the left on reveal. */
.usx-js [data-usx-reveal] .eyebrow::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--ease-calm) .1s;
}
.usx-js [data-usx-reveal].is-in .eyebrow::before { transform: scaleX(1); }

/* ------------------------------------------- 2. Buttons / micro-interactions */
.btn:active { transform: translateY(0) scale(.98); }
.btn .usx-arrow, .card__cta span[aria-hidden] {
	display: inline-block;
	transition: transform .3s var(--ease-calm);
}
.btn:hover .usx-arrow,
a.card:hover .card__cta span[aria-hidden],
.hero__text-link:hover span[aria-hidden] {
	transform: translateX(4px);
}
.hero__text-link span[aria-hidden] { display: inline-block; transition: transform .3s var(--ease-calm); }

/* Primary CTA sheen sweep (~every 6s). */
.btn--brick { position: relative; overflow: hidden; }
.btn--brick::after {
	content: '';
	position: absolute; top: 0; bottom: 0; left: -80%;
	width: 50%;
	background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
	transform: skewX(-18deg);
	animation: usx-sheen 6s var(--ease-calm) infinite;
	pointer-events: none;
}
@keyframes usx-sheen {
	0%, 78% { left: -80%; }
	92%, 100% { left: 160%; }
}

/* ------------------------------------------------------ 3. Sticky nav */
/* Height stays constant (no CLS); the chrome condenses visually. */
.site-header {
	transition: box-shadow .3s var(--ease-calm), background-color .3s var(--ease-calm);
}
.site-header.is-condensed {
	background: rgba(255,255,255,.86);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
	backdrop-filter: saturate(1.2) blur(8px);
	box-shadow: 0 10px 30px -18px rgba(11,39,64,.45);
}
.site-logo img { transition: transform .3s var(--ease-calm); transform-origin: left center; }
.site-header.is-condensed .site-logo img { transform: scale(.9); }

/* Animated underline on nav links. */
.site-nav__item > a { position: relative; }
.site-nav__item > a::after {
	content: '';
	position: absolute; left: 0; right: auto; bottom: 22px;
	width: 100%; height: 2px;
	background: var(--brick);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s var(--ease-calm);
}
.site-nav__item > a:hover::after,
.site-nav__item > a[aria-current="page"]::after { transform: scaleX(1); }

/* ------------------------------------------------- 4. Step number rings */
.step__num { position: relative; }
.usx-ring {
	position: absolute; inset: -7px;
	width: calc(100% + 14px); height: calc(100% + 14px);
	pointer-events: none;
}
.usx-ring circle {
	fill: none;
	stroke: var(--usx-gold);
	stroke-width: 1.5;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transform: rotate(-90deg);
	transform-origin: center;
}
.usx-js .is-in .usx-ring circle {
	transition: stroke-dashoffset .9s var(--ease-calm) .25s;
	stroke-dashoffset: 0;
}

/* ------------------------------------------------- 5. Page transitions */
.usx-js .site-main { animation: usx-page-in .25s var(--ease-calm); }
@keyframes usx-page-in { from { opacity: 0; } to { opacity: 1; } }

/* Leaving: dim quickly; show the globe only if the next page is slow (>400ms). */
.usx-leaving .site-main { opacity: .4; transition: opacity .25s var(--ease-calm); }
.usx-loader {
	position: fixed; inset: 0; z-index: 2000;
	display: grid; place-items: center;
	background: var(--pearl, #F9F9F9);
	opacity: 0; visibility: hidden;
	transition: opacity .25s var(--ease-calm) .4s, visibility 0s .65s;
}
.usx-leaving .usx-loader { opacity: 1; visibility: visible; }
.usx-loader img { width: 132px; height: 132px; }

/* Form-submit wait state: mini globe beside the disabled submit button. */
.usx-form button[type="submit"][disabled] { position: relative; }
.usx-form button[type="submit"][disabled]::before {
	content: '';
	display: inline-block;
	width: 16px; height: 16px;
	margin-right: 8px;
	background: url('globe-loader.svg') center / cover no-repeat;
	filter: invert(1) brightness(2);
	flex: none;
}

/* --------------------------------------------------- 6. Hero: global motion */
.hero__drift {
	position: absolute; inset: 0;
	background: linear-gradient(115deg, var(--navy-ink) 0%, var(--usx-indigo) 45%, var(--navy-ink) 90%);
	background-size: 220% 220%;
	animation: usx-drift 20s ease-in-out infinite;
	opacity: .55;
}
@keyframes usx-drift {
	0%, 100% { background-position: 0% 40%; }
	50% { background-position: 100% 60%; }
}

.hero-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-map__land { fill: none; stroke: rgba(255,255,255,.10); stroke-width: .7; }
.hero-map__dot { fill: var(--brick-soft); }
.hero-map__halo {
	fill: none; stroke: var(--brick-soft); stroke-width: 1;
	opacity: 0;
	transform-origin: center;
	transform-box: fill-box;
	animation: usx-halo 4.5s var(--ease-calm) infinite;
}
@keyframes usx-halo {
	0% { opacity: .55; transform: scale(.4); }
	60%, 100% { opacity: 0; transform: scale(1.6); }
}
.hero-map__arc {
	fill: none;
	stroke: rgba(232,180,180,.55);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: usx-arc 14s linear infinite;
}
@keyframes usx-arc {
	0% { stroke-dashoffset: 100; opacity: 0; }
	6% { opacity: .9; }
	30% { stroke-dashoffset: 0; opacity: .9; }
	46% { opacity: 0; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}

/* -------------------------------------------------- 7. Destination marquee */
.usx-marquee {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background: #fff;
	padding: 13px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.usx-marquee__track {
	display: flex; align-items: center; gap: 36px;
	width: max-content;
	animation: usx-marquee 46s linear infinite;
}
.usx-marquee:hover .usx-marquee__track { animation-play-state: paused; }
@keyframes usx-marquee { to { transform: translateX(-50%); } }
.usx-marquee__item {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: .82rem; font-weight: 500; letter-spacing: .04em;
	color: var(--slate); white-space: nowrap;
}
.usx-marquee__sep { color: var(--usx-gold); font-size: .7rem; }

/* ------------------------------------------------------ 8. Stats band */
.usx-stats { background: var(--navy-ink); color: #fff; padding: 56px 0; }
.usx-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.usx-stat__num {
	font-family: var(--font-serif);
	font-size: clamp(2.2rem, 4vw, 3rem);
	font-weight: 700; color: #fff; line-height: 1;
	font-variant-numeric: tabular-nums;
	display: inline-block;
}
.usx-stat__plus { color: var(--usx-gold); }
.usx-stat__label {
	margin-top: 10px;
	font-size: .8rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	color: rgba(255,255,255,.62);
}
@media (max-width: 880px) {
	.usx-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}

/* ----------------------------------------------- 9. Cards: global hover */
a.card { transition: transform .35s var(--ease-calm), box-shadow .35s var(--ease-calm); }
a.card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -22px rgba(15,76,129,.35); }

.card__media { transition: transform .7s var(--ease-calm); }
a.card:hover .card__media { transform: scale(1.05); }

/* Gold underline draws across the card title. */
.dest-card__title h3, .guide-card__title, .article-card__title, .webinar-card__title {
	background-image: linear-gradient(var(--usx-gold), var(--usx-gold));
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 0 100%;
	padding-bottom: 3px;
	transition: background-size .45s var(--ease-calm);
}
a.card:hover .dest-card__title h3,
a.card:hover .guide-card__title,
a.card:hover .article-card__title,
a.card:hover .webinar-card__title { background-size: 100% 2px; }

/* Duotone (navy + cream) treatment unifies stock photos on hover. */
.article-card .card__media, .guide-card .card__media { position: relative; }
.article-card .card__media::after, .guide-card .card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: var(--navy);
	mix-blend-mode: color;
	opacity: 0;
	transition: opacity .45s var(--ease-calm);
	pointer-events: none;
}
a.card:hover .card__media::after { opacity: .85; }

/* ------------------------------------------- 10. Topographic texture */
.section--cream {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760'%3E%3Cg fill='none' stroke='%230F4C81' stroke-opacity='.045' stroke-width='1'%3E%3Cpath d='M-40 120 C 160 40, 360 200, 560 120 S 820 40, 900 120'/%3E%3Cpath d='M-40 220 C 180 140, 340 300, 560 220 S 820 140, 900 220'/%3E%3Cpath d='M-40 320 C 200 240, 320 400, 560 320 S 820 240, 900 320'/%3E%3Cpath d='M-40 420 C 180 340, 360 500, 560 420 S 820 340, 900 420'/%3E%3Cpath d='M-40 520 C 160 440, 380 600, 560 520 S 820 440, 900 520'/%3E%3Cpath d='M-40 620 C 200 540, 340 700, 560 620 S 820 540, 900 620'/%3E%3Cellipse cx='380' cy='380' rx='300' ry='300' stroke-opacity='.03'/%3E%3Cellipse cx='380' cy='380' rx='210' ry='210' stroke-opacity='.03'/%3E%3Cellipse cx='380' cy='380' rx='120' ry='120' stroke-opacity='.03'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 760px 760px;
}

/* -------------------------------------------- 11. Status chip pulse dot */
.status-badge--priority::before {
	content: '';
	width: 6px; height: 6px;
	margin-right: 6px;
	border-radius: 999px;
	background: var(--navy);
	animation: usx-pulse 2.2s ease-in-out infinite;
	flex: none;
}
@keyframes usx-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(15,76,129,.35); }
	50% { box-shadow: 0 0 0 5px rgba(15,76,129,0); }
}

/* ------------------------------------------------ 12. Footer flag row */
.site-footer__flags .usx-flagtip { position: relative; display: inline-flex; }
.site-footer__flags .usx-flag { transition: transform .3s var(--ease-calm), opacity .3s; cursor: default; }
.site-footer__flags .usx-flagtip:hover .usx-flag { transform: scale(1.25); opacity: 1; }
.site-footer__flags .usx-flagtip::after {
	content: attr(data-tip);
	position: absolute; left: 50%; bottom: calc(100% + 9px);
	transform: translateX(-50%) translateY(4px);
	background: #fff; color: var(--navy-ink);
	font-size: .7rem; font-weight: 600; letter-spacing: .03em;
	padding: 4px 9px; border-radius: 5px;
	white-space: nowrap;
	box-shadow: 0 8px 22px -8px rgba(0,0,0,.4);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .25s var(--ease-calm), transform .25s var(--ease-calm);
}
.site-footer__flags .usx-flagtip:hover::after {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ----------------------------------------------- 13. Flag chips (4:3) */
.usx-flag { width: 24px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.08); }

/* ------------------------------------------------ 14. Section rhythm */
.section { padding: 120px 0; }
@media (max-width: 880px) { .section { padding: 72px 0; } }

/* ------------------------------------------------ Reduced motion guard */
@media (prefers-reduced-motion: reduce) {
	.usx-js [data-usx-reveal],
	.usx-js .section-head[data-usx-reveal] .section-head__lead,
	.usx-js [data-usx-reveal] .eyebrow::before {
		opacity: 1; transform: none; transition: none;
	}
	.usx-js .usx-ring circle { stroke-dashoffset: 0; transition: none; }
	.btn--brick::after, .hero__drift, .hero-map__halo, .hero-map__arc,
	.usx-marquee__track, .status-badge--priority::before {
		animation: none;
	}
	.hero-map__arc { stroke-dashoffset: 0; opacity: .35; }
	.hero-map__halo { opacity: 0; }
	.usx-js .site-main { animation: none; }
	.usx-loader { display: none; }
	a.card:hover .card__media { transform: none; }
}