/* ══════════════════════════════════════
   PORTFOLIO - main.css
   Cameron Francis Taylor
   ══════════════════════════════════════ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Inverted Energy Theme - light cream bg with navy text, CA-integrated accents */
  --bg: oklch(96% 0.02 75);              /* Warm cream from CA canvas #FBF0EA */
  --text: oklch(25% 0.055 250);          /* Deep navy from CA canvas #17366C */
  --text-secondary: oklch(45% 0.04 250); /* Medium navy for secondary text */

  /* Accent colors from CA canvas palette */
  --accent-orange: oklch(68% 0.15 55);   /* Orange #FEA361 adjusted for light bg */
  --accent-yellow: oklch(85% 0.12 95);   /* Yellow #E9E79A adjusted */
  --accent-pink: oklch(88% 0.04 15);     /* Pink #F7DBDC subtle accent */

  /* Surface and interaction states - all tinted toward navy hue (250°) */
  --surface: oklch(93% 0.015 250);       /* Slightly darker cream for cards */
  --surface-hover: oklch(90% 0.02 250);  /* Hover state */
  --border: oklch(75% 0.03 250);         /* Borders tinted navy */
  --border-hover: oklch(50% 0.045 250);  /* Active borders */

  /* Opacity variants for text (navy-tinted) */
  --text-95: color-mix(in oklch, var(--text) 95%, transparent);
  --text-90: color-mix(in oklch, var(--text) 90%, transparent);
  --text-75: color-mix(in oklch, var(--text) 75%, transparent);
  --text-60: color-mix(in oklch, var(--text) 60%, transparent);
  --text-45: color-mix(in oklch, var(--text) 45%, transparent);
  --text-35: color-mix(in oklch, var(--text) 35%, transparent);
  --text-20: color-mix(in oklch, var(--text) 20%, transparent);
  --text-12: color-mix(in oklch, var(--text) 12%, transparent);
  --text-08: color-mix(in oklch, var(--text) 8%, transparent);

  /* Typography - Schibsted Grotesk (body) + Archivo Black (display) */
  --font-body: 'Schibsted Grotesk', sans-serif;
  --font-display: 'Archivo Black', sans-serif;

  /* Typography scale (1.250 minor third ratio) */
  --text-xs:   clamp(10px, 1.8vw, 12px);
  --text-sm:   clamp(12px, 2.0vw, 14px);
  --text-base: clamp(14px, 2.2vw, 16px);
  --text-lg:   clamp(16px, 2.6vw, 20px);
  --text-xl:   clamp(20px, 3.2vw, 26px);
  --text-2xl:  clamp(26px, 4.0vw, 36px);
  --text-3xl:  clamp(32px, 5.0vw, 48px);

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.12em;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
}

/* ── Page system ── */
.page {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.page.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ── HOME - canvas layers ── */
#ca-sharp,
#ca-blur {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}

#ca-blur {
  filter: blur(48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

/* Custom cursor (shown after first interaction) - orange from CA */
#cursor {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--accent-orange);
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 10;
}

/* ── HOME - overlay text ── */
#home-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  padding: var(--space-6);  /* was 22px 26px */
  z-index: 5;
}

.top {
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: all;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--bg) 85%, transparent) 0%,
    color-mix(in oklch, var(--bg) 75%, transparent) 100%);
  padding: var(--space-4) var(--space-5);
  margin: calc(var(--space-4) * -1) calc(var(--space-5) * -1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  transition: background 0.5s ease, backdrop-filter 0.5s ease;
}

#name-area:hover .top,
#email-area:hover ~ #name-area .top {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.name {
  font-family: var(--font-body);  /* Schibsted Grotesk for cleaner look */
  font-size: var(--text-3xl);
  font-weight: 600;  /* Semi Bold */
  color: var(--text);
  letter-spacing: -0.02em;  /* Slightly looser than display font */
  line-height: var(--leading-tight);
  cursor: none;
  transition: color 0.5s ease;
}

.role {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  cursor: none;
  transition: color 0.5s ease;
}

.email {
  font-size: clamp(14px, 2.2vw, 24px);
  font-weight: 500;
  color: var(--text-60);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: none;
  pointer-events: all;
  transition: color 0.5s ease, background 0.5s ease, backdrop-filter 0.5s ease;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--bg) 85%, transparent) 0%,
    color-mix(in oklch, var(--bg) 75%, transparent) 100%);
  padding: var(--space-3) var(--space-4);
  margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
}


/* ── Nav key buttons ── */
#nav-keys {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.key-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  padding: 5px 10px 5px 7px;
  cursor: pointer;
  background: transparent;
  transition: background 0.5s ease,
              border-color 0.5s ease,
              transform 0.15s ease,
              color 0.5s ease;
  color: inherit;
  font-family: var(--font-body);
}


.key-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.key-btn:active {
  transform: scale(0.97);
}

.key-btn:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 4px;
}

.key-btn .kbd {
  width: 18px; height: 18px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  transition: border-color 0.5s ease, color 0.5s ease;
}

.key-btn .lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-60);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.5s ease;
}

/* ── Shared back button ── */
.back-btn {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-35);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--text-20);
  padding-bottom: 2px;
  background: transparent;
  font-family: var(--font-body);
  display: inline-block;
  transition: color 0.2s ease,
              border-color 0.2s ease,
              padding-left 0.2s ease;
}

.back-btn:hover {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  padding-left: 4px;  /* Arrow nudge left */
}

.back-btn:active {
  transform: translateY(1px);
}

.back-btn:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Placeholder pages ── */
.placeholder-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: var(--space-6);  /* was 22px 26px */
}

.placeholder-title {
  font-size: clamp(22px, 4.2vw, 44px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.placeholder-sub {
  font-size: clamp(14px, 2.4vw, 26px);
  font-weight: 500;
  color: var(--text-45);
  letter-spacing: -0.01em;
  margin-top: 6px;
}