/**
 * Shared Claude Design redesign primitives: self-hosted fonts, design
 * tokens, the fixed/scroll-aware header, the scroll-progress bar, and the
 * generic [data-reveal] entrance-animation mechanism. Used by BOTH the
 * article detail page (Phase 9, .single-redesign) and the front page
 * (Phase 10, .front-redesign) — anything here is identical on both pages.
 * Page-specific layout (hero grid, TOC sidebar, latest-articles grid,
 * etc.) lives in single-redesign.css / front-redesign.css instead.
 *
 * Loaded only on is_singular('post') || is_front_page() (see
 * inc/redesign-shared.php), after the page's base stylesheet, so every
 * rule lives in the "overrides" layer already reserved for exactly this
 * (base.css's `@layer reset, tokens, base, layout, components, utilities,
 * overrides;` order) and every selector is scoped under `.redesign` (both
 * page classes carry it — see inc/redesign-shared.php's body_class
 * filter). base.css's `:root` tokens and header.php/footer.php markup
 * are not touched — every other template keeps its current appearance.
 *
 * Font: self-hosted JetBrains Mono (a variable font) per CLAUDE.md §13
 * (no Google Fonts CDN link) — see Phase 9's report for why BIZ UDGothic
 * is a system-font candidate only, not self-hosted (Google splits it
 * into 250+ narrow CJK unicode-range files).
 */

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

