/* =========================================================
   feelsIncubator - Portfolio Case Study
   =========================================================
   Author:   Valdez Campos (dez@mediabrilliance.io)
   Studio:   mediaBrilliance designxtudio
   Date:     2026-01-17
   Version:  1.0

   Table of Contents:
   ------------------
   1)  Design Tokens ........... CSS custom properties for theming
   2)  Reset & Guards .......... Box-sizing, body defaults
   3)  Accessibility ........... Screen reader utilities, skip links
   4)  Page Transitions ........ Glitch/RGB split effect
   5)  Typography .............. Headings, paragraphs, links
   6)  Layout Primitives ....... Header, navigation, containers
   7)  Images .................. Responsive image defaults
   8)  Buttons ................. Base button component
   9)  Footer .................. Site footer styles
   10) Grid System ............. CSS Grid and Flexbox utilities
   11) Sections ................ Section spacing variants
   12) Cards ................... Card component
   13) Forms ................... Form inputs, validation states
   14) Button Variants ......... Primary, secondary, ghost buttons
   15) Badges .................. Tag/badge component
   16) Dividers ................ Horizontal rule styles
   17) Spacing Utilities ....... Margin and padding helpers
   18) Text Utilities .......... Typography helper classes
   19) Display Utilities ....... Visibility, positioning, sizing
   20) Lists ................... List reset and styles
   21) Overlays ................ Modal backdrop
   22) Modals .................. Modal dialog component
   23) Responsive .............. Media query breakpoints
   24) Print ................... Print-specific styles
   25) Hero Section ............ Homepage hero component
   26) Portfolio Slider ........ Horizontal project carousel
   27) Project Cards ........... Portfolio item cards
   28) Glow Utilities .......... Neon glow effects
   29) Scanlines ............... Optional CRT effect overlay
   30) Project Page ............ Individual project layout
   31) Portfolio Responsive .... Mobile adjustments for portfolio
   ========================================================= */


/* =========================================================
   1) DESIGN TOKENS
   ---------------------------------------------------------
   CSS custom properties serve as the single source of truth
   for all visual decisions. Change values here to update
   the entire site's appearance.

   Cyberpunk color palette inspired by neon signage,
   late-night cityscapes, and underground anime aesthetics.
   ========================================================= */
:root{
  /*
   * Base colors
   * --bg: Primary dark background, near-black with slight blue tint
   * --bg-alt: Slightly lighter alternative for cards/sections
   * --text: Primary text color, high-contrast white
   * --muted: Secondary text for labels, captions, metadata
   */
  --bg:      #0a0a0f;
  --bg-alt:  #12121a;
  --text:    rgba(255,255,255,.9);
  --muted:   rgba(255,255,255,.5);

  /*
   * Cyberpunk accent colors
   * Electric, saturated colors that "glow" against dark backgrounds
   * Inspired by neon signs, LED displays, and anime color grading
   */
  --neon-cyan:    #00f0ff;  /* Primary accent - electric blue */
  --neon-magenta: #ff00aa;  /* Secondary accent - hot pink */
  --neon-pink:    #ff2d95;  /* Tertiary accent - softer pink */
  --neon-purple:  #b400ff;  /* Reserved - violet */
  --neon-yellow:  #f0ff00;  /* Reserved - electric yellow */

  /*
   * Semantic color mappings
   * Map raw colors to semantic roles for easier theming
   */
  --accent-primary:   var(--neon-cyan);
  --accent-secondary: var(--neon-magenta);
  --accent-highlight: var(--neon-pink);

  /*
   * Glow effects (box-shadow values)
   * Two-layer glow: bright inner + soft outer spread
   * Used for hover states to create neon sign effect
   */
  --glow-cyan:    0 0 20px rgba(0,240,255,.5), 0 0 40px rgba(0,240,255,.2);
  --glow-magenta: 0 0 20px rgba(255,0,170,.5), 0 0 40px rgba(255,0,170,.2);
  --glow-pink:    0 0 20px rgba(255,45,149,.5), 0 0 40px rgba(255,45,149,.2);

  /*
   * Layout dimensions
   * --container: Max content width for readability
   * --header-h: Fixed header height for sticky positioning
   */
  --container: 1200px;
  --header-h:  48px;

  /*
   * Border radius scale
   * Smaller values for sharper, more technical aesthetic
   */
  --radius-sm: 4px;
  --radius-lg: 8px;

  /*
   * Shadows
   * Soft shadow for depth without breaking dark theme
   */
  --shadow-soft: 0 8px 20px rgba(0,0,0,.5);

  /*
   * Motion/timing tokens
   * Consistent animation durations across the site
   * --ease: Custom cubic-bezier for smooth, natural motion
   */
  --t-fast: .12s;  /* Micro-interactions (hover states) */
  --t-base: .3s;   /* Standard transitions */
  --t-slow: .6s;   /* Page transitions, large movements */
  --ease: cubic-bezier(.25,.8,.25,1);
}


