/* The page around the pond, after stqfdyr/ascii-pond's own template (MIT).
   Geist Mono by Vercel, SIL OFL 1.1 — see fonts/OFL-geist-mono.txt. */
@font-face { font-family: "Geist Mono"; src: url("./fonts/geist-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --background-color: #1a1917;     /* the warm black the pond sits on */
  --foreground-color: #fff7f0;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo,
          "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", monospace;
}
/* Native scrollbars, form controls and caret colours follow the theme too. */
:root { color-scheme: dark; }
:root[data-theme="light"] {
  --background-color: #f5f4f1;     /* paper: same page the light pond tiles sit on */
  --foreground-color: #262523;
  color-scheme: light;
}
:focus-visible { outline: 1px solid color-mix(in srgb, var(--foreground-color) 45%, transparent);
                 outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--foreground-color) 22%, transparent); }
/* In forced-colours mode the pond's glyphs turn into unreadable blocks, and it is decoration. */
@media (forced-colors: active) { #pond { display: none; } }

/* The page is the pond: the canvas is transparent, and the tiles are mixed toward a
   slightly cooler black than the page, which is what gives them an edge. */
html, body { margin: 0; height: 100%; background: var(--background-color);
             color: var(--foreground-color); overflow: hidden;
             transition: background-color .3s, color .3s; }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
canvas { display: block; position: fixed; inset: 0; width: 100%; height: 100%; }
/* A page-coloured strip along the top edge: Safari colours its status bar from what it finds
   there, and a fish crossing the edge would otherwise turn the bar black. */
.edge { position: fixed; inset: 0 0 auto; z-index: 10; height: 6px; background: var(--background-color);
        pointer-events: none; transition: background-color .3s; }
/* During a theme wipe the pond paints the page colour itself, edge to edge, and the strip would
   show the new colour as a line across the top before the wipe gets there. */
:root[data-transition="theme"] .edge { visibility: hidden; }
button { font: inherit; color: inherit; }

nav { position: fixed; inset-inline: 0; top: 0; z-index: 30; display: flex; justify-content: center;
      gap: 32px; padding-top: 32px; font-size: 13px; transition: color .2s; }
nav a { color: inherit; text-decoration: none; opacity: .5; transition: opacity .15s; }
nav a:hover, nav a[aria-current] { opacity: 1; }
nav button { margin: -16px; padding: 16px; border: 0; background: none; color: inherit;
             opacity: .5; cursor: pointer; transition: opacity .15s; }
nav button:hover, nav button:focus-visible { opacity: 1; outline: none; }
/* During the wipe the text colour is driven per frame, so it must not also transition. */
:root[data-transition="theme"] :is(nav a, nav button, .quote .line, .intro > *, .entries li, .credits) {
  transition: none;
}
/* Sun and moon share one spot and turn into each other as the theme flips. */
nav button { display: grid; }
nav button svg { display: block; grid-area: 1 / 1; transition: opacity .45s ease, transform .9s cubic-bezier(.2, .9, .25, 1); }
nav button .moon, :root[data-theme="light"] nav button .sun { opacity: 0; transform: rotate(-120deg) scale(.4); }
:root[data-theme="light"] nav button .moon { opacity: 1; transform: none; }

main { position: relative; z-index: 20; height: 100%; }
.view { display: none; }
.view[data-active] { display: flex; height: 100%; }

/* pond: one bottom-left column */
.hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px;
        padding: 32px 24px 8rem; box-sizing: border-box; }
.quote { position: relative; margin: 0; font-size: 14px; line-height: 1.625; letter-spacing: .02em; }
.quote .line { opacity: .6; transition: color .3s, opacity .6s; }
.quote[data-state="loading"] .line { opacity: .35; }
.intro { max-width: 54rem; font-size: 15px; line-height: max(22px, 3vh); transition: color 180ms ease; }
.intro h1, .intro p { margin: 0; font-size: inherit; font-weight: 400; }
.intro .socials { margin: 13px 0 0; }

