@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "neue-haas-grotesk-text", sans-serif;
  /* Setup default sans */
  background-color: #000;
  color: #fff;
  /* scroll-snap-type: y mandatory; */
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

section {
  scroll-snap-align: start;
}

/* ... existing h1 styles ... */


h1 {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  line-height: 1;
}

a,
p {
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 550;
  line-height: 1;
  display: inline-block;
}



#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Let clicks pass through */
  z-index: 0;
  /* Behind text */
}

/* DESKTOP HERO */
.hero-desktop {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  z-index: 10;
  /* Above next-section */
  background: transparent;
  /* Ensure we can see through it when canvas fades */
  display: block;
}

@media (max-width: 768px) {
  .hero-desktop {
    display: none;
  }
}

.hero-mobile {
  display: none;
  /* Default hidden */
}

@media (max-width: 768px) {
  .hero-mobile {
    display: block;
    position: relative;
    width: 100%;
    height: 100svh;
    /* Occupy full screen */
    overflow: hidden;
    z-index: 10;
  }
}

/* Updated selector for desktop */
.hero-desktop img#glassTexture {
  display: none;
}

.hero-mobile-bg {
  display: none;
  /* Hide by default on desktop */
}

.hero-text-top {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-style: italic;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}

.hero-text-top p {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 400;
  display: block;
}

.hero-text-bottom {
  position: absolute;
  bottom: 0%;
  /* Changed from 10% to fill bottom better */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Stack title and tagline */
  justify-content: flex-end;
  align-items: center;
  /* Align bottom */
  /* mix-blend-mode: exclusion !important; */
  opacity: 90% !important;
  text-align: center;
  pointer-events: none;
  z-index: 10;
  padding-bottom: 4vh;
  /* Added padding back as requested */
  /* mix-blend-mode: exclusion; */
  /* A bit of bottom padding */
}

.title-container {
  width: 100%;
  padding: 0;
  /* Remove padding to maximize width */
  display: block;
  /* Flex center implies centering, block allows text-align to work better with large fonts or just full width */
  text-align: center;
  font-family: "aabak", serif;
  font-style: italic;
  font-size: 16vw;
  letter-spacing: 0.12em;
  line-height: 0.8;
  color: #fff;
  text-transform: uppercase;
}



@media (max-width: 1000px) {
  .title-container {
    font-size: 13.5vw;
    /* Keep consistent scale */
  }
}

@media (max-width: 768px) {
  /* Mobile Responsiveness - 60:40 Split Layout */

  .hero {
    background-color: #000;
    /* Fallback */
  }

  /* REMOVE OLD MOBILE CSS in favor of .hero-mobile specific styles below */
}

/* MOBILE SPECIFIC STYLES */
@media (max-width: 768px) {

  /* Canvas positioning via #canvas-container for mobile */
  canvas {
    top: 0 !important;
    height: 65vh !important;
    z-index: 1;
  }

  /* Helper BG inside .hero-mobile */
  .hero-mobile-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45vh;
    /* Bottom 45% */
    background-color: #000;
    z-index: 5;
    /* On top of canvas bottom edge */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
    pointer-events: none;
  }

  .mobile-header {
    position: absolute;
    top: 70vh;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .title-container-mobile {
    font-family: "aabak", serif;
    font-style: italic;
    font-size: 13.5vw;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-bottom: 1vh;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
  }

  .hero-tagline-mobile {
    font-family: "neue-haas-grotesk-text", sans-serif;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2em;
    font-size: 2.2vw;
    width: 100%;
    text-align: center;
  }

  .mobile-body {
    position: absolute;
    bottom: auto;
    top: 82vh;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-body p {
    font-size: 1.25rem;
    font-style: italic;
    /* Larger */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
  }
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Preloader Styles */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.preloader-text {
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-size: 15vw;
  /* Responsive base size */
  font-weight: 500;
  font-style: italic;
  opacity: 0;
  /* Hidden by default, animated by GSAP */
  position: relative;
  z-index: 10001;
  text-align: center;
}

@media (min-width: 768px) {
  .preloader-text {
    font-size: 6rem;
    /* Cap size on desktop */
  }
}

.blind-bars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 10000;
  pointer-events: none;
}

.bar {
  flex: 1;
  height: 100%;
  background-color: #0499FF;
  transform: scaleY(0);
  /* Start hidden */
  transform-origin: top;
  /* Animate from top */
}

/* Typography Refinements */
.serif-e {
  font-family: "campaign-serif", serif;
  font-style: italic;
  font-weight: 400;
}

.asterisk {
  vertical-align: super;
  font-style: normal;
  font-size: 0.8em;
  color: #0499FF;
  /* White asterisk */
  /* margin-left: 2px; */
}

.hero-title {
  font-family: "aabak", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.hero-tagline {
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.32em;
  padding-bottom: 0.25vh;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.15rem;
  /* Reduced gap */
  /* Spacing below title */
  width: 100%;
  text-align: center;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  /* Animated in by GSAP */
}


/* Removed @keyframes fadeInTagline */

.next-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  z-index: 1;
  /* Behind Hero */
}

/* Noise Texture Overlay */
.next-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  /* Subtle noise */
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

.next-section .content {
  text-align: center;
  z-index: 2;
  position: relative;
  opacity: 0;
  /* Hidden initially, faded in by GSAP */
  transform: translateY(20px);
  /* Slight slide up effect */
}

/* Removed @keyframes gradientBG */