/* Container: 90% on mobile, 75% on desktop */
.container {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    .container {
        width: 75% !important;
        max-width: 75% !important;
    }
}

@view-transition {
  navigation: auto; /* Enables seamless transitions between documents */
}

/* Force navbar to stay fixed during transitions */
#main-header, #nav, #ulMenu {
  will-change: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Prevent mobile menu from causing layout shifts */
#menu {
  transition: height 0.5s ease-out, opacity 0.5s ease-out;
}

/* Ensure desktop menu never collapses */
@media (min-width: 768px) {
  #menu {
    height: auto !important;
    opacity: 1 !important;
  }
}






/* The card causes an issue with page width  */
.logo-card-small {
  /* Increased from 280px to 320px */
  width: 440px !important;
  
  /* Critical: This prevents the card from ever being wider than the screen */
  max-width: 98% !important;

  display: block !important;
  
  /* Restores original vertical spacing (m-6 and md:m-12 equivalents) */
  margin: 1.5rem auto !important; 

  transform-origin: center center;
  position: relative !important;
  left: 0 !important;
}

@media (min-width: 768px) {
  .logo-card-small {
    /* Desktop margin equivalent to your original m-12 */
    margin: 3rem auto !important; 
  }
}
.transition { transition-property: all; }
.duration-1000 { transition-duration: 1000ms; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }







      
/* Navbar stuff  */
#main-header {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  max-width: 100%;  /* ← Fixed! */
  width: 100%;    
}

.menu-letter-toggle {
  font-family: 'HaraldMono', monospace;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navbar reveal animation - ensure it starts visible if you don't use the original's scroll-reveal script */
header#main-header {
  transform: translateY(0) !important;
  opacity: 1 !important;
}





.seo-only-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  display: block; /* Ensures it's still a block element for crawlers */
}








/* the about section H animation  */
 .logo-container2 { 
    width: 400px; 
    height: 400px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .logo-container2:hover { transform: scale(1.05); }

  .neon-logo { width: 100%; height: 100%; position: relative; left: -6%; }

  /* Combined styling for the single set of paths */
  .logo-paths path {
    fill: #000;
    stroke: #000;
    stroke-width: 4;
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    /* Apply both animations to the same element */
    animation: 
      wirePulse 10s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95),
      fillFade 10s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  }

  /* Dark mode support */
  .dark .logo-paths path {
    fill: #fff;
    stroke: #fff;
  }

  @keyframes wirePulse {
    0% { stroke-dashoffset: 4000; } 
    30%, 75% { stroke-dashoffset: 0; } 
    95%, 100% { stroke-dashoffset: -4000; }
  }

  @keyframes fillFade {
    0%, 25% { fill-opacity: 0; }
    30%, 75% { fill-opacity: 1; }
    85%, 100% { fill-opacity: 0; }
  }





      
    /* 2. Added a safeguard: Force background to be dark immediately 
       This prevents any white flashes during script execution */
    .dark body {
      background-color: #000 !important;
      color: #fff !important;
    }

    /* Standard letter fade animation */
    @keyframes letterFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

