/* =====================================================================
   MW SKILLS
   As the light section above leaves, the screen dissolves to black.
   Then the heading, description, button and the skill links appear.
   Motion: assets/js/skills.js (+ native scroll animations below).
   Sizes are Figma px from the 2359px-wide frame × --mw-u.
   ===================================================================== */

@property --mw-sk-a {
	syntax: '<angle>';
	inherits: true;
	initial-value: 250deg;
}

/* --- Edit values here ------------------------------------------------ */
.mw-sk {
	--mw-u:      calc(100vw / 2359);   /* 1 Figma px */
	--sk-bg:     #101010;              /* section background */
	--sk-light:  #E4E4E4;              /* the light section it dissolves from */
	--sk-ink:    #E4E4E4;              /* heading, button text, hovered skill */
	--sk-text:   #A4A4A4;              /* description */
	--sk-skill:  #7A7A7A;              /* skill links */
	--sk-blue:   #0061FF;
	--sk-blue-0: rgba(0, 97, 255, 0);
	--sk-glow:   0 0 14px rgba(156, 209, 255, .45), 0 0 32px rgba(0, 97, 255, .7);   /* skill hover glow */
	--sk-ease:   cubic-bezier(.19, 1, .22, 1);
	--sk-time:   1.2s;                 /* how long each reveal takes */
}

/* --- Section --------------------------------------------------------- */
.mw-sk {
	position: relative;
	z-index: 3;                          /* the dissolve passes over the section above */
	width: 100vw;
	margin-inline: calc(50% - 50vw);     /* full-bleed even inside a boxed container */
	background: var(--sk-bg);
	color: var(--sk-ink);
	min-height: max(calc(1117 * var(--mw-u)), 100svh);   /* Figma height, never shorter than the screen */
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-x: clip;
	view-timeline: --mw-sk block;
}

body:has(.mw-sk) {
	overflow-x: clip;
}

/* Remove the Elementor container's padding/gap and lift it above the section before */
.e-con:has(> .elementor-widget-mw-skills),
.e-con:has(> .e-con-inner > .elementor-widget-mw-skills) {
	position: relative;
	z-index: 3;
}
.e-con:has(> .elementor-widget-mw-skills),
.e-con:has(> .e-con-inner > .elementor-widget-mw-skills),
.e-con:has(> .e-con-inner > .elementor-widget-mw-skills) > .e-con-inner {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	padding: 0 !important;
	gap: 0 !important;
}

/* --- Dissolve to black ----------------------------------------------- */
/* zone — sits behind the (still hidden) content over the first screen of
          this section; it starts the colour of the section above and
          turns black
   veil — a black layer over the last screen of the section above that
          fades in at the same time, so everything dissolves together.
   The content only appears once the screen is fully black.            */
.mw-sk__zone,
.mw-sk__veil {
	display: none;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100svh;
}

.mw-sk--js .mw-sk__zone {
	display: block;
	top: 0;
	height: min(100svh, 100%);
	background: var(--sk-light);
}

.mw-sk--js .mw-sk__veil {
	display: block;
	bottom: 100%;
	background: var(--sk-bg);
	opacity: 0;
	pointer-events: none;
}

@supports (animation-timeline: view()) {
	/* from "this section's top at 55% of the screen" to "at 5%" */
	.mw-sk--js .mw-sk__zone {
		animation: mw-sk-zone cubic-bezier(.333, 0, .667, 1) both;
		animation-timeline: --mw-sk;
		animation-range: entry 45% entry 95%;
	}
	.mw-sk--js .mw-sk__veil {
		animation: mw-sk-veil cubic-bezier(.333, 0, .667, 1) both;
		animation-timeline: --mw-sk;
		animation-range: entry 45% entry 95%;
	}
}

@keyframes mw-sk-zone {
	from { background-color: var(--sk-light); }
	to   { background-color: var(--sk-bg); }
}

@keyframes mw-sk-veil {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- Layout ---------------------------------------------------------- */
.mw-sk__inner {
	position: relative;
	z-index: 1;                          /* above the dissolve zone */
	display: grid;
	grid-template-columns: calc(1177 * var(--mw-u)) 1fr;   /* Figma: text at 218, skills at 1395 */
	align-items: end;
	padding: calc(93 * var(--mw-u)) 0 calc(205 * var(--mw-u)) calc(218 * var(--mw-u));
}

/* Heading */
.mw-sk .mw-sk__title {
	margin: 0;
	overflow: clip;
	padding-bottom: .08em;               /* room inside the mask */
	margin-bottom: -.08em;
	font-family: 'Antonio', sans-serif;
	font-weight: 100;
	font-size: calc(128 * var(--mw-u));
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--sk-ink);
}

.mw-sk__title > span {
	display: block;
}

/* Description */
.mw-sk .mw-sk__text {
	margin: calc(62 * var(--mw-u)) 0 0;
	max-width: calc(510 * var(--mw-u));
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: calc(20 * var(--mw-u));
	line-height: 1.2;
	color: var(--sk-text);
}

/* Button (same style as the hero button) */
.mw-sk__intro {
	margin-bottom: calc(14 * var(--mw-u));   /* button bottom lines up with the last skill */
}

.mw-sk__cta {
	margin-top: calc(61 * var(--mw-u));
	padding-left: calc(3 * var(--mw-u));
}

.mw-sk .mw-sk__btn,
.mw-sk .mw-sk__btn:hover,
.mw-sk .mw-sk__btn:focus,
.mw-sk .mw-sk__btn:visited {
	color: var(--sk-ink);
	text-decoration: none;
}

