/* Font Definitions */
:root {
  --font-body: 'Geist Mono', monospace;
}

/* Departure Mono font */
@font-face {
  font-family: "Departure Mono";
  src: url("DepartureMono-1.500/DepartureMono-Regular.woff2") format("woff2"),
    url("DepartureMono-1.500/DepartureMono-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Global typography */
body {
  color: #ffffff;
  font-family: 'Geist Mono', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  a{ text-decoration: underline; text-decoration-color: #ffffff; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  /*background-color: #111111;*/
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Departure Mono', monospace;
  text-transform: uppercase;
  color: #ffffff;
}

h1 { font-weight: 600; font-size: 2.25rem; line-height: 1.25; letter-spacing: -0.01em; }
h2 { font-weight: 600; font-size: 2rem; line-height: 1.3; letter-spacing: -0.005em; }
h3 { font-weight: 600; font-size: 1.75rem; line-height: 1.35; }
h4 { font-weight: 600; font-size: 1.5rem; line-height: 1.4; }
h5 { font-weight: 600; font-size: 1.25rem; line-height: 1.45; }
h6 { font-weight: 600; font-size: 1.15rem; line-height: 1.5; }

/* Non-heading text */
p, ul, ol {
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: #f5f5f5;
}

ul, ol {
  font-size: 1rem;
}

/* Optional utilities (kept minimal) */
.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; }

/* Links inherit site color */
a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #ffffff; text-underline-offset: 4px; color: #ffffff; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; color: #ffffff; }

/* Remove underlines from navigation menu items */
nav a, .mobile-menu a { text-decoration: underline; text-decoration-color: #ffffff; text-decoration-thickness: 1px; text-underline-offset: 4px; }
nav a:hover, .mobile-menu a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; color: #ffffff; }

/* Glass effect and borders - Add minimal performance improvements */
/* 
  Glass effect container: 
  - Applies a semi-transparent linear gradient background
  - Adds blur for glassmorphism
  - Rounds corners and hides overflow
*/
.glass {
  position: relative;
  background: linear-gradient(90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0.75rem;
  overflow: hidden;
  transform: translateZ(0); /* Enable hardware acceleration */
  will-change: transform; /* Hint browser for potential changes */
}

/* 
  Glass effect pseudo-elements:
  - Add layered borders and subtle masking for depth
  - Inherit border radius and prevent interaction
*/
.glass::before,
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* 
  Top border layer for glass effect:
  - Brighter border with a gradient mask
*/
.glass::before { 
  border: 1px solid rgba(255,255,255,0.5); 
  -webkit-mask-image: linear-gradient(135deg, #ffffff, transparent 50%); 
  mask-image: linear-gradient(135deg, #ffffff, transparent 50%); 
}

/* 
  Bottom border layer for glass effect:
  - Softer border with an inverse gradient mask
*/
.glass::after  { 
  border: 1px solid rgba(255,255,255,0.25); 
  -webkit-mask-image: linear-gradient(135deg, transparent 50%, #ffffff);  
  mask-image: linear-gradient(135deg, transparent 50%, #ffffff); 
}

/* 
  Stronger glass variant:
  - Adds a subtle inner box shadow for more depth
*/
.glass-strong { 
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); 
}

/* 
  Stronger glass variant pseudo-elements:
  - Thicker and brighter borders for emphasis
*/
.glass-strong::before { 
  border-width: 2px; 
  border-color: rgba(255,255,255,0.7); 
}
.glass-strong::after  { 
  border-width: 2px; 
  border-color: rgba(255,255,255,0.4); 
}

/* 
  Gradient text effect:
  - Applies a white gradient to text using background-clip
  - Makes text color transparent for the effect to show
*/
.gradient-text { 
  background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent !important; 
  transform: translateZ(0); /* Enable hardware acceleration */
}

/* 
  Mobile menu z-index:
  - Ensures mobile menu overlays other content
*/
.mobile-menu { 
  z-index: 50; 
}

/* 
  Aurora canvas background:
  - Fixed, full-screen, behind all content
  - Slightly transparent for subtlety
*/
#aurora-canvas { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: -1; 
  opacity: 0.5; 
  transform: translateZ(0); /* Enable hardware acceleration */
}

/* 
  Main page content:
  - Positioned above the aurora background
*/
#page-content  { 
  position: relative; 
  z-index: 1; 
  transform: translateZ(0); /* Enable hardware acceleration */
  transition: opacity 0.3s ease-out; /* Smooth opacity transition */
}

/* Text rotation animation styles - Optimized transitions */
#dynamic-text {
  display: inline-block;
  transition: opacity 0.3s ease-in-out; /* Slightly faster transition */
  opacity: 1;
  transform: translateZ(0); /* Enable hardware acceleration */
  will-change: opacity; /* Hint browser for potential changes */
}

/* Subtle hover effect for the rotating text container */
#rotating-text:hover #dynamic-text {
  opacity: 0.8;
  transition: opacity 0.2s ease-in-out;
}