.fade-letter {
    /* remove display: inline-block if letters look gapped */
    opacity: 0;
    animation: letterFade 0.8s ease-out forwards;
}

  /* Prevent layout jump: hide the H2 initially */
  [data-animate="true"] {
  opacity: 0;
}
  h2.active {
    opacity: 1 !important;
  }

    
     /* fading words */

        .word {
          display: inline-block;
          opacity: 0;
          transform: translateY(5px);
        }
        
        @keyframes fadeInWord {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        /* This triggers when the IntersectionObserver adds the class */
        .start-animation .word {
          animation: fadeInWord 0.6s ease-out forwards;
        }



/* Hide the container entirely until JS is ready */
.text-container {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

/* Show it only when the IntersectionObserver or JS adds this class */
.text-container.start-animation {
  opacity: 1;
}


      
    
/* 1. FONT DEFINITIONS */
@font-face {
  font-family: 'HaraldText';
  src: url('../fonts/HaraldReveryTextFont.woff2') format('woff2'),
       url('../fonts/HaraldReveryTextFont.woff') format('woff'),
       url('../fonts/HaraldReveryTextFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HaraldMono';
  src: url('../fonts/HaraldReveryMonoFont.woff2') format('woff2'),
       url('../fonts/HaraldReveryMonoFont.woff') format('woff'),
       url('../fonts/HaraldReveryMonoFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* CUSTOM DESKTOP FONT SIZING */
html { 
  /* Desktop Scale */
  font-size: 1.2rem; 
/* Reserves space for the scrollbar to prevent layout shift and overlapping */
  scrollbar-gutter: stable;
}

body {
  font-family: 'HaraldText', sans-serif;
  font-size: 1.9rem;     /* ≈28px on 16px root */
  line-height: 1.58;
  letter-spacing: 0.018em;
  overflow-x: hidden;
}

/* CUSTOM MOBILE FONT SIZING */
@media (max-width: 768px) {
          html {
            /* Reduces the base scale by ~20% for smaller screens */
            /* This makes your 1.9rem body text roughly 22px on mobile */
            font-size: 1.427rem; 
          }
        body {
          font-family: 'HaraldText', sans-serif;
          font-size: 2.28rem;     /* ≈28px on 16px root */
          line-height: 1.58;
          letter-spacing: 0.018em;
        }
}

    /* HaraldMono gets its own independent scale */
        .font-signika,
        code,
        pre,
        kbd,
        samp,
        tt,
        .mono,
        .console-output {
          font-family: 'HaraldMono', monospace;
          font-size: 1.7rem; /* ≈22px – very common mono scale */
          line-height: 1.2;
          letter-spacing: 0.025em;
        }

/* --- Footer Typography & Utilities --- */
/* Matches Tailwind's text-sm (approx 14px) */
.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem;
}

/* Matches Tailwind's text-xs (approx 12px) */
.text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem;
}

/* Ensure the opacity also works without Tailwind */
.opacity-50 { opacity: 0.5; }
.opacity-30 { opacity: 0.3; }

/* Center the text container as seen in both footers */
.text-center {
  text-align: center;
}

/* Standard spacing for the footer links */
.mt-2 { margin-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }






    
/* Animation definition remains the same */
@keyframes wave-animation {
  0% { transform: rotate(0.0deg); }
  10% { transform: rotate(14.0deg); }
  20% { transform: rotate(-8.0deg); }
  30% { transform: rotate(14.0deg); }
  40% { transform: rotate(-4.0deg); }
  50% { transform: rotate(10.0deg); }
  60% { transform: rotate(0.0deg); }
  100% { transform: rotate(0.0deg); }
}

/* Apply the animation only on hover */
.hover-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  transition: transform 0.3s ease;
  cursor: default;
}

.hover-wave:hover {
  animation: wave-animation 2.5s infinite;
}

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fadeIn 0.8s ease-in forwards;
    }


    /* Background ANIMATIONS */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient-slow {
  animation: gradientMove 15s ease infinite;
}

/* Apply a smooth transition to the entire page and all its children */
* {
    transition: background-color 0.96s ease-in-out, color 0.6s ease-in-out, border-color 0.6s ease-in-out;
}

/* Specific smoothing for the background gradient */
body {
    transition: background 0.8s ease-in-out !important;
}
    
/* making text text-justify alignment not have odd gaps */
.text-justify {
  text-justify: inter-word;
  hyphens: auto;
}

.text-container p {
  text-align: justify;
}


    /* Add this to your <style> block */
.bg-neutral-200, .dark\:bg-neutral-800 {
    background-size: 200% 100%;
    animation: skeleton-pulse 2s infinite linear;
}

@keyframes skeleton-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}


/* Dark mode button fade in */
/* Initial state for the toggle button */
.mode-toggle-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
}

/* State when revealed */
.mode-toggle-visible {
  opacity: 1;
  pointer-events: auto;
}






/* Recreating the 2-column layout utilities (Text and card layout) */
.grid {
    display: grid;
}

/* Two-column layout for the logo and text */
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Spacing between columns */
.gap-14 { gap: 3.5rem; }

