/*
 * 墨溟 · home — 主页
 * 一屏水，两个字；往下是自述、去处与此刻。
 */

/* ------------------------------------------------------------------ 水 */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* 字的位置由 home.js 量好后写进来；没有脚本时用这里的值 */
  --ts: min(30vw, 56svh);
  --tx: var(--margin);
  --ty: calc(46svh - var(--ts) * .55);
  --tw: calc(var(--ts) * 2.02);
  --th: var(--ts);
}
.hero__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.hero__title {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: var(--tw);
  height: var(--th);
  font-size: var(--ts);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}
.hero__glyphs { display: flex; gap: calc(var(--ts) * .02); }
.hero.is-portrait .hero__glyphs { flex-direction: column; gap: calc(var(--ts) * .02); }
/* 有墨的时候，字由画布来写；这里的字只留给读屏和选择 */
.hero.has-ink .hero__glyphs { color: transparent; }

.hero__name {
  position: absolute;
  left: calc(var(--tx) + var(--ts) * .03);
  top: calc(var(--ty) + var(--th) + clamp(18px, 3.4svh, 40px));
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 32px);
  flex-wrap: wrap;
  pointer-events: none;
}
.hero__latin {
  font-size: clamp(40px, 4.6vw, 76px);
  line-height: .9;
  letter-spacing: -.01em;
}
.hero__motto {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: .42em;
  color: var(--ink-2);
}
.hero__motto .latin {
  font-size: 1.15em;
  font-style: italic;
  letter-spacing: 0;
  color: var(--ink-3);
}

.hero__verse {
  position: absolute;
  right: var(--margin);
  top: calc(var(--ty) + var(--ts) * .04);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  pointer-events: none;
}
.hero__verse blockquote {
  writing-mode: vertical-rl;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.7;
  letter-spacing: .46em;
  color: var(--ink);
}
.hero__verse figcaption {
  writing-mode: vertical-rl;
  letter-spacing: .3em;
}

.hero__meta {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: calc(clamp(20px, 3.4svh, 34px) + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  pointer-events: none;
}
.hero__now {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ink-2);
}
.hero__now .num { letter-spacing: .06em; font-size: 12px; transform: translateY(-1px); }
.hero__hint {
  justify-self: center;
  transition: opacity 1.2s var(--ease);
}
.hero__hint.is-done { opacity: 0; }
.hero__down {
  justify-self: end;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  pointer-events: auto;
  color: var(--ink-2);
}
.hero__down .arrow { width: auto; animation: bob 2.4s var(--ease-io) infinite; }
.hero__down:hover { color: var(--ink); }
@keyframes bob { 50% { transform: translateY(4px); } }

