/* ==========================================================================
   Shah Shivang — portfolio
   Layout unit: --u is one "design pixel". The desktop design is 1280 wide and
   everything scales with the window (the same way the original Wix Studio
   site did). On phones (<= 750px) the design is 390 wide.
   ========================================================================== */

@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --u: calc((100vw - var(--sbw, 0px)) / 1280);
  --yellow: #ffcc13;
  --yellow-2: #ffc90f;
  --orange: #ffaf0f;
  --red: #c91717;
  --brown: #8b614f;
  --bg: #000;
  --mono: "Geist Mono", ui-monospace, monospace;
  --sans: "Carlito", Calibri, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: #fff; font-family: var(--mono); font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video, iframe { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
p, h1, h2 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

body.light { --bg: #f3f8f0; }
body.white { --bg: #fff; }

/* ---------- positioning helpers ---------- */
.sec { position: relative; height: calc(var(--h) * var(--u)); }
.abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.abs.hh { height: calc(var(--hh) * var(--u)); }
.sec.auto { height: auto; padding-bottom: calc(var(--pb, 0) * var(--u)); }
.flow { margin-left: calc(var(--x) * var(--u)); padding-top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.abs > img:not(.cover):not(.contain), .masonry img { width: 100%; height: auto; }
.cover { width: 100%; height: 100%; object-fit: cover; }
.contain { width: 100%; height: 100%; object-fit: contain; }
.r10 { border-radius: calc(10.12 * var(--u)); overflow: hidden; }

/* ---------- type ---------- */
.t-nav { font-size: calc(17.2 * var(--u)); line-height: 1.6; color: var(--yellow); }
.t-body { font-size: calc(15 * var(--u)); line-height: 1.6; }
.t-small { font-size: calc(13 * var(--u)); line-height: 1.6; color: var(--yellow-2); }
.t-title { font-family: var(--sans); font-weight: 700; font-size: calc(41 * var(--u)); line-height: 1.3; color: var(--yellow-2); }
.t-label { font-size: calc(15 * var(--u)); line-height: 1.6; color: var(--yellow-2); }
.c-white { color: #fff; }
.c-yellow { color: var(--yellow); }
.c-yellow2 { color: var(--yellow-2); }
.c-brown { color: var(--brown); }
.center { text-align: center; }

/* ---------- header ---------- */
.site-header { position: relative; height: 86px; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 5; }
.site-header.h67 { height: 67px; }
.site-header.overlay { position: absolute; inset: calc(21 * var(--u)) 0 auto; height: calc(42 * var(--u)); background: none; }
.nav { width: calc(1111 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(2 * var(--u)); }
.nav .logo { display: block; width: calc(132 * var(--u)); transition: transform .3s ease-in-out; }
.site-header.overlay .nav .logo { width: calc(122 * var(--u)); }
.nav .logo img { width: 100%; height: auto; }
.nav .logo:hover { transform: scale(1.05); }
.nav a.t-nav { transition: transform .3s ease-in-out; display: inline-block; }
.nav a.t-nav:hover { transform: scale(1.05); }
.nav .m-only { display: none; }

/* ---------- footer ---------- */
.site-footer { position: relative; height: calc(398 * var(--u)); background: #000; color: var(--yellow-2); }
.site-footer .walk { left: calc(70 * var(--u)); top: calc(44 * var(--u)); width: calc(79 * var(--u)); }
.site-footer .walk img { width: 100%; height: auto; }
.f-text { font-size: calc(15 * var(--u)); line-height: 1.6; }
.f-email { font-size: calc(40 * var(--u)); line-height: 1.6; color: #fff; }
.f-links a { transition: opacity .2s; }
.f-links a:hover, .f-email a:hover { opacity: .75; }
.f-right { position: absolute; left: calc(598 * var(--u)); top: calc(32 * var(--u)); width: calc(653 * var(--u)); height: calc(346 * var(--u)); }
.f-right > * { position: absolute; }
.f-star { left: calc(47.7 * var(--u)); top: calc(51.7 * var(--u)); width: 104px; height: 91px; animation: spin 7s linear infinite reverse; }
.f-avail { left: calc(153 * var(--u)); top: calc(70 * var(--u)); width: 245px; font-size: 16.9px; line-height: 1.6; color: var(--yellow); }
.f-resume { left: calc(122 * var(--u)); top: calc(169 * var(--u)); display: inline-flex; align-items: center; justify-content: center; min-width: 85px; height: 46px; padding: 0 15px; border-radius: 20px; background: var(--yellow); color: var(--red); font-weight: 600; font-size: 14px; animation: pulse 1.3s linear infinite; }
.f-arrow { left: calc(252 * var(--u)); top: calc(124.8 * var(--u)); width: 104px; height: 104px; transform: rotate(56deg) scale(1, -1); }
.f-face { left: calc(357 * var(--u)); top: calc(61 * var(--u)); width: calc(296 * var(--u)); height: calc(296 * var(--u)); object-fit: cover; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- home ---------- */
.hero { position: relative; height: 100vh; min-height: calc(500 * var(--u)); overflow: hidden; background: #000; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.hero-text { position: absolute; left: 50%; bottom: calc(256 * var(--u)); width: calc(718 * var(--u)); transform: translateX(-50%); font-weight: 500; font-size: calc(24.28 * var(--u)); line-height: 1.6; color: #fff; text-align: center; transition: transform .3s ease-in-out; }
.hero-text:hover { transform: translateX(-50%) scale(1.1); }

.tags { position: sticky; top: 5vh; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 689px; margin: calc(50 * var(--u)) auto 0; }
.tag { padding: 6px 20px; border-radius: 15px; background: rgba(0, 0, 0, .25); color: #ffcd1f; font-weight: 500; font-size: 18px; line-height: 1.6; transition: background .2s; }
.tag:hover { background: rgba(224, 53, 14, .3); }
.tag[aria-pressed="true"] { background: rgba(224, 53, 14, .5); }

.projects { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); width: calc(1200 * var(--u)); margin: calc(59 * var(--u)) auto 0; }
.projects a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #111; }
.projects a > img, .projects a > video { width: 100%; height: 100%; object-fit: cover; transition: filter .4s ease; }
.projects a:hover > img, .projects a:hover > video { filter: grayscale(1); }
.projects a[hidden] { display: none; }

/* ---------- project intro (title + credits | description) ---------- */
.intro .abs { --w: 400; }
.intro p + p { margin-top: 0; }

/* ---------- generic media ---------- */
.frame { background: #000; }
.frame iframe, .frame video { width: 100%; height: 100%; border: 0; }

/* stacked list of images (vertical gallery) */
.stack { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.stack > * { border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.stack img { width: 100%; height: auto; }
.stack.flush { gap: 0; }
.stack.flush > * { border-radius: 0; cursor: default; }

/* justified row(s): each child gets flex: <aspect ratio> */
.jrow { display: flex; gap: calc(10 * var(--u)); }
.jrow > * { flex: var(--ar) 1 0; aspect-ratio: var(--ar); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.jrow img { width: 100%; height: 100%; object-fit: cover; }
.jgrid { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }

/* 2-column masonry, columns pre-assigned in the HTML */
.masonry { display: flex; gap: calc(var(--gap, 20) * var(--u)); align-items: flex-start; }
.masonry > .col { flex: 1; display: flex; flex-direction: column; gap: calc(var(--gap, 20) * var(--u)); }
.masonry .item { position: relative; border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.masonry .item img { width: 100%; height: auto; transition: transform .4s ease, opacity .4s; }
.masonry.shrink .item:hover img { transform: scale(.97); }
.load-more-wrap { position: relative; }
.load-more-wrap.clipped { overflow: hidden; height: calc(var(--clip) * var(--u)); }
.load-more { display: block; margin: calc(20 * var(--u)) auto 0; width: 155px; height: 44px; border-radius: 10px; color: rgba(255, 204, 19, .9); font-weight: 500; font-size: 18px; }
.load-more:hover { background: rgba(255, 175, 15, .15); }

/* play badge for video thumbnails */
.play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(0, 0, 0, .6); pointer-events: none; }
.play::after { content: ""; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }

/* ---------- sliders ---------- */
.slider { position: relative; overflow: hidden; }
.slider .track { display: flex; gap: calc(var(--gap, 0) * var(--u)); height: 100%; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.slider .track::-webkit-scrollbar { display: none; }
.slider .track > * { flex: 0 0 auto; height: 100%; cursor: zoom-in; overflow: hidden; }
.slider .track img { height: 100%; width: auto; transition: transform .5s ease; }
.slider.rows .track { display: grid; grid-template-rows: 1fr 1fr; grid-auto-flow: column; grid-auto-columns: calc(var(--cw) * var(--u)); }
.slider.rows .track > * { height: auto; }
.slider.rows .track img { width: 100%; height: 100%; object-fit: cover; }
.slider.fit .track img, .fit .jrow img { object-fit: contain; }
.slider.zoom .track > *:hover img { transform: scale(1.06); }
.slider.shrink .track > *:hover img { transform: scale(.96); }
.s-btn { position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; background: var(--yellow-2); display: grid; place-items: center; transition: opacity .2s, transform .2s; }
.s-btn svg { width: 12px; height: 21px; fill: #000; }
.s-btn.prev svg { transform: scaleX(-1); }
.s-btn:hover { transform: scale(1.08); }
.s-btn[hidden] { display: none; }
.slider .s-btn.next { right: 23px; }
.slider .s-btn.prev { left: 23px; }
.slider.red-arrows .s-btn { width: 24px; height: 37px; margin-top: -18px; border-radius: 0; background: none; }
.slider.red-arrows .s-btn svg { width: 24px; height: 37px; fill: var(--red); }

/* posterfolio vertical heading */
.vtitle { font-weight: 500; font-size: calc(70.83 * var(--u)); line-height: 1.2; color: var(--orange); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

/* before / after comparison */
.compare { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.compare img { width: 100%; height: 100%; object-fit: cover; }
.compare .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; }
.compare .divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .25); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55); backdrop-filter: blur(18px) grayscale(.6); -webkit-backdrop-filter: blur(18px) grayscale(.6); }
.lightbox.open { display: flex; }
.lightbox .lb-media { max-width: 88vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.lightbox button { position: absolute; color: #ffaf0f; padding: 12px; }
.lightbox .lb-close { top: 18px; right: 22px; font-size: 34px; line-height: 1; }
.lightbox .lb-prev, .lightbox .lb-next { top: 50%; margin-top: -30px; font-size: 44px; line-height: 1; }
.lightbox .lb-prev { left: 18px; }
.lightbox .lb-next { right: 18px; }

/* ---------- reveal-on-scroll (soft fade, like the original) ---------- */
.reveal { opacity: 0; translate: 0 calc(100 * var(--u)); transition: opacity .9s ease, translate .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; translate: none; }

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 750px) {
  :root { --u: calc((100vw - var(--sbw, 0px)) / 390); }

  .sec { height: auto; padding: calc(16 * var(--u)) calc(14 * var(--u)); }
  .sec.bleed { padding-left: 0; padding-right: 0; }
  .abs { position: relative; left: auto; top: auto; width: auto; }
  .abs.hh { height: auto; }
  .sec > .abs + .abs { margin-top: calc(14 * var(--u)); }
  .flow { margin-left: 0; width: auto; padding: calc(10 * var(--u)) calc(14 * var(--u)) 0; }
  .abs[style*="--mw"] { width: calc(var(--mw) * var(--u)); margin-left: auto; margin-right: auto; }
  .frame { aspect-ratio: 1240 / 710; }
  .frame.tall { aspect-ratio: 440 / 1000; max-width: calc(340 * var(--u)); margin: 0 auto; }

  .site-header { height: 56px; }
  .site-header.h67 { height: 56px; }
  .site-header.overlay { top: calc(13 * var(--u)); height: auto; }
  .nav { width: calc(340 * var(--u)); }
  .nav .logo, .site-header.overlay .nav .logo { width: calc(117 * var(--u)); }
  .t-nav { font-size: calc(18.5 * var(--u)); }
  .nav .d-only { display: none; }
  .nav .m-only { display: inline-block; }

  .t-title { font-size: calc(30 * var(--u)); }
  .t-body { font-size: calc(13 * var(--u)); }
  .t-small { font-size: calc(11.5 * var(--u)); }
  .t-label { font-size: calc(13 * var(--u)); }

  .hero { height: calc(810 * var(--u)); min-height: 0; }
  .hero-text { width: calc(217 * var(--u)); bottom: calc(75 * var(--u)); font-size: calc(15.6 * var(--u)); }
  .tags { width: calc(330 * var(--u)); gap: 6px; }
  .tag { font-size: calc(12 * var(--u)); padding: 4px calc(12 * var(--u)); }
  .projects { grid-template-columns: 1fr; width: calc(360 * var(--u)); gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }

  .stack, .jgrid, .jrow { gap: calc(8 * var(--u)); }
  .jrow { flex-wrap: wrap; }
  .jrow > * { flex-basis: 100%; }
  .masonry { flex-direction: column; --gap: 10; }
  .masonry > .col { width: 100%; }
  .slider { height: auto !important; }
  .slider .track { height: calc(var(--mh, 220) * var(--u)); }
  .slider.rows .track { grid-auto-columns: calc(var(--cw) * var(--u) * .5); }
  .s-btn { width: 36px; height: 36px; margin-top: -18px; }
  .slider .s-btn.next { right: 10px; }
  .slider .s-btn.prev { left: 10px; }
  .load-more-wrap.clipped { height: calc(var(--clip) * var(--u) * 1.4); }

  .vtitle { writing-mode: horizontal-tb; transform: none; font-size: calc(34 * var(--u)); text-align: center; }

  /* footer (follows the original mobile footer) */
  .site-footer { height: auto; padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(30 * var(--u)); text-align: center; }
  .site-footer .walk { display: none; }
  .site-footer .abs { position: static; width: auto; }
  .f-right { position: relative; left: auto; top: auto; width: 100%; height: calc(120 * var(--u)); }
  .f-star { left: calc(7 * var(--u)); top: 0; width: calc(61 * var(--u)); height: calc(59 * var(--u)); }
  .f-avail { left: calc(74 * var(--u)); top: calc(8 * var(--u)); width: calc(160 * var(--u)); font-size: calc(10 * var(--u)); text-align: left; }
  .f-resume { left: calc(84 * var(--u)); top: calc(52 * var(--u)); min-width: calc(76 * var(--u)); height: calc(33 * var(--u)); font-size: calc(10.4 * var(--u)); }
  .f-arrow { left: calc(178 * var(--u)); top: calc(40 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .f-face { left: calc(242 * var(--u)); top: calc(10 * var(--u)); width: calc(106 * var(--u)); height: calc(106 * var(--u)); }
  .f-text { font-size: calc(10.4 * var(--u)); margin-top: calc(6 * var(--u)); }
  .f-email { font-size: calc(20.8 * var(--u)); margin-top: calc(6 * var(--u)); }
  .f-links { display: flex; justify-content: center; gap: calc(22 * var(--u)); font-size: calc(10.4 * var(--u)); margin-top: calc(8 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}