/* Luka Adamia — portfolio. Layout language studied from a reference (grid, scale, motion only);
   every word, image, film and line of code here is original to this site. */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --m: 16px; /* outer margin */
  --cols: 8;
  --col: calc((100vw - 2 * var(--m)) / var(--cols));
  --d: clamp(44px, 6.25vw, 128px); /* display size: 90px at 1440 */
  --ink: #000;
  --paper: #fff;
  --tile: #f2f2f2;
  --ghost: #e4e4e4; /* corner name */
  --hair: rgba(0, 0, 0, 0.12);
}
@media (max-width: 760px) {
  :root {
    --cols: 4;
    --d: 12.4vw;
  }
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.07;
  letter-spacing: -0.027em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
video {
  display: block;
}
::selection {
  background: #000;
  color: #fff;
}

/* ── display type & column placement ─────────────────────────────── */
.d {
  font-size: var(--d);
  line-height: 0.88;
  letter-spacing: -0.0495em;
}
.stack {
  position: relative;
}
.stack .ln {
  display: block;
  margin-left: calc(var(--col) * var(--c, 0));
  white-space: nowrap;
}
@media (max-width: 760px) {
  .stack .ln {
    margin-left: calc(var(--col) * var(--mc, 0));
  }
}
.at {
  position: absolute;
  left: calc(var(--m) + var(--col) * var(--c, 0));
}
@media (max-width: 760px) {
  .at {
    left: calc(var(--m) + var(--col) * var(--mc, 0));
  }
}

/* word reveal: each word rises out of its own mask */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.w > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(105%);
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--k, 0) * 45ms);
}
.in .w > i,
.w.in > i {
  transform: none;
}
.fade {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
.fade.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .w > i,
  .fade {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ── fixed furniture ─────────────────────────────────────────────── */
.dot {
  position: fixed;
  top: var(--m);
  left: var(--m);
  width: 10px;
  height: 10px;
  background: var(--ink);
  z-index: 50;
}
.corner {
  position: fixed;
  bottom: -0.1em;
  z-index: 0;
  pointer-events: none;
  font-size: var(--d);
  line-height: 1;
  letter-spacing: -0.0495em;
  color: var(--ghost);
  transition: opacity 0.4s ease;
}
.corner.l {
  left: var(--m);
}
.corner.r {
  right: var(--m);
}
body.at-end .corner {
  opacity: 0;
}
main {
  position: relative;
  z-index: 1;
}

/* ── top meta row ────────────────────────────────────────────────── */
.meta-row {
  position: relative;
  height: 48px;
}
.meta-row span {
  position: absolute;
  top: var(--m);
}

/* ── hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 14vh 0 0;
  min-height: 100vh;
}
.hero .stack {
  padding: 0 var(--m);
}
.vline {
  position: absolute;
  width: 1px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.vline.in {
  transform: scaleY(1);
}
.tiles {
  position: relative;
  height: calc(min(160px, var(--col) - 16px) + 2px);
  margin: 9vh 0 0;
}
.tile {
  position: absolute;
  top: 0;
  width: min(160px, calc(var(--col) - 16px));
  aspect-ratio: 1;
  background: var(--tile);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tile img {
  width: 34%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  transition:
    width 0.6s cubic-bezier(0.19, 1, 0.22, 1),
    border-radius 0.6s ease;
}
.tile:hover img {
  width: 100%;
  border-radius: 0;
}
.blurb {
  width: calc(var(--col) * 2 - 8px);
  margin-top: 12px;
}
@media (max-width: 760px) {
  .tile:nth-child(n + 4) {
    display: none;
  }
  .blurb {
    width: calc(var(--col) * 3);
  }
}

/* ── statement ───────────────────────────────────────────────────── */
.statement {
  position: relative;
  padding: 22vh var(--m) 26vh;
}
.statement .vline {
  left: calc(var(--m) + var(--col) * var(--c, 3) - 14px);
  top: 0;
  height: 100%;
}
.small-mark {
  position: absolute;
  bottom: 12vh;
}

/* ── work ring ───────────────────────────────────────────────────── */
.work {
  position: relative;
  height: 250vh;
}
.work-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.work-labels {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
}
.work-labels .at {
  top: 0;
}
.ring-stage {
  position: absolute;
  inset: 0;
  perspective: 1700px;
  perspective-origin: 50% 40%;
  cursor: grab;
  touch-action: pan-y;
}
.ring-stage.drag {
  cursor: grabbing;
}
.ring {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.card {
  position: absolute;
  left: calc(var(--cw) / -2);
  top: calc(var(--ch) / -2);
  width: var(--cw);
  height: var(--ch);
  background: #000;
  padding: 6px;
  backface-visibility: visible;
  transition: opacity 0.3s linear;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.card .cap {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  white-space: nowrap;
  font-size: 11px;
  color: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover .cap {
  opacity: 1;
}
.work-hint {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(0, 0, 0, 0.45);
  z-index: 3;
}
@media (max-width: 760px) {
  .work {
    height: auto;
    padding: 18vh 0;
  }
  .work-pin {
    position: relative;
    height: auto;
    overflow: visible;
  }
  .work-labels {
    position: relative;
    transform: none;
    height: calc(var(--d) * 0.9);
    top: 0;
  }
  .ring-stage {
    position: relative;
    perspective: none;
    height: auto;
    margin: 6vh 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    cursor: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ring {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    gap: 12px;
    padding: 0 var(--m);
    transform: none !important;
  }
  .card {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 72vw;
    height: 48vw;
    transform: none !important;
    opacity: 1 !important;
    scroll-snap-align: center;
  }
  .card .cap {
    opacity: 1;
  }
  .work-hint {
    display: none;
  }
}

/* ── table ───────────────────────────────────────────────────────── */
.table-sec {
  position: relative;
  padding: 16vh 0 18vh;
}
.table-sec .stack {
  padding: 0 var(--m);
  margin-bottom: 12vh;
}
.rows {
  position: relative;
  padding: 0 var(--m);
}
.group {
  position: relative;
  margin-bottom: 20px;
}
.row {
  position: relative;
  height: 24px;
  border-bottom: 1px solid var(--hair);
}
.row > * {
  position: absolute;
  top: 4px;
  left: calc(var(--col) * var(--c));
  width: calc(var(--col) * var(--w, 1) - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.row a:hover {
  border-bottom-color: #000;
}
.row .g {
  font-weight: 600;
}
@media (max-width: 760px) {
  .row {
    height: auto;
    padding: 6px 0 7px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
  }
  .row > * {
    position: static;
    width: auto;
  }
  .row > .hide-sm {
    display: none;
  }
}

/* ── clock ───────────────────────────────────────────────────────── */
.clock-sec {
  position: relative;
  padding: 20vh var(--m) 16vh;
}
.clock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--col) * 0.5);
}
.clock .box {
  width: clamp(120px, 13vw, 220px);
  aspect-ratio: 5 / 6;
  background: #000;
  overflow: hidden;
  position: relative;
}
.clock .box video,
.clock .box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clock .box video {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.clock .box video.on {
  opacity: 1;
}
.clock .num {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.clock-cap {
  margin-top: 18px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 11px;
}

/* ── close & contact ─────────────────────────────────────────────── */
.close {
  position: relative;
  padding: 14vh var(--m) 22vh;
}
.contact {
  position: absolute;
  left: calc(var(--m) + var(--col) * var(--c, 1));
  bottom: 30vh;
  width: calc(var(--col) * 1.6);
}
.contact p {
  margin: 0 0 22px;
}
.contact .muted {
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 4px;
}
.contact a.mail {
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.socials {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12vh;
}
.socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 11px;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.socials a:hover {
  background: var(--ink);
  color: var(--paper);
}
@media (max-width: 760px) {
  .contact {
    position: relative;
    left: 0;
    bottom: auto;
    width: auto;
    margin: 6vh 0 0;
  }
}

/* ── footer ──────────────────────────────────────────────────────── */
footer {
  position: relative;
  z-index: 1;
  padding: 0 var(--m) 14px;
}
.foot-name {
  font-size: min(calc(var(--d) * 1.62), 16vw);
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
}
.foot-row {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 11px;
}



/* ── cursor ──────────────────────────────────────────────────────── */
html.cur-on, html.cur-on * { cursor: none !important; }
.cur-sq, .cur-pill { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; will-change: transform; }
.cur-sq { mix-blend-mode: difference; }
.cur-sq i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: #fff;
  opacity: 0; transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}
html.cur-in .cur-sq i { opacity: 1; }
html.cur-down .cur-sq i { scale: 0.6; }
html.cur-label .cur-sq i { scale: 0; }
.cur-pill span {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  background: #000; color: #fff; font-size: 11px; letter-spacing: -0.01em; line-height: 1;
  padding: 6px 11px 5px; border-radius: 999px; white-space: nowrap;
  opacity: 0; scale: 0.3; transition: opacity 0.2s ease, scale 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
html.cur-in.cur-label .cur-pill span { opacity: 1; scale: 1; }
html.cur-down.cur-label .cur-pill span { scale: 0.88; }

/* ── hero reveal: ink that follows the cursor and uncovers the work underneath ── */
.hero .reveal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .stack, .hero .tiles, .hero .blurb { position: relative; z-index: 1; }
.hero .vline { z-index: 1; }

/* column placement for pieces that sit on the grid (desktop --c, phone --mc) */
.tile { left: calc(var(--m) + var(--col) * var(--c, 0)); }
.blurb { margin-left: calc(var(--m) + var(--col) * var(--c, 3)); }
.small-mark { left: calc(var(--m) + var(--col) * var(--c, 4)); }
@media (max-width: 760px) {
  .tile { left: calc(var(--m) + var(--col) * var(--mc, 0)); }
  .blurb { margin-left: calc(var(--m) + var(--col) * var(--mc, 1)); }
  .small-mark { left: calc(var(--m) + var(--col) * var(--mc, 1)); }
  .row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media print {
  .dot,
  .cur-sq,
  .cur-pill,
  .corner,
  .work-hint {
    display: none !important;
  }
  .w > i,
  .fade,
  .vline {
    transform: none !important;
    opacity: 1 !important;
  }
}