@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;
  }
}



      
      
/* Update your existing <style> tag with these classes */
.menu-letter-toggle {
  font-family: 'HaraldMono', monospace; /* HaraldMono per request */
  font-size: 1.5rem; /* Matches Tailwind's text-2xl (1.5rem) used for 'HARALD REVERY' */
  line-height: 1;
  letter-spacing: 0.15em; /* Matches the branding's tracking-[0.15em] */
  display: flex;
  align-items: center;
  justify-content: center;
}
      

/* Optional: Slight rotation for the X to make it feel more like a 'close' button */
.menu-letter.is-x {
  transform: rotate(0deg); 
}

      
.text-container p {
  text-align: justify;
}
      
/* Custom Background Image Layer */
.bg-image-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Use 100vh to match the exact height of the user's screen */
  height: 100dvh;
  z-index: -11;
  background-image: url('../assets/bgtexture.jpg');
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
  /* 'cover' ensures the image fills the screen without stretching or gaps */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* Smooth fade-out tied to the viewport height */
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%, /* Solid at the top */
    rgba(0,0,0,1) 30%, /* Begins fade after 30% of screen height */
    rgba(0,0,0,0) 100% /* Fully gone by the bottom of the display */
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0) 100%
  );
  opacity: 0.12;
  pointer-events: none;
}
/* Standard letter fade animation */
  @keyframes letterFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .fade-letter {
    display: inline-block;
    opacity: 0;
    animation: letterFade 0.8s ease-out forwards;
  }
  /* Prevent layout jump: hide the H2 initially */
  h2[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;
        }
/* Wiggle hoover animation */
@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;
}
    
        /* Enhancing the gradient movement as requested previously */
        @keyframes shiftGradient {
          0% { x1: 0%; y1: 0%; }
          50% { x1: 100%; y1: 100%; }
          100% { x1: 0%; y1: 0%; }
        }
      
      /* 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;
      }
 
 
/* 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 { 
  font-size: 1.2rem; 
  scrollbar-gutter: stable; 
  
  /* Manage all scrolling here */
  overflow-y: auto; 
  overflow-x: hidden;
  
  /* Stops the 'rubber band' bounce in Edge/Chrome safely */
  overscroll-behavior-y: none; 
}

/* 2. The Body (The Content) */
body {
  font-family: 'HaraldText', sans-serif;
  font-size: 1.9rem;
  line-height: 1.58;
  letter-spacing: 0.018em;

  /* Let the content flow into the HTML scroll container */
  overflow-y: visible; 
  overflow-x: hidden;
  
  /* Ensure it takes up the full width without wobble */
  width: 100%;
  max-width: 100%;
  position: relative;
  
  /* Remove overscroll-behavior from here; it's already on html */
}

      

/* 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;
        }
 

/* Helper to prevent clipping */
.overflow-visible {
  overflow: visible !important;
}
/* avoid text-justify odd gaps */
.text-justify {
  text-justify: inter-word;
  hyphens: auto;
}
 /* Custom delay animation for the "welcome! scroll down"*/
/* Locate this section in your <style> tag */
.welcome-text-delayed {
  opacity: 0;
  animation: welcomeFade 1.2s ease-out forwards;
  animation-delay: 2s;
  z-index: 40 !important;
  pointer-events: auto; /* Change this from 'none' to 'auto' */
}
@keyframes welcomeFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }
  99% {
    pointer-events: none;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* This re-enables clicking once the fade is done */
  }
}
#main-header {
  -webkit-backdrop-filter: blur(12px); /* CRITICAL for Safari */
  backdrop-filter: blur(12px);
  max-width: 100%;
  width: 100%;
}
  
 /* center glow "*/
.center-glow {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.29) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(40px);
  /* Remove the infinite animation from here */
}

/* Only animate on larger screens */
@media (min-width: 768px) {
  .center-glow {
    animation: pulse-glow 6s ease-in-out infinite;
  }
}
  @keyframes pulse-glow {
    0%, 100% {
      transform: scale(0.8);
      opacity: 0.7;
    }
    50% {
      transform: scale(1.2);
      opacity: 1;
    }
  }
