@import "tokens.css";

/* ---- Aeonik Pro (Cotype Foundry). Set ships Light/Regular/Bold + italics.
   No Medium/Semibold, so headings use Bold (700). ---- */
@font-face {
  font-family: "Aeonik Pro"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/AeonikPro-Light.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("fonts/AeonikPro-LightItalic.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/AeonikPro-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/AeonikPro-RegularItalic.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/AeonikPro-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Aeonik Pro"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("fonts/AeonikPro-BoldItalic.otf") format("opentype");
}

/* ---- Brand overrides on the Front End Brain dark theme ----
   Only the values this brand redefines. Everything else = tokens. */
html.dark {
  --bg: #060606;
  --bg-deep: #0f0f0f;
  --surface: #1c1c1c;
  --border: #2c2c2c;
  --ink: #f4f4f4;      /* labels, headings */
  --ink-mid: #d3d3d3;  /* entries, body */
  --ink-dim: #8f8f8f;  /* reveal copy, captions */
  --media: #3d3d3d;    /* placeholder image blocks */
  --accent: #f4f4f4;   /* monochrome brand hook */
  --accent-fg: #181818;
  --font: "Aeonik Pro", "Inter", ui-sans-serif, system-ui, sans-serif;
  --fw-head: 700;      /* Aeonik set has no 600; Bold carries labels */
  --fw-med: 400;       /* nor 500; fall to Regular */
}

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

body {
  background: var(--bg);
  color: var(--ink-mid);
  font-family: var(--font);
  font-size: clamp(14px, 1.02vw, 18px);
  line-height: 1.55;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: clamp(72px, 13vh, 168px) clamp(24px, 6vw, 96px) 200px
    clamp(24px, 9vw, 180px);
}

::selection { background: var(--accent); color: var(--accent-fg); }

.index { display: grid; row-gap: var(--s-7); max-width: 1240px; }

/* ---- section: label | entries ---- */
.section {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: var(--s-7);
  align-items: start;
}
.section-label {
  text-align: right;
  text-transform: uppercase;
  font-weight: var(--fw-head);
  color: var(--ink);
  letter-spacing: 0.02em;
  padding-top: 1px;
}
.entries { display: flex; flex-direction: column; }

/* ---- rows ---- */
.row { text-transform: uppercase; position: relative; }
.row.open { z-index: 3; }
.section-label, .row {
  transition: opacity var(--d-base) var(--e-standard),
    transform 420ms var(--e-out) var(--move-delay, 0ms);
}
.section-label.dimmed, .row.dimmed {
  opacity: 0.38;
  transform: translateY(-14px);
  pointer-events: none;
}
.row-head {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  color: var(--ink-mid);
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
  padding: 0;
  transition: color var(--d-fast) var(--e-standard);
}
a.row-head { cursor: pointer; text-decoration: none; }
button.row-head { cursor: pointer; }
.row-head:hover { color: var(--ink); }
.caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.78em;
  height: 0.78em;
  transform: rotate(-90deg);
  transition: transform var(--d-base) var(--e-out);
  color: var(--ink-mid);
  align-self: center;
}
.caret svg { width: 100%; height: 100%; }
.row.open .caret { transform: rotate(0deg); }
.row.static .row-head { cursor: default; color: var(--ink-mid); }
.row.static .row-head:hover { color: var(--ink-mid); }

/* ---- reveal pulldown ---- */
.reveal {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.row.open .reveal { grid-template-rows: 1fr; }
.reveal-inner { overflow: hidden; }
.reveal-pad {
  position: relative;
  padding: var(--s-5) 0 var(--s-7);
  text-transform: none;
  letter-spacing: normal;
}
.pad-text { max-width: 640px; }
.pad-gallery { max-width: 100%; padding-bottom: 112px; }

/* dark fade over the pushed-down content: deepens to black lower down.
   Sits below the panel (top:100% of the open row), never over the open item. */
.reveal-fade {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 900px;
  pointer-events: none;
  display: none;
  z-index: 4;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 48%);
}
.row.open .reveal-fade { display: block; }

/* text reveal — 15px headline, 12px body, both white */
.reveal-head {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.004em;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 0.9em;
}
.reveal-text p {
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.004em;
  color: #ffffff;
  font-weight: 400;
  max-width: 68ch;
  margin-bottom: 2.2em;
}
.reveal-text p:last-child { margin-bottom: 0; }
.reveal-text p.nowrap { white-space: nowrap; max-width: none; }

/* gallery reveal — fixed 4-cell bento + edge arrows + 12px meta */
.grid4 {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr;
  grid-template-rows: repeat(2, clamp(140px, 15vw, 260px));
  gap: var(--s-1);
}
.cell {
  background: var(--media);
  border-radius: var(--r-xs);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cell > img, .cell > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell.hero { grid-column: 1; grid-row: 1 / 3; }
.cell.a { grid-column: 2; grid-row: 1; }
.cell.b { grid-column: 2; grid-row: 2; }
.cell.c { grid-column: 3; grid-row: 1 / 3; }

/* blocks materialise with the expansion, lightly staggered */
.row.open .cell { opacity: 1; transform: none; }
.row.open .cell.hero { transition-delay: 90ms; }
.row.open .cell.a { transition-delay: 150ms; }
.row.open .cell.b { transition-delay: 200ms; }
.row.open .cell.c { transition-delay: 130ms; }

/* arrows live on the panel (not clipped); vertically centred on the bento */
.g-arrow {
  position: absolute;
  top: calc(var(--s-5) + (2 * clamp(140px, 15vw, 260px) + var(--s-1)) / 2);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--ink-mid);
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1) 220ms,
    color var(--d-fast) var(--e-standard);
}
.row.open .g-arrow { opacity: 1; pointer-events: auto; }
.g-arrow:hover { color: var(--ink); }
.g-arrow.prev { left: -60px; }
.g-arrow.next { right: -44px; }
.g-arrow svg { width: 22px; height: 22px; }
.g-arrow.prev svg { transform: rotate(90deg); }
.g-arrow.next svg { transform: rotate(-90deg); }

