/* GLASS REFRACT — true backdrop blur inside glyphs (no colored fill) */
.hero-title { 
  position: relative;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.25));
}

.hero-title > .massive-title{
  position: relative;
  display: inline-block;
  line-height: 1.05;
  letter-spacing: .015em;
  font-weight: 800;

  /* ensure the original text itself is invisible */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* This layer does the work: it blurs/saturates what's BEHIND the text */
.hero-title > .massive-title::before{
  content: attr(data-text);
  position: absolute; inset: 0; pointer-events: none;

  /* clip the pseudo-element to the text glyphs */
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;

  /* tiny paint so the element exists for backdrop-filter */
  background: rgba(255,255,255, .02);

  /* refract the backdrop */
  -webkit-backdrop-filter: blur(12px) saturate(1.35) contrast(1.08) brightness(1.06);
  backdrop-filter: blur(12px) saturate(1.35) contrast(1.08) brightness(1.06);

  /* soft depth, no borders */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* thin specular sweep (optional, subtle) */
.hero-title > .massive-title::after{
  content: attr(data-text);
  position: absolute; inset: 0; pointer-events: none;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(80deg, rgba(255,255,255,.95) 10%, rgba(255,255,255,0) 28%) no-repeat;
  background-size: 14% 100%; background-position: -14% 0;
  mix-blend-mode: screen; opacity: .55; filter: blur(.5px);
  animation: glassSweep 4s ease-in-out infinite;
}

@keyframes glassSweep{
  0%  { background-position: -14% 0; }
  50% { background-position: 114% 0; }
  100%{ background-position: 114% 0; }
}

/* Fallback for browsers without backdrop-filter: use minimal holographic fill */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .hero-title > .massive-title::before{
    background: conic-gradient(from 0deg,
      rgba(220,240,255,.75) 0%,
      rgba(200,225,255,.6) 30%,
      rgba(190,255,245,.65) 60%,
      rgba(210,200,255,.6) 90%,
      rgba(220,240,255,.75) 100%);
  }
}

/* GLASS TEXT (SVG mask approach) */
.hero-title { position: relative; display: inline-block; }
.glass-svg { display:block; }
.hero-title .sr-only{
  position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Optional: outside depth but no inner color cast */
.hero-title{ filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); }

/* Title size the SVG mirrors (controls “how big is the text”) */
.hero-title{
  display:inline-block;
  font-size: clamp(44px, 6.5vw, 80px);  /* SMALLER upper bound than before */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.25));
}
.glass-svg{ display:block; }
.hero-title .sr-only{
  position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* was: mix-blend-mode: screen; */
.glass-svg #edgeLightText {
  mix-blend-mode: screen;
  opacity: .55; /* tweak .35–.65 to taste */
}

/* Let the bright base “shine” through the header overlay */
.glass-svg #glassBrightImg{
  mix-blend-mode: screen; /* key to re-brighten only inside the glyphs */
  opacity: 0.95;           /* tune 0.75–1.0 to taste */
}

/* kill the baked-in image fill so letters are transparent */
.glass-svg #glassBrightImg,
.glass-svg #glassMainImg,
.glass-svg #glassEdgeImg {
  display: none;
}




/* The blur "window" that sits behind the SVG */
.hero-title{ position:relative; display:inline-block; }

/* size + clip to text */
.hero-title .massive-title{
  position:relative;
  display:inline-block;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  /* tiny paint so the element exists for backdrop-filter */
  background: rgba(255,255,255,.02);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.25));
}

/* actual glass: blur/brighten what’s BEHIND the text */
.hero-title .massive-title::before{
  content: attr(data-text);
  position: absolute; inset: 0; pointer-events: none;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background: rgba(255,255,255,.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.25) contrast(1.06) brightness(1.08);
  backdrop-filter: blur(10px) saturate(1.25) contrast(1.06) brightness(1.08);
}

/* animated specular sweep (soft, screen-blended) */
.hero-title .massive-title::after{
  content: attr(data-text);
  position: absolute; inset: 0; pointer-events: none;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(78deg, rgba(255,255,255,.95) 12%, rgba(255,255,255,0) 32%) no-repeat;
  background-size: 12% 100%;
  background-position: -14% 0;
  mix-blend-mode: screen;
  opacity: .55;
  filter: blur(.4px);
  animation: glassSweep 4s ease-in-out infinite;
}

@keyframes glassSweep{
  0%  { background-position: -14% 0; }
  50% { background-position: 114% 0; }
  100%{ background-position: 114% 0; }
}

/* put the SVG highlight stack on top of the blur layer */
.glass-svg{ 
  position: absolute; 
  left: 50%; 
  top: 0; 
  transform: translateX(-50%); 
  display: block; 
  pointer-events: none; 
}







/* Enhancements for Gnosis33 website */
/* Subtle film/scanline broadcast overlay */
.film{ position:fixed; inset:0; pointer-events:none; z-index:1;
       background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 2px);
       mix-blend-mode: overlay; opacity:.50; }

/* Timeline fill enhancement: uses --progress set by JS */
.timeline{ position:relative; }
.timeline::before{
  content: "";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:2px; height:100%; border-radius:2px;
  background: linear-gradient(#33ccff 0 0) 0/100% var(--progress,0%) no-repeat, rgba(51,204,255,.25);
}

/* Accessibility: respect Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .massive-title{ animation:none; filter:none; }
  .film{ display:none; }
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(28px, 4.5vw, 60px); /* Much smaller on mobile */
    max-width: 100vw; /* Prevent horizontal overflow */
    overflow: visible; /* Allow content to show */
    display: inline-block; /* Ensure it displays */
    text-shadow: 
      -1px -1px 0 #000,
       1px -1px 0 #000,
      -1px  1px 0 #000,
       1px  1px 0 #000,
       0px -1px 0 #000,
       0px  1px 0 #000,
      -1px  0px 0 #000,
       1px  0px 0 #000; /* Thin black outline for mobile readability */
  }
  
  .glass-svg {
    max-width: 100vw; /* Prevent SVG from being wider than viewport */
    overflow: visible; /* Allow content to show */
    display: block; /* Ensure SVG displays */
  }
  
  /* Ensure the hero title container doesn't cause horizontal scroll */
  .header .container {
    overflow: visible;
    max-width: 100vw;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(24px, 4vw, 50px); /* Even smaller on very small devices */
    display: inline-block !important; /* Force display */
  }
}

/* Debug: Ensure hero title is always visible */
.hero-title {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure SVG is visible */
.glass-svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fallback: Show the screen reader text if SVG fails */
@media (max-width: 768px) {
  .hero-title .sr-only {
    position: static !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    color: white !important;
    font-size: clamp(28px, 4.5vw, 60px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    display: block !important;
    text-shadow: 
      -1px -1px 0 #000,
       1px -1px 0 #000,
      -1px  1px 0 #000,
       1px  1px 0 #000,
       0px -1px 0 #000,
       0px  1px 0 #000,
      -1px  0px 0 #000,
       1px  0px 0 #000; /* Thin black outline */
  }
}