/* ============================================================================
   da1yn — work. Same paper, same ink, same caret.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --ink: #0a0a0a;
  --ghost: #ddd9d4;
  --muted: #6e6862;
  --red: #e10600;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad-x: clamp(1.25rem, 6vw, 6rem);
}

* { box-sizing: border-box; margin: 0; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono { font-family: var(--font-mono); }
::selection { background: var(--red); color: #fff; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.tick {
  display: inline-block;
  width: 0.28em;
  height: 0.8em;
  margin: 0 0.07em;
  border-radius: 1px;
  background: var(--red);
  transform: translateY(0.08em);
  animation: blink 1.3s steps(1) infinite;
}
.tick--s { width: 0.24em; }
@keyframes blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.12; }
}

/* ---------------------------------------------------------------------------
   Bar
--------------------------------------------------------------------------- */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  font-size: 0.85rem;
}
.bar__brand { text-decoration: none; }
.bar__link { text-decoration: none; color: var(--muted); transition: color 0.25s ease; }
.bar__link:hover { color: var(--red); }

/* ---------------------------------------------------------------------------
   Page
--------------------------------------------------------------------------- */
.page { padding: 8svh var(--pad-x) 10svh; }

.cue {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.wm {
  font-weight: normal;
  font-variation-settings: "opsz" 144, "wght" 560;
  font-size: clamp(4rem, 15vw, 11rem);
  line-height: 1;
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  user-select: none;
  margin: 0.5rem 0 4svh;
}
.wm__l {
  display: inline-block;
  transition: font-variation-settings 0.45s var(--ease), color 0.3s ease;
}
@media (hover: hover) {
  .wm__l:hover {
    font-variation-settings: "opsz" 144, "wght" 800, "SOFT" 100, "WONK" 1;
    color: var(--red);
  }
}
.wm__caret {
  display: inline-block;
  width: 0.12em;
  height: 0.68em;
  margin-left: 0.06em;
  border-radius: 0.02em;
  background: var(--red);
  transform: translateY(0.045em);
  animation: blink 1.3s steps(1) infinite 1.2s;
}
.js .wm__l, .js .wm__caret {
  opacity: 0;
  transform: translateY(0.55em);
  animation: rise 0.9s var(--ease) forwards;
  animation-delay: calc(0.08s + var(--i) * 0.06s);
}
.js .wm__caret {
  animation-name: rise, blink;
  animation-duration: 0.9s, 1.3s;
  animation-timing-function: var(--ease), steps(1);
  animation-delay: calc(0.08s + var(--i) * 0.06s), 1.2s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* load/scroll reveals */
.js .reveal {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--d) * 0.08s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   The list — hover one, the others step back
--------------------------------------------------------------------------- */
.list { list-style: none; padding: 0; }

.row {
  display: flex;
  align-items: baseline;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  text-decoration: none;
  padding: 0.35em 0;
  border-bottom: 1px solid var(--ghost);
}

.row__idx {
  font-size: 0.8rem;
  color: var(--muted);
  transition: color 0.25s ease;
}

.row__name {
  font-size: clamp(1.55rem, 4.6vw, 4rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 100, "wght" 500;
  overflow-wrap: anywhere;
  transition: color 0.3s ease, font-variation-settings 0.4s var(--ease), transform 0.4s var(--ease);
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 0.05em;
  transition: color 0.3s ease, font-variation-settings 0.4s var(--ease),
              transform 0.4s var(--ease), background-size 0.45s var(--ease);
}

.row__arrow {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ghost);
  transform: translate(-0.3em, 0.2em);
  transition: color 0.3s ease, transform 0.4s var(--ease);
}

/* dim the rest, ignite the one */
@media (hover: hover) {
  .list:hover .row__name { color: var(--ghost); }
  .list .row:hover .row__name {
    color: var(--ink);
    font-variation-settings: "opsz" 100, "wght" 640;
    transform: translateX(0.25em);
    background-size: 100% 0.05em;
  }
  .list .row:hover .row__idx { color: var(--red); }
  .list .row:hover .row__arrow { color: var(--red); transform: none; }
}

/* inline thumbs: phones and touch only — the work shows itself, no tap needed */
.row__thumb {
  display: none;
  width: 100%;
  height: auto;
  border: 1px solid var(--ghost);
  border-radius: 10px;
  margin: 0.7rem 0 1rem;
}
@media (hover: none), (pointer: coarse) {
  .row__thumb { display: block; }
}

.more {
  margin-top: 2.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.more a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ghost); transition: color 0.25s ease, border-color 0.25s ease; }
.more a:hover { color: var(--red); border-color: var(--red); }

/* ---------------------------------------------------------------------------
   The peek — a live preview trails the cursor over the list (desktop)
--------------------------------------------------------------------------- */
.peek {
  position: fixed;
  top: 0; left: 0;
  width: min(30rem, 34vw);
  height: auto;
  border: 1px solid var(--ghost);
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(10, 10, 10, 0.35);
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform: scale(0.92) rotate(1.5deg);
  transition: opacity 0.3s ease, transform 0.35s var(--ease);
}
.peek.live { opacity: 1; transform: scale(1) rotate(1.5deg); }
@media (hover: none), (pointer: coarse), (max-width: 48em) { .peek { display: none !important; } }

/* ---------------------------------------------------------------------------
   Foot
--------------------------------------------------------------------------- */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.4rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; transition: color 0.25s ease; }
.foot a:hover { color: var(--red); }

/* cursor companion */
.cc {
  position: fixed;
  top: 0; left: 0;
  z-index: 50;
  width: 4px;
  height: 18px;
  border-radius: 1px;
  background: var(--red);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, height 0.25s var(--ease), width 0.25s var(--ease);
  animation: blink 1.3s steps(1) infinite;
  mix-blend-mode: multiply;
}
.cc.live { opacity: 1; }
.cc.big { width: 6px; height: 30px; }
@media (hover: none), (pointer: coarse) { .cc { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .wm__l, .js .wm__caret { opacity: 1; transform: none; animation: none; }
  .wm__caret, .js .wm__caret { animation: blink 1.3s steps(1) infinite 0.4s !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .peek, .cc { display: none !important; }
  .row__thumb { display: block; }
}