/* Night Visitor. The house is the interface: a film still above, a book's words below. See docs/UI.md. */
:root {
  --ink: #0a0a0b;
  --paper: #e8e2d4;
  --ash: #8a857a;
  --rule: #2a2926;
  --lamp: #b8933f;
  --frost: #cdd6da;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --caps: "Jost", "Futura", "Century Gothic", sans-serif;
  --hand: "Reenie Beanie", "Bradley Hand", cursive;
  --text: 19px;
  --sat: 1;            /* warmth: 1 = full colour, falls toward 0.15 */
  --coldEdge: 0;       /* 0..1 white edge when warmth is nearly gone */
  --safeT: env(safe-area-inset-top, 0px);
  --safeB: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--ink); color: var(--paper); overscroll-behavior: none; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
button:focus-visible, li:focus-visible { outline: 1px solid var(--lamp); outline-offset: 4px; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; overflow: hidden; background: var(--ink); }

/* ── the picture ── */
#frame { position: relative; flex: 0 0 auto; height: min(62dvh, 160vw); overflow: hidden; background: #000; }
.pic { position: absolute; inset: 0; background: center 40% / cover no-repeat; opacity: 0; transform: scale(1.0);
  filter: saturate(var(--sat)) contrast(1.04); transition: opacity 1400ms ease, filter 2400ms ease; will-change: transform, opacity; }
.pic.on { opacity: 1; animation: push 34s linear forwards; }
@keyframes push { from { transform: scale(1.0) translateY(0); } to { transform: scale(1.06) translateY(-1.2%); } }
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
              linear-gradient(to bottom, rgba(10,10,11,.55) 0, transparent 18%, transparent 72%, var(--ink) 100%); }
.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.cold { position: absolute; inset: 0; pointer-events: none; opacity: var(--coldEdge); transition: opacity 3s ease;
  background: radial-gradient(100% 80% at 50% 50%, transparent 45%, rgba(232,238,240,.85) 100%); }

#where { position: absolute; top: calc(14px + var(--safeT)); left: 18px; right: 64px; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--caps); font-weight: 400; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper);
  text-shadow: 0 1px 8px rgba(0,0,0,.8); opacity: 0; transition: opacity 1200ms ease; }
#where.on { opacity: .82; }
#where #time { color: var(--ash); letter-spacing: .18em; }

/* ── the words ── */
#words { position: relative; flex: 1 1 auto; padding: 4px 26px calc(22px + var(--safeB)); overflow-y: auto; -webkit-overflow-scrolling: touch; cursor: pointer; }
#line { font-size: var(--text); line-height: 1.62; letter-spacing: .003em; max-width: 34em; color: var(--paper); opacity: 0; transform: translateY(4px);
  transition: opacity 700ms ease, transform 900ms ease; text-wrap: pretty; }
#line.on { opacity: 1; transform: none; }
#line q { quotes: "\201C" "\201D"; }
#line .mem { display: block; font-family: var(--caps); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--lamp); margin-bottom: 8px; }
#tap { position: absolute; right: 24px; bottom: calc(18px + var(--safeB)); width: 5px; height: 5px; border-radius: 50%; background: var(--ash); opacity: 0; }
#tap.on { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .08; } 50% { opacity: .7; } }

/* choices: an index, not buttons */
#choices { list-style: none; margin-top: 4px; }
#choices li { border-top: 1px solid var(--rule); opacity: 0; transform: translateY(6px); transition: opacity 600ms ease, transform 700ms ease; }
#choices li:last-child { border-bottom: 1px solid var(--rule); }
#choices li.on { opacity: 1; transform: none; }
#choices button, .index button { position: relative; display: grid; grid-template-columns: 5.6em 1fr; align-items: baseline; gap: 12px; width: 100%; min-height: 54px; padding: 15px 4px 14px 14px; }
#choices button::before, .index button::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--lamp); transform: scaleY(0); transition: transform 260ms ease; }
#choices button:active::before, #choices button.picked::before, .index button:hover::before { transform: scaleY(1); }
.verb { font-family: var(--caps); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); }
.what { font-size: calc(var(--text) - 1px); line-height: 1.35; color: var(--paper); }
#choices button.picked .what { color: var(--lamp); }
#choices.gone li { opacity: 0 !important; transition-duration: 400ms; }

/* ── casebook mark ── */
#bookmark { position: absolute; top: calc(10px + var(--safeT)); right: 10px; width: 44px; height: 44px; z-index: 30; display: grid; place-items: center; opacity: .75; }
#bookmark span { width: 15px; height: 19px; border: 1px solid var(--paper); border-radius: 1px; position: relative;
  background: linear-gradient(225deg, var(--ink) 0 5px, transparent 5px); }
#bookmark span::after { content: ""; position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-left: 1px solid var(--paper); border-bottom: 1px solid var(--paper); }
#bookmark.new span { border-color: var(--lamp); }
#bookmark.new { animation: notice 2.4s ease-in-out 3; }
@keyframes notice { 50% { opacity: 1; transform: translateY(-1px); } }
.is-start #bookmark, .is-start #words, .is-later #bookmark { visibility: hidden; }

