/* ============================================================
   SHARED STYLES — Portfolio
   Folder tab navigation + page-tinted backgrounds
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Syne:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=Karla:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

/* ===== TOKENS ===== */
:root {
  --ink:       #1c1510;
  --ink2:      #3d2f28;
  --paper:     #faf7f2;
  --paper2:    #f5f0e8;
  --paper3:    #ede6d8;
  --blush:     #f0c4b0;
  --rose:      #e8896a;
  --coral:     #d4512e;
  --sage:      #7a9e7e;
  --sage2:     #adc4a8;
  --mint:      #c8ddc4;
  --sky:       #8db4cc;
  --sky2:      #c0d8e8;
  --lavender:  #b8a8d4;
  --butter:    #f4dfa0;
  --butter2:   #ede0c0;
  --gold:      #c8a040;
  --shadow:    rgba(28, 21, 16, 0.10);
  --shadow-md: rgba(28, 21, 16, 0.18);
  --shadow-lg: rgba(28, 21, 16, 0.28);
  --page-bg:   #faf7f2;

  --f-display: 'DM Serif Display', serif;
  --f-heading: 'Instrument Serif', serif;
  --f-ui:      'Syne', sans-serif;
  --f-body:    'Karla', sans-serif;
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--page-bg);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ===== CUSTOM CURSOR ===== */
#cur, #cur-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
#cur {
  width: 9px; height: 9px;
  background: var(--coral);
  transition: width .2s, height .2s, background .2s;
  mix-blend-mode: multiply;
}
#cur-ring {
  width: 32px; height: 32px;
  border: 1.5px solid var(--coral);
  transition: width .18s cubic-bezier(.4,0,.2,1), height .18s cubic-bezier(.4,0,.2,1), opacity .2s;
  opacity: .45;
}
body.hover-active #cur       { width:16px; height:16px; background:var(--rose); }
body.hover-active #cur-ring  { width:44px; height:44px; opacity:.28; }

/* ============================================================
   FOLDER TAB NAVIGATION
   ============================================================ */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 400;
  height: 60px;
  padding: 0 5vw;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

/* glass blur layer fills entire nav area */
.site-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(250,247,242,.95) 55%, transparent 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 0;
}

/* filing-rail: thin line at the bottom, color matches active page */
.site-nav::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--page-bg);
  z-index: 2;
  box-shadow: 0 -1px 0 rgba(28,21,16,.09);
}

.nav-wordmark {
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
  pointer-events: auto;
  padding-bottom: 13px;
  position: relative;
  z-index: 3;
  line-height: 1;
}
.nav-wordmark sup {
  font-size: .52em;
  color: var(--coral);
  vertical-align: super;
  font-style: normal;
}

/* ===== TAB LIST ===== */
.nav-links {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  list-style: none;
  pointer-events: auto;
  position: relative;
  z-index: 3;
  margin-left: auto;
}
.nav-links li { display: flex; align-items: flex-end; }