/* Weather inside the poem. */
.place { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.place { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
         text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.place:hover, .place:focus-visible { text-decoration-color: currentColor; }
.place:disabled { cursor: wait; animation: breathe .8s ease-in-out infinite alternate; }
#clock { font-variant-numeric: tabular-nums; }
#weather-summary::before, #weather-feels::before { content: "，"; }
#weather-summary[hidden], #weather-feels[hidden] { display: none; }
.wind-arrow { width: .85em; height: .85em; margin-left: .3em; vertical-align: -.08em; fill: none; stroke: currentColor;
              stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
              transition: transform 1.2s cubic-bezier(.4, 0, .2, 1), opacity .6s; }
.wind-arrow.is-set { opacity: 1; }
@keyframes breathe { from { opacity: .25 } to { opacity: .9 } }

/* @-mention: the word stays plain, the card carries where it leads. */
.cite { position: relative; }
.cite > a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
            text-decoration-color: color-mix(in srgb, var(--foreground-color) 35%, transparent); }
.cite > a:hover, .cite > a:focus-visible { text-decoration-color: currentColor; }
.card { position: absolute; left: -10px; bottom: calc(100% + 8px); z-index: 40; width: 252px;
        display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 10px;
        background: color-mix(in srgb, var(--foreground-color) 9%, var(--background-color));
        border: 1px solid color-mix(in srgb, var(--foreground-color) 15%, transparent);
        box-shadow: 0 14px 34px color-mix(in srgb, #000 26%, transparent);
        font-size: 12px; line-height: 1.45; text-align: left; text-decoration: none; white-space: normal;
        opacity: 0; transform: translateY(4px); pointer-events: none;
        transition: opacity .14s ease, transform .14s ease; }
.cite:hover .card, .cite:focus-within .card,
.quote:hover > .card, .quote:focus-within > .card { opacity: 1; transform: none; }
.card b { font-size: 13px; font-weight: 400; }
.card .role { opacity: .7; }
.card .dates { opacity: .45; font-variant-numeric: tabular-nums; }
.card .summary { margin-top: 4px; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .card, nav button svg { transition: none; } }
@media (max-width: 640px) {
  .card { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; transform: translateY(8px); }
}

.ink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
       text-underline-offset: 5px;
       text-decoration-color: color-mix(in srgb, var(--foreground-color) 35%, transparent);
       opacity: .6; transition: opacity .15s, text-decoration-color .15s; }
.ink:hover, .ink:focus-visible { opacity: 1; text-decoration-color: currentColor; }
.sep { opacity: .4; }

.cursor { display: inline-block; width: .55em; height: 1em; margin-left: .25em;
          transform: translateY(.15em); background: currentColor;
          animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .cursor, .place:disabled { animation: none } }


.list { height: 100%; padding: 212px 24px 8rem; box-sizing: border-box; }
.entries { display: grid; grid-template-columns: max-content max-content; column-gap: 2.4em; justify-content: start;
           margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: max(22px, 3vh); transition: color .3s; }
.entries li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.entries li::before { content: "•"; position: absolute; margin-left: -1.2em; }
.entries li { position: relative; margin-left: 1.2em; }
.entries .ink { opacity: 1; }
.note { opacity: .45; }
.credits { margin: 40px 0 0; font-size: 12px; line-height: 1.6; opacity: .45; transition: color .3s; }
.credits .ink { opacity: 1; }


/* wide screens: a 20vw gutter, so the fish have the middle to swim in */
@media (min-width: 1024px) {
  .hero, .list { padding-left: 20vw; padding-right: 20vw; }
}
@media (max-height: 720px) {
  .hero { gap: 24px; padding-top: 5rem; padding-bottom: 3rem; }
  .list { padding-top: 7rem; padding-bottom: 3rem; }
}
/* Too short for one screen (a phone on its side): let the copy scroll over the fixed pond. */
@media (max-height: 460px) {
  html, body { overflow: auto; }
  main, .view[data-active] { height: auto; min-height: 100%; }
}