/* ── start and later screens ── */
#frame { transition: height 1600ms cubic-bezier(.6,0,.2,1); }
.is-start #frame { height: 100dvh; }
.is-start .pic { background-position: center 30%; }
#start, #later { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; padding: calc(13vh + var(--safeT)) 28px calc(30px + var(--safeB));
  background: linear-gradient(to bottom, rgba(10,10,11,.35) 0, transparent 30%, transparent 74%, rgba(10,10,11,.88) 88%); transition: opacity 1600ms ease; }
#start .sub { margin-bottom: 0; }
#later { opacity: 0; pointer-events: none; background: var(--ink); justify-content: center; }
.is-later #later { opacity: 1; pointer-events: auto; }
#app:not(.is-start) #start { opacity: 0; pointer-events: none; }
.start-in { width: 100%; }
h1 { font-family: var(--caps); font-weight: 200; font-size: clamp(30px, 9.6vw, 46px); letter-spacing: .34em; text-transform: uppercase; line-height: 1.1; margin-right: -.34em; }
h1.small { font-size: 22px; letter-spacing: .3em; margin: 14px 0 34px; }
.sub { font-family: var(--caps); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ash); margin: 14px 0 38px; }
.index { list-style: none; border-top: 1px solid var(--rule); }
.index li { border-bottom: 1px solid var(--rule); }
.note { margin-top: 26px; font-style: italic; font-size: 14px; color: var(--ash); }

/* ── the year card ── */
#title { position: absolute; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 900ms ease; }
#title.on { opacity: 1; pointer-events: auto; }
#title div { text-align: center; }
#title b { display: block; font-family: var(--caps); font-weight: 200; font-size: clamp(64px, 24vw, 120px); letter-spacing: .12em; margin-right: -.12em; color: var(--paper); }
#title span { display: block; margin-top: 18px; font-family: var(--caps); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ash); }

/* ── the frost ── */
#frost { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 26px calc(30px + var(--safeB));
  opacity: 0; pointer-events: none; transition: opacity 1200ms ease;
  background: radial-gradient(130% 90% at 50% 30%, rgba(205,214,218,.10), rgba(10,10,11,.88) 70%); visibility: hidden; }
#frost.on { opacity: 1; pointer-events: auto; visibility: visible;
  backdrop-filter: blur(7px) brightness(.7) saturate(.4); -webkit-backdrop-filter: blur(7px) brightness(.7) saturate(.4); }
.frost-q { font-family: var(--caps); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--frost); opacity: .8; margin-bottom: 14px; }
#frostWords { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 8px; }
#frostWords button { font-family: var(--hand); font-size: 40px; line-height: 1.1; min-height: 52px; color: var(--frost); opacity: .78; text-shadow: 0 0 12px rgba(205,214,218,.35); letter-spacing: .04em; }
#frostWords button:active { opacity: 1; }
#frostWords .soft { font-family: var(--serif); font-style: italic; font-size: 17px; opacity: .6; }
#frostInk { position: absolute; left: 0; right: 0; top: 18%; width: 100%; height: auto; pointer-events: none; }
#frostText { font-family: var(--hand); font-size: 120px; fill: transparent; stroke: var(--frost); stroke-width: 1.4; stroke-dasharray: 1600; stroke-dashoffset: 1600; opacity: 0; }
#frostText.draw { opacity: 1; animation: draw 3.6s ease forwards; }
@keyframes draw { 70% { fill: transparent; } to { stroke-dashoffset: 0; fill: rgba(205,214,218,.55); } }

/* ── the casebook ── */
#book { position: absolute; inset: 0; z-index: 40; background: rgba(10,10,11,.92); padding: calc(26px + var(--safeT)) 16px calc(16px + var(--safeB)); opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
#book.on { opacity: 1; pointer-events: auto; }
.book-in { height: 100%; display: flex; flex-direction: column; background: #e9e4d6; color: #22201c; border-radius: 2px; overflow: hidden;
  background-image: linear-gradient(to right, transparent 46px, rgba(190,70,60,.55) 46px, rgba(190,70,60,.55) 47px, transparent 47px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(80,120,160,.28) 31px 32px); background-position: 0 58px; }
.book-in h2 { font-family: var(--caps); font-weight: 400; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #6c665b; padding: 22px 20px 12px 60px; background: #e9e4d6; }
#pages { flex: 1; overflow-y: auto; padding: 4px 22px 20px 60px; }
.page { margin-bottom: 26px; position: relative; }
.page h3 { font-family: var(--hand); font-weight: 400; font-size: 27px; line-height: 32px; color: #2b3b55; }
.page p { font-size: 16px; line-height: 32px; }
.page.struck::after { content: ""; position: absolute; left: -8px; right: 0; top: 52%; height: 2px; background: #2b2722; transform: rotate(-4deg); border-radius: 2px; }
.page.struck { color: #7a7368; }
.book-foot { display: flex; gap: 6px; justify-content: space-between; padding: 10px 14px; border-top: 1px solid rgba(0,0,0,.12); background: #e3ddce; }
.book-foot button { font-family: var(--caps); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #5b564c; min-height: 44px; padding: 0 6px; }

@media (min-width: 600px) { #app { border-left: 1px solid #141414; border-right: 1px solid #141414; } }
@media (prefers-reduced-motion: reduce) { .pic.on { animation: none; } .grain { animation: none; } #tap.on { animation: none; opacity: .5; } }
#line .q { font-style: italic; color: var(--ash); }