/* Additional styling that complements Tailwind utility classes for custom effects. */

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:root {
  color-scheme: dark light;
  /* Global color tokens used across custom styles */
  --color-primary: #c6e5ed;
  --color-primary-rgb: 28, 181, 224;
  --color-primary-dark: #16799b;
  --color-primary-dark-rgb: 22, 121, 155;
  --color-accent: #0ff0fc;
  --color-accent-rgb: 15, 240, 252;
  --color-accent-neon: #4deeea;
  --color-accent-neon-rgb: 77, 238, 234;
  --color-muted: #94a3b8;
  --color-muted-rgb: 148, 163, 184;
  --color-dark-surface: #0f172a;
  --color-dark-surface-rgb: 15, 23, 42;
  --color-dark-text: #e2e8f0;
  --color-dark-text-rgb: 226, 232, 240;
  --color-light-surface: #f8fafc;
  --color-light-surface-rgb: 248, 250, 252;
  --color-light-text: #0f172a;
  --color-light-text-rgb: 15, 23, 42;
  --color-light-contrast-text: #1e293b;
  --color-light-contrast-text-rgb: 30, 41, 59;
  --color-light-accent: #2563eb;
  --color-light-accent-rgb: 37, 99, 235;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-overlay-rgb: 0, 0, 0;
  --color-light-primary-strong: #1e40af;
  --color-light-primary-strong-rgb: 30, 64, 175;
  --color-light-sky: #3b82f6;
  --color-light-sky-rgb: 59, 130, 246;
  --color-body-ink: #1f2937;
  --color-body-ink-rgb: 31, 41, 55;
  --color-skill-software: #8b5cf6;
  --color-skill-ops: #22d3ee;
  --color-skill-cloud: #fb7185;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(var(--color-primary-rgb), 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(
    circle at center,
    rgba(var(--color-overlay-rgb), 0.8),
    transparent 70%
  );
}

.hero-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(var(--color-accent-rgb), 0.18),
    transparent 45%
  );
  transition: background 0.3s ease;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(var(--color-muted-rgb), 0.12);
  border: 1px solid rgba(var(--color-muted-rgb), 0.2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.65rem;
}

.timeline-node {
  display: flex;
  gap: 1rem;
  position: relative;
  padding-left: 1.5rem;
}

.timeline-node::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.3rem;
  bottom: -1.2rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(var(--color-accent-rgb), 0.5), transparent 90%);
}

.timeline-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.5);
  flex-shrink: 0;
}

.typed-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.4em;
}

.typed-caret {
  display: inline-block;
  width: 0.12em;
  height: 1.1em;
  background: currentColor;
  border-radius: 999px;
  animation: typed-caret-blink 1s steps(2, start) infinite;
}

@keyframes typed-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}


@keyframes contact-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

.cert-card {
  position: relative;
  width: 100%;
  height: 220px;
  perspective: 1200px;
  cursor: pointer;
}

.cert-card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 24px;
  transition: transform 0.8s;
}

.cert-card__face--back {
  transform: rotateY(180deg);
}

.cert-card--flipped .cert-card__face--front {
  transform: rotateY(180deg);
}

.cert-card--flipped .cert-card__face--back {
  transform: rotateY(360deg);
}

.radial-indicator {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto;
  background: conic-gradient(var(--indicator-color) calc(var(--value) * 1%), rgba(var(--color-muted-rgb), 0.25) 0);
}

.radial-indicator::after {
  content: attr(data-progress);
  position: absolute;
  inset: 12px;
  background: rgba(var(--color-dark-surface-rgb), 0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark-text);
  font-size: 0.95rem;
  font-weight: 700;
}

html:not(.dark) .radial-indicator::after {
  background: rgba(var(--color-white-rgb), 0.9);
  color: var(--color-light-text);
}

.cert-card,
.skill-modal,
.project-modal {
  will-change: transform;
}

/* Preloader animation */
.loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.loader__ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 6px solid rgba(var(--color-primary-rgb), 0.2);
  border-top-color: var(--color-primary);
  animation: spin 1.5s linear infinite;
}

.loader__ring:nth-child(2) {
  animation-delay: 0.2s;
}

.loader__ring:nth-child(3) {
  animation-delay: 0.4s;
}

.loader__text {
  letter-spacing: 0.3em;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: rgba(var(--color-dark-text-rgb), 0.7);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Scrollbar styling for a more polished feel. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(var(--color-dark-surface-rgb), 0.6);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(var(--color-primary-rgb), 0.6),
    rgba(var(--color-accent-rgb), 0.6)
  );
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--color-primary-rgb), 0.9),
    rgba(var(--color-accent-rgb), 0.9)
  );
}

/* Light mode overrides for readability. */
html:not(.dark) body {
  background: var(--color-light-surface);
  color: var(--color-light-text);
}

html:not(.dark) .hero-grid {
  background-image: linear-gradient(rgba(var(--color-dark-surface-rgb), 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-dark-surface-rgb), 0.08) 1px, transparent 1px);
}

html:not(.dark) .timeline-node::before {
  background: linear-gradient(to bottom, rgba(var(--color-muted-rgb), 0.5), transparent 90%);
}

html:not(.dark) .badge {
  background: rgba(var(--color-light-accent-rgb), 0.08);
  border-color: rgba(var(--color-light-accent-rgb), 0.14);
  color: var(--color-light-contrast-text);
}

/* Ensure canvas scales nicely. */
canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Utility class used in JSX but not in Tailwind core. */
.shadow-neon {
  box-shadow: 0 0 35px rgba(var(--color-accent-rgb), 0.35);
}

.shadow-glow {
  box-shadow: 0 18px 45px -20px rgba(var(--color-primary-rgb), 0.35);
}

/* Improve focus outlines for keyboard navigation. */
button:focus-visible,
[role='button']:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px dashed rgba(var(--color-accent-rgb), 0.8);
  outline-offset: 4px;
}