/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --bg: #ffffff;
  --fg: #121212;
  --muted: #666666;
  --faint: #a3a3a3;
  --line: #e6e6e6;
  --hover: #f2f2f2;

  --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 20px;
  --nav-h: 52px;
  --sidebar-w: 350px;
  --gap: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }

/* ==========================================================================
   Load-in animation
   ========================================================================== */
.anim {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.is-loaded .anim { opacity: 1; transform: none; filter: none; }
.is-loaded .sidebar__intro { transition-delay: 0.08s; }
.is-loaded .sidebar__footer { transition-delay: 0.16s; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, var(--bg) 55%, rgba(255, 255, 255, 0));
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  justify-self: start;
}
.logo__mark {
  width: 11px;
  height: 11px;
  background: var(--fg);
  -webkit-mask: url("../assets/mark.svg") center / contain no-repeat;
  mask: url("../assets/mark.svg") center / contain no-repeat;
  transition: transform 0.4s var(--ease-out);
}
.logo:hover .logo__mark { transform: rotate(90deg); }

/* ==========================================================================
   Layout
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  column-gap: 24px;
  padding: var(--nav-h) var(--gutter) 0;
}

.sidebar {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
}

.bio {
  max-width: 300px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.bio p { margin: 0 0 1em; }
.bio a { text-underline-offset: 2px; text-decoration-thickness: 1px; }
.bio a:hover { color: var(--muted); }

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--hover);
  text-decoration: none;
  vertical-align: baseline;
}
.pill-link__icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.pill-link__dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--fg);
}

.socials {
  display: flex;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.socials a {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--fg);
  transition: opacity 0.15s;
}
.socials a:hover { opacity: 0.5; }
.socials svg { width: 100%; height: 100%; display: block; }

.details { margin: 0; }
.details__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.details__row:last-child { border-bottom: 1px solid var(--line); }
.details dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.details dd {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.copyright {
  margin: 20px 0 0;
  font-size: 11px;
  color: var(--faint);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gap);
  padding-bottom: 120px;
}
.cards__col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  cursor: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.card.is-in { opacity: 1; transform: none; }
@media (hover: none) { .card { cursor: pointer; } }

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--hover);
}
.card__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.card:hover .card__media > * { transform: scale(1.02); }

.card__thumb { opacity: 0; transition: opacity 0.4s, transform 0.9s var(--ease-out); }
.card__thumb.is-ready { opacity: 1; }
/* Once the real thumbnail is showing, hide the placeholder (its title sits above the video otherwise). */
.card__media:has(.card__thumb.is-ready) .ph { visibility: hidden; }

.card__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.01em;
}
.card__meta {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--muted);
}

/* ==========================================================================
   Cursor tooltip
   ========================================================================== */
.tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(60, 60, 60, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.15s, transform 0.2s var(--ease-out);
}
.tooltip.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ==========================================================================
   Progressive bottom blur
   ========================================================================== */
.fader {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  height: 80px;
  pointer-events: none;
}
.fader > div {
  position: absolute;
  inset: 0;
}
.fader > div:nth-child(1) { backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 33%, transparent 50%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 33%, transparent 50%); }
.fader > div:nth-child(2) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask-image: linear-gradient(to bottom, transparent 16%, #000 33%, #000 50%, transparent 66%); -webkit-mask-image: linear-gradient(to bottom, transparent 16%, #000 33%, #000 50%, transparent 66%); }
.fader > div:nth-child(3) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); mask-image: linear-gradient(to bottom, transparent 33%, #000 50%, #000 66%, transparent 83%); -webkit-mask-image: linear-gradient(to bottom, transparent 33%, #000 50%, #000 66%, transparent 83%); }
.fader > div:nth-child(4) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(to bottom, transparent 50%, #000 66%, #000 83%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 66%, #000 83%, transparent 100%); }
.fader > div:nth-child(5) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); mask-image: linear-gradient(to bottom, transparent 66%, #000 83%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 66%, #000 83%, #000 100%); }
.fader > div:nth-child(6) { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); }

/* ==========================================================================
   Thumbnail placeholders (shown until a real thumbnail file exists)
   ========================================================================== */
.ph { overflow: hidden; }
.ph__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}
.ph__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* logo — Almetra AI */
.ph--logo { background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #f1efea 70%); color: #1f1f1f; }
.ph--logo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 92, 16, 0.18), transparent 65%);
  animation: breathe 4.5s ease-in-out infinite;
}
.ph__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { translate: 0 -4%; } }

/* curio */
.ph--curio { background: radial-gradient(120% 90% at 50% 40%, #fcfbfa 0%, #f4f3ed 70%); color: #0a0a0a; }
.ph--curio::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 128, 61, 0.16), transparent 65%);
  animation: breathe 4.5s ease-in-out infinite;
}
.ph--curio .ph__logo { width: 30%; }