.mw-sk .mw-sk__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(84 * var(--mw-u));
	padding: 0 calc(37 * var(--mw-u));
	border: 1px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(var(--sk-bg), var(--sk-bg)) padding-box,
		conic-gradient(from var(--mw-sk-a), var(--sk-blue-0) 0%, var(--sk-blue) 45%, var(--sk-blue) 60%, var(--sk-blue-0) 100%) border-box;
	font-family: 'Antonio', sans-serif;
	font-weight: 300;
	font-size: calc(20 * var(--mw-u));
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.mw-sk .mw-sk__btn::before {
	content: '';
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: conic-gradient(from var(--mw-sk-a), var(--sk-blue-0) 0%, var(--sk-blue) 45%, var(--sk-blue) 60%, var(--sk-blue-0) 100%);
	filter: blur(max(8px, calc(14 * var(--mw-u))));
	opacity: 0;
	transition: opacity .45s ease;
}

.mw-sk .mw-sk__btn:hover,
.mw-sk .mw-sk__btn:focus-visible {
	animation: mw-sk-spin 2.4s linear infinite;
}

.mw-sk .mw-sk__btn:hover::before,
.mw-sk .mw-sk__btn:focus-visible::before {
	opacity: .85;
}

.mw-sk .mw-sk__btn:focus-visible {
	outline: 2px solid var(--sk-ink);
	outline-offset: 6px;
}

@keyframes mw-sk-spin {
	from { --mw-sk-a: 250deg; }
	to   { --mw-sk-a: 610deg; }
}

@media (hover: none) {
	.mw-sk .mw-sk__btn {
		animation: mw-sk-spin 2.4s linear infinite;
	}
	.mw-sk .mw-sk__btn::before {
		opacity: .7;
	}
}

/* --- Skills ---------------------------------------------------------- */
.mw-sk__cols {
	display: grid;
	grid-template-columns: calc(307 * var(--mw-u)) calc(308 * var(--mw-u)) auto;   /* Figma: 1395 / 1702 / 2010 */
	align-self: start;
}

.mw-sk .mw-sk__col {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mw-sk .mw-sk__col li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mw-sk a.mw-sk__skill,
.mw-sk a.mw-sk__skill:visited {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: calc(24 * var(--mw-u));
	line-height: calc(52 * var(--mw-u));
	color: var(--sk-skill);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .4s ease, text-shadow .6s var(--sk-ease);
}

.mw-sk a.mw-sk__skill:hover,
.mw-sk a.mw-sk__skill:focus-visible {
	color: var(--sk-ink);
	text-decoration: none;
	text-shadow: var(--sk-glow);
	outline: none;
}

/* --- Reveal (skills.js adds .is-in) ---------------------------------- */
.mw-sk--js .mw-sk__title > span {
	transform: translate3d(0, 110%, 0);
	transition: transform var(--sk-time) var(--sk-ease);
}

.mw-sk--js .mw-sk__text,
.mw-sk--js .mw-sk__cta {
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(0, 14px, 0);
	transition:
		opacity var(--sk-time) var(--sk-ease),
		filter var(--sk-time) var(--sk-ease),
		transform var(--sk-time) var(--sk-ease);
}

.mw-sk--js .mw-sk__text { transition-delay: .3s; }
.mw-sk--js .mw-sk__cta  { transition-delay: .45s; }

.mw-sk--js .mw-sk__col li {
	opacity: 0;
	filter: blur(4px);
	transform: translate3d(0, 12px, 0);
	transition:
		opacity 1s var(--sk-ease),
		filter 1s var(--sk-ease),
		transform 1s var(--sk-ease);
	transition-delay: calc(var(--d, 0ms) + var(--r, 0) * 30ms + var(--c, 0) * 90ms);
}

.mw-sk--js .is-in .mw-sk__title > span,
.mw-sk--js .is-in .mw-sk__text,
.mw-sk--js .is-in .mw-sk__cta,
.mw-sk--js .mw-sk__cols.is-in li {
	opacity: 1;
	filter: none;
	transform: none;
}

/* --- Tablet & phone -------------------------------------------------- */
@media (max-width: 1024px) {
	.mw-sk__inner {
		grid-template-columns: 1fr;
		padding: 40px 20px 110px;
	}

	.mw-sk .mw-sk__title {
		font-size: clamp(48px, 15vw, 110px);
	}

	.mw-sk .mw-sk__text {
		margin-top: 22px;
		max-width: 520px;
		font-size: 15px;
		line-height: 1.4;
	}

	.mw-sk__intro {
		margin-bottom: 0;
	}

	.mw-sk__cta {
		margin-top: 28px;
		padding-left: 0;
	}

	.mw-sk .mw-sk__btn {
		height: 56px;
		padding: 0 28px;
		font-size: 16px;
	}

	/* skills: each group as two short columns, below the button */
	.mw-sk__cols {
		display: block;
		margin-top: 64px;
	}

	.mw-sk .mw-sk__col {
		columns: 2;
		column-gap: 16px;
	}

	.mw-sk .mw-sk__col + .mw-sk__col {
		margin-top: 28px;
	}

	.mw-sk .mw-sk__col li {
		break-inside: avoid;
	}

	.mw-sk a.mw-sk__skill,
	.mw-sk a.mw-sk__skill:visited {
		font-size: 15px;
		line-height: 40px;
		white-space: normal;
	}

	.mw-sk--js .mw-sk__col li {
		transition-delay: calc(var(--d, 0ms) + var(--r, 0) * 25ms + var(--c, 0) * 200ms);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mw-sk .mw-sk__btn,
	.mw-sk .mw-sk__btn:hover {
		animation: none;
	}
}