/* =========================================================
   2) RESET & GLOBAL GUARDS
   ---------------------------------------------------------
   Normalize browser defaults and establish foundational
   layout rules. Uses modern CSS reset approach.
   ========================================================= */

/*
 * Universal box-sizing
 * Include padding/border in element dimensions
 * Prevents layout surprises from padding
 */
*,*::before,*::after{
  box-sizing: border-box;
}

/*
 * Full-height html/body
 * Required for sticky footer and full-viewport layouts
 */
html,body{
  height: 100%;
}

/*
 * Prevent horizontal overflow
 * scrollbar-gutter prevents layout shift when scrollbar appears
 */
html{
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
}

/*
 * Body defaults
 * Flexbox column layout enables sticky footer pattern
 * min-height with dvh unit handles mobile viewport correctly
 */
body{
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;  /* Dynamic viewport height for mobile */

  display: flex;
  flex-direction: column;

  background: var(--bg);
  color: var(--text);

  /* System font stack as fallback; Space Grotesk loaded in HTML */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* =========================================================
   3) ACCESSIBILITY UTILITIES
   ---------------------------------------------------------
   Tools for improving screen reader experience and
   keyboard navigation without affecting visual design.
   ========================================================= */

/*
 * Screen reader only
 * Visually hides content while keeping it accessible
 * to assistive technologies
 */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/*
 * Skip link
 * Allows keyboard users to bypass navigation
 * Hidden by default, appears on focus
 */
.skip-link{
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 10000;

  padding: .5rem 1rem;
  background: var(--accent-primary);
  color: #fff;

  transition: top var(--t-base) ease;
}

.skip-link:focus{
  top: 0;
}


/* =========================================================
   4) PAGE TRANSITION - GLITCH/RGB SPLIT
   ---------------------------------------------------------
   Cyberpunk-themed page transition effect featuring:
   - Horizontal clip-path "tearing" animation
   - RGB chromatic aberration (cyan/magenta channel split)
   - Random scan line interference
   - Content blur/skew distortion

   Respects prefers-reduced-motion for accessibility.
   ========================================================= */

/*
 * Transition overlay container
 * Fixed fullscreen element that covers content during transitions
 */
#page-transition{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: var(--bg);
}

/*
 * Active state - transitioning IN to page
 * Triggers the glitch entrance animation
 */
#page-transition.glitch-active{
  opacity: 1;
  pointer-events: auto;
  animation: glitchIn .5s ease-out forwards;
}

/*
 * Exit state - transitioning OUT of page
 * Reverses the glitch effect
 */
#page-transition.glitch-exit{
  opacity: 1;
  animation: glitchOut .4s ease-in forwards;
}

/*
 * RGB split layers (pseudo-elements)
 * ::before = cyan channel shift
 * ::after = magenta channel shift
 * mix-blend-mode: screen creates additive color blending
 */
#page-transition::before,
#page-transition::after{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
}

#page-transition.glitch-active::before{
  animation: rgbShiftCyan .5s ease-out;
  background: var(--neon-cyan);
  mix-blend-mode: screen;
}

#page-transition.glitch-active::after{
  animation: rgbShiftMagenta .5s ease-out;
  background: var(--neon-magenta);
  mix-blend-mode: screen;
}

/*
 * Glitch lines container
 * Holds randomly positioned horizontal interference lines
 * Lines are generated dynamically via JavaScript
 */
.glitch-lines{
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
}

#page-transition.glitch-active .glitch-lines{
  animation: glitchLinesAnim .5s ease-out;
}

.glitch-lines span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.1);
}

/*
 * Glitch entrance animation
 * Uses clip-path to create horizontal "tearing" effect
 * Reveals content in random slices
 */
