/* ============================================================
   Sharde Zigah — Portfolio shell system
   Shared across: index, play, freelance, case-* pages
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #050505;
  --text: #f5f5f5;
  --text-mute: rgba(245,245,245,0.78);
  --text-dim: #939395;
  --rule: rgba(245,245,245,0.10);

  /* nav accents */
  --c-work: #E24F62;
  --c-play: #A5C572;
  --c-about: #6A99B4;
  --c-free: #8EE4BA;
  --c-contact: #A7B5F7;

  /* legacy case accents (unchanged engine) */
  --teal: #54B5A6;
  --purple: #B78AF5;
  --gold: #FDEF98;

  /* black business card */
  --card-grad: linear-gradient(155deg,#1b1b1d 0%,#101012 48%,#0a0a0b 100%);
  --card-ink: #f5f5f5;

  --fs-nav: clamp(15px, 1.5vw, 18px);
  --content-pad: clamp(22px, 4.5vw, 70px);
  --page-pad: clamp(22px, 4.5vw, 70px);
  --max-w: 1312px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'General Sans Variable', 'General Sans', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh; min-height: 100dvh;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--c-work); color: var(--bg); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: rgba(245,245,245,0.14); border-radius: 4px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ---- Cursor sparkle icon (shared) ---- */
.spk { flex-shrink: 0; display: block; }

/* ============================================================
   NAV PILLS  — monochrome at rest, accent + sparkle on hover
   Used on card back AND inner-page top bar
   ============================================================ */
