/* =========================================================
   Steven Trinidad — Portfolio 2K25
   Built from Figma file "2K25-PORTFOLIO" (frame HOME)
   ========================================================= */

/* ---------- Fonts ----------
   local() uses the fonts installed on your computer.
   For the published site, put the .woff2 files (web licence) in /fonts. */
@font-face { font-family: "PP Neue Montreal"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("PP Neue Montreal"), local("PPNeueMontreal-Regular"), url("fonts/PPNeueMontreal-Regular.woff2") format("woff2"); }
@font-face { font-family: "PP Neue Montreal"; font-weight: 400; font-style: italic; font-display: swap;
  src: local("PP Neue Montreal Italic"), local("PPNeueMontreal-Italic"), url("fonts/PPNeueMontreal-Italic.woff2") format("woff2"); }
@font-face { font-family: "PP Neue Montreal"; font-weight: 600; font-style: normal; font-display: swap;
  src: local("PP Neue Montreal Semibold"), local("PPNeueMontreal-SemiBold"), url("fonts/PPNeueMontreal-SemiBold.woff") format("woff"); }
@font-face { font-family: "PP Neue Montreal"; font-weight: 600; font-style: italic; font-display: swap;
  src: url("fonts/PPNeueMontreal-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "PP Neue Montreal"; font-weight: 800; font-style: italic; font-display: swap;
  src: local("PP Neue Montreal Extrabold Italic"), local("PPNeueMontreal-ExtraBoldItalic"), url("fonts/PPNeueMontreal-ExtraBoldItalic.woff") format("woff"); }

/* Free replacements for ABC Marfa (SIL Open Font License, free for personal and commercial web use):
   - Geist Mono  → replaces ABC Marfa Semi Mono (small mono texts)
   - Inter Tight → replaces ABC Marfa (accordion titles, quotes) */
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/GeistMono-Variable.woff") format("woff"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/InterTight-Variable.woff") format("woff"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-style: italic; font-display: swap;
  src: url("fonts/InterTight-Italic-Variable.woff") format("woff"); }

@font-face { font-family: "Gotham"; font-weight: 400; font-display: swap;
  src: local("Gotham Book"), local("Gotham-Book"), url("fonts/Gotham-Book.woff2") format("woff2"); }

@font-face { font-family: "Minecraftia"; font-weight: 400; font-display: swap;
  src: local("Minecraftia"), local("Minecraftia-Regular"), url("fonts/Minecraftia-Regular.woff2") format("woff2"); }

@font-face { font-family: "Montserrat"; font-weight: 100 900; font-display: swap;
  src: url("fonts/Montserrat-Variable.woff") format("woff"); }  /* free fallback for Gotham */

/* ---------- Tokens (same names as the Figma "Portfolio" variables) ---------- */
:root {
  --color-brown-950: #2f0b00;
  --color-brown-800: #461d11;
  --color-rust-600: #8d442b;
  --color-rust-400: #b3654e;
  --color-gold-400: #d49954;
  --color-white: #ffffff;
  --color-blue-overlay: #235673;

  --font-sans: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-marfa: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type: exact Figma size at 1440px, scales down below */
  --fs-display: clamp(40px, 4.167vw, 60px);
  --fs-archives: clamp(46px, 5.556vw, 80px);
  --fs-card: clamp(26px, 2.778vw, 40px);
  --fs-paragraph: clamp(21px, 2.153vw, 31px);
  --fs-pretitle: clamp(15px, 1.32vw, 19px);
  --fs-mono: 12px;

  --lh-tight: 0.921;
  --gap: 10px;
  --header-h: 40px;

  /* Column split from Figma: 777 / 663 px = 54 / 46 */
  --col-left: 54fr;
  --col-right: 46fr;

  /* Flipbook */
  --frames: 16;
  --frame-duration: 180ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }   /* smooth auto-scroll for the arrow link */
}
body {
  margin: 0;
  background: var(--color-brown-950);
  color: var(--color-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.page {
  position: relative;
  min-height: 100svh;
  background: var(--color-brown-950) url("assets/background.webp") center / cover no-repeat;
}

.mono {
  font-family: var(--font-mono);
}

/* ---------- Header (sticky) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--col-left) var(--col-right);
  min-height: var(--header-h);
  padding: 5px 10px;
  background: var(--color-brown-800);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-tight);
  letter-spacing: -0.07em;
}
.site-header__id,
.site-header__status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 2px 4px;
}
.site-header__info {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: var(--gap);
  padding-left: 0;
}
.site-header__info > span:first-child { padding: 2px 0; }
.site-header__status { padding-left: 0; }

/* ---------- Home ---------- */
.home {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-left) var(--col-right);
  min-height: calc(100svh - var(--header-h) - 269px);
  min-height: max(717px, calc(100svh - var(--header-h) - 269px));
}
/* Blue saturation overlay from Figma (blend mode "Saturation") */
.home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-blue-overlay);
  mix-blend-mode: saturation;
  pointer-events: none;
}
.home > * { position: relative; }

