/* Destinations: two featured route panels + country finder. */
.dest { background: var(--ink-2); }

.dest__featured {
	margin-top: var(--head-gap);
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.dest-card {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column;
	min-height: 400px; padding: clamp(24px, 3vw, 36px);
	border-radius: 28px;
	background:
		radial-gradient(90% 70% at 100% 0%, rgba(59, 123, 255, .16), transparent 60%),
		linear-gradient(180deg, rgba(238, 241, 248, .035), rgba(238, 241, 248, .01));
	border: 1px solid var(--line);
	transition: opacity 1s var(--ease), transform .8s var(--ease), border-color .4s var(--ease);
	transition-delay: calc(var(--d, 0) * 90ms);
}
.dest-card:hover { border-color: var(--line-strong); } /* depth comes from pointer tilt (motion.css) */
.dest-card__code { /* oversized ghost country code */
	position: absolute; z-index: -1; right: -.06em; top: -.2em;
	font-size: clamp(9rem, 15vw, 14rem); font-weight: 700; letter-spacing: -.06em; line-height: 1;
	color: transparent; -webkit-text-stroke: 1px rgba(238, 241, 248, .08);
}
/* Photo variant: city skyline sits right; gradient keeps the left (text) side dark. */
.dest-card--photo { min-height: 480px; background: var(--ink-3); }
.dest-card__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.dest-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.dest-card--photo:hover .dest-card__media img { transform: scale(1.05); }
.dest-card--photo::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5, 7, 14, .82) 0%, rgba(5, 7, 14, .45) 45%, rgba(5, 7, 14, .1) 75%),
		linear-gradient(180deg, rgba(5, 7, 14, 0) 40%, rgba(5, 7, 14, .88) 100%);
}
.dest-card--photo .dest-card__note { color: rgba(238, 241, 248, .8); }
.dest-card--photo .dest-card__route .r-base { stroke: rgba(238, 241, 248, .35); }
.dest-card--photo .dest-card__route .r-end { fill: rgba(5, 7, 14, .6); }

.dest-card__tag {
	align-self: flex-start;
	padding: 5px 11px; border-radius: 999px;
	font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--amber); background: rgba(255, 176, 84, .08); border: 1px solid rgba(255, 176, 84, .25);
}
.dest-card__name { margin-top: 18px; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.dest-card__note { margin-top: 8px; color: var(--paper-dim); }

.dest-card__route { position: relative; margin: auto 0 0; padding-top: 32px; }
.dest-card__route svg { width: 100%; height: auto; overflow: visible; }
.dest-card__route .r-base { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.dest-card__route .r-glow {
	stroke: var(--blue-soft); stroke-width: 1.5; vector-effect: non-scaling-stroke;
	stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .9;
}
html.has-reveal .dest-card:not(.is-in) .r-glow { stroke-dashoffset: 1; }
.dest-card.is-in .r-glow { transition: stroke-dashoffset 2.2s var(--ease-io) .3s; }
.dest-card__route .r-end { fill: var(--ink-2); stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dest-card__route .r-end--to { stroke: var(--cyan); }
.dest-card__route .r-dot { fill: var(--amber); filter: drop-shadow(0 0 6px rgba(255, 176, 84, .8)); offset-rotate: auto; offset-distance: 0%; animation: dest-dot 6s var(--ease-io) 1s infinite; }
@keyframes dest-dot {
	0% { offset-distance: 0%; opacity: 0; }
	8% { opacity: 1; }
	80% { offset-distance: 100%; opacity: 1; }
	90%, 100% { offset-distance: 100%; opacity: 0; }
}
.dest-card__from, .dest-card__to {
	position: absolute; bottom: -22px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--paper-faint);
}
.dest-card__from { left: 0; }
.dest-card__to { right: 0; color: var(--cyan); }

.dest-card__foot { margin-top: 44px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dest-card__meta { display: grid; gap: 2px; }
.dest-card__meta span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); }
.dest-card__meta strong { font-size: 16px; font-weight: 600; }

/* finder */
.dest__finder {
	margin-top: 14px; padding: clamp(22px, 3vw, 32px);
	border-radius: 28px; border: 1px solid var(--line); background: rgba(238, 241, 248, .02);
	display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start;
}
.dest__search label { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; }
.dest__field {
	margin-top: 14px; display: flex; align-items: center; gap: 10px;
	height: 48px; padding: 0 16px; border-radius: 999px;
	border: 1px solid var(--line-strong); background: rgba(238, 241, 248, .04); color: var(--paper-faint);
	transition: border-color .3s, box-shadow .3s;
}
.dest__field:focus-within { border-color: rgba(141, 176, 255, .65); box-shadow: 0 0 0 4px rgba(59, 123, 255, .16); }
.dest__field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--paper); font: inherit; font-size: 15px; }
.dest__field input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.dest__list { display: flex; flex-wrap: wrap; gap: 8px; }
.dest__list a {
	display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px;
	font-size: 14px; color: var(--paper-dim);
	border: 1px solid var(--line); background: rgba(238, 241, 248, .02);
	transition: color .25s, border-color .25s, background-color .25s;
}
.dest__list a:hover, .dest__list a:focus-visible { color: var(--paper); border-color: var(--line-strong); background: rgba(238, 241, 248, .06); }
.dest__list li[hidden] { display: none; }
.dest__empty { grid-column: 2; color: var(--paper-dim); }
.dest__empty a { color: var(--paper); border-bottom: 1px solid var(--blue-soft); }

@media (max-width: 899px) {
	.dest__featured { grid-template-columns: 1fr; }
	.dest-card { min-height: 340px; }
	.dest__finder { grid-template-columns: 1fr; }
	.dest__empty { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.dest-card__route .r-dot { animation: none; offset-distance: 60%; }
	.dest-card__route .r-glow { stroke-dashoffset: 0; }
}