.nav-stack { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

.np {
  --accent: #ccc;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.42em;
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font-family: inherit; font-weight: 600; font-size: var(--fs-nav);
  line-height: 1; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  border: 1.4px solid rgba(245,245,245,0.45);
  background: transparent;
  color: var(--text);
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.np .spk { width: 0; opacity: 0; transition: width .2s var(--ease), opacity .2s var(--ease); }
.np:hover, .np:focus-visible, .np.active {
  background: var(--accent);
  color: #0b0b0b;
  border-color: var(--accent);
  outline: none;
}
.np:hover .spk, .np:focus-visible .spk, .np.active .spk { width: 0.85em; opacity: 1; }
.np[data-accent="work"]    { --accent: var(--c-work); }
.np[data-accent="play"]    { --accent: var(--c-play); }
.np[data-accent="about"]   { --accent: var(--c-about); }
.np[data-accent="free"]    { --accent: var(--c-free); }
.np[data-accent="contact"] { --accent: var(--c-contact); }

/* ============================================================
   HOME — flip card
   ============================================================ */
.home {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
.home-stage {
  flex: 1 0 auto;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px,6vh,72px) var(--content-pad);
  position: relative;
}
.flip-toggle { position: absolute; opacity: 0; pointer-events: none; }

.scene {
  width: min(866px, 92vw, calc((100dvh - 150px) * 1.746));
  perspective: 2000px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 866 / 496;
  transform-style: preserve-3d;
  transition: transform .95s var(--ease);
  will-change: transform;
}
.flip-toggle:checked ~ .home-stage .card-inner,
.scene.is-flipped .card-inner { transform: rotateY(180deg); }
.scene.no-anim .card-inner { transition: none; }

.face {
  position: absolute; inset: 0;
  border-radius: clamp(8px, 1.4vw, 14px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 18px 50px -22px rgba(0,0,0,0.7);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.card-art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.flip-back {
  position: absolute; inset: 0; z-index: 1; cursor: pointer;
}

/* FRONT face — monogram */
.face-front {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.flip-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(11px, 1.1vw, 13px); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
  transition: opacity .4s var(--ease);
}
.flip-hint svg { width: 14px; height: 14px; }
.scene.is-flipped .flip-hint { opacity: 0; visibility: hidden; }

/* BACK face — signature + nav */
.face-back {
  transform: rotateY(180deg) translateZ(0);
  -webkit-transform: rotateY(180deg) translateZ(0);
}
.back-grid {
  position: absolute; inset: 0; z-index: 2;
  display: flex; justify-content: flex-end; align-items: center;
  padding: clamp(20px, 3.4vw, 40px);
  pointer-events: none;
}
.card-nav { width: clamp(150px, 24vw, 196px); pointer-events: auto; }
.card-nav .np {
  justify-content: flex-start;
}
.card-nav .np:hover, .card-nav .np:focus-visible, .card-nav .np.active {
  box-shadow: 0 3px 12px -2px rgba(0,0,0,0.35);
}

@media (max-width: 560px) {
  .scene { width: min(440px, 96vw); }
  .card-nav { width: clamp(120px, 40vw, 180px); }
}

/* ============================================================
   FOOTER — shared system (bio left, pills right)
   ============================================================ */
.site-footer {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: 28px 40px;
  align-items: flex-end; justify-content: space-between;
  padding: clamp(28px,5vw,44px) var(--content-pad) clamp(26px,4vw,40px);
  border-top: 1px solid var(--rule);
}
.footer-bio {
  font-size: clamp(14px, 1.4vw, 18px); font-weight: 500;
  line-height: 1.4; color: rgba(245,245,245,0.92); max-width: 32ch;
}
.footer-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.pill-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.4px solid rgba(245,245,245,0.6);
  border-radius: 100px; padding: 11px 26px;
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--text); background: transparent;
  cursor: pointer; font-family: inherit; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pill-outline:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (max-width: 560px) {
  .footer-links { align-items: flex-start; }
  .site-footer { gap: 22px; }
}

/* ============================================================
   INNER-PAGE TOP BAR (back + persistent nav)
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 16px var(--content-pad);
  background: rgba(5,5,5,0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
.topbar-back {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--text); display: inline-flex; align-items: center; gap: 9px;
  font-size: clamp(14px,1.4vw,17px); font-weight: 500;
  opacity: 0.78; transition: opacity .2s var(--ease), gap .2s var(--ease);
  text-decoration: none;
}
.topbar-back:hover { opacity: 1; gap: 13px; }
.topbar-back svg { width: 18px; height: 18px; }
.topbar-nav { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* menu toggle (mobile) */
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .topbar-nav {
    position: fixed; inset: 56px 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 10px; padding: 18px var(--content-pad) 26px;
    background: rgba(5,5,5,0.97); border-bottom: 1px solid var(--rule);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .topbar.open .topbar-nav { transform: none; opacity: 1; pointer-events: auto; }
  .topbar-nav .np { justify-content: flex-start; font-size: 18px; padding: 0.7em 1.1em; }
  .menu-toggle {
    display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
    width: 42px; height: 42px; justify-content: center;
    background: none; border: none; cursor: pointer;
  }
  .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease); }
  .topbar.open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.open .menu-toggle span:nth-child(2) { opacity: 0; width: 0; }
  .topbar.open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   OVERLAY PANELS (Work + About) — slide up over the card
   ============================================================ */
.panel {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .55s var(--ease);
  display: flex; flex-direction: column;
  visibility: hidden;
}
.panel.open { transform: translateY(0); visibility: visible; }
.panel-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 18px var(--content-pad);
  background: rgba(5,5,5,0.7); backdrop-filter: blur(12px);
}
.section-title {
  font-size: clamp(40px, 6.5vw, 82px); font-weight: 500;
  line-height: 1; letter-spacing: -0.025em; color: var(--text);
  margin-bottom: clamp(16px, 2vw, 28px);
}
.panel-label { font-size: clamp(15px,1.5vw,19px); font-weight: 600; }
.panel-close {
  background: none; border: 1px solid rgba(245,245,245,0.2); cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--text); display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease);
}
.panel-close:hover { background: rgba(245,245,245,0.1); }
.panel-close svg { width: 18px; height: 18px; }
.panel-body { flex: 1 1 auto; padding: clamp(20px,4vw,44px) var(--content-pad) clamp(60px,9vw,110px); }

