/* =============================================================
   WAVE Developer Studio — Portal (index)
   Page-specific styles. Design tokens live in colors_and_type.css
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
}

html {
	background: var(--bg);
	transition: background-color var(--dur-base) var(--ease-standard);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: transparent;
	color: var(--text);
	position: relative;
	transition: color var(--dur-base) var(--ease-standard);
}

/* === Background art (theme-aware) === */

.bg-art {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../assets/backgrounds/bg-top-light.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
[data-theme="dark"] .bg-art {
	background-image: url("../assets/backgrounds/bg-top-dark.png");
}

/* Animated nodes layer — sits above bg image, below content */
.bg-nodes {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

/* Lift all real content above the fixed bg layer */
.topbar, main, footer { position: relative; z-index: 1; }

/* Soft vignette so the center stays calm and readable */
.bg-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse 70% 60% at 50% 50%,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0) 60%
		);
}
[data-theme="dark"] .bg-art::after {
	background:
		radial-gradient(
			ellipse 70% 60% at 50% 50%,
			rgba(10, 10, 18, 0.55) 0%,
			rgba(10, 10, 18, 0) 60%
		);
}

/* Edge vignette — slowly "breathes" so the frame feels alive */
.bg-art::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 90% 80% at 50% 50%,
		rgba(0, 0, 0, 0) 28%,
		rgba(0, 0, 0, 0.65) 100%
	);
	animation: bg-vignette-breathe 10s ease-in-out infinite;
	will-change: opacity;
}
[data-theme="dark"] .bg-art::before {
	background: radial-gradient(
		ellipse 90% 80% at 50% 50%,
		rgba(0, 0, 0, 0) 28%,
		rgba(0, 0, 0, 0.88) 100%
	);
}
@keyframes bg-vignette-breathe {
	0%, 100% { opacity: 0.65; }
	50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.bg-art::before { animation: none; opacity: 0.85; }
}

/* === Top bar (theme toggle only — no nav) === */

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-5) var(--gutter);
	flex: 0 0 auto;
}

.topbar .mark {
	font-family: var(--font-en);
	font-size: var(--t-micro);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--text-muted);
}

.topbar .mark .dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 999px;
	margin-right: 8px;
	vertical-align: middle;
	transform: translateY(-1px);
}

.theme-toggle {
	appearance: none;
	border: 1px solid var(--border);
	background: transparent;
	color: var(--text-muted);
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition:
		border-color var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard);
}
.theme-toggle:hover { border-color: var(--text); color: var(--text); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* === Main / hero === */

main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-9) var(--gutter) var(--space-8);
	text-align: center;
}

.logo-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}

.logo {
	width: clamp(280px, 44vw, 520px);
	height: auto;
	display: block;
}
.logo.is-dark { display: none; }
[data-theme="dark"] .logo.is-light { display: none; }
[data-theme="dark"] .logo.is-dark { display: block; }

.tagline {
	font-family: var(--font-jp);
	font-size: var(--t-body);
	color: var(--text-muted);
	line-height: var(--lh-snug);
	letter-spacing: 0.02em;
	max-width: 520px;
	margin: 0;
}

.tagline .en {
	display: block;
	font-family: var(--font-en);
	font-size: var(--t-micro);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-3);
}

/* === Product grid === */

.grid {
	width: 100%;
	max-width: var(--container-max);
	margin-top: var(--space-9);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

@media (max-width: 880px) {
	.grid { grid-template-columns: 1fr; gap: var(--space-4); }
	main { padding: var(--space-7) var(--gutter) var(--space-6); }
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-6) var(--space-5) var(--space-5);
	min-height: 280px;
	text-decoration: none;
	color: inherit;
	transition:
		border-color var(--dur-base) var(--ease-standard),
		box-shadow var(--dur-base) var(--ease-standard),
		background-color var(--dur-base) var(--ease-standard);
	overflow: hidden;
}

.card[data-state="active"]:hover {
	border-color: var(--text);
	box-shadow: var(--elev-2);
}

.card[data-state="soon"] {
	cursor: default;
	background: color-mix(in srgb, var(--bg-soft) 78%, transparent);
}

/* Index number — quietly tags each card */
.card .num {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	font-family: var(--font-en);
	font-size: var(--t-micro);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	color: var(--text-faint);
}

.card .label {
	font-family: var(--font-en);
	font-size: var(--t-micro);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--space-4);
}

.card .name {
	font-family: var(--font-en);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-tight);
	line-height: var(--lh-tight);
	color: var(--text);
	margin: 0 0 var(--space-3);
}

.card .desc {
	font-family: var(--font-jp);
	font-size: var(--t-small);
	color: var(--text-muted);
	line-height: var(--lh-loose);
	margin: 0;
	max-width: 30ch;
}

.card .foot {
	margin-top: var(--space-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.card .foot .meta {
	font-family: var(--font-en);
	font-size: var(--t-micro);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
	text-transform: uppercase;
}

.card .foot .arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-en);
	font-size: var(--t-small);
	font-weight: var(--weight-medium);
	color: var(--text);
	transition: gap var(--dur-base) var(--ease-standard);
}
.card[data-state="active"]:hover .foot .arrow { gap: 14px; }
.card[data-state="active"]:hover .foot .arrow svg { color: var(--accent); }

.card .foot .arrow svg {
	width: 18px;
	height: 18px;
	transition: color var(--dur-base) var(--ease-standard);
}

/* Soon variant — muted, status pill replaces arrow */
.card[data-state="soon"] .name,
.card[data-state="soon"] .desc {
	color: var(--text-faint);
}
.card[data-state="soon"] .label { color: var(--text-faint); }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	font-family: var(--font-en);
	font-size: var(--t-micro);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	background: var(--bg);
}
.pill .pulse {
	width: 6px;
	height: 6px;
	background: var(--text-faint);
	border-radius: 999px;
}

/* Accent rule — only the active WAVE ONE card gets the brand stripe */
.card[data-flag="primary"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--accent);
}

/* === Footer === */

footer {
	flex: 0 0 auto;
	padding: var(--space-6) var(--gutter);
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
	text-align: center;
}

footer .copy,
footer .links {
	font-family: var(--font-en);
	font-size: var(--t-micro);
	letter-spacing: var(--tracking-wide);
	color: var(--text-faint);
}
footer .links { display: flex; gap: var(--space-5); }
footer .links a { color: var(--text-muted); }
footer .links a:hover { color: var(--text); }

/* === Reveal animation === */

@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(8px); }
	.is-revealed {
		opacity: 1;
		transform: none;
		transition:
			opacity var(--dur-slow) var(--ease-standard),
			transform var(--dur-slow) var(--ease-standard);
	}
	.reveal.d1 { transition-delay: 80ms; }
	.reveal.d2 { transition-delay: 160ms; }
	.reveal.d3 { transition-delay: 240ms; }
	.reveal.d4 { transition-delay: 320ms; }
	.reveal.d5 { transition-delay: 400ms; }
}