/* =========================================================================
   Prabin - Portfolio homepage
   Font is isolated behind --font: change the <link> in index.html and this
   one value together when the real typeface arrives. Nothing else references
   a font family directly.
   ========================================================================= */
:root {
  /* Hiragino Sans W3 - W3 is the weight (≈300). macOS system font. */
  --font: 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', system-ui, sans-serif;
  --font-w: 300; /* W3 */
  --bg: #050506;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --saturn: #d97a4d;        /* Saturn red - reddish copper-gold, warm bands */
  --accent: var(--saturn);  /* single accent used across the whole site */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  font-family: var(--font);
  font-weight: var(--font-w);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--fg);
  text-decoration: none;
  transition: opacity .25s ease, color .25s ease;
}
a:hover { opacity: .55; }

.stage {
  position: fixed;
  inset: 0;
  background: var(--bg);
  user-select: none;
}

#eyeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Full-stage transparent click target: clicking the eye dives into work. */
#eyeHit {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
}

/* ---- Cube (Work + Contact are two adjacent faces) ----------------------- */
#cubeScene {
  position: fixed;
  inset: 0;
  z-index: 20;
  perspective: 2200px;      /* how pronounced the 3D turn reads (larger = flatter) */
  pointer-events: none;     /* faces re-enable pointer-events when active */
}
#cubeBox {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(-50vw) rotateY(0deg);  /* cube pushed back by half its side */
}

/* ---- Destination pages / cube faces ------------------------------------- */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Clear the fixed header up top so content sits centrally below it. */
  padding: clamp(96px, 14vh, 160px) 8vw 64px;
  color: var(--fg);
  opacity: 0;
  visibility: hidden;              /* removes an inactive page from paint (iOS 3D fix) */
  pointer-events: none;
  /* Fade opacity, then flip visibility off only after the fade completes. */
  transition: opacity .55s ease, visibility 0s linear .55s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .55s ease, visibility 0s;   /* show instantly, fade opacity in */
}
/* Each face pushed forward by half the cube side; box pulls it back so the
   forward-facing page nets Z 0 (natural full-screen size, no perspective scale). */
#pageContact { transform: rotateY(90deg) translateZ(50vw); }
/* Work hosts a NESTED vertical cube, so it must be a bare 3D container -
   no centering/padding of its own; the vertical faces handle that. */
#pageWork {
  transform: rotateY(0deg) translateZ(50vw);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  display: block;
  padding: 0;
}
.page-inner { width: 100%; max-width: none; }  /* work list spans full width */
.contact-inner { max-width: 900px; }

/* ---- Vertical cube inside Work (list <-> project detail) ---------------- */
.work-vbox {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.62, .04, .24, 1);
  transform: translateZ(-50vh) rotateX(0deg);  /* box pulled back by half its side (viewport height) */
}
.vface {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* List is the front/top face; project detail is the bottom face (facing up). */
#workList   { transform: rotateX(0deg)   translateZ(50vh); }
#projDetail { transform: rotateX(-90deg) translateZ(50vh); }

/* Centered-content layout shared by the list face. */
.face-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 14vh, 160px) 8vw 64px;
}

/* ---- Project detail (image centered first, text under it) --------------- */
.proj-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(84px, 12vh, 140px) 8vw 56px;
  color: var(--fg);
}
.proj-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8a8a92;
  cursor: pointer;
  padding: 0;
  margin-bottom: 26px;
  transition: color .28s ease;
}
.proj-back:hover { color: var(--fg); }
.proj-back-ic { display: inline-flex; color: currentColor; }
.proj-back-stem { transition: transform .3s ease; }
/* Hover: the arrow nudges up off its baseline, like it's about to lift. */
.proj-back:hover .proj-back-stem { transform: translateY(-4px); }

