@view-transition {
  navigation: auto;
}

:root {
  --motion-fast: 180ms;
  --motion-medium: 360ms;
  --motion-ease: cubic-bezier(.2, .72, .2, 1);
}

body[data-experience] {
  --section-accent: var(--wood, #a8764b);
  --section-soft: var(--sand, #eadfcf);
}

body[data-section="japanese"] {
  --section-accent: var(--japanese, #596d73);
  --section-soft: var(--japanese-soft, #dfe7e4);
}

body[data-section="learning"] {
  --section-accent: var(--learning, #466b75);
  --section-soft: var(--learning-soft, #dce8e8);
}

body[data-section="travel"] {
  --section-accent: var(--travel, #9c704b);
  --section-soft: #e9ded1;
}

body[data-section="tools"] {
  --section-accent: var(--primary, var(--tools, #435343));
  --section-soft: var(--surface-soft, #e9ebe3);
}

.experience-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--section-accent) var(--reading-progress, 0%), transparent 0);
  opacity: .9;
}

.experience-ready [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity var(--motion-medium) var(--motion-ease), translate var(--motion-medium) var(--motion-ease);
}

.experience-ready [data-reveal].is-visible {
  opacity: 1;
  translate: 0;
}

[data-pointer-glow] {
  position: relative;
  isolation: isolate;
}

[data-pointer-glow]::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: radial-gradient(420px circle at var(--pointer-x, 72%) var(--pointer-y, 36%), color-mix(in srgb, var(--section-accent) 13%, transparent), transparent 70%);
  opacity: var(--pointer-opacity, 0);
  transition: opacity var(--motion-medium) ease;
}

[data-pointer-glow].has-pointer::before { --pointer-opacity: 1; }

/* Homepage: the trace replaces the former paper-note illustration. */
.home-page .hero {
  min-height: min(720px, calc(100svh - 82px));
  border-block-end: 1px solid var(--line);
  background:
    linear-gradient(115deg, transparent 0 58%, color-mix(in srgb, var(--sand) 34%, transparent) 58% 100%);
}

.home-trace {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 84%, transparent), color-mix(in srgb, var(--sage) 52%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 54px, rgb(36 36 31 / 4%) 54px 55px);
}

.home-trace svg {
  position: absolute;
  inset: 17% 8% 15%;
  width: 84%;
  height: 68%;
  overflow: visible;
  color: var(--wood);
}

.home-trace path {
  fill: none;
  stroke: currentcolor;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  stroke-width: 1.6;
}

.trace-node {
  position: absolute;
  display: grid;
  min-width: 74px;
  min-height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentcolor 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink);
  font-size: 11px;
  box-shadow: 0 12px 30px rgb(36 36 31 / 7%);
  transition: translate var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.trace-node::before {
  width: 6px;
  aspect-ratio: 1;
  margin-inline-end: 7px;
  border-radius: 50%;
  content: "";
  background: var(--node-color, var(--wood));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--node-color, var(--wood)) 14%, transparent);
}

.trace-node { grid-auto-flow: column; }
.trace-node--learn { --node-color: var(--learning); inset: 15% auto auto 8%; }
.trace-node--japanese { --node-color: var(--japanese); inset: 38% 7% auto auto; }
.trace-node--travel { --node-color: var(--travel); inset: auto auto 12% 20%; }
.trace-node--return { --node-color: var(--wood); inset: auto 12% 8% auto; }

.home-trace:hover .trace-node { translate: 0 -2px; }
.home-trace-caption {
  position: absolute;
  inset: auto 20px 18px auto;
  max-width: 190px;
  color: var(--muted);
  font: 10px/1.7 Arial, sans-serif;
  text-align: end;
}

.home-path,
.home-path-tool {
  position: relative;
  overflow: clip;
  transition: border-color var(--motion-fast) ease, translate var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease;
}

.home-path::after {
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  content: "";
  background: var(--path-accent, var(--wood));
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--motion-medium) var(--motion-ease);
}

.home-path--japanese { --path-accent: #b8c9c8; }
.home-path--learning { --path-accent: var(--learning); background: linear-gradient(135deg, #dce8e8, #e7ece5); }
.home-path--travel { --path-accent: var(--travel); background: linear-gradient(135deg, #eadfcf, #f0e7dc); }

.home-path:hover,
.home-path:focus-within,
.home-path-tool:hover,
.home-path-tool:focus-visible {
  border-color: color-mix(in srgb, var(--path-accent, var(--wood)) 68%, var(--line));
  box-shadow: 0 18px 38px rgb(36 36 31 / 8%);
  translate: 0 -3px;
}

.home-path:hover::after,
.home-path:focus-within::after { scale: 1 1; }
.home-path-tool > span:last-child { transition: translate var(--motion-fast) var(--motion-ease); }
.home-path-tool:hover > span:last-child,
.home-path-tool:focus-visible > span:last-child { translate: 5px 0; }

.recent a > span { transition: translate var(--motion-fast) var(--motion-ease), color var(--motion-fast) ease; }
.recent a:hover > span,
.recent a:focus-visible > span { color: var(--section-accent); translate: 4px 0; }

/* Japanese hub: a focused route, not another card wall. */
body[data-section="japanese"] .hub-hero {
  position: relative;
  overflow: clip;
  background: linear-gradient(108deg, transparent 0 62%, color-mix(in srgb, var(--japanese-soft) 58%, transparent) 62% 100%);
}

body[data-section="japanese"] .hub-hero::after {
  position: absolute;
  inset: auto 0 0;
  width: 38%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--japanese), transparent);
}

body[data-section="japanese"] .hub-cards { position: relative; }
body[data-section="japanese"] .hub-cards .card {
  --card-accent: var(--japanese);
  position: relative;
  overflow: clip;
  transition: translate var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

body[data-section="japanese"] .hub-cards .card:nth-child(1) { --card-accent: #91aaa9; }
body[data-section="japanese"] .hub-cards .card:nth-child(2) { --card-accent: #6e836d; }
body[data-section="japanese"] .hub-cards .card:nth-child(3) { --card-accent: #ae7a58; }
body[data-section="japanese"] .hub-cards .card:nth-child(4) { --card-accent: #73746d; }
body[data-section="japanese"] .hub-cards .card::after {
  position: absolute;
  inset: auto 18px 16px auto;
  content: "↗";
  color: var(--card-accent);
  font-size: 18px;
  opacity: .55;
  transition: translate var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) ease;
}

body[data-section="japanese"] .hub-cards .card:hover,
body[data-section="japanese"] .hub-cards .card:focus-visible {
  box-shadow: 0 18px 38px rgb(36 36 31 / 9%);
  translate: 0 -3px;
}

body[data-section="japanese"] .hub-cards .card:hover::after,
body[data-section="japanese"] .hub-cards .card:focus-visible::after { opacity: 1; translate: 3px -3px; }

body[data-section="japanese"] .hub-featured a {
  border-block-start: 3px solid color-mix(in srgb, var(--japanese) 65%, var(--line));
}

/* Learning: editorial index with a technical accent, without a second landing page. */
body[data-section="learning"] .learning-hero {
  position: relative;
  overflow: clip;
  background: linear-gradient(115deg, transparent 0 67%, color-mix(in srgb, var(--learning-soft) 55%, transparent) 67% 100%);
}

.learning-feature-stack { min-width: 0; display: grid; gap: 16px; }
.learning-topic-grid--compact {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--learning-soft) 42%, transparent);
}

.learning-topic-grid--compact a {
  min-height: 112px;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.learning-topic-grid--compact a:hover,
.learning-topic-grid--compact a:focus-visible { background: var(--learning-soft); }
.learning-article-grid article { position: relative; }
.learning-article-grid article::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--topic-color, var(--learning));
  scale: 1 0;
  transform-origin: top;
  transition: scale var(--motion-medium) var(--motion-ease);
}

.learning-article-grid article[data-topic="development"] { --topic-color: #527487; }
.learning-article-grid article[data-topic="operation"] { --topic-color: #8a6c46; }
.learning-article-grid article[data-topic="planning"] { --topic-color: #6d728b; }
.learning-article-grid article[data-topic="tools"] { --topic-color: #52745c; }
.learning-article-grid article:hover::before,
.learning-article-grid article:focus-within::before { scale: 1 1; }
.learning-article-grid a { transition: background-color var(--motion-fast) ease, padding-inline var(--motion-fast) var(--motion-ease); }
.learning-article-grid a:hover,
.learning-article-grid a:focus-visible { padding-inline-start: calc(clamp(24px, 4vw, 42px) + 8px); }

/* Tools: category colour communicates function; the workspace remains stable. */
body[data-section="tools"] .home-hero {
  position: relative;
  border-block-end: 1px solid var(--line);
  background: radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--section-accent) 10%, transparent), transparent 32%);
}

body[data-section="tools"] #tool-search:focus-within {
  border-color: color-mix(in srgb, var(--section-accent) 65%, var(--line));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--section-accent) 13%, transparent);
}

body[data-section="tools"] .tool-card {
  --tool-accent: var(--section-accent);
  position: relative;
  overflow: clip;
}

body[data-section="tools"] .tool-card[data-category="pdf"] { --tool-accent: #9a5d50; }
body[data-section="tools"] .tool-card[data-category="image"] { --tool-accent: #58756b; }
body[data-section="tools"] .tool-card[data-category="media"] { --tool-accent: #6d638a; }
body[data-section="tools"] .tool-card[data-category="developer"] { --tool-accent: #4e6f88; }
body[data-section="tools"] .tool-card[data-category="text"] { --tool-accent: #8a7048; }
body[data-section="tools"] .tool-card[data-category="generator"] { --tool-accent: #6c7a54; }
body[data-section="tools"] .tool-card[data-category="calculator"] { --tool-accent: #4f7180; }
body[data-section="tools"] .tool-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  content: "";
  background: var(--tool-accent);
  scale: 1 0;
  transform-origin: bottom;
  transition: scale var(--motion-medium) var(--motion-ease);
}

body[data-section="tools"] .tool-card:hover,
body[data-section="tools"] .tool-card:focus-visible { border-color: var(--tool-accent); }
body[data-section="tools"] .tool-card:hover::before,
body[data-section="tools"] .tool-card:focus-visible::before { scale: 1 1; }
body[data-section="tools"] .tool-card > strong:last-child { transition: translate var(--motion-fast) var(--motion-ease); }
body[data-section="tools"] .tool-card:hover > strong:last-child,
body[data-section="tools"] .tool-card:focus-visible > strong:last-child { translate: 5px 0; }

@media (max-width: 850px) {
  .learning-topic-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .home-page .hero { min-height: auto; background: none; }
  .home-trace { min-height: 270px; }
  .trace-node { min-width: 66px; min-height: 38px; font-size: 10px; }
  .learning-topic-grid--compact { grid-template-columns: 1fr 1fr; }
  .learning-topic-grid--compact a { min-height: 104px; }
  .learning-article-grid a:hover,
  .learning-article-grid a:focus-visible { padding-inline-start: 8px; }
}

@media (max-width: 620px) {
  body[data-section="tools"] #all-tools-grid .tool-card {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 17px 16px;
  }

  body[data-section="tools"] #all-tools-grid .tool-card p { -webkit-line-clamp: 1; }
  body[data-section="tools"] #all-tools-grid .tool-card > strong:last-child { align-self: center; }
}

@media (max-width: 460px) {
  .home-trace { min-height: 250px; }
  .home-trace svg { inset: 18% 5% 15%; width: 90%; }
  .trace-node--learn { inset-inline-start: 5%; }
  .trace-node--japanese { inset-inline-end: 4%; }
  .trace-node--travel { inset-inline-start: 9%; }
  .trace-node--return { inset-inline-end: 5%; }
  .home-trace-caption { display: none; }
  .learning-topic-grid--compact { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .home-path,
  .home-path-tool,
  body[data-section="japanese"] .hub-cards .card,
  body[data-section="tools"] .tool-card { translate: none; }

  .home-path:active,
  .home-path-tool:active,
  body[data-section="japanese"] .hub-cards .card:active,
  body[data-section="tools"] .tool-card:active { filter: brightness(.97); }

  .home-path::after,
  body[data-section="tools"] .tool-card::before { scale: 1 1; opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .experience-ready [data-reveal] { opacity: 1; translate: none; }
  [data-pointer-glow]::before { display: none; }
  .home-trace path { stroke-dasharray: none; }
  .home-path,
  .home-path-tool,
  .trace-node,
  body[data-section="japanese"] .hub-cards .card,
  .learning-article-grid a,
  body[data-section="tools"] .tool-card { translate: none !important; }
}