.display {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.05em;
}
.kern-b { letter-spacing: -0.0053em; } /* intentional kerning from Figma — do not change */

.home__left,
.home__right {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  min-width: 0;
}
.home__left .display,
.home__right > .display {
  min-height: 147px;
  max-width: 581px;
}
.home__right { background: rgb(70 29 17 / 0.26); }

/* Bio */
.bio {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: var(--gap) 0;
}
.bio__text { padding-left: 4px; }
.bio__pretitle {
  font-family: var(--font-mono);
  font-size: var(--fs-pretitle);
  letter-spacing: -0.1em;
  color: var(--color-rust-600);
}
.bio__paragraph {
  max-width: 13.7em;            /* = 425px at 31px */
  font-size: var(--fs-paragraph);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* Links row + big gold arrows (Figma: LINKS row, ARROWS 40×46) */
.bio__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 0 5px;
}
.bio__arrows-link {
  flex: none;
  display: block;
  padding: 6px;          /* larger click area */
  margin: -6px;
  color: var(--color-gold-400);
  transition: color .2s ease;
}
.bio__arrows-link:hover,
.bio__arrows-link:focus-visible { color: var(--color-white); }
.bio__arrows-link:focus-visible { outline: 1px dashed currentColor; outline-offset: 2px; }
.archives { scroll-margin-top: var(--header-h); }
.bio__arrows {
  display: block;
  flex: none;
  overflow: visible;
  color: var(--color-gold-400);
}
.links {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: -0.07em;
  color: var(--color-rust-400);
}
.links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.links a:hover,
.links a:focus-visible { color: var(--color-gold-400); }
.links__icon { flex: none; }

/* Work */
.work {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  max-width: 624px;
  min-height: 0;
}
.work__header {
  display: flex;
  align-items: flex-end;
  gap: 50px;
}
.work__title {
  flex: none;
  width: 129px;                 /* also the offset of the cards (NULL BOX in Figma) */
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 0.75;
  letter-spacing: -0.05em;
}
/* Scroll hint — same sequence as the Figma ARROWS variants, mirrored upward so it
   never overlaps the first card: the top chevron tucks down 3px, rises 15px, then
   settles back. Pause, then eased curves instead of steps. */
.work__arrows { flex: none; overflow: visible; }
/* Same animation on the big arrows of the bio (viewBox scales the movement ×2.5) */
.chevron--1 {
  animation: chevron-rise 2s infinite;
  will-change: transform;
}
@keyframes chevron-rise {
  0%, 50% { transform: translateY(0);      animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  62%     { transform: translateY(3px);    animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  80%     { transform: translateY(-15px);  animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  100%    { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .chevron--1 { animation: none; }
}
.work__hint {
  display: flex;
  align-items: flex-end;
  gap: 25px;
  padding: 0 8px 0 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.04em;
}

.projects {
  --scroll-h: 495px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: var(--scroll-h);
  padding-left: calc(129px + var(--gap));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.projects::-webkit-scrollbar { display: none; }
.projects:focus-visible { outline: 1px dashed var(--color-white); outline-offset: 4px; }

/* ---------- Project card (single component) ---------- */
.card {
  display: flex;
  gap: var(--gap);
  height: 160px;
}
.card__year {
  flex: none;
  width: 33px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: var(--lh-tight);
  letter-spacing: -0.07em;
}
.card__frame {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 26px;
  padding: 5px;
  border: 1px solid var(--color-white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-brown-800);
  transition: background-color .2s ease, color .2s ease;
}
/* Card photo: a real <img> (reliable on every browser and host) */
.card__img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, center);
  transition: opacity .2s ease;
}
/* --shade (0–1) darkens a photo so the title stays readable */
.card__frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(0 0 0 / var(--shade, 0));
  pointer-events: none;
}
.card__frame > :not(.card__img) { position: relative; }

/* Shadio Running: photo in blend mode "Difference" (from Figma) */
.card--difference .card__frame { background: transparent; isolation: auto; }
.card--difference .card__img { z-index: 0; mix-blend-mode: difference; }
.card__name {
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: -0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__view {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-tight);
  letter-spacing: -0.07em;
}
/* State = Hover */
.card:hover .card__frame,
.card:focus-visible .card__frame {
  background: var(--color-white);
  color: var(--color-brown-950);
}
.card:hover .card__img, .card:focus-visible .card__img,
.card:hover .card__frame::after, .card:focus-visible .card__frame::after { opacity: 0; }
.card:focus-visible { outline: none; }

/* ---------- Archives ---------- */
.archives {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  min-height: 269px;
  padding: var(--gap) 15px;
  background: rgb(255 255 255 / 0.04);
}
.archives__top {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}
.archives__titles {
  display: flex;
  align-items: stretch;
  gap: 15px;
}
.archives__title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-archives);
  font-weight: 400;
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--color-gold-400);
  white-space: nowrap;
}
.archives__line--1 { letter-spacing: -0.02em; }
.archives__line--2 { letter-spacing: 0.02em; }  /* intentional — from Figma */
.archives__soon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-tight);
  letter-spacing: -0.07em;
  color: var(--color-gold-400);
}
.archives__bottom {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-tight);
  letter-spacing: -0.07em;
  color: var(--color-rust-400);
}

