/*
 * Base styles and sensible defaults for the portfolio site. This file imports
 * the design tokens and establishes the global typography, colours and
 * interactive defaults. It aims to provide a consistent starting point
 * across all pages without opinionated component styles. Focus outlines,
 * reduced motion support and element resets live here.
 */

/*
 * Design tokens for the portfolio. These variables drive the
 * colour palette, spacing scale, radii, elevation and timing
 * functions throughout the project. By centralising values here
 * it becomes trivial to adjust the global look‑and‑feel without
 * hunting through multiple files. Colours are taken directly from
 * the provided palette; spacing is defined using a modular scale
 * to ensure harmony between elements. Shadows are simplified to
 * avoid heavy blurring and use only opacity and offset on the Y
 * axis. Z‑depth levels follow a consistent scale for 3D effects.
 */

:root {
  /* Primary neon palette */
  --color-neon-1: #90F0BC;
  --color-neon-2: #32D6F0;
  --color-neon-3: #71F0D7;
  --color-neon-4: #2EF046;
  --color-neon-5: #339BF0;
  --color-neon-6: #07F0C2;

  /* Metallic accents */
  --color-dark-gold: #8A6A2D;
  --color-bronze: #8C6B3A;
  --color-silver: #BFC5CC;

  /* Base surfaces */
  --color-anthracite: #1F2328;
  --color-pearl: #F7F2E8;
  --color-octane: #2F5D62;

  /* Supporting colours */
  --color-muted: #2B3038;
  --color-muted-light: #3A4048;
  --color-success: #2EF046;
  --color-info: #32D6F0;
  --color-warning: #8A6A2D;
  --color-danger: #B02020;

  /* Text colours */
  --text-on-dark: var(--color-pearl);
  --text-on-light: var(--color-anthracite);
  --text-muted: #A5AEB8;

  /* Spacing – modular scale (base 4px) */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */

  /* Border radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-round: 9999px;

  /* Shadows – only Y offset and blur, no X or heavy spread */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);

  /* Transition timings */
  --duration-fast: 150ms;
  --duration-medium: 300ms;
  --duration-slow: 500ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z depth levels for 3D transforms */
  --z-depth-far: -320px;
  --z-depth-mid: -200px;
  --z-depth-near: -80px;
  --z-depth-surface: 0px;
  --z-depth-floating: 60px;
  --z-depth-modal: 200px;

  /* Sizing */
  --nav-width-desktop: 72px;
  --nav-height-mobile: 64px;
  --container-max-width: 1200px;
}


/* Reset common elements */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  min-height: 100%;
  overflow-x: clip;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Ubuntu, 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  background-color: var(--color-anthracite);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
  display: flex;
}

a {
  color: var(--color-neon-5);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing);
}
a:hover,
a:focus {
  color: var(--color-neon-2);
  outline: none;
}

/* Focus ring for accessibility */
:focus-visible {
  outline: 2px solid var(--color-neon-2);
  outline-offset: 2px;
}

/* Headings */
/* Modernised heading styles: bold, condensed and brighter. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
  font-weight: 700;
  color: var(--color-pearl);
  margin-bottom: var(--space-3);
}
/* Define explicit sizes for primary heading levels to ensure visual
 * consistency across pages. */
h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.2;
}
h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
}
h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
  margin-bottom: var(--space-4);
}

/* Lists */
ul,
ol {
  margin-left: var(--space-5);
  margin-bottom: var(--space-4);
}

li {
  margin-bottom: var(--space-2);
}

/* Inputs */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: transparent;
}

/* Smooth images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Visually hidden (sr-only) utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion media query */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  html, body, body * {
    cursor: none !important;
  }
}

.cursor-atom {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(50vw, 50vh, 0);
  will-change: transform;
}

.cursor-atom__orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.cursor-atom__core {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  transform: scale(1);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.25), 0 0 16px rgba(255, 255, 255, 0.18);
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: opacity, transform;
}

.cursor-atom__core::before {
  content: '';
  position: absolute;
  inset: -55%;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 65%);
  opacity: 0.45;
  mix-blend-mode: screen;
  animation: atomShine 1.55s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60% 74%, transparent 76%);
  mask: radial-gradient(circle, transparent 58%, #000 60% 74%, transparent 76%);
}

@keyframes atomShine {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.cursor-atom__core--red {
  background: radial-gradient(circle, rgba(0,0,0,0) 58%, rgba(245,245,245,0.95) 60%, rgba(160,160,160,0.95) 74%, rgba(0,0,0,0) 76%);
  opacity: 1;
}



.cursor-atom__core--green {
  background: radial-gradient(circle, rgba(0,0,0,0) 0 10%, rgba(255,255,255,0.97) 11% 100%);
  opacity: 0;
}

.cursor-atom.is-active .cursor-atom__core--green {
  transform: scale(1.35);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.35), 0 0 26px rgba(255, 255, 255, 0.25);
}

.cursor-atom.is-active .cursor-atom__core--green::before {
  opacity: 0.6;
  -webkit-mask: radial-gradient(circle, transparent 0 10%, #000 11% 100%);
  mask: radial-gradient(circle, transparent 0 10%, #000 11% 100%);
}



.cursor-atom__dot {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  opacity: 0.95;
  transform: rotate(var(--atom-angle, 0deg)) translateX(12px);
  transition: transform 180ms ease;
  will-change: transform;
}

.cursor-atom.is-active .cursor-atom__dot {
  transform: rotate(var(--atom-angle, 0deg)) translateX(20px);
}

.cursor-atom.is-active .cursor-atom__core--red { opacity: 0; }
.cursor-atom.is-active .cursor-atom__core--green { opacity: 1; }

.page-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}