/* ============================================================
   Andrés Pérez Flórez — Portfolio
   Latin minimalism · Space Grotesk · #0A0A0A on #ffffff
   ============================================================ */

/* ---------- Fonts (self-hosted, variable weight 300–700) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---------- Tokens & base ---------- */
:root {
  --ink: #0A0A0A;
  --sub: #6e6e6e;
  --muted: #a3a3a3;
  --line: #ececec;
  --bg: #ffffff;
  --panel: #F2F2F2;
  --footer-line: #262626;
  --accent: #111111;
  --pad: clamp(20px, 4vw, 40px);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: #fff; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.container { max-width: 1480px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Type helpers ---------- */
.kicker { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sub); }
.kicker--faint { color: #777; }

/* ---------- Animations ---------- */
@keyframes apfRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes apfFade { from { opacity: 0; } to { opacity: 1; } }
.rise-1 { animation: apfRise .7s ease both; }
.rise-2 { animation: apfRise .9s ease both .08s; }
.rise-3 { animation: apfRise .95s ease both .12s; }
@media (prefers-reduced-motion: reduce) {
  .rise-1, .rise-2, .rise-3 { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.nav__name { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
/* On the home page JS hides the nav name while the morphing hero name takes over */
.js .nav--home .nav__name { opacity: 0; transition: opacity .3s ease; }
.js .nav--home.nav--scrolled .nav__name { opacity: 0; } /* morph element lands on top */
.nav__links { display: flex; gap: 36px; font-size: 13px; letter-spacing: 0.02em; }
.nav__links a { text-decoration: none; color: inherit; }
.nav__status { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 0.04em; color: var(--sub); white-space: nowrap; text-decoration: none; }
a.nav__status:hover { color: var(--ink); }
.nav__dot { width: 7px; height: 7px; border-radius: 50%; background: #1a7f37; display: inline-block; animation: dotPulse 2.6s ease-out infinite; }
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 127, 55, 0.35); }
  60% { box-shadow: 0 0 0 6px rgba(26, 127, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 127, 55, 0); }
}
@media (prefers-reduced-motion: reduce) { .nav__dot { animation: none; } }
@media (max-width: 720px) {
  .nav__status { display: none; }
  .nav__links { gap: 22px; }
}

/* ---------- Underline link ---------- */
.apf-link { position: relative; }
.apf-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px;
  background: currentColor; transition: width .35s cubic-bezier(.2, .8, .2, 1);
}
.apf-link:hover::after, .apf-link:focus-visible::after { width: 100%; }

/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--line); }
.hero__inner { padding-top: clamp(88px, 12vh, 132px); padding-bottom: clamp(72px, 10vh, 108px); }
.hero__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.hero__media { text-align: right; display: flex; flex-direction: column; gap: 6px; }
.hero__media .soon { color: var(--muted); }
@media (max-width: 560px) { .hero__media { text-align: left; } }
.hero__name {
  font-weight: 700; font-size: clamp(26px, 7.3vw, 100px); line-height: 0.95;
  letter-spacing: -0.03em; margin: 44px 0 0; text-transform: uppercase;
}
@media (min-width: 561px) { .hero__name { white-space: nowrap; } }
.hero__tag { font-weight: 500; font-size: clamp(24px, 4vw, 52px); line-height: 1; letter-spacing: -0.02em; margin-top: 28px; }
.hero__tag span { color: var(--sub); }
.hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 32px; margin-top: 72px; }
.hero__lede { max-width: 540px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: var(--sub); margin: 0; }
.btn-ghost {
  text-decoration: none; color: inherit; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 14px 26px; white-space: nowrap; transition: all .3s ease;
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Section headers ---------- */
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 44px;
}

