/* ==========================================================
   @font-face — self-hosted, before @layer for cross-layer access
   ========================================================== */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Orbitron-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Rajdhani-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================
   Global @keyframes — outside @layer for cross-layer access
   ========================================================== */

@keyframes pulse {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: 1;
  }
}


@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

@keyframes bootFlicker {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  20%  { opacity: 0; }
  35%  { opacity: 1; }
  50%  { opacity: 0; }
  65%  { opacity: 1; }
  80%  { opacity: 0; }
  90%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ========================================================== */

@layer reset, base, components;

/* ========================================================== */

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  :root {
    /* Colors */
    --bg: #05070B;
    --bg-alt: #091120;
    --bg-dark: #000;
    --panel: rgba(10, 16, 30, 0.55);
    --panel-hover: rgba(10, 16, 30, 0.7);
    --blue: #5DB7FF;
    --orange: #FF7A18;
    --text: #D9F3FF;
    --line: color-mix(in srgb, var(--blue) 20%, transparent);
    --muted: color-mix(in srgb, var(--text) 65%, transparent);
    --glow: 0 0 20px rgba(93, 183, 255, 0.35);
    --ghost: rgba(255, 255, 255, .2);
    --surface: rgba(255, 255, 255, .02);
    --transition: 300ms ease;

    /* Typography */
    --font-mono: 'JetBrains Mono', monospace;
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --size-xs: .65rem;
    --size-sm: .75rem;
    --size-base: .85rem;
    --size-md: 1.5rem;
    --size-lg: 2rem;

    /* Spacing */
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    /* Layout */
    --max-width: 1400px;
    --content-width: 1000px;
    --section-padding: 6rem;
    --section-header-gap: 5rem;

    color-scheme: dark;
  }

  html {
    scroll-behavior: smooth;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }

  body {
    background: radial-gradient(circle at center, var(--bg-alt) 0%, var(--bg) 55%, var(--bg-dark) 100%);
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden;
    min-height: 100svh;
    cursor: default;
  }

  canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 6rem);
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow:
      0 0 10px color-mix(in srgb, var(--blue) 50%, transparent),
      0 0 40px color-mix(in srgb, var(--blue) 20%, transparent);
    margin-bottom: var(--space-sm);
  }

  h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 6px;
    text-align: center;
    margin-bottom: var(--section-header-gap);
  }

  footer {
    padding-block: var(--space-xl) var(--section-padding);
    padding-inline: var(--space-lg);
    border-top: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
    overflow: hidden;
  }
}

