@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap');
@import url('styleMobMenuOverlay.css');
@import url('styleThemeSlider.css');
@import url('styleGtranslate.css');
@import url('styleMenuHam.css');
@import url('styleMenuDropdown.css');
@import url('stylebackGndparticles.css');
@import url('stylebackGndparticlesJustFireFunc.css');
@import url('styleModalLoginUnderConst.css');


/* NO tap highlights for buttons everywhere by default */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── AGGRESSIVE LONG-PRESS PREVENTION ── */
.top-nav a,
.top-nav button,
.nav-item,
.logo,
.nav-right a {
    /* Most aggressive - completely disables touch gestures */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-callout: none;
    -webkit-tap-highlight-color: transparent;
    
    /* Prevent dragging */
    -webkit-user-drag: none;
}
/* ── PREVENT TEXT SELECTION AND LONG-PRESS HIGHLIGHTING ON MOBILE ── */
/* This applies to ALL interactive elements */
* {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Specifically target mobile menu elements */
.mobile-menu-overlay *,
.mob-panel-root *,
.mob-submenu *,
.mob-drill,
.mob-close,
.mob-panel-root a,
.mob-submenu a {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  touch-action: manipulation !important;
}

/* Prevent text selection on any interactive element */
a, button, .nav-item, .dropdown, .mob-drill, .mob-close {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Override any potential text selection */
::selection {
  background: transparent !important;
}

/* For Firefox */
::-moz-selection {
  background: transparent !important;
}

  


:root {
  --bg: #000;
  --bgPortf: #000;
  --text: #eaeaea;
  --text1: #b4c1ca;
  --text2: #c4c5c6;
  --text3: #c4c5c6ba;
  
  --accent: #888;
  --overlay1: rgba(0,0,0,0.1);
  --overlay2: rgba(0,0,0,0.2);
  --overlay3: rgba(0,0,0,0.3);
  --overlay4: rgba(0,0,0,0.4);
  --overlay5: rgba(0,0,0,0.5);
  --overlay6: rgba(0,0,0,0.6);
  --overlay7: rgba(0,0,0,0.7);
  --overlay8: rgba(0,0,0,0.8);
  --overlay9: rgba(0,0,0,0.9);

  --overlay2b: rgba(1, 177, 253, 0.2);

  --overlay1g: rgba(72, 224, 235, 0.058);
  --overlay2g: rgba(1, 253, 236, 0.2);
  --overlay6g: rgba(1, 253, 232, 0.6);

  --overlay3g1: rgba(47, 134, 158, 0.3);
  --overlay3g2: rgba(40, 73, 84, 0.969);

  /*color: rgb(58, 107, 120); */
}







/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ELEGANT TYPOGRAPHY SCALE */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  letter-spacing: 0.02em;
}
/* BODY */
body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}


.top-nav {
  display: flex;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px 30px;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  
  /* OPTIMIZED: Solid background instead of semi-transparent + blur */
  background: rgba(0, 0, 0, 0.55); /* More opaque = less blending work */
  
  /* OPTIMIZED: Remove or reduce blur - most expensive operation */
  /* backdrop-filter: blur(10px); */ /* DISABLED - MAIN CULPRIT */
  /* -webkit-backdrop-filter: blur(10px); */ /* DISABLED */
  
  /* OPTIMIZED: Less transparent border = less compositing */
  border-bottom: 1px solid rgba(0, 81, 255, 0.08); /* Reduced alpha from 0.136 */
  
  /* OPTIMIZED: Only use will-change if absolutely needed */
  /* will-change: transform; */ /* REMOVED - not animating */
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-right {
  display: flex;
  /* align-items: stretch; */
  position: relative;
  /* border: dotted red 1px; */
  right: 3%;

}
.nav-right a{
  margin-left: 25px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  opacity: 0.8;
  transition: 0.3s;
}
.nav-right a:hover{
  opacity: 1;
}

.logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text);
  opacity: 0.8;
  transition: 0.3s;
  text-decoration: none;
  }

.logo:hover{
   opacity: 1;
}


/* Hovering Bridge between main menu and Dropdown submenu */
.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;   
  width: 100%;
  height: 20px;
}