/* Allow the decorative elements to bleed out */
.overflow-bleed {
  position: relative;
  overflow: visible !important;
  contain: layout;
}
/* Ensure the canvas actually covers the extra bleed area */
#particle-canvas,
#particle-canvas-front {
  position: absolute;
  top: -10%;
  left: -14%;
  width: 140% !important;
  height: 120% !important;
  pointer-events: none;
}
#particle-canvas {
  z-index: -1;
}
/* Foreground layer stays on top of the grid */
#particle-canvas-front {
  z-index: 1;
}
/* The grid itself is in the middle */
#image-grid {
  position: relative;
  z-index: 0;
}
  
/* This prevents the "zooming out" or side-to-side wobble */
html, body {
  width: 100%;
  max-width: 100%; /* Changed from 100vw to 100% to avoid scrollbar width calculation errors */
  overflow-x: hidden !important; /* Force hidden */
  position: relative; 
}
/* Ensure these absolute elements don't create "phantom" width */
#particle-canvas,
.center-glow,
.bg-image-fade,
#logo-container {
  max-width: 100vw;
  overflow: hidden;
}
/* --- GLightbox Caption Styling --- */
/* Remove the solid white background from the text container */
.gslide-description {
  background: transparent !important;
}
/* Ensure the text container doesn't have a shadow or border that looks like a box */
.gslide-description.description-bottom {
  border: none !important;
  box-shadow: none !important;
}
/* Force the text to be your brand color (white) if it's defaulting to black */
.gslide-title {
  color: #FFFFFF !important;
  font-family: 'HaraldMono', monospace !important;
}
.gslide-desc {
  color: #FFFFFF !important;
  font-family: 'HaraldText', sans-serif !important;
    font-size: 0.21rem; /* Add or change this line */
}
.gslide-title, .gslide-desc {
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
/* Animation for the grid items */
.grid-item-reveal {
  opacity: 0;
  transform: translate3d(0, 5rem, 0);
  /* The '1' as the second-to-last number ensures it
     hits the finish line with almost zero velocity.
  */
  transition:
    opacity 1400ms cubic-bezier(0, 0.39, 0.4, 0.95),
    transform 1400ms cubic-bezier(0, 0.39, 0.4, 0.95);
  will-change: opacity, transform;
  -webkit-font-smoothing: antialiased;
}
.grid-item-reveal.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
      /* --- 3D LOGO & ANIMATIONS --- */
/* 1. Logo Drawing Animation: Handles the initial SVG stroke "drawing" effect */
  /* This ensures the 'drawn' state remains at 4% solid color */
@keyframes logoDraw {
  0% {
    stroke-dashoffset: 4000;
    fill-opacity: 0;
    stroke: currentColor; /* Ensure stroke starts visible */
  }
  60% {
    stroke-dashoffset: 0;
    fill-opacity: 0.01;
    stroke: currentColor; /* Stroke still visible while finishing drawing */
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 0.06; /* Keep the fill visible as requested */
    stroke: transparent; /* Fade the stroke out completely */
  }
}
      /* Ensure dark mode flips the colors back to white */
.dark .animate-logo path {
  /* REMOVE stroke: #FFFFFF !important; */
  fill: #FFFFFF !important;
  fill-opacity: 0.05 !important;
}
  
/* Update the mobile override around line 430 */
@media (max-width: 767px) {
  .animate-logo path {
    fill: #000000 !important;
    fill-opacity: 0.70!important;
  }
  .dark .animate-logo path {
    fill: #FFFFFF !important;
    fill-opacity: 0.70 !important;
  }
}
/* Mobile specific version (matches your 0.19 fill-opacity) */
@media (max-width: 767px) {
  @keyframes logoDraw {
    0% {
      stroke-dashoffset: 4000;
      fill-opacity: 0;
      opacity: 0;
      stroke: currentColor;
    }
    60% {
      stroke-dashoffset: 0;
      fill-opacity: 0.10;
      opacity: 1;
      stroke: currentColor;
    }
    100% {
      stroke-dashoffset: 0;
      fill-opacity: 0.21; /* Keeps the solid fill */
      stroke: transparent; /* Fades out the stroke/lines only */
      opacity: 1; /* Keeps the overall logo visible */
    }
  }
}
  
/* 2. Ensure the base path follows the same rule */
.animate-logo path {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  stroke: currentColor; /* Dark stroke for light mode */
  fill: currentColor; /* Dark fill for light mode */
  fill-opacity: 0.05;
  animation: logoDraw 5s cubic-bezier(.75,.03,.46,.46) forwards;
  transition: stroke 0.2s ease, fill 0.5s ease; /* Smooth transition */
}
/* 2. Floating Animation: Starts after the logo is drawn (8s delay) */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.logo-float {
  animation: logoFloat 0.1s ease-in-out infinite 8s;
  transform-style: preserve-3d;
}
#logo-container, .bg-image-fade {
  height: 100vh; /* Fallback */
  height: 100dvh;
}
/* 3. Tilt & Shadow: Base styles for the interactive tilting logo */
#tilting-logo {
  transition: transform 0.14s ease-out; /* Smooths mouse movement */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