/* ---------- Work cards ---------- */
.apf-work { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.apf-work .frame { overflow: hidden; background: var(--panel); position: relative; }
.apf-fill { transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s cubic-bezier(.2, .8, .2, 1); }
.apf-fill img { width: 100%; height: 100%; object-fit: cover; }
.ratio-wide { aspect-ratio: 16 / 8; }
.ratio-tall { aspect-ratio: 4 / 5; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-photo { aspect-ratio: 3 / 2; }

/* Hover effect: zoom (default). Alternatives kept from the original design —
   swap the class on <body>: hv-zoom | hv-color | hv-wipe | hv-lift | hv-none */
.hv-zoom .apf-work:hover .apf-fill { transform: scale(1.04); }
@media (hover: hover) and (pointer: fine) {
  .hv-color .apf-fill { filter: grayscale(1) contrast(1.04); }
  .hv-color .apf-work:hover .apf-fill { filter: grayscale(0) contrast(1); }
  .hv-wipe .apf-work .frame::after {
    content: ""; position: absolute; inset: 0; background: var(--panel);
    transform: scaleY(1); transform-origin: bottom;
    transition: transform .75s cubic-bezier(.7, 0, .2, 1); pointer-events: none; z-index: 2;
  }
  .hv-wipe .apf-work:hover .frame::after { transform: scaleY(0); }
}
.hv-lift .apf-work { transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s cubic-bezier(.2, .8, .2, 1); }
.hv-lift .apf-work:hover { transform: translateY(-10px); box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .32); }

.feature__cap { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.feature__title { font-weight: 600; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -0.02em; margin: 0; }
.feature__meta { font-size: 14px; color: var(--sub); letter-spacing: 0.02em; }

.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 32px; }
@media (max-width: 720px) { .works-grid { grid-template-columns: 1fr; } }
.work-card__cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.work-card__title { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.apf-cap { font-size: 13px; color: var(--sub); margin-top: 5px; opacity: 0.55; transition: opacity .35s ease; }
.apf-work:hover .apf-cap { opacity: 1; }
@media (hover: none) { .apf-cap { opacity: 1; } } /* touch: always readable */
.work-card__num { font-size: 13px; color: var(--muted); }

/* ---------- Availability line ---------- */
.avail {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 34px 0; text-align: center; font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sub);
}

/* ---------- Project pages: text column left, image grid right ---------- */
.project-layout {
  display: grid; grid-template-columns: minmax(320px, 4fr) 7fr;
  gap: clamp(40px, 5vw, 80px); align-items: start;
}
.project-info { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .project-layout { grid-template-columns: 1fr; gap: 40px; }
  .project-info { position: static; }
}
.project-title { font-weight: 700; font-size: clamp(32px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.03em; margin: 0; }
.project-meta { display: block; font-size: 14px; color: var(--sub); margin-top: 14px; }
.project-text { font-size: 16px; line-height: 1.75; color: #3a3a3a; margin: 28px 0 0; }
.project-info .spec-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 36px; padding-top: 24px; gap: 20px 16px; font-size: 14px; }
.project-info .back-link { margin-top: 36px; }
/* Right: gallery of frames, designed for 3:4 portrait photography */
.project-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.project-gallery .frame { background: var(--panel); overflow: hidden; aspect-ratio: 3 / 4; }
.project-gallery .t-wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.project-gallery .t-solo { grid-column: 1 / -1; width: min(100%, 68%); margin: 0 auto; }
@media (max-width: 480px) { .project-gallery .t-solo { width: 100%; } }
@media (max-width: 480px) { .project-gallery { grid-template-columns: 1fr; } }
.project-gallery img { width: 100%; height: 100%; object-fit: cover; }
.spec-grid {
  border-top: 1px solid var(--line); margin-top: 56px; padding-top: 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; font-size: 15px;
}
.spec-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.back-link {
  display: inline-block; margin-top: 44px; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--sub);
}

/* ---------- Pending image placeholder (remove once real images are in) ---------- */
.img-pending {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--muted); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px dashed #d6d6d6; text-align: center; padding: 12px;
}

/* ---------- About ---------- */
.about-grid { padding-top: 56px; display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.about-photo { position: sticky; top: 96px; }
@media (max-width: 860px) { .about-photo { position: static; max-width: 480px; } }
.ratio-portrait { aspect-ratio: 3 / 4; }
.about-title { font-weight: 700; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; margin: 26px 0 0; }
.about-copy p { font-size: 17px; line-height: 1.75; color: #3a3a3a; margin: 0 0 22px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; border-top: 1px solid var(--line); padding-top: 28px; margin-top: 40px; }
.facts .v { font-size: 15px; }
.cv-grid {
  border-top: 1px solid var(--line); padding-top: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px; font-size: 15px; line-height: 1.9;
}
.cv-grid h3 { font-weight: 600; font-size: 15px; margin: 0 0 12px; }
.cv-grid div { color: var(--sub); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #fff; }
.footer__inner { padding-top: 120px; padding-bottom: 50px; }
.footer__title { font-weight: 600; font-size: clamp(28px, 3.8vw, 58px); line-height: 0.95; letter-spacing: -0.03em; margin: 24px 0 50px; }
.footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; border-top: 1px solid var(--footer-line); padding-top: 40px; }
.footer__mail { text-decoration: none; color: #fff; font-size: clamp(22px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.01em; word-break: break-all; }
.footer__loc { font-size: 15px; color: #9a9a9a; }
.footer__social a { text-decoration: none; color: #9a9a9a; display: inline-flex; padding: 6px; transition: color .3s ease, transform .3s ease; }
.footer__social a:hover, .footer__social a:focus-visible { color: #fff; transform: translateY(-2px); }
.footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-top: 90px; font-size: 12px; letter-spacing: 0.06em; color: #5a5a5a;
}

/* ---------- Morphing name & cursor (JS enhancements) ---------- */
#morphName {
  position: fixed; top: 0; left: 0; z-index: 120; transform-origin: left top;
  will-change: transform; pointer-events: none;
  font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink); opacity: 0; transition: opacity .5s ease;
}
#apfCursor {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9999;
  opacity: 0; transition: opacity .3s ease;
}
@media (hover: none), (pointer: coarse) { #apfCursor { display: none; } }

/* ---------- Focus visibility ---------- */
a:focus-visible, .apf-work:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.footer a:focus-visible { outline-color: #fff; }