/*
  mystyles.css — Custom CSS styles for the website.

  CSS (Cascading Style Sheets) controls how everything looks: colours,
  sizes, spacing, animations, and effects.

  This file contains styles that are too specific or complex to write
  with Tailwind classes alone. Tailwind handles the general layout;
  this file handles the custom visual effects unique to this site.

  Sections:
    - Grid Background    : the subtle red grid pattern on hero sections
    - Scanlines          : thin horizontal lines for a retro monitor look
    - Neon Glow Effects  : glowing red borders and text
    - Typing Cursor      : the blinking block cursor in the typing animation
    - Corner Brackets    : decorative red corner accents on cards
    - Tech Tag           : hover glow on the interest tags
    - Gallery Card       : zoom effect when hovering over photos
    - Lightbox           : blur behind the full-screen image viewer
    - Custom Scrollbar   : red-styled scrollbar
    - Form Focus Glow    : red glow on input fields when selected
    - Fade-in Animation  : elements that slide up when they scroll into view
*/

/* ─── Grid Background ─── */
.grid-bg {
  background-color: #000;
  background-image:
    linear-gradient(rgba(220, 38, 38, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 38, 38, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ─── Scanlines overlay ─── */
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.08) 3px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ─── Neon glow effects ─── */
.neon-border {
  border: 1px solid #dc2626;
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.4), inset 0 0 6px rgba(220, 38, 38, 0.05);
}

.neon-text {
  text-shadow: 0 0 8px #ff0033, 0 0 16px #ff0033;
}

.neon-card {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.neon-card:hover {
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.25), inset 0 0 12px rgba(220, 38, 38, 0.05);
}

/* ─── Typing cursor blink ─── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-cursor {
  animation: blink 0.75s step-end infinite;
}

/* ─── Corner bracket decoration ─── */
.bracket-corner {
  position: relative;
}
.bracket-corner::before,
.bracket-corner::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #dc2626;
  border-style: solid;
}
.bracket-corner::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.bracket-corner::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}

/* ─── Tech tag ─── */
.tech-tag {
  transition: all 0.2s ease;
}
.tech-tag:hover {
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.35);
}

/* ─── Gallery card ─── */
.gallery-card img {
  transition: transform 0.4s ease, filter 0.4s ease;
}
.gallery-card:hover img {
  transform: scale(1.05);
  filter: grayscale(0%) brightness(1.05);
}

/* ─── Lightbox ─── */
#lightbox {
  backdrop-filter: blur(6px);
}

/* ─── Custom scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #dc2626; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #ff0033; }

/* ─── Form focus glow ─── */
input:focus, textarea:focus {
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.3);
}

/* ─── Touch device gallery fix ─── */
/* On touch screens there is no persistent hover, so show the overlay and colour by default */
@media (hover: none) {
  .gallery-card img {
    filter: grayscale(0%);
  }
  .gallery-card .card-overlay {
    opacity: 1;
  }
}

/* ─── Page section fade-in ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.6s ease forwards;
}