@keyframes glitchIn{
  0%{
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  10%{
    opacity: 1;
    clip-path: inset(40% 0 40% 0);
  }
  20%{
    clip-path: inset(20% 0 60% 0);
  }
  30%{
    clip-path: inset(60% 0 10% 0);
  }
  40%{
    clip-path: inset(10% 0 70% 0);
  }
  50%{
    clip-path: inset(0 0 0 0);
  }
  100%{
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/*
 * Glitch exit animation
 * Reverses the tearing effect when leaving
 */
@keyframes glitchOut{
  0%{
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  30%{
    clip-path: inset(30% 0 50% 0);
  }
  50%{
    clip-path: inset(70% 0 20% 0);
  }
  70%{
    clip-path: inset(10% 0 80% 0);
  }
  100%{
    opacity: 0;
    clip-path: inset(50% 0 50% 0);
  }
}

/*
 * RGB channel shift animations
 * Cyan shifts left, magenta shifts right
 * Creates chromatic aberration effect
 */
@keyframes rgbShiftCyan{
  0%, 100%{ opacity: 0; transform: translateX(0); }
  15%{ opacity: .7; transform: translateX(-8px); }
  30%{ opacity: .5; transform: translateX(4px); }
  45%{ opacity: .3; transform: translateX(-3px); }
  60%{ opacity: 0; transform: translateX(0); }
}

@keyframes rgbShiftMagenta{
  0%, 100%{ opacity: 0; transform: translateX(0); }
  15%{ opacity: .7; transform: translateX(8px); }
  30%{ opacity: .5; transform: translateX(-4px); }
  45%{ opacity: .3; transform: translateX(3px); }
  60%{ opacity: 0; transform: translateX(0); }
}

/* Scan lines fade in/out */
@keyframes glitchLinesAnim{
  0%, 100%{ opacity: 0; }
  10%, 50%{ opacity: 1; }
}

/*
 * Main content glitch effects
 * Applied to <main> element during page transitions
 */
main{
  flex: 1 0 auto;
}

/* Entrance: content glitches in with blur and position jitter */
body.is-glitching main{
  animation: contentGlitch .4s ease-out;
}

/* Exit: content distorts out with increasing blur and skew */
body.is-leaving main{
  animation: contentGlitchOut .3s ease-in forwards;
}

@keyframes contentGlitch{
  0%{
    opacity: 0;
    filter: blur(4px) saturate(2);
    transform: translateX(-5px);
  }
  20%{
    opacity: .8;
    filter: blur(2px) saturate(1.5);
    transform: translateX(3px);
  }
  40%{
    opacity: .9;
    filter: blur(1px) saturate(1.2);
    transform: translateX(-2px);
  }
  60%{
    filter: blur(0) saturate(1);
    transform: translateX(1px);
  }
  100%{
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateX(0);
  }
}

@keyframes contentGlitchOut{
  0%{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) skewX(0);
  }
  40%{
    opacity: .7;
    filter: blur(2px) saturate(1.5);
    transform: translateX(3px) skewX(-1deg);
  }
  70%{
    opacity: .4;
    filter: blur(4px) saturate(2);
    transform: translateX(-5px) skewX(2deg);
  }
  100%{
    opacity: 0;
    filter: blur(8px) saturate(3);
    transform: translateX(10px) skewX(-3deg);
  }
}

/*
 * Reduced motion preference
 * Disables all animations for users who prefer reduced motion
 * Falls back to simple opacity fade
 */
@media (prefers-reduced-motion: reduce){
  #page-transition,
  #page-transition::before,
  #page-transition::after,
  #page-transition .glitch-lines,
  main{
    animation: none !important;
    transition: opacity .2s ease !important;
  }

  body.is-leaving main{
    opacity: 0;
  }
}


/* =========================================================
   5) TYPOGRAPHY
   ---------------------------------------------------------
   Base type styles for headings, paragraphs, and links.
   Establishes vertical rhythm and text hierarchy.
   ========================================================= */

/* Headings: consistent margin and line-height */
h1,h2,h3,h4,h5,h6{
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.2;
}

/* Paragraphs: standard bottom margin for spacing */
p{
  margin: 0 0 1em;
}

/* Small text: muted color for supporting content */
small{
  color: var(--muted);
  font-size: .875rem;
}

/*
 * Links: neon pink default, magenta on hover
 * Smooth color transition for polished feel
 */
a{
  color: var(--accent-highlight);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

a:hover{
  color: var(--accent-secondary);
}


/* =========================================================
   6) LAYOUT PRIMITIVES
   ---------------------------------------------------------
   Core layout components: containers, header, navigation.
   Uses CSS Grid for flexible three-column nav layout.
   ========================================================= */

/*
 * Container: max-width wrapper with horizontal padding
 * Centers content and provides consistent margins
 */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
}

/*
 * Site header: sticky, blurred background
 * backdrop-filter creates frosted glass effect
 */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;

  height: var(--header-h);
  width: 100%;

  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Header content wrapper */
.header-grid{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
  height: 100%;
}

/*
 * Navigation grid: three-column layout
 * Left (nav links) | Center (logo) | Right (socials)
 * minmax(0,1fr) prevents content from overflowing
 */
.nav{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  height: 100%;
}

/* Left section holds menu toggle (mobile) and nav links (desktop) */
.nav-left-section{
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: start;
}

/* Nav link groups */
.nav .pages,
.nav .socials{
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Center: site title/logo */
.header-logo{
  display: block;
  width: 160px;
  height: 28px;

  background-image: url("/images/feelsIncubator_header.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* hover + keyboard */
.header-logo:hover,
.header-logo:focus-visible{
  background-image: url("/images/feelsIncubator_hover.svg");
}



.nav .header-title a{
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--text);
  transition: color var(--t-fast) ease;
}

.nav .header-title a:hover{
  color: var(--accent-highlight);
}

/* Right: social links */
.nav .socials{
  justify-self: end;
}

/*
 * Navigation links
 * Muted by default, brightens on hover
 * Active state uses accent color
 */
.nav-link{
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--t-fast) ease;
}

.nav-link:hover{
  color: var(--text);
}

.nav-link.is-active{
  color: var(--accent-highlight);
}

/*
 * Mobile menu toggle (hamburger)
 * Hidden on desktop, shown on mobile via media query
 * Three-line hamburger icon using spans
 */
.nav-toggle{
  display: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: .5rem;
  cursor: pointer;
}

.nav-toggle span{
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  margin: 4px 0;
  transition:
    transform var(--t-fast) ease,
    opacity var(--t-fast) ease;
}

/*
 * Mobile menu panel
 * Full-screen overlay that slides down from header
 * Hidden by default, shown via .is-active class
 */
.mobile-menu{
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  background: var(--bg);
  padding: 2rem 1rem;

  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity var(--t-base) ease,
    transform var(--t-base) ease;
}

.mobile-menu.is-active{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-menu .nav-link{
  display: block;
  padding: .75rem 0;
  font-size: 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Legacy nav alignment classes (for flexibility) */
.nav-left,
.nav-center,
.nav-right{
  display: flex;
  align-items: center;
}

.nav-center{
  justify-self: center;
}

.nav-left{
  justify-self: start;
}

.nav-right{
  justify-self: end;
}


/* =========================================================
   7) IMAGES
   ---------------------------------------------------------
   Responsive image defaults to prevent overflow
   and maintain aspect ratios.
   ========================================================= */
img{
  display: block;
  max-width: 100%;
  height: auto;
}


/* =========================================================
   8) BUTTONS
   ---------------------------------------------------------
   Base button component with hover, active, focus, and
   disabled states. Pill-shaped with subtle shadow.
   ========================================================= */
.button{
  appearance: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .75rem 1.25rem;
  border-radius: 999px;  /* Pill shape */

  font: inherit;
  font-weight: 600;
  letter-spacing: .02em;

  color: #fff;
  background: #111;
  border: 1px solid rgba(255,255,255,.3);

  box-shadow: var(--shadow-soft);

  transition:
    transform var(--t-fast) ease,
    box-shadow var(--t-fast) ease,
    border-color var(--t-base) ease;
}

/* Hover: slight lift and brighter border */
.button:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.6);
}

/* Active: pressed down effect */
.button:active{
  transform: translateY(1px);
}

/* Focus: visible outline for keyboard navigation */
.button:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,45,241,.5),
    var(--shadow-soft);
}

/* Disabled: reduced opacity, no interactions */
.button:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}


/* =========================================================
   9) FOOTER
   ---------------------------------------------------------
   Site footer with copyright and links.
   Uses margin-top: auto to push to bottom (flexbox sticky).
   ========================================================= */
.footer{
  margin-top: auto;
  padding: .75rem 1rem;

  display: flex;
  justify-content: center;
  gap: 1rem;

  font-size: .75rem;
  color: var(--muted);

  border-top: 1px solid rgba(255,255,255,.12);
}


/* =========================================================
   10) GRID SYSTEM
   ---------------------------------------------------------
   CSS Grid and Flexbox utility classes for layout.
   Responsive columns collapse on smaller screens.
   ========================================================= */

/* Base grid with gap */
.grid{
  display: grid;
  gap: 1rem;
}

/* Fixed column counts */
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* Auto-fit/fill for responsive grids */
.grid-auto-fit{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto-fill{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Flexbox utilities */
.flex{ display: flex; }
.flex-col{ flex-direction: column; }
.flex-wrap{ flex-wrap: wrap; }
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Alignment */
.items-start{ align-items: flex-start; }
.items-center{ align-items: center; }
.items-end{ align-items: flex-end; }

.justify-start{ justify-content: flex-start; }
.justify-center{ justify-content: center; }
.justify-end{ justify-content: flex-end; }
.justify-between{ justify-content: space-between; }

/* Gap scale */
.gap-0{ gap: 0; }
.gap-xs{ gap: .25rem; }
.gap-sm{ gap: .5rem; }
.gap-md{ gap: 1rem; }
.gap-lg{ gap: 2rem; }
.gap-xl{ gap: 4rem; }


/* =========================================================
   11) SECTION & CONTAINER VARIANTS
   ---------------------------------------------------------
   Spacing presets for page sections and container widths.
   ========================================================= */
.section{
  padding: 4rem 0;
}

.section-sm{
  padding: 2rem 0;
}

.section-lg{
  padding: 6rem 0;
}

/* Narrow container for readable text */
.container-sm{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Wide container for larger layouts */
.container-lg{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Full-width with padding */
.container-full{
  width: 100%;
  padding: 0 1rem;
}


/* =========================================================
   12) CARD COMPONENT
   ---------------------------------------------------------
   Flexible card for content grouping.
   Semi-transparent background with subtle border.
   ========================================================= */
.card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition:
    border-color var(--t-base) ease,
    transform var(--t-fast) ease;
}

/* Hover: brighter border */
.card:hover{
  border-color: rgba(255,255,255,.2);
}

/* Interactive variant: lifts and glows on hover */
.card-interactive:hover{
  transform: translateY(-2px);
  border-color: var(--accent-primary);
}

/* Card sections */
.card-header{
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.card-body{
  flex: 1;
}

.card-footer{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}


/* =========================================================
   13) FORM ELEMENTS
   ---------------------------------------------------------
   Styled form inputs, textareas, selects, and validation.
   Dark theme with neon focus states.
   ========================================================= */
.form-group{
  margin-bottom: 1.25rem;
}

.form-label{
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--text);
}

/* Shared input styles */
.form-input,
.form-textarea,
.form-select{
  width: 100%;
  padding: .75rem 1rem;

  font: inherit;
  font-size: 1rem;
  color: var(--text);

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);

  transition:
    border-color var(--t-base) ease,
    box-shadow var(--t-base) ease;
}

.form-input::placeholder,
.form-textarea::placeholder{
  color: var(--muted);
}

/* Focus: cyan border with glow */
.form-input:focus,
.form-textarea:focus,
.form-select:focus{
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0,141,218,.25);
}

.form-textarea{
  min-height: 120px;
  resize: vertical;
}

/* Custom select dropdown arrow */
.form-select{
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Checkbox and radio inputs */
.form-check{
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

.form-check-input{
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;

  cursor: pointer;
  transition:
    background var(--t-fast) ease,
    border-color var(--t-fast) ease;
}

.form-check-input[type="radio"]{
  border-radius: 50%;
}

.form-check-input:checked{
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.form-check-input:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,141,218,.25);
}

/* Validation states */
.form-input.is-valid,
.form-textarea.is-valid{
  border-color: #22c55e;
}

.form-input.is-invalid,
.form-textarea.is-invalid{
  border-color: #ef4444;
}

.form-hint{
  margin-top: .375rem;
  font-size: .8125rem;
  color: var(--muted);
}

.form-error{
  margin-top: .375rem;
  font-size: .8125rem;
  color: #ef4444;
}


/* =========================================================
   14) BUTTON VARIANTS
   ---------------------------------------------------------
   Color and size variations for the base button.
   ========================================================= */

/* Primary: solid cyan background */
.button-primary{
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.button-primary:hover{
  background: #007acc;
  border-color: #007acc;
}

/* Secondary: transparent with border */
.button-secondary{
  background: transparent;
  border-color: rgba(255,255,255,.3);
}

.button-secondary:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
}

/* Ghost: fully transparent, no border */
.button-ghost{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.button-ghost:hover{
  background: rgba(255,255,255,.1);
  border-color: transparent;
}

/* Size variants */
.button-sm{
  padding: .5rem 1rem;
  font-size: .875rem;
}

.button-lg{
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* Full-width button */
.button-block{
  display: flex;
  width: 100%;
}


/* =========================================================
   15) BADGE / TAG
   ---------------------------------------------------------
   Small label component for categories, status, counts.
   ========================================================= */
.badge{
  display: inline-flex;
  align-items: center;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: var(--text);
}

.badge-primary{
  background: var(--accent-primary);
}

.badge-secondary{
  background: var(--accent-secondary);
  color: #000;
}


/* =========================================================
   16) DIVIDER
   ---------------------------------------------------------
   Horizontal rule for visual separation.
   ========================================================= */
.divider{
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 2rem 0;
  border: none;
}

.divider-lg{
  margin: 4rem 0;
}


/* =========================================================
   17) SPACING UTILITIES
   ---------------------------------------------------------
   Margin and padding helper classes.
   Scale: xs(.25rem), sm(.5rem), md(1rem), lg(2rem), xl(4rem)
   ========================================================= */

/* Margin */
.m-0{ margin: 0; }
.m-auto{ margin: auto; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.my-auto{ margin-top: auto; margin-bottom: auto; }

.mt-0{ margin-top: 0; }
.mt-xs{ margin-top: .25rem; }
.mt-sm{ margin-top: .5rem; }
.mt-md{ margin-top: 1rem; }
.mt-lg{ margin-top: 2rem; }
.mt-xl{ margin-top: 4rem; }

.mb-0{ margin-bottom: 0; }
.mb-xs{ margin-bottom: .25rem; }
.mb-sm{ margin-bottom: .5rem; }
.mb-md{ margin-bottom: 1rem; }
.mb-lg{ margin-bottom: 2rem; }
.mb-xl{ margin-bottom: 4rem; }

.ml-auto{ margin-left: auto; }
.mr-auto{ margin-right: auto; }

/* Padding */
.p-0{ padding: 0; }
.p-xs{ padding: .25rem; }
.p-sm{ padding: .5rem; }
.p-md{ padding: 1rem; }
.p-lg{ padding: 2rem; }
.p-xl{ padding: 4rem; }

.py-xs{ padding-top: .25rem; padding-bottom: .25rem; }
.py-sm{ padding-top: .5rem; padding-bottom: .5rem; }
.py-md{ padding-top: 1rem; padding-bottom: 1rem; }
.py-lg{ padding-top: 2rem; padding-bottom: 2rem; }
.py-xl{ padding-top: 4rem; padding-bottom: 4rem; }

.px-xs{ padding-left: .25rem; padding-right: .25rem; }
.px-sm{ padding-left: .5rem; padding-right: .5rem; }
.px-md{ padding-left: 1rem; padding-right: 1rem; }
.px-lg{ padding-left: 2rem; padding-right: 2rem; }
.px-xl{ padding-left: 4rem; padding-right: 4rem; }


/* =========================================================
   18) TEXT UTILITIES
   ---------------------------------------------------------
   Typography helper classes for alignment, size, weight,
   color, and text transforms.
   ========================================================= */

/* Alignment */
.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }

/* Size scale (rem-based for accessibility) */
.text-xs{ font-size: .75rem; }
.text-sm{ font-size: .875rem; }
.text-base{ font-size: 1rem; }
.text-lg{ font-size: 1.125rem; }
.text-xl{ font-size: 1.25rem; }
.text-2xl{ font-size: 1.5rem; }
.text-3xl{ font-size: 2rem; }
.text-4xl{ font-size: 2.5rem; }
.text-5xl{ font-size: 3rem; }

/* Weight */
.font-light{ font-weight: 300; }
.font-normal{ font-weight: 400; }
.font-medium{ font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold{ font-weight: 700; }

/* Color */
.text-muted{ color: var(--muted); }
.text-primary{ color: var(--accent-primary); }
.text-secondary{ color: var(--accent-secondary); }
.text-highlight{ color: var(--accent-highlight); }

/* Line height */
.leading-none{ line-height: 1; }
.leading-tight{ line-height: 1.25; }
.leading-normal{ line-height: 1.5; }
.leading-relaxed{ line-height: 1.75; }

/* Truncate with ellipsis */
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Text transform */
.uppercase{ text-transform: uppercase; }
.lowercase{ text-transform: lowercase; }
.capitalize{ text-transform: capitalize; }


/* =========================================================
   19) DISPLAY UTILITIES
   ---------------------------------------------------------
   Visibility, positioning, sizing, and misc utilities.
   ========================================================= */

/* Display */
.hidden{ display: none; }
.block{ display: block; }
.inline{ display: inline; }
.inline-block{ display: inline-block; }

/* Position */
.relative{ position: relative; }
.absolute{ position: absolute; }
.fixed{ position: fixed; }
.sticky{ position: sticky; }

.inset-0{
  top: 0; right: 0; bottom: 0; left: 0;
}

/* Sizing */
.w-full{ width: 100%; }
.h-full{ height: 100%; }
.min-h-screen{ min-height: 100vh; }

/* Overflow */
.overflow-hidden{ overflow: hidden; }
.overflow-auto{ overflow: auto; }

/* Border radius */
.rounded{ border-radius: var(--radius-sm); }
.rounded-lg{ border-radius: var(--radius-lg); }
.rounded-full{ border-radius: 9999px; }
.rounded-none{ border-radius: 0; }

/* Shadow */
.shadow{ box-shadow: var(--shadow-soft); }
.shadow-none{ box-shadow: none; }

/* Opacity */
.opacity-0{ opacity: 0; }
.opacity-50{ opacity: .5; }
.opacity-75{ opacity: .75; }
.opacity-100{ opacity: 1; }

/* Pointer events */
.pointer-events-none{ pointer-events: none; }
.pointer-events-auto{ pointer-events: auto; }

/* Cursor */
.cursor-pointer{ cursor: pointer; }
.cursor-not-allowed{ cursor: not-allowed; }


/* =========================================================
   20) LIST RESET & STYLES
   ---------------------------------------------------------
   Remove default list styling and provide alternatives.
   ========================================================= */
.list-none{
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-disc{
  list-style: disc;
  padding-left: 1.5rem;
}

.list-decimal{
  list-style: decimal;
  padding-left: 1.5rem;
}


/* =========================================================
   21) OVERLAY / BACKDROP
   ---------------------------------------------------------
   Semi-transparent backdrop for modals and drawers.
   ========================================================= */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) ease;
}

.overlay.is-active{
  opacity: 1;
  pointer-events: auto;
}


/* =========================================================
   22) MODAL STRUCTURE
   ---------------------------------------------------------
   Centered dialog component with header, body, footer.
   ========================================================= */
.modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.95);
  z-index: 1001;

  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;

  background: var(--bg);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--t-base) ease,
    transform var(--t-base) ease;
}

.modal.is-active{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header{
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.modal-body{
  padding: 1.5rem;
}

.modal-footer{
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}


/* =========================================================
   23) RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------
   Media queries for tablet and mobile layouts.
   Breakpoints: 1200px, 992px, 768px, 576px
   ========================================================= */

/* Large tablets and below */
@media (max-width: 1200px){
  .container{
    max-width: 960px;
  }
}

/* Tablets */
@media (max-width: 992px){
  .grid-4{
    grid-template-columns: repeat(2, 1fr);
  }

  .hide-lg{ display: none; }
}

/* Small tablets and large phones */
@media (max-width: 768px){
  .container{
    max-width: 100%;
  }

  /* Stack all grids to single column */
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns: 1fr;
  }

  .section{
    padding: 3rem 0;
  }

  .section-lg{
    padding: 4rem 0;
  }

  /* Switch to mobile navigation */
  .nav .pages{
    display: none;
  }

  .nav-toggle{
    display: block;
  }

  .mobile-menu{
    display: block;
  }

  .hide-md{ display: none; }
  .show-md{ display: block; }

  .text-center-md{ text-align: center; }
  .flex-col-md{ flex-direction: column; }
}

/* Small phones */
@media (max-width: 576px){
  .hide-sm{ display: none; }
  .show-sm{ display: block; }

  .p-lg{ padding: 1.5rem; }
  .p-xl{ padding: 2rem; }

  .text-4xl{ font-size: 2rem; }
  .text-5xl{ font-size: 2.5rem; }
}


/* =========================================================
   24) PRINT STYLES
   ---------------------------------------------------------
   Optimizations for printing: removes backgrounds,
   hides navigation, ensures readability.
   ========================================================= */
@media print{
  *{
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .site-header,
  .footer,
  #page-transition,
  .skip-link,
  .button{
    display: none !important;
  }

  a{
    text-decoration: underline;
  }

  .container{
    max-width: 100%;
  }
}


/* =========================================================
   25) HERO SECTION
   ---------------------------------------------------------
   Full-viewport intro section with gradient title
   and ambient color glow background.
   ========================================================= */
.hero{
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}

/*
 * Ambient glow background
 * Radial gradients create soft cyan/magenta light pools
 */
.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,240,255,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255,0,170,.08) 0%, transparent 50%);
  pointer-events: none;
}

/*
 * Hero title with gradient text
 * Uses background-clip for cyan-to-magenta gradient fill
 * clamp() provides fluid responsive sizing
 */
.hero-title{
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .5rem;
  background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  position: relative;
}

.hero-subtitle{
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.hero-tagline{
  max-width: 500px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}


/* =========================================================
   26) PORTFOLIO SLIDER
   ---------------------------------------------------------
   Horizontal scrolling carousel for project cards.
   Supports mouse drag, touch swipe, and button navigation.
   ========================================================= */
.portfolio-section{
  padding: 4rem 0 6rem;
}

/* Section header with title and nav buttons */
.section-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 0 1rem;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.section-title{
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Navigation buttons */
.slider-nav{
  display: flex;
  gap: .5rem;
}

.slider-btn{
  appearance: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--t-base) ease,
    box-shadow var(--t-base) ease;
}

/* Hover: neon glow effect */
.slider-btn:hover{
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
}

.slider-btn svg{
  width: 20px;
  height: 20px;
}

/* Slider container clips overflow */
.slider-container{
  overflow: hidden;
  padding: 0 1rem;
}

/*
 * Slider track holds cards in a row
 * Transform is manipulated by JavaScript for scrolling
 * Cursor changes to indicate draggability
 */
.slider-track{
  display: flex;
  gap: 1.5rem;
  transition: transform var(--t-slow) var(--ease);
  cursor: grab;
}

.slider-track:active{
  cursor: grabbing;
}

/* Disable transition during drag for immediate feedback */
.slider-track.is-dragging{
  transition: none;
}


/* =========================================================
   27) PROJECT CARDS
   ---------------------------------------------------------
   Portfolio item cards with image, title, and category.
   Hover state features lift and neon glow.
   ========================================================= */
.project-card{
  flex: 0 0 auto;
  width: 350px;
  background: var(--bg-alt);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition:
    transform var(--t-base) ease,
    border-color var(--t-base) ease,
    box-shadow var(--t-base) ease;
}

/* Hover: lift, cyan border, neon glow */
.project-card:hover{
  transform: translateY(-4px);
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
}

/* Image container with aspect ratio */
.project-card-image{
  aspect-ratio: 16/10;
  background: rgba(255,255,255,.05);
  overflow: hidden;
  position: relative;
}

.project-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) ease;
}