/* Click: the whole glyph rockets up - anticipation dip, then climb + fade. */
@keyframes rocketUp {
  0%   { transform: translateY(0);      opacity: 1; }
  18%  { transform: translateY(3px); }
  100% { transform: translateY(-120px); opacity: 0; }
}
.proj-media {
  position: relative;
  height: clamp(180px, 36vh, 360px);
  aspect-ratio: 4 / 3;
  max-width: 88vw;
  border-radius: 16px;
  overflow: hidden;
  background: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
/* Photo is clickable -> opens the fullscreen viewer (single image or carousel). */
.proj-media.has-image,
.proj-media.is-gallery { cursor: zoom-in; }

/* Self-hosted reel: fills the frame at true vertical (9:16) ratio. */
.proj-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #0d0d10; }
/* Embedded reel (Vimeo background mode — chromeless, like a looping photo). */
.proj-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; background: #000; }

/* Vertical-reel frame: 9:16, height-driven so it always fits the page. */
.proj-media.is-video,
.proj-media.is-embed {
  height: clamp(320px, 54vh, 500px);
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 86vw;
  background: #0d0d10;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* Landscape video frame: 16:9, width-driven (for horizontally-shot videos). */
.proj-media.is-embed.is-wide {
  width: min(600px, 82vw);
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 52vh;
}

/* Portrait photo frame: 3:4, height-driven so tall shots aren't cropped. */
.proj-media.is-portrait {
  height: clamp(300px, 52vh, 480px);
  aspect-ratio: 3 / 4;
  width: auto;
  max-width: 86vw;
}

/* Gallery/carousel frame: 4:5, matches the fashion-photo crop. */
.proj-media.is-gallery {
  height: clamp(300px, 54vh, 500px);
  aspect-ratio: 4 / 5;
  width: auto;
  max-width: 86vw;
  touch-action: pan-y;         /* let us handle horizontal swipes; keep vertical scroll */
}

/* Sliding track: a flex row of full-width slides that translates on change. */
.gallery-track {
  display: none;               /* shown only in gallery mode */
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.7, 0, .18, 1);
  will-change: transform;
}
.proj-media.is-gallery .gallery-track { display: flex; }
.gallery-track .g-slide { flex: 0 0 100%; height: 100%; }
.gallery-track .g-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carousel controls - hairline chevrons outside the frame; ticks below it. */
.proj-media-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 16px);
  max-width: 100%;
}
.gallery-nav {
  display: none;               /* shown only in gallery mode, see .is-gallery below */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 10px;
  background: none;
  border: 0;
  color: #9a9aa2;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}
.gallery-nav:hover { color: var(--fg); }
.gallery-prev:hover { transform: translateX(-3px); }
.gallery-next:hover { transform: translateX(3px); }
.proj-media-wrap.is-gallery .gallery-nav { display: flex; }

/* Tick indicator: thin vertical bars; active one grows tall + white. */
.gallery-dots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 22px;
  margin-top: 12px;
  margin-bottom: 24px;
}
.gallery-dots:empty { display: none; margin-top: 0; }
.gallery-dot {
  display: flex;
  align-items: flex-end;
  height: 22px;
  padding: 0 5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.gallery-dot::before {
  content: '';
  width: 2px;
  height: 9px;
  background: rgba(255, 255, 255, 0.3);
  transition: height .4s ease, background .4s ease;
}
.gallery-dot:hover::before { background: rgba(255, 255, 255, 0.55); }
.gallery-dot.active::before { height: 20px; background: var(--fg); }
.proj-media-ph {
  color: #4a4a52;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 0 20px;
}
.proj-text { max-width: 620px; }
.proj-eyebrow {
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8a8a92;
  margin-bottom: 16px;
}
.proj-title {
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin: 0 0 14px;
}
.proj-meta { font-size: 15px; color: #8a8a92; letter-spacing: .02em; margin-bottom: 18px; }
.proj-desc { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; color: #cdcdd2; margin: 0 0 24px; text-wrap: pretty; }
.proj-link { font-size: 15px; font-weight: 500; color: var(--saturn); letter-spacing: .02em; }
.proj-link:hover { opacity: .7; }

/* ---- Fullscreen image viewer (lightbox) --------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;                 /* above the header (z-30) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(5, 5, 6, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6);
  transform: scale(.98);
  transition: transform .3s ease;
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-close {
  position: fixed;
  top: 26px;
  right: 34px;
  background: none;
  border: 0;
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  opacity: .7;
  transition: opacity .25s ease;
}
.lightbox-close:hover { opacity: 1; }

.page-eyebrow {
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8a8a92;
  margin-bottom: 30px;
}

.work-list { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.work-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: clamp(14px, 2vh, 22px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--fg);
  transition: color .25s ease, opacity .25s ease;
}
.work-row:hover { opacity: 1; color: var(--saturn); }
.work-title { font-size: clamp(26px, 3.4vw, 48px); font-weight: 600; letter-spacing: -0.025em; }
.work-meta { font-size: 14px; color: #8a8a92; white-space: nowrap; letter-spacing: 0.02em; }

.contact-headline {
  font-size: clamp(38px, 6.5vw, 92px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.03;
  margin: 0 0 40px;
  text-wrap: balance;
}
.contact-emails { display: flex; flex-direction: column; gap: 10px; }
.contact-email {
  align-self: flex-start;   /* shrink hit area to the text width */
  max-width: 100%;
  overflow-wrap: anywhere;  /* wrap the long address instead of clipping */
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.contact-socials { display: flex; gap: 28px; margin-top: 44px; font-size: 15px; }
.contact-socials a { color: #8a8a92; }
.contact-socials a:hover { color: var(--fg); opacity: 1; }

/* ---- Header (sits above every view) ------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px;
  z-index: 30;
  pointer-events: none;
  transition: opacity .4s ease;   /* dimmed by the dive, restored after */
}
.site-header .logo,
.site-header .site-nav { pointer-events: auto; }

.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
}

/* ---- Rolling name switcher (cube-face roll) ----------------------------- */
.flip {
  display: inline-block;
  height: 1em;
  line-height: 1;
  perspective: 400px;   /* gives the roll its 3D depth */
  vertical-align: baseline;
}
.flip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  backface-visibility: hidden;
}
/* front sits forward by half the height; back is the bottom face rolled up */
.face-front { transform: rotateX(0deg)  translateZ(0.5em); }
.face-back  { transform: rotateX(90deg) translateZ(0.5em); }

.site-nav {
  display: flex;
  gap: 30px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .01em;
}
.site-nav .saturn { color: var(--saturn); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  .site-header { padding: 22px 22px; }

  /* Phones: fit everything on screen - NO scroll. Type, spacing and media all
     scale to viewport height (vh), so the whole view always fits under the
     fixed header. Top-aligned so the top element clears the header cleanly. */

  /* --- Selected Work list --- */
  .face-content {
    justify-content: flex-start;
    padding: clamp(78px, 12vh, 104px) 8vw clamp(20px, 4vh, 48px);
  }
  .page-eyebrow { margin-bottom: clamp(12px, 2.4vh, 26px); }
  .work-title { font-size: clamp(19px, 4vh, 30px); letter-spacing: -0.02em; }
  .work-meta  { font-size: clamp(11px, 1.5vh, 14px); }
  .work-row   { padding: clamp(7px, 1.5vh, 20px) 0; gap: 14px; }

  /* --- Project detail --- */
  .proj-detail {
    justify-content: flex-start;
    padding: clamp(74px, 11vh, 96px) 5vw clamp(18px, 3.5vh, 40px);
  }
  .proj-back { margin-bottom: clamp(10px, 2vh, 22px); }

  /* Media is HEIGHT-driven by vh so the frame + text fit without scrolling;
     each keeps its aspect-ratio (object-fit prevents distortion / side-crop). */
  .proj-media { margin-bottom: clamp(12px, 2.4vh, 30px); }
  .proj-media.is-video,
  .proj-media.is-embed {
    height: clamp(200px, 40vh, 360px);
    width: auto;
    max-width: 82vw;
  }
  .proj-media.is-embed.is-wide {
    width: min(82vw, 460px);
    height: auto;
    max-height: 34vh;
  }
  .proj-media.is-gallery,
  .proj-media.is-portrait {
    height: clamp(220px, 38vh, 380px);
    width: auto;
    max-width: 82vw;
  }

  .proj-media-wrap { gap: clamp(2px, 1vw, 8px); }
  .gallery-nav { padding: 8px; }
  .gallery-nav svg { width: 26px; height: 26px; }

  .proj-title { font-size: clamp(22px, 3.4vh, 32px); margin-bottom: clamp(6px, 1.2vh, 14px); }
  .proj-meta  { font-size: clamp(12px, 1.7vh, 15px); margin-bottom: clamp(6px, 1.2vh, 18px); }
  .proj-desc  { font-size: clamp(13px, 1.8vh, 19px); margin: 0 0 clamp(8px, 1.6vh, 24px); }

  .gallery-dots { margin-top: clamp(6px, 1.4vh, 14px); margin-bottom: clamp(10px, 2vh, 26px); }
}

/* Respect reduced-motion: hold on 'Prabin', no rolling. */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none !important; transform: none !important; }
  .work-vbox { transition: none !important; }
}