@layer components {
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    background: var(--blue);
    color: var(--bg);
    padding: var(--space-sm) var(--space-md);
    font: var(--size-base) var(--font-mono);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 10000;
    transition: top var(--transition);

    &:focus {
      top: var(--space-sm);
    }
  }

  #preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1.2s ease, visibility 1.2s ease;

    &.loaded {
      opacity: 0;
      visibility: hidden;
    }

    &.ignored {
      transition: none;
      opacity: 0;
      visibility: hidden;
    }
  }

  .boot {
    width: min(800px, 90vw);
    font-family: var(--font-mono);
    color: var(--blue);
    --boot-line-height: 1.8;
    line-height: var(--boot-line-height);
    font-size: clamp(0.65rem, 1vw, 1rem);
    text-shadow: 0 0 8px color-mix(in srgb, var(--blue) 60%, transparent);
  }

  .boot-line {
    opacity: 0;
    height: calc(var(--boot-line-height) * 1em);
    white-space: nowrap;

    &.visible {
      opacity: 1;
    }

    &[data-effect="flicker"] {
      color: var(--orange);
      text-shadow: 0 0 12px color-mix(in srgb, var(--orange) 70%, transparent);
    }

    &[data-effect="flicker"].visible {
      animation: bootFlicker 0.35s forwards;
    }
  }

  .boot-bar-wrap {
    display: inline;
    margin-inline-start: 8px;
    color: color-mix(in srgb, var(--blue) 80%, transparent);
    letter-spacing: 0;
  }

  .boot-cursor {
    display: inline-block;
    margin-inline-start: 4px;
    animation: blink 0.4s step-end infinite;
  }

  .boot-badge {
    display: inline-block;
    margin-inline-start: 8px;
    color: color-mix(in srgb, var(--blue) 50%, transparent);
    opacity: 0;
    transition: opacity 0.2s ease;

    &.visible {
      opacity: 1;
    }
  }

  .hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    display: none;

    @media (min-width: 601px) {
      display: block;
    }
  }

  .hud-corner {
    position: absolute;
    font: var(--size-xs) var(--font-mono);
    color: color-mix(in srgb, var(--blue) 65%, transparent);
    letter-spacing: 2px;
    text-transform: uppercase;

    @media (min-width: 901px) {
      font-size: var(--size-sm);
    }

    .hud-line {
      height: 1px;
      background: linear-gradient(to right, var(--blue), transparent);
      margin: 8px 0;
    }

    &.hud-corner-top-right .hud-line,
    &.hud-corner-bottom-right .hud-line {
      background: linear-gradient(to left, var(--blue), transparent);
    }

    &.hud-corner-top-left {
      top: var(--space-lg);
      left: var(--space-lg);
    }

    &.hud-corner-top-right {
      top: var(--space-lg);
      right: var(--space-lg);
      text-align: end;
    }

    &.hud-corner-bottom-left {
      bottom: var(--space-lg);
      left: var(--space-lg);
    }

    &.hud-corner-bottom-right {
      bottom: var(--space-lg);
      right: var(--space-lg);
      text-align: end;
    }
  }

  .hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-sm);
    overflow: hidden;

    @media (min-width: 601px) {
      padding: var(--space-lg);
    }
  }

  .hero-content {
    text-align: center;
    max-width: var(--content-width);
  }

  .hero-subtitle {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--blue);
    margin-bottom: var(--space-sm);
    opacity: .8;
  }

  .hero-tagline {
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--muted);
    max-width: 700px;
    margin-inline: auto;
    line-height: 1.6;
  }

  .hero-divider {
    width: 180px;
    height: 1px;
    margin-block: var(--space-lg);
    margin-inline: auto;
    background: linear-gradient(to right, transparent, var(--blue), transparent);
    box-shadow: var(--glow);
  }

  .scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    color: color-mix(in srgb, var(--text) 45%, transparent);
    letter-spacing: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: var(--size-sm);
    animation: pulse 2s infinite;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
      opacity: .6;
    }
  }

  .section {
    padding-block: var(--section-padding);
    padding-inline: var(--space-md);
    max-width: var(--max-width);
    margin-inline: auto;

    @media (min-width: 901px) {
      padding-inline: var(--space-lg);
    }
  }

  .section-label {
    font-family: var(--font-mono);
    letter-spacing: 5px;
    color: var(--blue);
    margin-bottom: var(--space-sm);
    text-align: center;
  }

  .nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
  }

  .nav-card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    height: 180px;
    background: var(--panel);
    border: 1px solid var(--line);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition:
      transform var(--transition),
      border-color var(--transition),
      box-shadow var(--transition),
      background var(--transition);

    @media (min-width: 601px) {
      height: 220px;
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg,
          color-mix(in srgb, var(--blue) 8%, transparent),
          transparent 30%,
          color-mix(in srgb, var(--orange) 8%, transparent));
      opacity: 0;
      transition: opacity var(--transition);
    }

    &::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, color-mix(in srgb, var(--blue) 8%, transparent), transparent 60%);
      transform: rotate(25deg);
      opacity: 0;
      transition: opacity var(--transition);
    }

    &:hover,
    &:focus-visible {
      transform: translateY(-6px) scale(1.01);
      border-color: color-mix(in srgb, var(--blue) 50%, transparent);
      box-shadow:
        0 10px 40px rgba(0, 0, 0, .45),
        0 0 40px color-mix(in srgb, var(--blue) 15%, transparent);
      background: var(--panel-hover);
      outline: none;

      &::before,
      &::after {
        opacity: 1;
      }
    }
  }

  .card-inner {
    height: 100%;
    padding: var(--space-md);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "label index"
      "title title"
      "action line";
  }

  .card-label {
    grid-area: label;
    font: var(--size-sm) var(--font-mono);
    letter-spacing: 3px;
    color: var(--blue);
    text-transform: uppercase;
  }

  .card-index {
    grid-area: index;
    color: var(--ghost);
    font: var(--size-lg) var(--font-display);
  }

  .card-title {
    grid-area: title;
    align-self: center;
    font: var(--size-md) var(--font-display);
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  .card-action {
    grid-area: action;
    align-self: end;
    color: color-mix(in srgb, var(--text) 45%, transparent);
    font-family: var(--font-mono);
    letter-spacing: 2px;
    font-size: var(--size-sm);
  }

  .card-line {
    grid-area: line;
    align-self: end;
    width: 60px;
    height: 1px;
    background: var(--blue);
    box-shadow: var(--glow);
  }

  .skill-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
  }

  .skill-item {
    border: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
    padding: var(--space-sm);
    background: var(--surface);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: color-mix(in srgb, var(--text) 65%, transparent);
    transition:
      border-color var(--transition),
      color var(--transition),
      transform var(--transition);

    &:hover {
      border-color: color-mix(in srgb, var(--blue) 35%, transparent);
      color: var(--text);
      transform: translateY(-4px);
    }
  }

  .terminal {
    max-width: var(--content-width);
    margin-inline: auto;
    font-family: var(--font-mono);
    color: var(--blue);
    line-height: 2;
    text-shadow: 0 0 10px color-mix(in srgb, var(--blue) 35%, transparent);

    &::after {
      content: '_';
      animation: blink 1s infinite;
      margin-inline-start: 4px;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }
  }

  .footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
    flex-direction: column;

    @media (min-width: 601px) {
      flex-direction: row;
    }
  }
}