/* malo.studio — /work gallery
   Motion-path thumbnail flow (after Codrops/Iqbal, MIT), restyled to the
   studio's mono system: Geist Mono, #FFFFFF / #18181B / #A1A1AA. */

@font-face {
  font-family: 'Geist Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../../assets/fonts/GeistMono-Regular.woff2') format('woff2');
}

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

::selection {
  background: #18181b;
  color: #ffffff;
}
::-moz-selection {
  background: #18181b;
  color: #ffffff;
}

:root {
  font-size: 12px;
  --color-text: #18181B;
  --color-bg: #FFFFFF;
  --color-muted: #A1A1AA;
  --page-padding: 1.5rem;
  --width-thumbnail: 10rem;
  --height-thumbnail: calc(var(--width-thumbnail) * 7 / 5);
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  background: none;
  font: inherit;
  color: inherit;
}

a {
  text-decoration: none;
  color: var(--color-text);
  outline: none;
  cursor: pointer;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0;
}

/* ---- Loading overlay (mono caret-style sweep) ---- */
@media (scripting: enabled) {
  .loading::before,
  .loading::after {
    content: "";
    position: fixed;
    z-index: 10000;
  }
  .loading::before {
    inset: 0;
    background: var(--color-bg);
  }
  .loading::after {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 1px;
    margin-left: -50px;
    background: var(--color-text);
    animation: loaderAnim 1.5s ease-in-out infinite alternate forwards;
  }
}
@keyframes loaderAnim {
  0%   { transform: scaleX(0); transform-origin: 0% 50%; }
  50%  { transform: scaleX(1); transform-origin: 0% 50%; }
  50.1%{ transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .loading::after { animation: none; }
}

/* ---- Frame (header) ---- */
.frame {
  padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  pointer-events: none;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.frame a,
.frame button { pointer-events: auto; }

.frame__title {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  /* keep the scramble on one line without shifting layout */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2em;
}
.frame__links {
  display: flex;
  gap: 1.25rem;
}
.frame__links a {
  color: var(--color-muted);
  transition: color 0.25s ease;
}
.frame__links a:hover { color: var(--color-text); }

/* Client index — plain text for now; links wired later. A clear gap above
   sets it apart from INDEX (nav) as its own group (the work). */
.frame__clients {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.6rem;
  padding-left: 1.25rem; /* indent the work list under INDEX */
}

/* ---- Content stage ---- */
.content {
  padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  width: 100vw;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100svh;
  max-height: 100svh;
  justify-content: center;
  align-items: center;
  scrollbar-width: none; /* Firefox */
}
.content::-webkit-scrollbar {
  display: none; /* Safari/Chrome */
}

/* ---- Featured image (revealed on open) ---- */
/* Pinned, centered featured layer — does NOT scroll with the thumbnail
   column. Full-viewport but click-through except on its own children. */
.big-featured__container {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
}
.big-featured__container > * {
  width: 20vw;
  pointer-events: none;
}
/* Card chrome only becomes interactive once the gallery is open. */
body.is-open .big-featured__container > * {
  pointer-events: auto;
}
.big-featured__container .big-featured__image {
  aspect-ratio: 5 / 7;
  overflow: hidden;
  cursor: none; /* replaced by the custom "+" cursor */
}

/* Card chrome — sits around the image, not on it. */
.big-featured__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.big-featured__number {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.big-featured__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- Thumbnails ---- */
.thumbnail {
  width: var(--width-thumbnail);
  height: var(--height-thumbnail);
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(var(--page-padding), calc(var(--page-padding) * -1));
  will-change: transform;
}
.thumbnail {
  cursor: pointer;
}
.thumbnail .thumbnail__image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
/* When expanded, fade back the thumbnails that aren't the featured one. */
body.is-open .thumbnail:not(.is-active) .thumbnail__image {
  opacity: 0.45;
}
.thumbnail .thumbnail__number {
  padding-inline: 0.75rem;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.75rem;
  color: var(--color-text);
  transform: translateX(-100%);
  opacity: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Buttons ---- */
.open-button,
.close-button {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.open-button {
  position: absolute;
  bottom: 0;
  left: var(--page-padding);
  transform: translateY(calc((var(--page-padding) + var(--height-thumbnail) + 10px) * -1));
}
.close-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.close-button__icon {
  width: 0.65rem;
  height: 0.15rem;
  background-color: var(--color-text);
  border-radius: 10vmax;
}

/* ---- Prev / next hot zones flanking the featured card ---- */
.featured-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 28vw; /* matches card image height (20vw * 7/5) */
  z-index: 6;
  border: none;
  background: none;
  padding: 0;
  cursor: none; /* replaced by the custom < / > cursor */
  opacity: 0;
  pointer-events: none;
}
/* Fixed 100px wide, flush with each card edge (no dead zone leaving the
   card; the rest of the gap stays free). */
.featured-nav--prev {
  left: calc(40vw - 100px); /* ends exactly at the card left edge (40vw) */
  width: 100px;
}
.featured-nav--next {
  left: 60vw; /* card right edge */
  width: 100px;
}
body.is-open .featured-nav {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Custom mono cursor (+ over card, < / > over nav zones) ---- */
.work-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  pointer-events: none;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  mix-blend-mode: difference; /* legible over any tone, like the close */
  opacity: 0;
  transition: opacity 0.15s ease;
  will-change: transform;
}
.work-cursor.is-visible {
  opacity: 1;
}
.work-cursor--nav {
  font-size: 18px; /* < and > slightly smaller than the + */
}

/* ---- Lightbox (fullscreen featured zoom) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(255, 255, 255, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: zoom-out;
  overflow: hidden; /* clips the transform-scaled image to the viewport */
}
.lightbox.is-active {
  pointer-events: auto;
}
.lightbox__image {
  position: fixed;
  object-fit: cover;
  display: block;
  will-change: transform; /* pin a GPU layer so the scale stays smooth */
  backface-visibility: hidden;
}
.lightbox__close {
  position: fixed;
  top: var(--page-padding);
  right: var(--page-padding);
  z-index: 2001;
  pointer-events: auto;
  /* White + difference blend = the close auto-inverts against the image
     behind it, staying legible over both light and dark images. */
  color: #fff;
  mix-blend-mode: difference;
}
.lightbox__close .close-button__icon {
  background-color: #fff;
}

@media (max-width: 768px) {
  .big-featured__container > * { width: 46vw; }
  .frame { flex-direction: column; gap: 0.75rem; }
}