/* 开场：先只有水，字落定之后其余的才浮上来 */
.js .hero [data-intro] { opacity: 0; transform: translateY(10px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.js .hero.is-ready [data-intro] { opacity: var(--fade, 1); transform: none; }
.js .hero.is-ready.is-scrolled [data-intro] { transition: opacity .2s linear; }
.js .hero.is-ready .hero__verse { transition-delay: .25s; }
.js .hero.is-ready .hero__meta { transition-delay: .5s; }
.no-reveal .hero [data-intro] { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 自述 */

.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: clamp(120px, 20vh, 240px) var(--margin) clamp(100px, 16vh, 200px);
}
.about__label { grid-column: 1 / span 3; padding-top: .9em; }
.about__lede {
  grid-column: 4 / span 9;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.52;
  letter-spacing: .03em;
  text-wrap: pretty;
}
.about__lede .c { color: var(--ink-4); transition: color .9s var(--ease-ink); }
.about__lede .c.is-wet { color: var(--ink); }
.about__en {
  grid-column: 4 / span 6;
  margin-top: clamp(32px, 5vh, 56px);
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.4;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ 去处 */

.ways { padding: 0 var(--margin) clamp(120px, 18vh, 220px); }
.ways__label { margin-bottom: 28px; }
.ways__list { border-top: 1px solid var(--ink); }
.way {
  --mx: 50%; --my: 50%;
  position: relative;
  display: grid;
  grid-template-columns: clamp(48px, 7vw, 120px) minmax(0, 1.25fr) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--gutter);
  padding: clamp(26px, 3.6vw, 48px) 0;
  border-bottom: 1px solid var(--hair-2);
  isolation: isolate;
  background: var(--paper);
}
/* 墨从指针落下的地方晕开。字用 difference 混合：墨走到哪里，字就在哪里由黑翻白 */
.way::before {
  content: '';
  position: absolute;
  inset: -1px calc(var(--margin) * -1);
  z-index: -1;
  background: var(--ink);
  -webkit-mask: url(/assets/img/blot.svg?v=56d38b5e) no-repeat;
  mask: url(/assets/img/blot.svg?v=56d38b5e) no-repeat;
  -webkit-mask-size: var(--bs) var(--bs);
  mask-size: var(--bs) var(--bs);
  -webkit-mask-position: calc(var(--mx) + var(--margin) - var(--bs) / 2) calc(var(--my) - var(--bs) / 2);
  mask-position: calc(var(--mx) + var(--margin) - var(--bs) / 2) calc(var(--my) - var(--bs) / 2);
  --bs: 0px;
  transition: --bs 1.15s cubic-bezier(.3, .02, .18, 1);
}
@property --bs { syntax: '<length>'; inherits: false; initial-value: 0px; }
.way:hover::before, .way:focus-visible::before { --bs: 3600px; }
.way:focus-visible { outline-offset: -4px; }
.way__name, .way__text, .way__go { mix-blend-mode: difference; color: #fff; }
.way__desc { color: #fff; }
.way__live { color: rgb(150, 148, 144); }
.way__live b { color: rgb(190, 188, 184); }

.way__i { align-self: start; padding-top: .9em; font-size: 12px; color: var(--ink-3); transition: color .5s; }
.way:hover .way__i { color: var(--seal); }
.way__name { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 28px); flex-wrap: wrap; }
.way__zh {
  font-size: clamp(60px, 9vw, 150px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  transition: transform .9s var(--ease);
}
.way:hover .way__zh { transform: translateX(.06em); }
.way__en { font-size: clamp(26px, 2.6vw, 44px); line-height: 1; }
.way__text { display: grid; gap: 10px; align-self: center; }
.way__desc { font-size: var(--t-lead); letter-spacing: .06em; }
.way__live {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.6;
  min-height: 1.6em;
}
.way__live b { font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.way__go {
  justify-self: end;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1;
  transition: transform .8s var(--ease);
}
.way:hover .way__go { transform: translateX(10px) rotate(0deg); }

/* ------------------------------------------------------------------ 此刻 */

.now {
  padding: clamp(80px, 12vh, 140px) var(--margin) clamp(120px, 16vh, 200px);
  border-top: 1px solid var(--hair);
}
.now__label { margin-bottom: clamp(32px, 6vh, 64px); }
.now__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}
.now__term {
  grid-column: 1 / span 6;
  font-size: clamp(96px, 15vw, 248px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: .02em;
}
.now__intro { grid-column: 8 / span 5; padding-bottom: .6em; }
.now__day { font-size: var(--t-h3); letter-spacing: .1em; }
.now__note { margin-top: 10px; font-size: var(--t-lead); color: var(--ink-2); line-height: 1.8; }

.voyage { margin: clamp(48px, 8vh, 96px) 0 0; }
.voyage__chart { width: 100%; height: auto; overflow: visible; }
.voyage__cap { margin-top: 18px; max-width: 34em; font-size: 13px; line-height: 1.8; color: var(--ink-3); }
.voyage .v-base { stroke: var(--hair-2); }
.voyage .v-tick { stroke: var(--ink-3); }
.voyage .v-tick.is-major { stroke: var(--ink); }
.voyage .v-past { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.voyage .v-future { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 5; }
.voyage .v-wash { fill: url(#vWash); }
.voyage .v-wash-stop { stop-color: var(--ink); }
.voyage .v-wake { stroke: var(--seal); stroke-width: 1; stroke-linecap: round; }
.voyage .v-label { fill: var(--ink-3); font-family: var(--serif); font-size: 13px; letter-spacing: .1em; }
.voyage .v-label.is-major { fill: var(--ink); }
.voyage .v-label.is-now { fill: var(--seal); }
.voyage .v-mark { stroke: var(--seal); stroke-width: 1; }
.voyage .v-boat { fill: var(--seal); }
.voyage .v-sail { fill: var(--seal); opacity: .9; }
.voyage .v-boat-g { animation: float 4.8s var(--ease-io) infinite; }
.voyage .v-month { fill: var(--ink-4); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
@keyframes float { 50% { transform: translateY(-3px) rotate(-1.5deg); } }

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: clamp(56px, 9vh, 104px);
  border-top: 1px solid var(--hair-2);
}
.fact { padding: 22px 24px 0 0; border-right: 1px solid var(--hair); }
.fact:last-child { border-right: 0; }
.fact dd { display: grid; gap: 6px; margin-top: 18px; }
.fact strong { font-size: clamp(26px, 2.4vw, 38px); font-weight: 600; line-height: 1.2; letter-spacing: .04em; }
.fact span { font-size: 14px; color: var(--ink-2); letter-spacing: .04em; }
.fact__moon { grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.fact__moon strong, .fact__moon span { grid-column: 2; }
.moon { grid-row: 1 / span 2; width: 52px; height: 52px; overflow: visible; }
.moon .m-dark { fill: var(--ink); }
.moon .m-lit { fill: var(--paper); }
.moon .m-rim { fill: none; stroke: var(--ink); stroke-width: .8; }
:root[data-theme="dark"] .moon .m-dark { fill: var(--paper-3); }
:root[data-theme="dark"] .moon .m-lit { fill: var(--ink); }
:root[data-theme="dark"] .moon .m-rim { stroke: var(--ink-4); }
.now__where { margin-top: 28px; text-transform: none; letter-spacing: .06em; }

.saying {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin: clamp(80px, 14vh, 160px) 0 0;
}
.saying__text {
  grid-column: 2 / span 8;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.6;
  letter-spacing: .04em;
  text-wrap: balance;
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}
.saying__text::before { content: '「'; margin-left: -.9em; }
.saying__text::after { content: '」'; }
.saying__text.is-changing { opacity: 0; filter: blur(6px); }
.saying figcaption { grid-column: 11 / span 2; justify-self: end; }
.saying__next .arrow { width: auto; }
.saying__next:hover .arrow { transform: rotate(180deg); }

/* ------------------------------------------------------------------ Dify 对话气泡，换成墨色 */

#dify-chatbot-bubble-button {
  background-color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--hair-2), 0 12px 30px -10px rgba(0, 0, 0, .45) !important;
}
#dify-chatbot-bubble-window {
  width: 24rem !important;
  height: 40rem !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 120px) !important;
  border-radius: 14px !important;
}

/* ------------------------------------------------------------------ 响应 */

@media (max-width: 1100px) {
  .way { grid-template-columns: clamp(40px, 6vw, 80px) minmax(0, 1fr) auto; row-gap: 14px; }
  .way__text { grid-column: 2; grid-row: 2; }
  .way__go { grid-column: 3; grid-row: 1 / span 2; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .fact:nth-child(2) { border-right: 0; }
  .saying__text { grid-column: 1 / span 10; }
}
@media (max-width: 760px) {
  .hero__verse { top: calc(var(--ty) + 4px); gap: 10px; }
  .hero__verse blockquote { font-size: 15px; letter-spacing: .36em; }
  .hero__meta { grid-template-columns: 1fr auto; }
  .hero__hint { display: none; }
  .hero__now { gap: 2px 14px; font-size: 12px; letter-spacing: .12em; }
  .hero__name { gap: 6px 14px; }
  .hero__motto { letter-spacing: .3em; font-size: 14px; }
  .hero__motto .latin { display: none; }
  .about__label, .about__lede, .about__en { grid-column: 1 / -1; }
  .about__label { margin-bottom: 24px; }
  .now__term, .now__intro { grid-column: 1 / -1; }
  .now__intro { margin-top: 20px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { border-right: 0; border-bottom: 1px solid var(--hair); padding-bottom: 20px; }
  .saying__text, .saying figcaption { grid-column: 1 / -1; }
  .saying__text { padding-left: .9em; }
  .saying figcaption { justify-self: start; margin-top: 28px; }
  .voyage { margin-left: calc(var(--margin) * -1); margin-right: calc(var(--margin) * -1); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .voyage::-webkit-scrollbar { display: none; }
  .voyage__chart { min-width: 860px; padding: 0 var(--margin); }
  .voyage__cap { padding: 0 var(--margin); }
}