.dropdown-arrow {
  font-size: 0.8rem;
  opacity: 0.6;
  transition: transform 0.4s ease, opacity 0.2s ease;
  margin-left: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Rotate arrow when hovering over nav item */
.nav-item:hover .dropdown-arrow {
  transform: rotate(-0.5turn);
  opacity: 1;
}

/* Adjust nav-item to properly align items */
.nav-item {
  display: flex;
  align-items: center;
  position: relative;
  gap: 0px;
}


/* Stop When hovering stop 'flashing' of underline */
.nav-item a{
  text-decoration:none;
  text-decoration-color: transparent;

}
.nav-item > a {
  display: flex;
  align-items: center;
  height: 100%;
  /* padding: 0 5px; */
  padding: 0;  /*  0 2px 0 5px Adjusted padding - right padding reduced */
  color: var(--text);
  font-size: 0.9rem;
  opacity: 0.8;
  transition: 0.3s;
}


/* LANDING */
.landing {
  height: 100vh; /*fallback for older browsers..*/
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;

  /* Base dark gradient  -- Fix background to work with themeSlider, then check pf..*/
  background: 
  radial-gradient(circle at 50% 40%, rgba(60, 80, 120, 0.25), transparent 60%),
  radial-gradient(circle at 80% 70%, rgba(120, 60, 160, 0.15), transparent 70%)
              ,
              linear-gradient(180deg, #050505 0%, #000000 100%)
              
              ;

            }
.landing::before {
  pointer-events: none;   /* 👈 THIS FIXES YOUR INTERACTIONS */ 
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(39, 39, 48, 0.08), transparent 70%);
  animation: slowMove 20s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes slowMove {
  0% {
    transform: translate(-100%, -100%);
  }
  100% {
    transform: translate(100%, 100%);
  }
}

/* .content class\Div of .landing class\section */
  .content {
    display:initial;
 
    position: relative;
    z-index: 2;
  }
  .content h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.1;
  }
  .content p {
    margin-top: 10px;
    /* color: var(--accent); */
  }

/* BUTTONS */
  .buttons {
    margin-top: 30px;
  }
  
  button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background: var(--text);
    color: var(--bg);
    cursor: pointer;
    transition: 0.3s;
    border-radius: 3px;
  }
  
  button.secondary {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
  }
  
  button:hover {
    opacity: 0.8;
  }


/* tap highlight specifically JustFireF with stronger feedback */
/* button#JustFireF {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0.4); 
  transition: transform 0.5s ease !important;
} */
   
/* Just Fireflies — elegant 3D neumorphic button with dark background */
button#JustFireF {
  display: block;
  width: calc(100% - 36px);
  margin: 6px 18px 4px;
  padding: 8px 0;
  
  /* Dark background — stays dark regardless of theme */
  /* background: linear-gradient(to top, rgba(10, 12, 18, 0.95), rgba(18, 20, 28, 0.90) 80%, rgba(25, 28, 36, 0.85)); */
    /* background: linear-gradient(to top, rgba(10, 12, 18, 0.95), rgba(112, 127, 184, 0.9) 80%, rgba(178, 170, 62, 0.85)); */

  /* Text color uses CSS variable for theme support */
  /* color: var( --text ); */
  color: var(--text1, rgba(235, 240, 248, 0.895));
  /* color:   rgba(235, 240, 248, 0.895) ; */
 
  /* Subtle border — slightly visible, uses variable for theme */
  border: 1px solid rgba(180, 190, 210, 0.12);
  border-radius: 30px;
  
  /* 3D neumorphic shadows — subtle and dark */
  box-shadow: 
    0 4px 3px 1px rgba(0, 0, 0, 0.35),
    0 6px 8px rgba(0, 0, 0, 0.45),
    0 -4px 4px rgba(40, 45, 60, 0.06),
    0 -6px 4px rgba(20, 22, 30, 0.04),
    inset 0 0 3px 0 rgba(60, 70, 90, 0.06);
  
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  
  cursor: pointer;

    /* DELETE THIS LINE - conflicts with animation */
  /* transition: all 0.25s ease; */
    /* ✅ ADD THIS — GPU acceleration for mobile */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;



  /* Prevent text selection */
  -webkit-user-select: none;
  user-select: none;
}