@layer overrides {
	/* ---------- Tokens (scoped to redesigned pages only) ---------- */
	body.redesign {
		--sr-bg: #f4f4ee;
		--sr-ink: #16211c;
		--sr-muted: #3f4a44;
		--sr-border: #dde1d6;
		--sr-border-subtle: #eaede2;
		--sr-header-h: 88px;
		--sr-font-mono: "JetBrains Mono", "BIZ UDGothic", var(--font-sans);
		--sr-ease: cubic-bezier(0.16, 1, 0.3, 1);
	}

	body.redesign {
		background: var(--sr-bg);
	}

	.redesign #primary {
		background: var(--sr-bg);
		color: var(--sr-ink);
		font-family: var(--sr-font-mono);
		font-size: 0.9375rem;
		line-height: 1.8;
	}

	/* Decorative 12-col grid overlay, no extra markup: applied to any
	   section carrying .content-grid via a positioned ::before so it never
	   interferes with real content or hit-testing. */
	.redesign .content-grid {
		position: relative;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-3);
	}

	@media (min-width: 768px) {
		.redesign .content-grid {
			grid-template-columns: repeat(8, 1fr);
		}
	}

	@media (min-width: 1024px) {
		.redesign .content-grid {
			grid-template-columns: repeat(12, 1fr);
			gap: var(--space-4);
		}
	}

	.redesign .content-grid--lines::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background-image: repeating-linear-gradient(
			90deg,
			var(--sr-border-subtle) 0 1px,
			transparent 1px calc(100% / 12)
		);
	}

	/* ---------- Fixed, scroll-aware header (page-scoped only: the shared
	   header.php markup/classes are reused as-is, just repositioned and
	   recolored while .redesign is present on <body>) ---------- */
	.redesign #masthead {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 100;
		background: transparent;
		border-bottom: 0;
		color: var(--sr-ink);
		isolation: isolate;
		transition: transform 220ms var(--sr-ease), color 220ms var(--sr-ease);
	}

	/* The mobile menu dropdown grows #masthead's own height (it's a normal
	   in-flow child, while #masthead itself is fixed/out of flow) — without
	   an opaque background here, the page content underneath the now-taller
	   header shows/bleeds through the still-transparent header chrome
	   around the nav list. Solid background only while open, so the
	   scroll-transparent look is untouched everywhere else. */
	.redesign #masthead:has(.main-navigation.is-open) {
		background: var(--sr-bg);
	}

	/* Without JS, main.js never adds `.js` to <html>, so layout.css's
	   `.js .main-navigation { display:none }` collapse never applies either
	   — the nav is (correctly) always visible for progressive enhancement,
	   which can make #masthead taller than --sr-header-h on narrow
	   viewports. site-header-scroll.js (the thing that makes transparency
	   safe by tracking scroll/theme) also never runs without JS, so there
	   is no working part of the transparent/scroll-aware header left to
	   preserve here — just make the header solid in this combination. */
	html:not(.js) .redesign #masthead {
		background: var(--sr-bg);
	}

	.redesign #masthead.is-hidden {
		transform: translateY(-100%);
	}

	.redesign #masthead.is-theme-dark {
		color: #f4f4ee;
	}

	.redesign .site-header__inner {
		border-bottom: 0;
	}

	.redesign .site-branding__name a,
	.redesign .main-navigation a,
	.redesign .menu-toggle {
		color: inherit;
	}

	.redesign .main-navigation a:hover,
	.redesign .main-navigation a:focus-visible,
	.redesign .main-navigation a[aria-current="page"] {
		color: inherit;
		opacity: 0.62;
	}

	.redesign .menu-toggle {
		border-color: currentcolor;
	}

	.js .redesign .main-navigation {
		background: var(--sr-bg);
		color: var(--sr-ink);
	}

	/* Admin-configured CTA nav item: give a menu item with the
	   "menu-item-cta" CSS class (set from Screen Options in the nav menu
	   editor) the underlined-button treatment used across the redesign. */
	.redesign .menu-item-cta a {
		border-bottom: 1px solid currentcolor;
		padding-bottom: 7px;
	}

	.redesign .skip-link:focus {
		z-index: 200;
	}

	/* Scroll-progress bar, injected via wp_body_open (see
	   inc/redesign-shared.php) — not header.php markup. */
	.scroll-progress {
		display: none;
	}

	.redesign .scroll-progress {
		display: block;
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		height: 2px;
		z-index: 200;
		background: rgb(22 33 28 / 12%);
	}

	.scroll-progress__bar {
		display: block;
		height: 100%;
		width: 0%;
		background: var(--sr-ink);
		transition: width 120ms linear;
	}

	/* Anchor offset so fixed-header jumps (TOC, back-to-top, skip link)
	   land below the header instead of underneath it. */
	.redesign #primary {
		scroll-margin-top: calc(var(--sr-header-h) + var(--space-3));
	}

	/* ---------- Shared article card (template-parts/content/redesign-card.php)
	   Used by the article detail page's dark "次に読む記事" grid, the front
	   page's light "Latest Articles" grid, and the article list pages'
	   main column — structure only here; each page's own stylesheet
	   supplies theme-appropriate text colors. The thumbnail is a separate
	   decorative link; the title and "read more" are their own real,
	   independent links (not one card-sized link) — see
	   redesign-card.php's docblock for why. */
	.redesign-card {
		display: flex;
		flex-direction: column;
	}

	.redesign-card__media-link {
		display: block;
	}

	.redesign-card__media {
		display: block;
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.redesign-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 900ms var(--sr-ease);
	}

	.redesign-card:hover .redesign-card__media img,
	.redesign-card:focus-within .redesign-card__media img {
		transform: scale(1.04);
	}

	.redesign-card__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.redesign-card__eyebrow {
		display: block;
		margin-top: var(--space-3);
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}

	.redesign-card__title {
		display: block;
		margin: var(--space-2) 0 0;
		font-size: 1.5rem;
		line-height: 1.4;
		font-weight: 500;
	}

	.redesign-card__title a {
		text-decoration: none;
		/* h3 > a has no color rule of its own in base.css (only bare h3
		   does), so this — unlike the old whole-card-link version — does
		   not need to fight a base.css fallback; still explicit for
		   clarity and to guarantee light/dark contexts both get it. */
		color: inherit;
	}

	.redesign-card__title a:hover,
	.redesign-card__title a:focus-visible {
		opacity: 0.62;
	}

	.redesign-card__excerpt {
		display: block;
		margin-top: var(--space-2);
		font-size: 0.875rem;
		line-height: 1.8;
	}

	.redesign-card__specs {
		margin: var(--space-4) 0 0;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr auto;
		font-size: 0.75rem;
		letter-spacing: 0.04em;
	}

	.redesign-card__specs dt,
	.redesign-card__specs dd {
		display: flex;
		align-items: center;
		min-height: 32px;
		margin: 0;
		border-top: 1px solid var(--sr-border);
	}

	.redesign-card__specs dt.redesign-card__specs-last,
	.redesign-card__specs dd.redesign-card__specs-last {
		border-bottom: 1px solid var(--sr-border);
	}

	.redesign-card__specs dd {
		justify-content: flex-end;
	}

	.redesign-card__read-more {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-2);
		margin-top: var(--space-3);
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		text-decoration: none;
		border-bottom: 1px solid currentcolor;
		padding-bottom: 6px;
		color: inherit;
	}

	.redesign-card__read-more:hover,
	.redesign-card__read-more:focus-visible {
		opacity: 0.62;
	}

	/* ---------- Entrance animations ----------
	   Base state is fully visible/static; [data-reveal] only animates when
	   the browser supports scroll-driven `animation-timeline: view()` —
	   otherwise assets/js/reveal.js adds `.is-visible` via
	   IntersectionObserver as a fallback, and content never depends on JS
	   running (see reveal.js / the html:not(.js) rule below). */
	@keyframes sr-flow-down {
		from {
			opacity: 0;
			clip-path: inset(0 0 100% 0);
			transform: translateY(-10px);
		}

		to {
			opacity: 1;
			clip-path: inset(0 0 0 0);
			transform: none;
		}
	}

	@keyframes sr-zoom-in {
		from {
			transform: scale(1.06);
		}

		to {
			transform: scale(1);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) {
			.redesign [data-reveal] {
				animation: sr-flow-down 800ms var(--sr-ease) both;
				animation-timeline: view();
				animation-range: entry 4% entry 40%;
			}
		}

		@supports not (animation-timeline: view()) {
			.redesign [data-reveal] {
				opacity: 0;
			}

			.redesign [data-reveal].is-visible {
				opacity: 1;
				animation: sr-flow-down 800ms var(--sr-ease) both;
			}
		}

		/* If JS never runs at all (main.js is what adds `.js` to <html>)
		   and the browser also lacks native scroll-timeline support,
		   [data-reveal] would never get `.is-visible` — keep it visible in
		   that combination rather than permanently hidden. */
		html:not(.js) .redesign [data-reveal] {
			opacity: 1;
		}
	}
}