/* ==========================================================================
   Snowboard Travel Guide — command.css
   The command-center pass: Trip Readiness gauge, dynamic next-step card,
   personalised recommendations panel, live mountain conditions bar with
   region filters + storm alerts, identity-kit badges, stage completion
   micro-rewards (snow burst + glow pulse), swipeable mobile stages.
   Loaded after adventure.css.
   ========================================================================== */

/* =====================================================================
   ADVENTURE — command-center metrics row
   ===================================================================== */
.stg-adv__metrics {
	display: grid;
	grid-template-columns: 160px 1fr 1.4fr;
	gap: 18px;
	align-items: stretch;
	margin: 0 auto;
	max-width: 880px;
	padding: 22px;
	border-radius: var(--stg-radius-lg);
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
	border: 1px solid rgba(255,255,255,.10);
	backdrop-filter: blur(18px);
	box-shadow: 0 1px 1px rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.35);
}
@media (max-width: 880px) {
	.stg-adv__metrics { grid-template-columns: 1fr; padding: 18px; }
}

/* Trip readiness ring */
.stg-adv-gauge { position: relative; display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0 auto; }
.stg-adv-gauge__ring { width: 100%; height: 100%; }
.stg-adv-gauge__ring circle[data-adv-gauge-ring] { transition: stroke-dashoffset 1.4s cubic-bezier(.22,.8,.18,1); filter: drop-shadow(0 0 12px rgba(31,111,235,.45)); }
.stg-adv-gauge__value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.stg-adv-gauge__num { color: #fff; font-family: var(--stg-font-head); font-size: 1.8rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stg-adv-gauge__num em { font-size: .55em; opacity: .65; font-style: normal; margin-left: 2px; font-weight: 600; }
.stg-adv-gauge__label { color: #9fb3cc; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; text-align: center; }

/* Stage progress (re-styled inside the metrics box) */
.stg-adv__metrics .stg-adv__progress {
	background: transparent;
	border: 0;
	backdrop-filter: none;
	padding: 0;
	flex-direction: column;
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: stretch;
}
.stg-adv__progress-eyebrow { color: #9fb3cc; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.stg-adv__metrics .stg-adv__progress-bar { width: 100%; height: 8px; }
.stg-adv__metrics .stg-adv__progress-num { display: inline-flex; align-items: baseline; gap: 2px; color: #fff; font-family: var(--stg-font-head); font-size: 1.2rem; font-weight: 700; }
.stg-adv__metrics .stg-adv__progress-num em { color: var(--stg-secondary); font-style: normal; font-size: .65em; opacity: .8; margin-left: 2px; }

/* Next-step card */
.stg-adv-next { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--stg-radius); background: linear-gradient(135deg, rgba(31,111,235,.18), rgba(92,209,201,.10)); border: 1px solid rgba(92,209,201,.22); }
.stg-adv-next__label { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--stg-secondary); }
.stg-adv-next__label svg { color: var(--stg-secondary); }
.stg-adv-next__text { color: #fff; font-size: 1rem; line-height: 1.35; margin: 0; font-weight: 500; }
.stg-adv-next__cta { color: #fff; font-weight: 600; font-size: .9rem; align-self: flex-start; padding: 6px 0 0; transition: transform .2s var(--stg-easing); }
.stg-adv-next__cta:hover { color: var(--stg-secondary); transform: translateX(4px); }

/* =====================================================================
   STAGE COMPLETION — glow pulse + snow burst micro-rewards
   ===================================================================== */
.stg-adv-stage.is-celebrating .stg-adv-stage__shell {
	border-color: rgba(92,209,201,.55);
	box-shadow:
		0 0 0 1px rgba(92,209,201,.30) inset,
		0 0 40px 4px rgba(92,209,201,.35),
		0 24px 50px rgba(31,111,235,.25);
	animation: stg-stage-pulse .9s cubic-bezier(.22,.8,.18,1);
}
.stg-adv-stage.is-celebrating .stg-adv-stage__check {
	transform: scale(1.16);
	background: var(--stg-secondary);
	color: var(--stg-dark);
}
@keyframes stg-stage-pulse {
	0%   { transform: translateY(0); }
	30%  { transform: translateY(-4px); }
	60%  { transform: translateY(0); }
	100% { transform: translateY(0); }
}

/* Snow burst — flakes fly upward and outward from card center */
.stg-burst {
	position: fixed; inset: 0; pointer-events: none; z-index: 95;
}
.stg-burst span {
	position: absolute;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, #cfe7f7 60%, transparent 75%);
	box-shadow: 0 0 8px rgba(255,255,255,.55);
	transform: translate(-50%, -50%) scale(var(--s, 1));
	opacity: 1;
	animation: stg-burst 1.2s cubic-bezier(.22,.8,.18,1) forwards;
}
@keyframes stg-burst {
	0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--s, 1)) rotate(var(--r, 0deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.stg-burst { display: none; }
	.stg-adv-stage.is-celebrating .stg-adv-stage__shell { animation: none; }
}

/* =====================================================================
   PERSONALISED RECOMMENDATIONS PANEL
   ===================================================================== */
.stg-adv-recos {
	margin-top: clamp(28px, 3vw, 44px);
	padding: clamp(22px, 3vw, 32px);
	border-radius: var(--stg-radius-lg);
	background: linear-gradient(135deg, rgba(11,31,58,.55) 0%, rgba(6,18,42,.65) 100%);
	border: 1px solid rgba(255,255,255,.10);
	backdrop-filter: blur(20px);
	box-shadow: 0 1px 1px rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.4);
	color: #fff;
}
.stg-adv-recos__head { margin-bottom: 22px; }
.stg-adv-recos__head h3 { color: #fff; font-size: 1.4rem; margin: 6px 0 0; }
.stg-adv-recos__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 880px) { .stg-adv-recos__cols { grid-template-columns: 1fr; } }

.stg-adv-recos__col h4 {
	display: flex; align-items: center; gap: 8px;
	font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
	color: var(--stg-secondary); margin: 0 0 12px;
}
.stg-adv-recos__col h4 svg { color: var(--stg-secondary); }
.stg-adv-recos__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.stg-adv-recos__col li { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: all .2s var(--stg-easing); }
.stg-adv-recos__col li:hover { background: rgba(255,255,255,.10); border-color: rgba(92,209,201,.30); transform: translateX(2px); }
.stg-adv-recos__col li a { display: flex; flex-direction: column; gap: 2px; color: #fff; }
.stg-adv-recos__col li a:hover { color: #fff; }
.stg-adv-recos__col li strong { color: #fff; font-weight: 600; font-size: .95rem; }
.stg-adv-recos__col li small { color: #9fb3cc; font-size: .78rem; line-height: 1.45; display: block; }
.stg-adv-recos__col--steps li { display: flex; gap: 8px; align-items: flex-start; }
.stg-adv-recos__col--steps li::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--stg-secondary); flex: 0 0 auto; margin-top: 9px;
}
.stg-adv-recos__col--steps li span { color: #cfe7f7; font-size: .9rem; line-height: 1.45; }
.stg-adv-recos__empty { color: #9fb3cc !important; font-style: italic; font-size: .85rem; }

/* =====================================================================
   LIVE MOUNTAIN CONDITIONS BAR
   ===================================================================== */
.stg-conditions {
	margin-bottom: 22px;
	padding: 14px 18px;
	border-radius: var(--stg-radius-lg);
	background: linear-gradient(180deg, #0b1f3a 0%, #06122a 100%);
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 16px 40px rgba(11,31,58,.18);
	color: #fff;
	overflow: hidden;
	position: relative;
}
.stg-conditions::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(800px 200px at 50% -50%, rgba(92,209,201,.10), transparent 70%);
}
.stg-conditions__head {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	position: relative;
}
.stg-conditions__label { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--stg-secondary); }
.stg-conditions__regions { display: flex; gap: 4px; }
.stg-conditions__region { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #cfe7f7; font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s var(--stg-easing); }
.stg-conditions__region:hover { background: rgba(255,255,255,.06); color: #fff; }
.stg-conditions__region--active { background: var(--stg-secondary); color: var(--stg-dark); border-color: var(--stg-secondary); }

.stg-conditions__track-wrap { overflow: hidden; }
.stg-conditions__track {
	display: flex; gap: 14px; flex-wrap: nowrap;
	animation: stg-marquee 50s linear infinite;
	width: max-content;
}
.stg-conditions:hover .stg-conditions__track,
.stg-conditions:focus-within .stg-conditions__track { animation-play-state: paused; }

.stg-conditions__item {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 999px;
	white-space: nowrap;
	font-size: .82rem;
	transition: all .25s var(--stg-easing);
	flex: 0 0 auto;
}
.stg-conditions__item.is-hidden { display: none; }
.stg-conditions__weather { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.08); }
.stg-conditions__weather svg { color: #cfe7f7; }
.stg-conditions__name { color: #fff; font-weight: 600; }
.stg-conditions__snow { color: var(--stg-secondary); font-weight: 700; padding: 3px 8px; background: rgba(92,209,201,.14); border-radius: 999px; font-size: .75rem; font-variant-numeric: tabular-nums; }
.stg-conditions__temp { color: #9fb3cc; font-variant-numeric: tabular-nums; }
.stg-conditions__alert {
	background: linear-gradient(135deg, var(--stg-accent), #ff8c5a);
	color: #fff; font-weight: 700; padding: 3px 10px;
	border-radius: 999px; font-size: .68rem;
	text-transform: uppercase; letter-spacing: .12em;
	box-shadow: 0 0 12px rgba(255,107,61,.55);
	animation: stg-alert-pulse 1.6s ease-in-out infinite;
}
@keyframes stg-alert-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(255,107,61,.55); } 50% { box-shadow: 0 0 18px rgba(255,107,61,.85); } }
.stg-conditions__top {
	background: rgba(92,209,201,.18);
	border: 1px solid rgba(92,209,201,.32);
	color: var(--stg-secondary);
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* Intensity tints — subtle border colour change */
.stg-conditions__item--storm    { border-color: rgba(255,107,61,.45); background: rgba(255,107,61,.06); }
.stg-conditions__item--snow     { border-color: rgba(92,209,201,.30); }
.stg-conditions__item--flurries { /* default */ }
.stg-conditions__item--clear    { background: rgba(255,255,255,.03); }

@media (prefers-reduced-motion: reduce) {
	.stg-conditions__track { animation: none; }
	.stg-conditions__alert { animation: none; }
}

/* =====================================================================
   IDENTITY KIT BADGE on kit catalog cards
   ===================================================================== */
.stg-kit-card { isolation: isolate; }
.stg-kit-card__identity {
	position: absolute; top: 18px; right: 18px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .14em;
	color: #fff;
	background: rgba(11,31,58,.65);
	border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

/* =====================================================================
   MOBILE — swipeable Adventure stages + sticky progress
   ===================================================================== */
@media (max-width: 720px) {
	.stg-adv__metrics { gap: 14px; padding: 16px; }
	.stg-adv-gauge { width: 110px; height: 110px; }
	.stg-adv-gauge__num { font-size: 1.4rem; }
	.stg-adv-next { padding: 12px 14px; }
	.stg-adv-next__text { font-size: .92rem; }

	/* Sticky progress bar that pins to the top of the section while scrolling stages */
	.stg-section--adv { position: relative; }
	.stg-adv__metrics { position: sticky; top: 76px; z-index: 5; backdrop-filter: blur(16px); background: linear-gradient(180deg, rgba(11,31,58,.85), rgba(6,18,42,.85)); }

	/* Stages become a horizontally swipeable carousel */
	.stg-adv__stages {
		display: flex !important;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 0 var(--stg-gutter) 8px;
		margin: 0 calc(var(--stg-gutter) * -1);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.stg-adv__stages::-webkit-scrollbar { display: none; }
	.stg-adv-stage { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
	.stg-adv-stage__shell { min-height: 200px; padding: 16px; }
	.stg-adv-stage__connector { display: none !important; }

	.stg-adv-recos { padding: 18px; }
	.stg-adv-recos__head h3 { font-size: 1.2rem; }
	.stg-adv-recos__col li { padding: 10px 12px; }

	/* Conditions bar — compress on mobile */
	.stg-conditions { padding: 10px 12px; }
	.stg-conditions__head { gap: 8px; margin-bottom: 8px; }
	.stg-conditions__regions { width: 100%; overflow-x: auto; padding-bottom: 4px; }
	.stg-conditions__region { white-space: nowrap; flex: 0 0 auto; }
	.stg-conditions__item { padding: 8px 12px; font-size: .78rem; }
}

/* =====================================================================
   IMMERSIVE BACKDROP for Adventure section — extra depth
   ===================================================================== */
.stg-section--adv::after {
	background:
		radial-gradient(900px 460px at 50% 12%, rgba(31,111,235,.22), transparent 65%),
		radial-gradient(700px 380px at 8% 92%,  rgba(92,209,201,.14), transparent 65%),
		radial-gradient(600px 320px at 92% 50%, rgba(255,107,61,.06),  transparent 65%);
}

/* Grain — luxury outdoor texture (cheap, GPU-friendly) */
.stg-section--adv {
	background-image:
		radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
		radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
	background-size: 3px 3px, 7px 7px;
	background-position: 0 0, 1.5px 1.5px;
	background-blend-mode: screen;
}

/* =====================================================================
   COMPLETE STATE — when readiness ≥ 95% : add subtle aurora wash
   ===================================================================== */
.stg-section--adv.is-complete .stg-adv__metrics {
	border-color: rgba(92,209,201,.32);
	box-shadow: 0 1px 1px rgba(255,255,255,.08) inset, 0 0 60px 8px rgba(92,209,201,.18), 0 24px 60px rgba(0,0,0,.4);
}
.stg-section--adv.is-complete .stg-adv__title::after {
	display: inline-block;
	margin-left: 8px;
	animation: stg-trophy 1.2s ease-out;
}
@keyframes stg-trophy { from { opacity: 0; transform: translateY(-6px) scale(.6); } to { opacity: 1; transform: none; } }