/* ── Hover state ── */
button#JustFireF:hover {
  /* Text becomes brighter on hover */
  color: var(--text, rgba(235, 240, 248, 0.95));
  border-color: rgba(180, 190, 210, 0.2);
  
  box-shadow: 
    0 4px 3px 1px rgba(0, 0, 0, 0.35),
    0 6px 8px rgba(0, 0, 0, 0.45),
    0 -4px 4px rgba(40, 45, 60, 0.06),
    0 -6px 4px rgba(20, 22, 30, 0.04),
    inset 0 0 3px 3px rgba(60, 70, 90, 0.05);
  
  /* background: linear-gradient(to top, rgba(14, 16, 24, 0.95), rgba(22, 25, 34, 0.90) 80%, rgba(30, 34, 44, 0.85)); */
}

/* ── Active (pressed) state ── */
button#JustFireF:active {
  transform: scale(0.96) !important;
  opacity: 0.95 !important;
  
  box-shadow: 
    0 2px 2px 0px rgba(0, 0, 0, 0.45),
    0 3px 4px rgba(0, 0, 0, 0.55),
    0 -2px 2px rgba(40, 45, 60, 0.03),
    0 -3px 2px rgba(20, 22, 30, 0.03),
    inset 0 0 5px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
  
  background: linear-gradient(to bottom, 
             rgba(14, 16, 24, 0.98),
             rgba(20, 22, 32, 0.95)) !important;
             
  
  transition: all 0.1s ease !important;
}

/* ── Focus state (keyboard navigation) ── */
button#JustFireF:focus-visible {
  outline: 2px solid rgba(140, 180, 255, 0.25);
  outline-offset: 3px;
}

/* Prevent text selection on non-button elements */
.logo, .mob-panel-title, [class*="-icon"] {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Light theme — only text and border adjust ── */
body[data-theme="light"] button#JustFireF {
  /* Background stays dark — unchanged */
   background: linear-gradient(0.50turn, rgba(8, 75, 103, 0.21),rgba(15, 135, 179, 0.33), rgba(8, 74, 103, 0.21));
   background-repeat: no-repeat;
   border-radius: 30px;

  /* Text becomes darker for light theme readability */
  /* color: rgba(180, 190, 210, 0.9); */
  /* color: var(--text, rgba(235, 240, 248, 0.60)); */
  /* Border slightly more visible on light background */
  border-color: rgba(175, 181, 95, 0.415);
  
  /* Shadows adjust slightly for light background context */
  box-shadow: 
    0 4px 3px 1px rgba(0, 0, 0, 0.3),
    0 6px 8px rgba(0, 0, 0, 0.4),
    0 -4px 4px rgba(40, 45, 60, 0.04),
    0 -6px 4px rgba(20, 22, 30, 0.03),
    inset 0 0 3px 0 rgba(60, 70, 90, 0.04);
}

body[data-theme="light"] button#JustFireF:hover {
  /* color: var(--text, rgba(235, 240, 248, 0.60)); */
  border-color: rgba(228, 230, 85, 0.629);
  
  box-shadow: 
    0 4px 3px 1px rgba(0, 0, 0, 0.3),
    0 6px 8px rgba(0, 0, 0, 0.4),
    0 -4px 4px rgba(40, 45, 60, 0.04),
    0 -6px 4px rgba(20, 22, 30, 0.03),
    inset 0 0 3px 3px rgba(60, 70, 90, 0.04);
  
  /* background: linear-gradient(to top, rgba(14, 16, 24, 0.95), rgba(22, 25, 34, 0.90) 80%, rgba(30, 34, 44, 0.85)); */
     background: linear-gradient(0.50turn, rgba(8, 74, 103, 0.347),rgba(179, 171, 15, 0.33), rgba(8, 74, 103, 0.347));
    background-repeat: no-repeat;
    border-radius: 30px;
}

body[data-theme="dark"] button#JustFireF {
  /* Background stays dark — unchanged */
   background: linear-gradient(0.50turn, rgba(12, 92, 126, 0.286),rgba(8, 57, 75, 0.33), rgba(12, 92, 126, 0.286));
}
/* Unified Active state — applies to both themes */

