/*
Theme Name: HWI Links
Author: Ravi
Version: 1.0
*/

/* Base reset */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background: #f5f5f5;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Container */
.links-container {
	max-width: 460px;
	width: 100%;
	margin: 0 auto;
	padding: clamp(12px, 4vw, 28px);
	text-align: center;

	opacity: 0;
	transform: translateY(10px);
	-webkit-animation: fadeInUp 0.5s ease forwards;
	        animation: fadeInUp 0.5s ease forwards;
}

@-webkit-keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Logo */
.logo {
	width: clamp(90px, 28vw, 180px);
	margin-bottom: clamp(12px, 4vw, 20px);
}

/* Title */
.links-container h1 {
	font-size: clamp(18px, 4.5vw, 24px);
	margin-bottom: 6px;
}

/* Subtitle */
.links-container p {
	font-size: clamp(13px, 3.5vw, 15px);
	color: #666;
	margin-bottom: clamp(14px, 4vw, 22px);
}

/* Links wrapper */
.links {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 2.5vw, 14px);
}

/* Buttons */
.links a {
	display: block;
	width: 100%;
	padding: clamp(12px, 3.5vw, 16px);
	border-radius: 12px;
	text-decoration: none;
	background: #0da487;
	color: #fff;
	font-size: clamp(14px, 3.8vw, 16px);
	font-weight: 500;
	transition: all 0.2s ease;

	position: relative;
	overflow: hidden;
}

/* Arrow */
.links a::after {
	content: "⟶";
	position: absolute;
	right: clamp(12px, 3vw, 18px);
	opacity: 0;
	transform: translateX(-6px);
	transition: all 0.25s ease;
}

/* Hover */
@media (hover: hover) {
	.links a:hover {
		background: #333;
		padding-right: clamp(20px, 5vw, 28px);
	}

	.links a:hover::after {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Mobile always show arrow */
@media (hover: none) {
	.links a::after {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Tap feedback */
.links a:active {
	transform: scale(0.97);
}

/* Desktop refinement */
@media (min-width: 1024px) {
	.links-container {
		max-width: 520px;
	}
}