/* Image zooms slightly on hover */
.project-card:hover .project-card-image img{
  transform: scale(1.05);
}

/* Gradient overlay fading to card background */
.project-card-image::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-alt) 0%, transparent 50%);
  pointer-events: none;
}

.project-card-content{
  padding: 1.25rem;
}

.project-card-title{
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--text);
}

.project-card-category{
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

/* Make entire card clickable via stretched link */
.project-card a{
  color: inherit;
  text-decoration: none;
}

.project-card a::after{
  content: '';
  position: absolute;
  inset: 0;
}


/* =========================================================
   28) GLOW UTILITIES
   ---------------------------------------------------------
   Utility classes for applying neon glow effects.
   ========================================================= */

/* Box shadow glow */
.glow-cyan{ box-shadow: var(--glow-cyan); }
.glow-magenta{ box-shadow: var(--glow-magenta); }
.glow-pink{ box-shadow: var(--glow-pink); }

/* Text shadow glow */
.text-glow-cyan{
  text-shadow: 0 0 10px rgba(0,240,255,.5), 0 0 20px rgba(0,240,255,.3);
}

.text-glow-magenta{
  text-shadow: 0 0 10px rgba(255,0,170,.5), 0 0 20px rgba(255,0,170,.3);
}

/* Border with inner and outer glow */
.neon-border{
  border: 1px solid var(--neon-cyan);
  box-shadow:
    inset 0 0 10px rgba(0,240,255,.1),
    var(--glow-cyan);
}


/* =========================================================
   29) SCANLINE OVERLAY (OPTIONAL)
   ---------------------------------------------------------
   CRT monitor effect with horizontal lines.
   Add class="scanlines" to body to enable.
   ========================================================= */
.scanlines::after{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.1) 2px,
    rgba(0,0,0,.1) 4px
  );
  z-index: 9998;
  opacity: .3;
}