/* 4. Radio Signal "Implosion" Rings: CSS for the background echo effects */
/* Styling for the SVG Shape Waves */
/* Styling for the Imploding Outlines */
.wave-echo {
  fill: none !important; /* Ensure no solid color */
  stroke: rgba(0, 0, 0, 0.5); /* Previously rgba(255, 255, 255, 0.5) */
  stroke-width: 1px;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  /* cubic-bezier(0.19, 1, 0.22, 1) creates a "vacuum" snap-in effect */
  animation: implodingWave 3.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  width: 0;
  height: 0;
  overflow: visible;
}
@keyframes implodingWave {
  0% {
    transform: scale(5); /* Start huge beyond screen edges */
    opacity: 0;
    stroke-width: 0.5px;
  }
  15% {
    opacity: 0.6; /* Quick fade in as they rush from edges */
  }
  85% {
    opacity: 0.2;
  }
  100% {
    transform: scale(1); /* Land exactly on the logo */
    opacity: 0;
    stroke-width: 3px; /* Get slightly thicker as they collapse */
  }
}
/* Staggered delays for the radio pulse effect – tweaked for better separation */
.implosion-waves .echo-1 { animation-delay: 0.3s; }
.implosion-waves .echo-2 { animation-delay: 0.8s; }
.implosion-waves .echo-3 { animation-delay: 1.3s; }
/* Allow the giant wave shapes to be seen even when scaled out */
#main-logo-svg {
  overflow: visible !important;
}
/* Plexus/Logo Masking */
#plexus-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
  
/* Increase perspective to reduce lens distortion */
#logo-container {
  perspective: 1000px;
  height: 100vh !important; /* Force full viewport height */
  width: 100vw;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  transform-style: preserve-3d;
  translateZ(15px);
}
/* Ensure the SVG scales to fit the screen size */
#main-logo-svg {
    /* This shifts the logo 10% of its own width to the right
     and 5% of its own height down. Adjust as needed. */
  transform: translateX(-9.81%);
  max-height: 76vh; /* Prevents logo from touching edges */
  width: auto;
  max-width: 81vw;
  transform: translateZ(15px); /* Force hardware acceleration and 3D depth */
  will-change: transform;
  transform-style: preserve-3d;
}
/* Adjust the positioning wrapper to be centered */
.position-wrapper {
  transform: none !important; /* Remove the horizontal offset for better centering */
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* Optional: Adds a subtle shadow that moves opposite to the tilt for realism */
.logo-3d-shadow {
  filter: drop-shadow(0px 20px 30px rgba(0,0,0,0.5));
}
#discography-section {
  /* This adds 2rem of breathing room at the top when you scroll to it */
  scroll-margin-top: 2rem;
}
/* Dark mode button fade in */
.mode-toggle-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in-out; /* Slightly longer transition for a premium feel */
}
/* Revealed state */
.mode-toggle-visible {
  opacity: 1;
  pointer-events: auto;
}
/* Change the fill and stroke when the .dark class is active on the html element */
.dark .animate-logo {
  fill: url(#logoGradientDark) !important;
  stroke: url(#logoGradientDark) !important;
}
/* Update the implosion rings/waves for dark mode */
.dark .wave-echo {
  stroke: rgba(255, 255, 255, 0.4) !important; /* Previously rgba(0, 0, 0, 0.4) */
}



/* Image grid hover effect */
#image-grid {
  position: relative;
  transition: all 0.4s ease;
}

#image-grid .glightbox {
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

/* When ANY image is hovered → affect all siblings */
#image-grid:hover .glightbox {
  opacity: 0.5;
  transform: scale(0.95);
}

/* The hovered image itself returns to full state */
#image-grid .glightbox:hover {
  opacity: 1 !important;
  transform: scale(1.04) !important;    /* optional: slight grow on hover */
  z-index: 10;                          /* brings it above others */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
}

/* Optional: make transition smoother when leaving hover */
#image-grid .glightbox:not(:hover) {
  transition-delay: 0.05s;
}