.gallery .meta {
  margin-top: var(--s-4);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1) 240ms,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1) 240ms;
}
.row.open .meta { opacity: 1; transform: none; }
.gallery .caption,
.gallery .desc {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.004em;
  color: var(--ink-dim);
  font-weight: 400;
}
.gallery .desc { margin-top: var(--s-3); max-width: 52ch; }

/* ---- Open Conversation dock ---- */
.dock {
  position: relative;
  margin-left: calc(200px + var(--s-7));
  margin-top: var(--s-8);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  width: fit-content;
  z-index: var(--z-sticky);
}

.credit {
  margin-left: calc(200px + var(--s-7));
  margin-top: 72px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.dock .avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--surface);
  overflow: hidden;
  flex: none;
}
.dock .avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ---- Open Conversation: one element morphs pill <-> box.
   In-flow, so the surrounding reflow is tied to the morph. ---- */
.convo-wrap { position: relative; width: fit-content; }

/* avatar: left of the pill when closed, slides in + settles inset when open */
.convo-avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.convo-wrap.open .convo-avatar { transform: translate(18px, 18px); }
.convo-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* the morphing pill<->box; sits right of the avatar, grows left to swallow it */
.convo {
  position: relative;
  overflow: hidden;
  margin-left: 52px;
  width: 150px;
  height: 44px;
  border-radius: var(--r-xl);
  background: #e9e9e6;
  color: #181818;
  transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1),
    height 480ms cubic-bezier(0.16, 1, 0.3, 1),
    margin-left 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.convo-wrap.open .convo {
  margin-left: 0;
  width: 320px;
  height: 242px;
}
.convo-pill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  color: #181818;
  white-space: nowrap;
  transition: opacity 200ms var(--e-out) 190ms; /* fades in late on close */
}
.convo-wrap.open .convo-pill { opacity: 0; pointer-events: none; transition-delay: 0ms; }
.convo-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 78px 24px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--e-out); /* fades out first on close */
}
.convo-wrap.open .convo-box { opacity: 1; pointer-events: auto; transition-delay: 190ms; }

.oc-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  z-index: 3;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: #181818;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--d-fast) var(--e-standard);
}
.oc-close:hover { opacity: 1; }
.oc-close svg { width: 18px; height: 18px; }

.oc-avatar { width: 44px; height: 44px; border-radius: var(--r-full); overflow: hidden; }
.oc-avatar img { width: 100%; height: 100%; object-fit: cover; }

.oc-link, .oc-send, .oc-input {
  font-family: inherit;
  font-size: 15px;
  color: #181818;
  transition: opacity var(--d-fast) var(--e-standard);
}
.oc-link { text-decoration: none; align-self: flex-start; }
.oc-input {
  border: 0;
  background: none;
  outline: none;
  padding: 0;
  width: 100%;
  height: 4.5em;            /* ~3 lines at 15px / 1.5 */
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  direction: rtl;           /* scrollbar to the left */
  unicode-bidi: plaintext;  /* keep typed text left-to-right */
  text-align: left;
}
.oc-input::placeholder { color: #8a8a86; }
.oc-input::-webkit-scrollbar { width: 4px; }
.oc-input::-webkit-scrollbar-thumb {
  background: rgba(24, 24, 24, 0.28);
  border-radius: 2px;
}
.oc-send {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: fit-content;
}
.oc-link:hover, .oc-send:hover { opacity: 0.55; }

/* ---- coming-soon gate: frosted glass + glass pill ---- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 6, 6, 0.42);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  transition: opacity 600ms var(--e-out);
}
.gate.unlocked { opacity: 0; pointer-events: none; }
.gate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: fit-content;
}
.gate-word {
  font-family: var(--font);
  font-weight: var(--fw-head);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f4f4f4;
}
.gate-soon {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(244, 244, 244, 0.5);
  margin-top: -14px;
}
.gate-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 7px 7px 24px;
  border-radius: var(--r-full);
  background: #000;
  border: 0;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  transition: box-shadow var(--d-fast) var(--e-standard);
}
.gate-input {
  background: none;
  border: 0;
  outline: none;
  color: #f4f4f4;
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 0.03em;
  width: 190px;
}
.gate-input::placeholder { color: rgba(244, 244, 244, 0.45); }
.gate-go {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  background: #fff;
  color: #111;
  transition: background var(--d-fast) var(--e-standard);
}
.gate-go:hover { background: #e6e6e3; }
.gate-go svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.gate.error .gate-pill {
  box-shadow: 0 0 0 1.5px rgba(255, 90, 90, 0.85), 0 12px 48px rgba(0, 0, 0, 0.6);
  animation: gate-shake 0.36s var(--e-standard);
}
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.gate-convo { margin-top: 2px; }

@media (max-width: 720px) {
  body { padding-left: 24px; padding-right: 24px; }
  .section { grid-template-columns: 1fr; row-gap: var(--s-2); }
  .section-label { text-align: left; }
  .dock, .credit { margin-left: 0; }
}