/* =========================================================
   30) PROJECT PAGE
   ---------------------------------------------------------
   Layout for individual project detail pages.
   Features hero image, metadata, content, and gallery.
   ========================================================= */

/* Full-width hero image with cinematic aspect ratio */
.project-hero{
  width: 100%;
  aspect-ratio: 21/9;
  background: var(--bg-alt);
  overflow: hidden;
  position: relative;
}

.project-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Project header with title and metadata */
.project-header{
  padding: 3rem 0 2rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 3rem;
}

.project-title{
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: .5rem;
}

/* Metadata list (category, year, role) */
.project-meta{
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .875rem;
}

.project-meta dt{
  font-weight: 600;
  color: var(--neon-cyan);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}

.project-meta dd{
  margin: 0;
}

/* Content area with max-width for readability */
.project-content{
  max-width: 720px;
}

.project-content p{
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* Image gallery grid */
.project-gallery{
  display: grid;
  gap: 1rem;
  margin: 3rem 0;
}

.project-gallery img{
  width: 100%;
  border-radius: var(--radius-sm);
}

/* Back navigation link */
.back-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .875rem;
  margin-bottom: 2rem;
  transition: color var(--t-fast) ease;
}

.back-link:hover{
  color: var(--neon-cyan);
}


/* =========================================================
   31) RESPONSIVE ADJUSTMENTS FOR PORTFOLIO
   ---------------------------------------------------------
   Mobile-specific overrides for portfolio components.
   ========================================================= */
@media (max-width: 768px){
  .hero{
    min-height: 50vh;
    padding: 3rem 1rem;
  }

  .project-card{
    width: 280px;
  }

  .section-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .project-hero{
    aspect-ratio: 16/9;
  }

  .project-meta{
    gap: 1.5rem;
  }
}

@media (max-width: 480px){
  .project-card{
    width: 260px;
  }

  .slider-track{
    gap: 1rem;
  }
}


/* =========================================================
   END OF STYLESHEET
   ========================================================= */