/* ============================================================================
   home.css — Oyang Archive
   The home page opens at the desk (DESIGN.md, "The Scholar's Studio 書齋"):
   a sheet of xuan paper with the title on it, the seal pressed in its corner,
   and the three volumes lying beside it in the cloth of their shelf spines.

   Materials come from tokens.css and do not follow the phase: paper is paper,
   wood is wood. The cloth and the seal do.
   The wood is a flat stand-in until the material phase brings a scan.

   Classes are prefixed hm- (home): .oa-desk already belongs to the record
   desk of the library, and library.css hides it until a volume is taken down.

   The opening is at the end of this file: things are put on the desk the way
   a person puts them there. No script.
   ============================================================================ */
.hm-desk {
  position: relative; overflow: hidden;
  background: var(--tex-wood), linear-gradient(var(--desk-hi), var(--desk) 28%, var(--desk) 90%, var(--desk-lo)); background-size: 768px 384px, auto; background-blend-mode: multiply, normal;
  border-bottom: 10px solid var(--desk-lo);
}
.hm-desk-in {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: var(--s8) 28px var(--s9);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--s7); align-items: end;
}

/* ---- the sheet ---- */
.hm-sheet {
  position: relative;
  background-color: var(--sheet); background-image: var(--tex-paper); background-size: 384px auto; background-blend-mode: multiply; color: var(--sheet-ink);
  padding: var(--s8) calc(var(--s7) + var(--s6)) var(--s6) var(--s7);
  border-radius: var(--r-sheet);
  box-shadow: var(--lift);
  transform: rotate(-.35deg);
}
.hm-sheet h1 {
  margin: 0; font: 700 clamp(30px, 3.6vw, 48px)/1.08 var(--font-display);
  letter-spacing: var(--track-tight); color: var(--sheet-ink); text-wrap: balance;
}
.hm-sheet-lead {
  margin: var(--s5) 0 0; max-width: 30em;
  font: 400 var(--fs-21)/1.5 var(--font-body); color: var(--sheet-ink-2); text-wrap: pretty;
}
.hm-sheet-lead em { font-style: italic; }
.hm-han { font-family: var(--font-han); font-feature-settings: "palt" 1; }
.hm-sheet-acts { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
/* the text button sits on paper here, not on the room's ground */
.hm-sheet .oa-btn-quiet { color: var(--sheet-ink); box-shadow: inset 0 -1px 0 var(--sheet-ink-3); }
.hm-sheet-foot {
  margin-top: var(--s7); display: flex; gap: var(--s5);
  align-items: flex-end; justify-content: space-between;
}
.hm-sheet-foot .oa-freecue {
  display: block; margin: 0; max-width: 27em;
  font: italic 400 var(--fs-16)/1.5 var(--font-body); letter-spacing: 0;
  color: var(--sheet-ink-3) !important;
}
/* the seal, pressed once */
.hm-seal {
  flex: none; display: inline-grid; place-items: center; width: 54px; height: 54px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 900; font-size: 21px; line-height: 1.02; writing-mode: vertical-rl;
  border-radius: var(--r-sm); transform: rotate(-2.5deg); opacity: .94;
}
/* The Chinese title, set the way a Chinese book sets it: one column down the
   right edge of the sheet. It used to exist only for two seconds of the old
   opening; now it stays. */
.hm-sheet-han {
  position: absolute; top: var(--s8); right: var(--s6); margin: 0;
  writing-mode: vertical-rl; white-space: nowrap;
  font-weight: 700; font-size: var(--fs-16); line-height: 1; letter-spacing: .34em;
  color: var(--sheet-ink-2);
}
.hm-sheet-han span { margin-top: 1.2em; color: var(--sheet-ink-3); font-weight: 400; }

/* ---- the three volumes ---- */
.hm-pile {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: center;
  gap: var(--s4); align-items: end; padding-bottom: var(--s3);
}
.hm-pile-cap {
  grid-column: 1 / -1; margin: var(--s4) 0 0; text-align: center;
  font: italic 400 var(--fs-14)/1.4 var(--font-body); color: var(--on-desk); opacity: .85;
}
/* a cloth-bound volume seen from the front, in the cloth of its shelf spine */
.hm-cover {
  --ink: var(--accent); --w: clamp(92px, 9.4vw, 132px);
  position: relative; display: block; width: var(--w); aspect-ratio: 3 / 4.2;
  padding: 0; border: 0; cursor: pointer; border-radius: 2px 3px 3px 2px;
  background: var(--tex-cloth), linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 80%, var(--cloth-mix)),
    var(--ink) 38%,
    color-mix(in srgb, var(--ink) 76%, var(--cloth-mix)));
  background-size: 256px, auto; background-blend-mode: multiply, normal;
  box-shadow: var(--lift), 4px 0 0 -1px #e9e1d0, 5px 0 0 -1px rgba(30, 20, 10, .3);
  transition: transform var(--dur-2) var(--ease-enter);
}
html[data-theme="dark"] .hm-cover {
  background: var(--tex-cloth), linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 42%, var(--cloth-mix)),
    color-mix(in srgb, var(--ink) 58%, var(--cloth-mix)) 38%,
    color-mix(in srgb, var(--ink) 38%, var(--cloth-mix)));
  background-size: 256px, auto; background-blend-mode: multiply, normal;
  box-shadow: var(--lift), 4px 0 0 -1px #b9b09d;
}
.hm-cover[data-ink="wen"] { --ink: var(--wen); }
.hm-cover[data-ink="xiu"] { --ink: var(--xiu); }
.hm-cover[data-ink="yu"]  { --ink: var(--yu); }
/* 線裝: the stitching of a thread-bound book, four holes */
.hm-cover::before { content: ""; position: absolute; left: 9%; top: 0; bottom: 0; border-left: 1px solid rgba(255, 255, 255, .55); }
.hm-cover::after {
  content: ""; position: absolute; left: 0; width: 9%; top: 8%; bottom: 8%;
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 0 0 / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 0 33.3% / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 0 66.6% / 100% 1px no-repeat,
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 0 100% / 100% 1px no-repeat;
}
/* 題簽: the paper title slip pasted on the cover */
.hm-cover-slip {
  position: absolute; right: 12%; top: 8%; min-height: 56%;
  writing-mode: vertical-rl; padding: .7em .32em;
  background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-edge);
  font-weight: 700; font-size: calc(var(--w) * .15); line-height: 1; letter-spacing: .14em;
}
.hm-cover-slip small { font-size: .5em; font-weight: 400; letter-spacing: .26em; margin-top: .8em; color: var(--sheet-ink-2); }
.hm-pile .hm-cover:nth-child(1) { transform: rotate(-3deg) translateY(6px); }
.hm-pile .hm-cover:nth-child(2) { transform: rotate(1.2deg); }
.hm-pile .hm-cover:nth-child(3) { transform: rotate(4deg) translateY(10px); }
@media (hover: hover) { .hm-pile .hm-cover:hover { transform: translateY(-6px) rotate(0); } }
.hm-pile .hm-cover:focus-visible { transform: translateY(-6px) rotate(0); }