/* ---------- Flipbook (CSS only) ----------
   Each frame is visible for 1/16 of the cycle, offset by its index. */
.flipbook {
  position: relative;
  flex: none;
  width: 155px;
  height: 74px;
  overflow: hidden;
  background: rgb(0 0 0 / 0.4);
}
.flipbook img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  animation: flip calc(var(--frames) * var(--frame-duration)) steps(1, end) infinite;
  animation-delay: calc(var(--i) * var(--frame-duration));
}
@keyframes flip {
  0%      { visibility: visible; }
  6.25%   { visibility: hidden; }   /* 100% / 16 */
  100%    { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .flipbook img { animation: none; }
  .flipbook img:first-child { visibility: visible; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  :root { --col-left: 1fr; --col-right: 1fr; }
  .work__header { gap: 24px; }
  .work__title { width: auto; }
  .projects { padding-left: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root {
    --fs-display: 44px;
    --fs-archives: clamp(44px, 14vw, 60px);
    --fs-card: 26px;
    --fs-paragraph: 22px;
    --fs-pretitle: 15px;
    --header-h: 36px;
  }

  .site-header {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    font-size: 11px;
  }
  .site-header__info { grid-template-columns: 1fr 1fr; }

  .page { background-position: 30% top; background-size: auto 100svh; background-attachment: scroll; }

  .home {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .home__left { min-height: calc(100svh - var(--header-h)); }
  .home__left .display,
  .home__right > .display { min-height: 0; }
  .bio { gap: 32px; }
  .bio__paragraph { max-width: 100%; }

  .home__right { padding-top: 24px; padding-bottom: 24px; gap: 24px; }
  .work { max-width: none; }
  .work__header { justify-content: space-between; }
  /* Natural page scroll on mobile — no inner scroll area */
  .projects { height: auto; overflow: visible; }
  .card { height: auto; flex-direction: column; gap: 6px; }
  .card__frame { aspect-ratio: 440 / 160; min-height: 120px; }

  .archives { gap: 24px; padding: 16px; }
  .archives__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .archives__titles { flex-direction: column; gap: 8px; }
  .archives__soon { flex-direction: row; gap: 16px; }
  .flipbook { width: 100%; max-width: 310px; height: auto; aspect-ratio: 155 / 74; }
}

/* =========================================================
   Text animations: fade + rise from bottom to top
   ========================================================= */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 1) On page load: the texts at the top of the page, one after the other */
.site-header > *,
.home .display,
.bio__pretitle, .bio__paragraph, .links li, .bio__arrows-link,
.work__header,
.p-hero__title, .p-tags li, .p-hero__category, .p-hero__text,
.p-hero__year, .p-hero__slogan, .p-hero__logo {
  animation: rise .9s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--d, 0s);
}
.site-header > *                          { --d: .05s; }
.home__left .display, .p-hero__title      { --d: .15s; }
.home__right > .display, .p-tags li       { --d: .3s; }
.p-tags li + li                           { --d: .38s; }
.bio__pretitle, .p-hero__category, .p-hero__year { --d: .45s; }
.bio__paragraph, .p-hero__text, .p-hero__slogan  { --d: .6s; }
.work__header, .p-hero__logo              { --d: .75s; }
.links li, .bio__arrows-link              { --d: .9s; }
.links li + li                            { --d: 1s; }

/* 2) On scroll: quotes (project pages) and archives (home) */
.js-reveal [data-reveal] > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
}
.js-reveal [data-reveal] > :nth-child(2) { transition-delay: .2s; }
.js-reveal [data-reveal] > :nth-child(3) { transition-delay: .35s; }
.js-reveal [data-reveal].is-visible > * { opacity: 1; transform: none; }
.js-reveal [data-reveal] > .p-quote__bg { opacity: 1; transform: none; transition: none; }  /* background stays put */

@media (prefers-reduced-motion: reduce) {
  .site-header > *, .home .display, .bio__pretitle, .bio__paragraph, .links li, .bio__arrows-link,
  .work__header, .p-hero__title, .p-tags li, .p-hero__category, .p-hero__text,
  .p-hero__year, .p-hero__slogan, .p-hero__logo { animation: none; }
}