body[data-theme="light"] button#JustFireF:active,
body[data-theme="dark"] button#JustFireF:active {
  transform: scale(0.96) !important;
  opacity: 0.95 !important;
  
  box-shadow: 
    0 2px 2px 0px rgba(0, 0, 0, 0.45),
    0 3px 4px rgba(0, 0, 0, 0.55),
    0 -2px 2px rgba(40, 45, 60, 0.03),
    0 -3px 2px rgba(20, 22, 30, 0.03),
    inset 0 0 5px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
  
  transition: all 0.1s ease !important;
}


      .firefly {
      position: absolute;
      border-radius: 50%;
      will-change: transform, opacity;
      transform: translateZ(0);
      contain: strict;
    }
  
/* Hide Just Fireflies button with visibility hidden (preserves space)  */
#JustFireF.hidden {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}




/* ── Firefly Mode Button Press Animation ── */
@keyframes fireflyPressEffect {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    20% {
        transform: scale(0.96);
        opacity: 0.95;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* CONSOLIDATED RULE — KEEP !IMPORTANT FOR RELIABILITY */
body.firefly-mode-active button#JustFireF {
    -webkit-animation: fireflyPressEffect 0.35s ease forwards;
    animation: fireflyPressEffect 0.35s ease forwards ;
    /* pointer-events: auto ; */
    z-index: 9999 ;
    position: relative ;
    will-change: transform, opacity ;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}



/*  SINGLE CONSOLIDATED RULE FOR ALL DEVICES */
body.firefly-mode-active {
    pointer-events: none ;
}

 






/* Keep focus visible for keyboard navigation (accessibility) */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(140, 180, 255, 0.3);
  outline-offset: 2px;
}



#attribution { 
  /* display: flexbox; */
  position: relative;
  text-align: center;
  margin-top: -4vh/*move onto Landing Page*/;
  font-size: 14px; 
  

  color: rgba(74, 92, 130, 0.466);
}


/* Mobile */
 /* @media (max-width: 768px) { */

  


    @media (max-width: 875px) {
/* Show hamburger menu only on mobile */
  .hamburger {
    display: flex;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    /* Hardware acceleration for smoother animation */
    will-change: transform;
  }

  /* Disable nav-right */
    .nav-right {
    display: none;
    }

  .top-nav {
  display:flex ;
  position:fixed;
  /* width: 100%; */
  padding: 12px 28px; /* padding: 15px 30px; */
  /* justify-content: space-between; */
  /* align-items: center; */
  /* z-index: 1000; */
  ;

  background: none;
  backdrop-filter: blur(10px);
  /* Reduce backdrop filter on mobile for performance */
  -webkit-backdrop-filter: blur(10px);

}

  .gtranslate_wrapper {
    /* display: none; */
    /* top: 45px;
    left: 22px; */
  top: 17px;
  left: 45%;
  /* Prevent unnecessary repaints */
 will-change: opacity;

    }


  .theme-control {
  display: flex;
  position: absolute;
    top: 48px;
    left: 3.5vw;
  }
    .mobile-menu-overlay {
  display: flex;
  }

    /* Prevent scroll issues when menu is open */
  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }


  .mobile-menu-content a {
    font-size: 1.5rem;
    margin: 20px 0;
  } 
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
  button#JustFireF {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    padding: 10px 0;
    width: calc(100% - 28px);
    margin: 4px 14px 4px;
    
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: transform;
  }
  
 
  
  /* Unified :active state */
  button#JustFireF:active {
    transform: scale(0.96) !important;
    box-shadow: 
      0 2px 2px 0px rgba(0, 0, 0, 0.45),
      0 3px 4px rgba(0, 0, 0, 0.55),
      inset 0 0 5px 3px rgba(0, 0, 0, 0.5),
      inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
  }
  
  body[data-theme="dark"] button#JustFireF:active {
    transform: scale(0.96) !important;
    box-shadow: 
      0 2px 2px 0px rgba(0, 0, 0, 0.45),
      0 3px 4px rgba(0, 0, 0, 0.55),
      inset 0 0 5px 3px rgba(0, 0, 0, 0.5),
      inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
  }
  
  body[data-theme="light"] button#JustFireF:active {
    box-shadow: 
      0 2px 2px 0px rgba(0, 0, 0, 0.4),
      0 3px 4px rgba(0, 0, 0, 0.5),
      inset 0 0 5px 3px rgba(0, 0, 0, 0.5),
      inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
  }
}

  @media (max-width: 760px) { 
   .theme-control { 
    left: 4.5vw; }
     }
       @media (max-width: 760px) { 
   .theme-control { 
    left: 5.5vw; }
     }