/* felloz */
.ph--felloz { background: radial-gradient(90% 70% at 50% 45%, rgba(255, 255, 255, 0.2), transparent 70%), linear-gradient(160deg, #f08a6a 0%, #ef7f63 45%, #f46960 100%); color: #fff; }
.ph--felloz .ph__logo { width: 36%; }

/* orb */
.ph--orb { background: #0b0d14; color: #fff; }
.ph--orb .ph__shape {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  left: 15%;
  top: 50%;
  margin-top: -35%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #5b7cff, #b06bff, #ff7ab6, #5bd2ff, #5b7cff);
  filter: blur(40px);
  opacity: 0.75;
  animation: spin 9s linear infinite, breathe 4.5s ease-in-out infinite;
}

/* bounce — Smash App */
.ph--bounce { background: #d8ff3c; color: #121212; }
.ph--bounce .ph__shape {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 18%;
  aspect-ratio: 1;
  margin-left: -9%;
  border-radius: 50%;
  background: #121212;
  animation: bounce 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}
.ph--bounce .ph__shape::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #d8ff3c;
  clip-path: inset(0 0 50% 0);
  transform: rotate(-25deg) scale(0.7);
}
.ph--bounce .ph__title { place-items: end center; padding-bottom: 18%; }

/* blobs — Felloz */
.ph--blobs { background: #ffd9c2; color: #3b1d0e; }
.ph--blobs .ph__shape,
.ph--blobs .ph__shape::before,
.ph--blobs .ph__shape::after {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
  background: #ff7a45;
  mix-blend-mode: multiply;
}
.ph--blobs .ph__shape { left: 12%; top: 14%; animation: morph 7s ease-in-out infinite; }
.ph--blobs .ph__shape::before,
.ph--blobs .ph__shape::after { content: ""; }
.ph--blobs .ph__shape::before { left: 70%; top: 40%; background: #ffb340; animation: morph 6s ease-in-out infinite reverse; }
.ph--blobs .ph__shape::after { left: 20%; top: 85%; background: #f2547d; animation: morph 8s ease-in-out infinite; }

/* grid — Curio */
.ph--grid {
  background-color: #f1ede4;
  background-image:
    linear-gradient(rgba(18, 18, 18, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  color: #121212;
}
.ph--grid .ph__shape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  margin: -17% 0 0 -17%;
  border: 1.5px solid #121212;
  animation: tumble 6s var(--ease-out) infinite;
}
.ph--grid .ph__shape::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: #2f5bff;
  animation: breathe 3s ease-in-out infinite;
}
.ph--grid .ph__title { display: none; }

@keyframes spin { to { rotate: 360deg; } }
@keyframes breathe { 50% { scale: 0.86; } }
@keyframes bounce { to { transform: translateY(170%) scaleY(0.92); } }
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; transform: translate(0, 0) rotate(0deg); }
  50% { border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%; transform: translate(6%, -8%) rotate(40deg); }
}
@keyframes tumble {
  0%, 10% { transform: rotate(0deg); }
  40%, 60% { transform: rotate(90deg); border-radius: 50%; }
  90%, 100% { transform: rotate(180deg); }
}

/* ==========================================================================
   About page
   ========================================================================== */
.about {
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 4px) var(--gutter) 120px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.005em;
}
.about p, .about ul { margin: 0; }
.about a { text-decoration: none; }

.about__row { display: flex; gap: 24px; padding-bottom: 64px; }
/* Photo/details column, a spacer, then a text column capped at 520px. */
.about__side { flex: 0 0 25%; }
.about__row::after { content: ""; order: 1; flex: 0 0 calc(16.6667% - 12px); }
.about__main { order: 2; flex: 1 0 0; max-width: 520px; }

.about__photo {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--hover);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.about__intro { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.about__body { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }

.about__label { color: #999; }
.about__value { font-weight: 500; }
.about__list { padding: 0; list-style: none; }

.about__meta { display: flex; flex-direction: column; gap: 24px; }

.about__projects { display: flex; flex-direction: column; gap: 24px; }
.about__name { font-weight: 600; }
.about__name a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
.about__name a:hover { text-decoration-color: currentColor; }

.about__clients { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px !important; }
.about__clients > span:first-child { margin-right: 4px; color: #999; }
.about__clients a,
.about__chip {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--hover);
  font-weight: 500;
}
.about__clients a { transition: background 0.15s; }
.about__clients a:hover { background: var(--line); }

.is-loaded .about__row:nth-child(2) .anim { transition-delay: 0.12s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --sidebar-w: 280px; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --nav-h: 48px; }

  .nav { grid-template-columns: 1fr auto; }

  .layout { display: block; }
  .sidebar {
    position: static;
    height: auto;
    padding: 12px 0 28px;
  }
  .sidebar__footer { display: none; }
  .bio { max-width: none; }

  .cards { grid-template-columns: 1fr; gap: 28px; }

  .about { padding-top: calc(var(--nav-h) + 12px); font-size: 15px; line-height: 22px; }
  .about__row { flex-direction: column; gap: 32px; }
  .about__row::after { display: none; }
  .about__side { flex: none; }
  .about__photo { width: 55%; }
  .about__intro { gap: 0; }
  .about__body { gap: 12px; font-size: 16px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}