@media (max-width: 820px) {
  .hm-desk-in { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s6) 16px var(--s8); }
  .hm-sheet { padding: var(--s6) calc(var(--s5) + var(--s6)) var(--s5) var(--s5); }
  .hm-sheet-han { top: var(--s6); right: var(--s4); font-size: var(--fs-14); }
  .hm-sheet-lead { font-size: var(--fs-18); }
  .hm-sheet-foot { margin-top: var(--s6); }
}

/* ---------------------------------------------------------------------------
   The opening
   Things are put on the desk: the sheet is laid down, the three volumes are
   set beside it one after another, and last the seal is pressed — the one
   quick movement; everything else is slow and even, nothing bounces.
   Runs once, only when the visitor lands on the home page (the head of
   index.html sets html.hm-desk-play before first paint), never under reduced
   motion. The resting state above is the default, so nothing can stay hidden;
   the class is taken off again after 2.6s, which frees hover to lift a book.
--------------------------------------------------------------------------- */
@keyframes hmLaySheet {
  from { opacity: 0; transform: translate(-26px, -34px) rotate(-3.2deg); }
  to   { opacity: 1; transform: rotate(-.35deg); }
}
@keyframes hmSetBook1 { from { opacity: 0; transform: translateY(-44px) rotate(-8deg); } to { opacity: 1; transform: rotate(-3deg) translateY(6px); } }
@keyframes hmSetBook2 { from { opacity: 0; transform: translateY(-44px) rotate(5deg); }  to { opacity: 1; transform: rotate(1.2deg); } }
@keyframes hmSetBook3 { from { opacity: 0; transform: translateY(-44px) rotate(9deg); }  to { opacity: 1; transform: rotate(4deg) translateY(10px); } }
@keyframes hmPressSeal {
  0%   { opacity: 0; transform: rotate(-7deg) scale(1.7); }
  70%  { opacity: .94; transform: rotate(-2.5deg) scale(.97); }
  100% { opacity: .94; transform: rotate(-2.5deg) scale(1); }
}
@keyframes hmFadeIn { from { opacity: 0; } to { opacity: .85; } }
html.hm-desk-play .hm-sheet { animation: hmLaySheet .9s var(--ease-enter) .15s both; }
html.hm-desk-play .hm-pile .hm-cover:nth-child(1) { animation: hmSetBook1 .7s var(--ease-enter) .75s both; }
html.hm-desk-play .hm-pile .hm-cover:nth-child(2) { animation: hmSetBook2 .7s var(--ease-enter) .93s both; }
html.hm-desk-play .hm-pile .hm-cover:nth-child(3) { animation: hmSetBook3 .7s var(--ease-enter) 1.11s both; }
html.hm-desk-play .hm-pile-cap { animation: hmFadeIn .6s ease 1.7s both; }
html.hm-desk-play .hm-seal { animation: hmPressSeal .26s cubic-bezier(.5, 0, .9, .4) 1.75s both; }
@media (prefers-reduced-motion: reduce) {
  .hm-cover { transition: none; }
  html.hm-desk-play .hm-sheet, html.hm-desk-play .hm-cover, html.hm-desk-play .hm-seal, html.hm-desk-play .hm-pile-cap { animation: none !important; }
}