/* Particles */
/* Base setup for all 4 layers */
.particles-layer {
  position: absolute;
  top: -25%; 
  left: -25%;
  width: 150%;
  height: 150%;
  pointer-events: none;
  touch-action: none; /* Tells browser this layer isn't for scrolling */
  background-repeat: repeat;
  /* High-density particle map */
  background-image: 
    radial-gradient(1.2px 1.2px at 15% 15%, currentColor 100%, transparent),
    radial-gradient(1px 1px at 35% 45%, currentColor 100%, transparent),
    radial-gradient(1.8px 1.8px at 55% 85%, currentColor 100%, transparent),
    radial-gradient(1.2px 1.2px at 85% 25%, currentColor 100%, transparent),
    radial-gradient(1px 1px at 25% 75%, currentColor 100%, transparent),
    radial-gradient(1.5px 1.5px at 70% 50%, currentColor 100%, transparent);
  will-change: transform;
  /* Removed max-width: 100vw; - letting body overflow-x: hidden handle the cropping naturally */
  z-index: -1; /* Ensure it defaults behind if not overridden */
}

/* LAYER 1: Deep Background (Slowest, smallest, dimmest) */
.p-layer-1 {
  z-index: -2;
  opacity: 0.2;
  background-size: 250px 250px;
  animation: drift-1 70s ease-in-out infinite alternate;
}

/* LAYER 2: Mid Background (Moderate speed) */
.p-layer-2 {
  z-index: -1;
  opacity: 0.25;
  background-size: 420px 420px;
  animation: drift-2 55s ease-in-out infinite alternate-reverse;
}

/* LAYER 3: Close Foreground (Faster, larger) */
.p-layer-3 {
  z-index: 1;
  opacity: 0.3;
  background-size: 680px 680px;
  animation: drift-1 42s ease-in-out infinite alternate-reverse;
}

/* LAYER 4: Very Close (Fastest, largest, boldest) */
.p-layer-4 {
  z-index: 2;
  opacity: 0.45;
  background-size: 700px 700px;
  animation: drift-2 21s ease-in-out infinite alternate;
}

/* LAYER 5: Extreme Foreground (16% larger than Layer 4) */
.p-layer-5 {
  z-index: 20;
  opacity: 0.55;
  background-size: 996px 996px; /* INCREASE this for larger particles */
  /* Using the new 3rd drift variant */
  animation: drift-3 18s ease-in-out infinite alternate;
}
      
/* Two distinct paths so layers don't just follow each other */
@keyframes drift-1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(2%, -4%) rotate(0.5deg); }
  100% { transform: translate(-3%, -8%) rotate(-1deg); }
}

@keyframes drift-2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-4%, 2%) rotate(-0.54deg); }
  100% { transform: translate(2%, 6%) rotate(1deg); }
}

@keyframes drift-3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(3%, 2%) rotate(0.3deg); }
  66%  { transform: translate(-2%, 4%) rotate(-0.6deg); }
  100% { transform: translate(1%, -5%) rotate(0.2deg); }
}

/* NEW: 4th distinct path for the 6th layer */
@keyframes drift-4 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-3%, -2%) rotate(0.4deg); }
  50%  { transform: translate(4%, 3%) rotate(-0.2deg); }
  75%  { transform: translate(-2%, -5%) rotate(0.6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* LAYER 6: Ultra Foreground (16% larger than Layer 5) */
.p-layer-6 {
  z-index: 25; /* Higher than Layer 5's z-index of 20 */
  opacity: 0.65;
  background-size: 1255px 1255px; /* 996px * 1.16 */
  /* Faster than Layer 5 (18s) to enhance parallax speed */
  animation: drift-4 24s ease-in-out infinite alternate;
}
      
/* LAYER 6: Ultra Foreground (16% larger than Layer 5) */
.p-layer-7 {
  z-index: 29; /* Higher than Layer 5's z-index of 20 */
  opacity: 0.8;
  background-size: 1455px 1455px; /* 996px * 1.16 */
  /* Faster than Layer 5 (18s) to enhance parallax speed */
  animation: drift-1 22s ease-in-out infinite alternate;
}
      
/* Colors based on theme */
.dark .particles-layer { color: rgba(255, 255, 255, 0.8); }
html:not(.dark) .particles-layer { color: rgba(0, 0, 0, 0.4); }



.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 */
}