.nav-links a {
  display: block;
  font-family: var(--f-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 20px 11px;

  /* folder tab shape — only top corners rounded */
  border-radius: 10px 10px 0 0;
  border: 1.5px solid rgba(28,21,16,.12);
  border-bottom: none;

  background: var(--tab-idle);

  /* inactive tabs sit slightly recessed */
  transform: translateY(0px);
  transition:
    transform .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow .2s ease,
    background .18s ease;

  box-shadow:
    0 -3px 10px rgba(28,21,16,.06),
    inset 0 1px 0 rgba(255,255,255,.6);

  position: relative;
}

/* dog-ear crease on inactive tabs */
.nav-links a::before {
  content: '';
  position: absolute;
  top: 0; right: -1px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 11px 11px 0;
  border-color: transparent rgba(28,21,16,.1) transparent transparent;
  border-radius: 0 10px 0 0;
}

.nav-links a:hover {
  transform: translateY(0px);
  background: white;
  box-shadow:
    0 -6px 16px rgba(28,21,16,.1),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ===== ACTIVE TAB =====
   Lifts up, background matches page, colored stripe at top,
   no visible bottom so it bleeds into the page. */
.nav-links a.active {
  transform: translateY(0px);
  background: var(--tab-active);
  border-color: rgba(28,21,16,.1);
  /* bottom border same color as bg = invisible seam */
  border-bottom: 3px solid var(--tab-active);
  /* colored stripe along the top = folder label */
  box-shadow:
    -2px -4px 16px rgba(28,21,16,.08),
    2px -4px 16px rgba(28,21,16,.08),
    inset 0 3px 0 var(--tab-stripe);
  color: var(--ink);
}
.nav-links a.active::before { display: none; }

/* ===== INDIVIDUAL TAB COLORS ===== */

/* 1. Home — warm cream */
.nav-links li:nth-child(1) a {
  --tab-idle:   #ede6d8;
  --tab-active: #faf7f2;
  --tab-stripe: #c8963c;
}
/* 2. UX/UI — lavender */
.nav-links li:nth-child(2) a {
  --tab-idle:   #ddd8f0;
  --tab-active: #f3f0fa;
  --tab-stripe: #9888c8;
}
/* 3. Games — sage green */
.nav-links li:nth-child(3) a {
  --tab-idle:   #cce4cc;
  --tab-active: #f0f7f0;
  --tab-stripe: #6a9e6e;
}
/* 4. Art — blush/rose */
.nav-links li:nth-child(4) a {
  --tab-idle:   #f5d8cc;
  --tab-active: #fdf5f2;
  --tab-stripe: #d47060;
}
/* 5. About — sky blue */
.nav-links li:nth-child(5) a {
  --tab-idle:   #c4ddf0;
  --tab-active: #f0f6fb;
  --tab-stripe: #5898c0;
}

/* ===== PAGE BACKGROUNDS =====
   Add class to <body> on each page to tint the whole page
   the same color as that folder. */
body.page-home  { --page-bg: #faf7f2; background: #faf7f2; }
body.page-uxui  { --page-bg: #f3f0fa; background: #f3f0fa; }
body.page-games { --page-bg: #f0f7f0; background: #f0f7f0; }
body.page-art   { --page-bg: #fdf5f2; background: #fdf5f2; }
body.page-about { --page-bg: #f0f6fb; background: #f0f6fb; }

/* rail color matches each page */
body.page-home  .site-nav::before { background: #faf7f2; }
body.page-uxui  .site-nav::before { background: #f3f0fa; }
body.page-games .site-nav::before { background: #f0f7f0; }
body.page-art   .site-nav::before { background: #fdf5f2; }
body.page-about .site-nav::before { background: #f0f6fb; }

/* ===== PAGE WRAP ===== */
.page-wrap { padding-top: 72px; min-height: 100vh; }

/* ===== TRANSITION OVERLAY (disabled) ===== */
#transition-overlay { display: none; }

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible        { opacity: 1 !important; transform: translateY(0) !important; }
.reveal-delay-1        { transition-delay: .1s; }
.reveal-delay-2        { transition-delay: .2s; }
.reveal-delay-3        { transition-delay: .32s; }
.reveal-delay-4        { transition-delay: .44s; }
.reveal-delay-5        { transition-delay: .56s; }

/* ===== KEYFRAMES ===== */
@keyframes floatA {
  0%,100% { transform: translateY(0px) rotate(var(--r0,0deg)); }
  45%     { transform: translateY(-11px) rotate(var(--r1,1.5deg)); }
}
@keyframes floatB {
  0%,100% { transform: translateY(0px) rotate(var(--r0,0deg)); }
  50%     { transform: translateY(-7px) rotate(var(--r1,-1deg)); }
}
@keyframes spinSlow    { to { transform: rotate(360deg); } }
@keyframes scaleBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes shimmerPulse { 0%,100% { opacity: .35; } 50% { opacity: .7; } }

/* ===== TYPOGRAPHY UTILITIES ===== */
.eyebrow {
  font-family: var(--f-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before { content:''; display:block; width:20px; height:1.5px; background:var(--coral); }

.display-title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.08;
  color: var(--ink);
  font-style: italic;
}
.display-title em { color: var(--coral); font-style: normal; }

.section-body {
  font-family: var(--f-body);
  font-size: .96rem;
  line-height: 1.78;
  color: var(--ink2);
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 36px 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-mark {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  opacity: .7;
}
.footer-links { display: flex; gap: 20px; list-style: none; }
.footer-links a {
  font-family: var(--f-ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: .45;
  transition: opacity .2s;
}
.footer-links a:hover { opacity: 1; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--page-bg, var(--paper)); }
::-webkit-scrollbar-thumb { background: var(--blush); border-radius: 3px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .site-nav    { height: 60px; padding: 0 4vw; }
  .nav-links   { gap: 2px; }
  .nav-links a { font-size: .62rem; padding: 7px 12px 8px; }
  .nav-wordmark { font-size: 1rem; }
}