/* CSS VARIABLE DICTIONARY */

/* https://tailwindcss.com/docs/colors */
/*https://tailwindcss.com/docs/background-image*/
/*
.national-park-<uniquifier> {
  font-family: "National Park", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
  */

:root {
    /* Colors */
    --color-dark-bg: #0d1117;
    --color-dark-bg-secondary: #161b22;
    --color-text-primary: #c9d1d9;
    --color-text-secondary: #8b949e;
    --color-accent-primary: #00A6ED; /* Blue */
    --color-accent-primary-dark: #008ac4;
    --color-accent-secondary: #24ff72; /* Green */
    --color-accent-tertiary: #ff79c6; /* Pink */
    --color-accent-quaternary: #f1fa8c; /* Yellow */
    --color-glass-border: rgba(48, 54, 61, 0.5);
    --color-glass-bg: rgba(22, 27, 34, 0.6);
  
    /* Fonts */
    --font-body: 'National Park', sans-serif;
    --font-heading: 'National Park', sans-serif;
  }

/*standard*/
  html, body {
    cursor: url('https://harp.njit.edu/~kt474/media/general/pb2.png') 14 3, auto; 
    height: 100%;
}

/*standard clicked*/
html:active, body:active {
    cursor: url('https://harp.njit.edu/~kt474/media/general/pb1.png') 14 0, auto;
}

/*force buttons to inherit cursor*/
button, a, input[type="submit"], input[type="button"], .btn {
    cursor: url('https://harp.njit.edu/~kt474/media/general/pb2.png') 14 3, pointer; /* Fallback to pointer if image fails */
}

/*force buttons to inherit cursor*/
button:active, a:active, input[type="submit"]:active, input[type="button"]:active, .btn:active {
    cursor: url('https://harp.njit.edu/~kt474/media/general/pb1.png') 14 0, pointer;
}

  /* Base Styles */
  body {
      font-family: var(--font-body);
      background-color: var(--color-dark-bg);
      color: var(--color-text-primary);
  }
  
  body.modal-open {
    overflow: hidden;
  }
  
  h1, h2, h3 {
      font-family: var(--font-heading);
  }
  
  /* Hero Canvas Background */
  #hero-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
  }
  
  .hero-content {
      position: relative;
      z-index: 2;
  }
  
  /* Glassmorphism Card Effect */
  .glass-card {
       background: var(--color-glass-bg);
       backdrop-filter: blur(10px);
       border: 1px solid var(--color-glass-border);
       border-radius: 1rem;
  }
  
  /* DYNAMIC SKILL STYLES */
  #dynamic-skill-container {
      display: inline;
      position: relative;
      transition: all 0.25s ease-in-out;

       width: 300px;    
        text-align: center; 
        vertical-align: top;
        transition: all 0.5s ease-in-out;
        min-height: 1.5em; 
  }
  
  #dynamic-skill {
      display: inline-block;
      transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  
  .skill-fade-out {
      opacity: 0;
      transform: translateY(-10px);
  }
  .skill-fade-in {
      opacity: 1;
      transform: translateY(0);
  }
  
  /* SKILLS */
  .skill-pcb { background-image: linear-gradient(90deg, var(--color-accent-secondary), #69ffb4); }
  .skill-cad { background-image: linear-gradient(90deg, var(--color-accent-tertiary), #ffb8e0); }
  .skill-mechatronics { background-image: linear-gradient(90deg, var(--color-accent-quaternary), #ffffc4); }
  .skill-electronics { background-image: linear-gradient(90deg, var(--color-accent-secondary), #76ff69); }
  .skill-cpp { background-image: linear-gradient(90deg, var(--color-accent-tertiary), #ffb8e0); }
  .skill-java { background-image: linear-gradient(90deg, var(--color-accent-quaternary), #ff00d4); }
  .skill-py { background-image: linear-gradient(90deg, var(--color-accent-secondary), #ff6969); }
  .skill-fusion { background-image: linear-gradient(90deg, var(--color-accent-tertiary), #78c592); }
  .skill-embedded { background-image: linear-gradient(90deg, var(--color-accent-quaternary), #c4b814); }
  
  /* PROJECT GALLERY STYLES */
  .project-image-container, .project-image-container::after {
    cursor: url('https://harp.njit.edu/~kt474/media/general/pb2.png') 14 3, pointer;
}

/* Force the click state */
.project-image-container:active, .project-image-container:active::after {
    cursor: url('https://harp.njit.edu/~kt474/media/general/pb1.png') 14 0, pointer;
}

  .project-image-container::after {
      content: '🔎';
      position: absolute;
      inset: 0;
      background-color: rgba(0,0,0,0.6);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  .project-image-container:hover::after {
      opacity: 1;
  }
  
  #gallery-modal.show {
      display: flex;
  }
  
  #gallery-image {
      animation: zoomIn 0.3s ease;
  }
  
.document-embed {
            width: 100%;
            height: 100%;
            border: none; 
        }

  @keyframes zoomIn {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
  }
  
  /* Re-applying styles from HTML */
  .bg-accent-primary { background-color: var(--color-accent-primary); }
  .hover\:bg-accent-primary-dark:hover { background-color: var(--color-accent-primary-dark); }
  .border-accent-primary { border-color: var(--color-accent-primary); }
  .text-accent-primary { color: var(--color-accent-primary); }
  .hover\:bg-accent-primary:hover { background-color: var(--color-accent-primary); }
  .bg-dark-bg-secondary { background-color: var(--color-dark-bg-secondary); }