:root {
  --bg: 0 0% 4%;
  --surface: 0 0% 8%;
  --text: 0 0% 96%;
  --muted: 0 0% 53%;
  --stroke: 0 0% 12%;
  --accent: 0 0% 96%;
}

html, body {
  background: hsl(var(--bg));
  color: hsl(var(--text));
  scroll-behavior: smooth;
}

* { -webkit-font-smoothing: antialiased; }

::selection { background: #4E85BF; color: #fff; }

/* Accent gradient */
.accent-gradient {
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 100%);
}

.accent-gradient-anim {
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 50%, #89AACC 100%);
  background-size: 200% 100%;
  animation: gradient-shift 6s ease infinite;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--bg)); }
::-webkit-scrollbar-thumb { background: hsl(var(--stroke)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a2a; }

/* Keyframes */
@keyframes scroll-down {
  0% { transform: translateY(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}
.animate-scroll-down {
  animation: scroll-down 1.8s ease-in-out infinite;
}

@keyframes role-fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-role-fade-in {
  animation: role-fade-in 0.4s ease-out;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes logo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Logo ring */
.logo-ring {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 100%);
  padding: 1.5px;
  transition: transform 0.4s ease;
}
.logo-ring:hover { transform: scale(1.1); }
.logo-ring:hover .logo-ring-inner {
  background-image: linear-gradient(270deg, #89AACC 0%, #4E85BF 100%);
}
.logo-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: hsl(var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradient hover ring (for buttons) */
.grad-ring {
  position: relative;
  display: inline-flex;
  isolation: isolate;
}
.grad-ring::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 50%, #89AACC 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.grad-ring:hover::before {
  opacity: 1;
  animation: gradient-shift 3s ease infinite;
}

/* Halftone overlay for project cards */
.halftone {
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Image placeholders — subtle gradients to suggest content */
.ph-auto {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(180,200,225,0.18), transparent 55%),
    radial-gradient(ellipse at 75% 35%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(135deg, #0c0d10 0%, #1a1d22 60%, #0a0a0c 100%);
}
.ph-arch {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 60px),
    linear-gradient(180deg, #14161a 0%, #0a0b0d 100%);
}
.ph-portrait {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(220,210,200,0.22), transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(0,0,0,0.6), transparent 55%),
    linear-gradient(180deg, #1a1612 0%, #0a0908 100%);
}
.ph-brand {
  background:
    conic-gradient(from 180deg at 70% 50%, #2a2f36, #0a0b0d, #1a1d22, #0a0b0d, #2a2f36),
    linear-gradient(135deg, #0a0a0c, #161719);
}
.ph-journal-1 {
  background:
    radial-gradient(circle at 30% 50%, rgba(137,170,204,0.22), transparent 50%),
    linear-gradient(135deg, #0c0d10, #1a1d22);
}
.ph-journal-2 {
  background:
    radial-gradient(circle at 60% 40%, rgba(255,235,210,0.18), transparent 50%),
    linear-gradient(135deg, #15110c, #0a0908);
}
.ph-journal-3 {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 4px, transparent 4px 22px),
    linear-gradient(180deg, #101216, #0a0b0d);
}
.ph-journal-4 {
  background:
    radial-gradient(circle at 50% 50%, rgba(160,180,200,0.18), transparent 55%),
    linear-gradient(135deg, #0d0f12, #16181c);
}

.ph-expl-1 { background: radial-gradient(ellipse at 40% 40%, rgba(180,200,225,0.22), transparent 60%), linear-gradient(135deg, #0d1014, #1a1d22); }
.ph-expl-2 { background: radial-gradient(circle at 70% 30%, rgba(255,200,160,0.16), transparent 55%), linear-gradient(135deg, #15110c, #0a0908); }
.ph-expl-3 { background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 14px), linear-gradient(180deg, #101216, #0a0b0d); }
.ph-expl-4 { background: radial-gradient(ellipse at 50% 60%, rgba(200,180,160,0.18), transparent 55%), linear-gradient(135deg, #0c0d10, #16181c); }
.ph-expl-5 { background: conic-gradient(from 90deg at 50% 50%, #2a2f36, #0a0b0d, #1a1d22, #0a0b0d, #2a2f36); }
.ph-expl-6 { background: radial-gradient(circle at 30% 70%, rgba(137,170,204,0.2), transparent 50%), linear-gradient(135deg, #0a0b0d, #14161a); }

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Buttons */
.btn-solid {
  background: hsl(var(--text));
  color: hsl(var(--bg));
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.btn-solid:hover {
  background: hsl(var(--bg));
  color: hsl(var(--text));
  transform: scale(1.05);
}
.btn-outline {
  border: 2px solid hsl(var(--stroke));
  background: hsl(var(--bg));
  color: hsl(var(--text));
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.btn-outline:hover {
  border-color: transparent;
  transform: scale(1.05);
}

/* Pre-loading state */
.preload-hide { opacity: 0; }