/* Mobile logic: Make items span full width by default */
.col-span-2 {
    grid-column: span 2 / span 2;
}

/* Desktop logic: 768px and up */
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    /* Make the card and text take up 1 column each (side-by-side) */
    .md\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .md\:gap-20 {
        gap: 5rem;
    }

    .md\:text-start {
        text-align: left;
    }
}

/* Vertical centering helper */
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}



/* --- Missing Layout Utilities: General grid stuff */
/* Grid Columns */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Flexbox for the top section (Images to the right, text left) */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-16 { gap: 4rem; }
.w-full { width: 100%; }

/* Responsive Desktop Rules (768px and up) */
@media (min-width: 768px) {
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:gap-20 { gap: 5rem; }
    .md\:text-start { text-align: left; }
    .my-auto { margin-top: auto; margin-bottom: auto; }
}

/* Wide Screen Rules (1024px and up) */
@media (min-width: 1024px) {
    .lg\:flex-row-reverse { flex-direction: row-reverse; }
    .lg\:w-1/2 { width: 50%; }
}

/* Spacing Helpers */
.pt-20 { padding-top: 5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }


















/* Image grid animation */

/* Hover Scaling Effect */
.group:hover img {
    transform: scale(1.05);
    filter: saturate(1) !important; /* Forces full color on hover */
}

/* Ensure the image has a smooth transition */
.group img {
    transition: transform 1s ease-out, scale 1s ease-out, filter 1s ease-out;
    filter: saturate(0.8);
}


/* The base state for the grid items before they load */
.glightbox {
    opacity: 0;
    transform: translateY(2rem); /* translate-y-8 equivalent */
    transition: opacity 2s ease-out, transform 2s ease-out;
}

/* The state when allLoaded is true (Alpine.js adds these) */
.glightbox.opacity-100 {
    opacity: 1 !important;
}

.glightbox.translate-y-0 {
    transform: translateY(0) !important;
}


