/* =====================================================================
   The landing page (index.html, #panel-home): the site opens on it. A word on the study under the title, a fleuron,
   and then two notes, each with an inked arrow drawn down to one of the bar's two buttons (css/taskbar.css), saying
   what Chapters and Tools hold. The notes stand where the buttons do: over the two halves of the screen on a phone,
   and over the two buttons in the middle of the bar on a wider screen. The arrows are drawn in once, as with a pen,
   and their heads keep nodding at the bar; neither moves where motion is not wanted.
   ===================================================================== */

/* The title page (<header>: eyebrow, title, About) belongs to the landing page alone: a chapter opens at its own head,
   with nothing above it. While the landing page is open the header is only the title, no About and no rule, and the
   page ends at the bar. */
html:not(.on-home) .page > header { display: none; }
html[data-opening] #panel-home { display: none !important; }      /* the page opens on a chapter: the landing page waits (index.html) */                 /* (html.on-home: index.html at first, then js/app.js) */
html.on-home .hd-about, html.on-home .head-rule { display: none; }
html.on-home .page { margin-bottom: var(--tk-real, var(--tk-h)); overflow-x: clip; }   /* the notes are laid as wide as the screen */

/* (by its id, so that it outranks .tab-panel.active's display: block; and shut, hidden as any other chapter is) */
#panel-home.active { display: flex; flex-direction: column; min-height: calc(100svh - var(--tk-real, var(--tk-h)) - 17rem); }
#panel-home:not(.active), #panel-home[hidden] { display: none; }
.home-lede { max-width: 36rem; margin: 0.4rem auto 0; text-align: center; font-size: 1.12rem; line-height: 1.5; color: var(--muted); text-wrap: balance; }
.home-lede b, .home-pt p b { color: var(--ink); font-weight: 500; }
.home-fleuron { margin: 1rem 0 0; text-align: center; color: var(--rubric); font-size: 1.3rem; line-height: 1; }

/* the two notes, laid over the whole width of the screen so that they stand over the bar's buttons, not the page's columns;
   both in one cell at its foot, so that the row is as tall as the taller of them and nothing above is overlapped */
.home-pointers {
  --btn-l: 25%; --btn-r: 75%;
  position: relative; flex: 1 1 auto; box-sizing: border-box; min-height: 15rem; margin-top: 1rem;
  width: 100vw; margin-left: calc(50% - 50vw);
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); align-items: end; justify-items: start;
}
@media (min-width: 768px) { .home-pointers { --btn-l: calc(50% - 6.6rem); --btn-r: calc(50% + 6.6rem); } }
.home-pt {
  position: relative; grid-area: 1 / 1; width: min(44vw, 17rem); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.home-pt-l { left: var(--btn-l); }
.home-pt-r { left: var(--btn-r); }
.home-pt h2 { margin: 0 0 4px; font-family: var(--caps); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.16em; color: var(--rubric); }
.home-pt p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--muted); text-wrap: balance; }
@media (min-width: 768px) { .home-pt { width: 12.4rem; } }
@media (max-width: 420px) { .home-pt p { font-size: 0.92rem; } }

/* the arrows */
.home-arrow { display: block; width: 6rem; height: 7.5rem; margin-top: 8px; color: var(--gilt); overflow: visible; }
.home-arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-draw { stroke-dasharray: 6 5; animation: home-draw 1.4s ease-out forwards; }
.home-pt-r .home-draw { animation-delay: 0.35s; }
.home-bob { animation: home-bob 1.8s ease-in-out infinite; }
@keyframes home-draw { from { stroke-dashoffset: 180; opacity: 0.2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes home-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .home-draw, .home-bob { animation: none; } }

/* "Start here" at the head of the chapters' sheet (css/taskbar.css has the Bible's entry at its foot the same way) */
.toc .tab.tab-home { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; column-gap: 6px; margin-bottom: 10px; padding: 11px 2px 11px 6px; border-bottom: 3px double var(--press); }
.toc .tab.tab-home .tn { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.1rem; }
.toc .tab.tab-home .tt { font-size: 1.2rem; }
.toc .tab.tab-home.active .tn, .toc .tab.tab-home:hover .tn { color: var(--rubric); }

/* The way into the Tabernacle (index.html, .home-feature): a still copy of its side view (js/tabernacle.js), and over its
   corner a bubble that names it; the whole is one link. On a phone the bubble stands beneath the drawing, its tail
   pointing up at it; on a wider screen it sits at the drawing's upper right, its tail pointing down into it. */
.home-feature {
  position: relative; display: block; box-sizing: border-box; width: min(100%, 46rem); margin: 1.6rem auto 0; padding: 14px 14px 0;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, transparent);
  color: inherit; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.home-feature:hover { border-color: var(--rubric); box-shadow: 0 10px 26px var(--shadow); transform: translateY(-2px); }
.home-feature:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.home-feature-art { display: block; pointer-events: none; }
.home-feature-art svg { display: block; width: 100%; height: auto; }
.home-bubble {
  position: relative; display: flex; flex-direction: column; gap: 3px; margin: 14px -1px -1px; padding: 12px 16px 14px;
  border: 1px solid var(--rubric); border-radius: 14px 14px 0 0; background: var(--modal); text-align: left;
}
.home-bubble::before {           /* the tail, pointing up at the drawing */
  content: ""; position: absolute; top: -9px; left: 2.2rem; width: 16px; height: 16px; background: var(--modal);
  border-left: 1px solid var(--rubric); border-top: 1px solid var(--rubric); transform: rotate(45deg);
}
.home-bubble-k { font-family: var(--caps); font-size: 0.82rem; letter-spacing: 0.14em; color: var(--rubric); }
.home-bubble-t { font-family: var(--display); font-size: 1.32rem; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.home-bubble-s { font-size: 0.95rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.home-bubble-go { margin-top: 4px; font-family: var(--caps); font-size: 1rem; letter-spacing: 0.06em; color: var(--rubric); }
.home-feature:hover .home-bubble-go { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .home-feature { padding: 22px 22px 26px; }
  .home-feature-art { width: 78%; }
  .home-bubble {
    position: absolute; top: -18px; right: -26px; width: 16.5rem; margin: 0; border-radius: 16px;
    box-shadow: 0 10px 28px var(--shadow); animation: home-bubble 3.2s ease-in-out infinite;
  }
  .home-bubble::before { top: auto; bottom: -9px; left: 1.6rem; transform: rotate(225deg); }
}
@keyframes home-bubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .home-bubble { animation: none; } }