/* Studio Watch header button, option 2D.
 * Every value below is lifted from the handoff's own reference file,
 * studio-watch-2d-handoff/studio-watch-button.html, not from its README.
 *
 * ⚠️ Scoped to .sw-btn and loaded site-wide, because the button is in the header. It is
 * deliberately NOT part of opportunities.css, which is 100KB and belongs only on the
 * StudioWatch pages.
 * ⚠️ The theme paints every <a> and every button; these rules are written long enough to
 * win without !important. WoodMart's :is(.btn,.button,button,…) is (0,2,0) with :hover.
 */

.sw-btn,
.whb-column .sw-btn,
.wd-header-text .sw-btn {
	--sw-teal: #167A7A;
	--sw-teal-ink: #2BA3A3;
	--sw-mint: #2EC4A5;
	--sw-bg: #0f2424;
	--sw-bg-hover: #123030;
	--sw-cycle: 7s;      /* the sweep and border loop */
	--sw-sweeps: 4;      /* sweeps per page view; `infinite` to keep going */
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 42px;
	width: 236px;
	box-sizing: border-box;
	padding: 0 18px 0 16px;
	border: 1.5px solid var(--sw-teal);
	border-radius: 6px;
	background: var(--sw-bg);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
	animation: sw-border var(--sw-cycle) ease-in-out 600ms var(--sw-sweeps);
	transition: background-color 120ms cubic-bezier(0.22, 1, 0.36, 1),
	            border-color 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.whb-column .sw-btn:hover,
.sw-btn:hover { background: var(--sw-bg-hover); border-color: var(--sw-teal-ink); color: #fff; }
.sw-btn:focus-visible { outline: 2px solid rgba(253, 184, 39, .4); outline-offset: 2px; }

/* the mint shine */
.sw-btn::before {
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(46,196,165,0) 0%, rgba(46,196,165,.28) 50%, rgba(46,196,165,0) 100%);
	transform: translateX(-120%);
	animation: sw-sheen var(--sw-cycle) cubic-bezier(0.65, 0, 0.35, 1) 600ms var(--sw-sweeps);
}

.sw-btn .sw-dot { position: relative; width: 8px; height: 8px; flex: none; }
.sw-btn .sw-dot::before,
.sw-btn .sw-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sw-mint); }
.sw-btn .sw-dot::before { animation: sw-pulse 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.sw-btn .sw-dot[hidden] { display: none; }

.sw-btn .sw-text { position: relative; display: flex; flex-direction: column; gap: 3px; }
.sw-btn .sw-title { font-size: 14px; font-weight: 700; line-height: 1; color: #fff; letter-spacing: 0; }

/* the ticker: one line visible at a time */
.sw-btn .sw-ticker { position: relative; display: block; height: 10px; width: 170px; overflow: hidden; }
.sw-btn .sw-msg {
	position: absolute; left: 0; top: 0;
	font-size: 10px; font-weight: 500; line-height: 1; color: var(--sw-teal-ink);
	opacity: 0; transform: translateY(11px);
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sw-btn .sw-msg.is-new { color: var(--sw-mint); }
.sw-btn .sw-msg.is-current { opacity: 1; transform: translateY(0); }
.sw-btn .sw-msg.is-prev { opacity: 0; transform: translateY(-11px); }

@keyframes sw-sheen { 0% { transform: translateX(-120%); } 16% { transform: translateX(330%); } 100% { transform: translateX(330%); } }
@keyframes sw-border { 0%, 100% { border-color: var(--sw-teal); } 8% { border-color: var(--sw-mint); } 16% { border-color: var(--sw-teal); } }
@keyframes sw-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }

/* ⚠️ Below about 1100px the top row runs out of room, so the ticker goes and the button
   shrinks to its title. The handoff asks for exactly this rather than letting it wrap. */
@media (max-width: 1100px) {
	.sw-btn { width: auto; gap: 10px; padding: 0 14px; }
	.sw-btn .sw-ticker { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sw-btn,
	.sw-btn::before,
	.sw-btn .sw-dot::before { animation: none; }
	.sw-btn .sw-msg { transition: none; }
}