/* Image grid animation stuff */
.opacity-0 {
    opacity: 0;
}
.opacity-100 {
    opacity: 1;
}
.translate-y-8 {
    transform: translateY(2rem); /* Tailwind's 8 unit = 2rem or 32px */
}
.translate-y-0 {
    transform: translateY(0);
}
/* Transition Timing */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-\[2000ms\] {
    transition-duration: 2000ms;
}
.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-3 {
    gap: 0.75rem;
}
/* Responsive Gap */
@media (min-width: 768px) {
    .md\:gap-5 {
        gap: 1.25rem;
    }
}
/* Item Spanning Logic */
.col-span-1 {
    grid-column: span 1 / span 1;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.row-span-2 {
    grid-row: span 2 / span 2;
}
.aspect-square {
    aspect-ratio: 1 / 1;
}
.relative {
    position: relative;
}
.overflow-hidden {
    overflow: hidden;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.group:hover .hover\:shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Prevent the body from shifting when GLightbox is active */
body.glightbox-open {
  width: 100% !important;
  overflow: hidden !important;
}

/* FAQ & Grid Animation States */
.rotate-45 { transform: rotate(45deg); }

/* A container to just put fading elements in */
@keyframes extra_fade_effect {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .extra_container_fade {
    animation: extra_fade_effect 2s ease-in forwards;
    opacity: 0;
  }


/* ============================================
   MISSING RESPONSIVE & LAYOUT UTILITIES
   Add these to your about_style.css file
   ============================================ */

/* --- Core Display & Flex Utilities --- */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Justify & Align */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }

/* Flex Grow/Shrink */
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }

/* Margin & Padding Utilities */
.ml-auto { margin-left: auto; }
.mr-4 { margin-right: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.pt-1 { padding-top: 0.25rem; }
.pb-0 { padding-bottom: 0; }

/* Spacing */
.space-x-5 > * + * { margin-left: 1.25rem; }

/* Position */
.relative { position: relative; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }

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

/* Transform */
.transform { transform: translateZ(0); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }

/* Combined transform for centering */
.transform.-translate-x-1\/2.-translate-y-1\/2 {
  transform: translate(-50%, -50%);
}

/* Position utilities for the toggle button */
.absolute { position: absolute; }
.left-1\/2 { left: 50%; }
.top-1\/2 { top: 50%; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }

/* Colors */
.text-black { color: #000; }
.text-white { color: #fff; }
.bg-white\/60 { background-color: rgba(255, 255, 255, 0.6); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }

/* Dark Mode Colors */
.dark .dark\:text-white { color: #fff; }
.dark .dark\:text-black { color: #000; }
.dark .dark\:bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }

/* Transitions */
.transition { transition-property: all; transition-duration: 150ms; }
.transition-all { transition-property: all; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

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

/* Height */
.h-0 { height: 0; }
.h-auto { height: auto; }

/* Focus */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

/* Hover Effects */
.hover\:opacity-75:hover { opacity: 0.75; }

/* User Select */
.select-none { user-select: none; }

/* Backdrop Blur */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }


/* ============================================
   CRITICAL: RESPONSIVE BREAKPOINTS (md: 768px+)
   ============================================ */

@media (min-width: 768px) {
  /* Display */
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  
  /* Flex Direction */
  .md\:flex-row { flex-direction: row; }
  .md\:flex-no-wrap { flex-wrap: nowrap; }
  
  /* Width */
  .md\:w-auto { width: auto; }
  
  /* Spacing */
  .md\:mr-8 { margin-right: 2rem; }
  .md\:ml-auto { margin-left: auto; }
  .md\:mt-0 { margin-top: 0; }
  .md\:pt-0 { padding-top: 0; }
  .md\:px-0 { padding-left: 0; padding-right: 0; }
  
  /* Space Between */
  .md\:space-x-5 > * + * { margin-left: 1.25rem; }
  
  /* Items */
  .md\:items-center { align-items: center; }
  
  /* Grow */
  .md\:flex-grow { flex-grow: 1; }
  
  /* Height - CRITICAL for navigation */
  .md\:h-auto { height: auto !important; }
  
  /* Opacity - CRITICAL for navigation */
  .md\:opacity-100 { opacity: 1 !important; }
  
  /* Transitions - disable for desktop menu */
  .md\:transition-none { transition: none !important; }
}


/* ============================================
   NAVIGATION FIX: Force desktop mode at 768px+
   ============================================ */

@media (min-width: 768px) {
  /* Ensure menu is always visible on desktop */
  #menu {
    display: flex !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  
  /* Ensure menu items are in a row */
  #ulMenu {
    display: flex !important;
    flex-direction: row !important;
    margin-top: 0 !important;
  }
  
  /* Hide mobile toggle button */
  .md\:hidden {
    display: none !important;
  }
}


/* ============================================
   CARD/TEXT LAYOUT FIX
   ============================================ */

/* The existing grid rules were incomplete. Here's the full set: */

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.gap-14 {
  gap: 3.5rem;
}

/* Mobile: Stack vertically */
@media (max-width: 767px) {
  .grid-cols-2 {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}

/* Desktop: Side by side */
@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  
  .md\:gap-20 {
    gap: 5rem;
  }
  
  .md\:text-start {
    text-align: left;
  }
}

/* Vertical centering */
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}


/* ============================================
   IMAGE GRID LAYOUT (Top Section)
   ============================================ */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.gap-16 {
  gap: 4rem;
}

/* Desktop: Row reverse (images right, text left) */
@media (min-width: 1024px) {
  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }
  /* Use \2f instead of / to bypass the parser error */
  .lg\:w-1\2f 2 {
    width: 50%;
  }
}


/* ============================================
   UTILITY ADDITIONS
   ============================================ */

.max-w-max {
  max-width: max-content;
}

.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.whitespace-normal {
  white-space: normal;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.tap-highlight-transparent {
  -webkit-tap-highlight-color: transparent;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Border */
.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-gray-100 {
  border-color: #f3f4f6;
}

.dark .dark\:border-neutral-800 {
  border-color: #262626;
}

/* Shadow */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover\:shadow-2xl:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Active state */
.active\:scale-90:active {
  transform: scale(0.9);
}