/* ---- Work title→image hover swap ---- */
.work-head {
  font-size: clamp(13px,1.3vw,16px); font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-dim); margin-bottom: clamp(40px,7vw,84px);
}
.work-stage {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  align-items: center; gap: clamp(20px,3vw,40px);
  min-height: clamp(260px, 50vh, 460px);
}
.work-titles { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(10px,1.6vw,18px); }
.work-item {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  text-align: left; display: flex; align-items: baseline; gap: 0.5em;
  font-size: clamp(30px, 5.2vw, 58px); font-weight: 500; line-height: 1.04;
  letter-spacing: -0.02em; color: var(--text);
  opacity: 0.42; transition: opacity .3s var(--ease), transform .3s var(--ease);
  width: fit-content;
}
.work-item .idx {
  font-size: 0.3em; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-dim); transform: translateY(-0.4em); font-variant-numeric: tabular-nums;
}
.work-item:hover, .work-item.active { opacity: 1; }
.work-stage:not(:hover) .work-item:first-of-type { opacity: 1; }
.work-preview {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 8px; overflow: hidden;
  pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
}
.work-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease); transform: scale(1.02); }
.work-preview img.show { opacity: 1; }
.work-stage.has-preview .work-preview { opacity: 0.5; }
.work-hint {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(26px,4vw,46px); font-size: clamp(12px,1.2vw,15px);
  color: var(--text-dim); font-weight: 500; letter-spacing: 0.01em;
}
.work-hint .spk { width: 0.9em; }
.work-hint .h-coarse { display: none; }
@media (hover: none) {
  .work-hint .h-fine { display: none; }
  .work-hint .h-coarse { display: inline; }
}
@media (max-width: 760px) {
  .work-preview { position: relative; height: 200px; inset: auto; opacity: 1 !important;
    -webkit-mask-image: none; mask-image: none; margin-bottom: 18px; }
  .work-stage { display: block; }
}

/* ---- About panel ---- */
.about-wrap { max-width: 1180px; }
.about-lead {
  font-size: clamp(22px, 2.6vw, 38px); font-weight: 500; line-height: 1.28;
  letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance;
  margin-bottom: clamp(30px,5vw,56px);
}
.about-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.85fr); gap: clamp(20px,3vw,44px); align-items: stretch; }
.about-photo { border-radius: 8px; overflow: hidden; background: #111; min-height: 320px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-aside { display: flex; flex-direction: column; gap: clamp(22px,3vw,34px); justify-content: center; }
.about-statement { font-size: clamp(17px,1.7vw,24px); font-weight: 500; line-height: 1.4; color: var(--text); }
@media (max-width: 680px) { .about-grid { grid-template-columns: 1fr; } .about-photo { min-height: 260px; } }

/* ============================================================
   PLAY page grid
   ============================================================ */
.play-intro {
  font-size: clamp(17px,1.8vw,24px); font-weight: 500; line-height: 1.4;
  color: var(--text-mute); max-width: 46ch;
}
.play-head-label { font-size: clamp(15px,1.6vw,20px); font-weight: 600; margin-bottom: 0.5em; }
.play-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,26px); margin-top: clamp(34px,5vw,60px); }
.play-tile {
  position: relative; aspect-ratio: 428/500; border-radius: 8px; overflow: hidden;
  background: #0e0e0e; box-shadow: 0 6px 24px rgba(0,0,0,0.3); cursor: default;
}
.play-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play-cap {
  position: absolute; inset: 0; background: rgba(5,5,5,0.76);
  opacity: 0; transition: opacity .3s var(--ease);
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(18px,2.4vw,32px);
}
.play-tile:hover .play-cap, .play-tile:focus-visible .play-cap, .play-tile.revealed .play-cap { opacity: 1; }
.play-cap-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.play-cap-title { font-size: clamp(16px,1.5vw,22px); font-weight: 600; line-height: 1.2; }
.play-cap-idx { font-size: clamp(12px,1vw,15px); color: var(--text-mute); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.play-cap-desc { font-size: clamp(13px,1.3vw,18px); line-height: 1.38; color: var(--text-mute); }
.play-tap-hint {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(245,245,245,0.7); background: rgba(5,5,5,0.55);
  border: 1px solid rgba(245,245,245,0.2); border-radius: 999px; padding: 6px 12px;
  display: none; pointer-events: none;
}
@media (hover: none) {
  .play-tile.revealed .play-tap-hint { display: none; }
  .play-tap-hint { display: block; }
}
@media (max-width: 560px) { .play-grid { grid-template-columns: 1fr; } }

/* page wrapper for inner content pages */
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-body { flex: 1 1 auto; padding: clamp(40px,7vw,90px) var(--content-pad) clamp(60px,9vw,110px); }
.page-body .inner { max-width: var(--max-w); margin: 0 auto; }