/* ============================================================================
   NEONGRID CSS FRAMEWORK
   Organized following BEM methodology and mobile-first approach
   ============================================================================ */

/* ============================================================================
   1. CSS RESET & BASE STYLES
   ============================================================================ */

/* CSS Box Model Reset */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Desktop: constrain and enable interaction for face particles within hero */
@media (min-width: 768px) {
  #particle-image {
    position: relative;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
  }

  #particle-image .face-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  #particle-image .face-particles .scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }

  .section.first-content {
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  .container.flex-horizontal.hero {
    position: relative;
    z-index: 2;
    pointer-events: none;
  }

  .container.flex-horizontal.hero a,
  .container.flex-horizontal.hero button,
  .container.flex-horizontal.hero [role="button"],
  .container.flex-horizontal.hero .text-card,
  .container.flex-horizontal.hero .scroll-down {
    pointer-events: auto;
  }
}

/* HTML base styles */
html {
  min-height: 100%;
  font-size: 1rem;
  height: auto;
}

html.lenis {
  height: auto;
}

/* Body base styles with performance optimizations */
body {
  background-color: var(--theme--background);
  font-family: var(--text-main--font-family);
  color: var(--theme--text);
  font-size: var(--text-main--font-size);
  line-height: var(--text-main--line-height);
  letter-spacing: var(--text-main--letter-spacing);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

/* ============================================================================
   2. FONT DECLARATIONS
   ============================================================================ */

@font-face {
  font-family: Xirod;
  src: url("../fonts/Xirod-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aldone light";
  src: url("../fonts/Aldone-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aldone";
  src: url("../fonts/Aldone-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tx 02";
  src: url("../fonts/TX-02-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tx 02";
  src: url("../fonts/TX-02-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tx 02";
  src: url("../fonts/TX-02-SemiLight.woff2") format("woff2"),
    url("../fonts/TX-02-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tx 02";
  src: url("../fonts/TX-02-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tx 02";
  src: url("../fonts/TX-02-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tx 02";
  src: url("../fonts/TX-02-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tx 02";
  src: url("../fonts/TX-02-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --theme--background: var(--swatch--dark);
  --text-main--font-family: var(--font--primary-family);
  --theme--text: var(--swatch--light);
  --text-main--font-size: 1rem;
  --text-main--line-height: var(--line-height--1-4em);
  --text-main--letter-spacing: var(--letter-spacing--0-1em);
  --display--font-family: var(--all-headings--heading-font-family);
  --swatch--dark: #000;
  --display--line-height: var(--all-headings--heading-line-height);
  --display--letter-spacing: var(--all-headings--heading-letter-spacing);
  --h1--font-family: var(--all-headings--heading-font-family);
  --h1--font-size: var(--size--11rem);
  --h1--line-height: var(--all-headings--heading-line-height);
  --h1--letter-spacing: var(--all-headings--heading-letter-spacing);
  --all-headings--color: var(--button--text);
  --h2--font-family: var(--all-headings--heading-font-family);
  --h2--font-size: var(--size--6rem);
  --h2--line-height: var(--all-headings--heading-line-height);
  --h2--letter-spacing: var(--all-headings--heading-letter-spacing);
  --all-headings--heading-font-family: var(--font--display-family);
  --swatch--brand: #e6c000;
  --size--4-5rem: 4.5rem;
  --h3--line-height: var(--line-height--0-9em);
  --h3--letter-spacing: var(--all-headings--heading-letter-spacing);
  --size--5rem: 5rem;
  --size--3-5rem: 3.5rem;
  --button--text: var(--theme--text);
  --h4--font-family: var(--all-headings--heading-font-family);
  --h4--font-size: var(--size--4rem);
  --h4--line-height: var(--line-height--1-3em);
  --h4--letter-spacing: var(--letter-spacing--0em);
  --size--2rem: 2rem;
  --h5--font-family: var(--all-headings--heading-font-family);
  --h5--font-size: var(--size--1-5rem);
  --h5--line-height: var(--line-height--1-3em);
  --h5--letter-spacing: var(--letter-spacing--0em);
  --h6--font-family: var(--all-headings--heading-font-family);
  --h6--font-size: var(--size--1-5rem);
  --h6--line-height: var(--line-height--1em);
  --h6--letter-spacing: var(--letter-spacing--0em);
  --font--primary-family: "Aldone light", sans-serif;
  --space--small: var(--size--1-5rem);
  --border-width--main: 0.2px;
  --theme--border: var(--swatch--dark-secondary);
  --radius--main: 1rem;
  --space--large: var(--size--4rem);
  --space--medium: var(--size--3rem);
  --size--0-5rem: 0.5rem;
  --radius--small: 0.3rem;
  --line-height--1em: 1em;
  --space--extra-small: var(--size--0-4rem);
  --font--secondary-family: "Tx 02", "Trebuchet MS", sans-serif;
  --swatch--transparent: #fff0;
  --size--1-5rem: 1.5rem;
  --radius--round: 100vw;
  --size--3rem: 3rem;
  --text-large--font-size: var(--size--4rem);
  --text-large--line-height: var(--line-height--4em);
  --button--background-hover: var(--swatch--berlin);
  --size--0-8rem: 0.8rem;
  --h3--font-family: var(--all-headings--heading-font-family);
  --h3--font-size: var(--size--4-5rem);
  --size--1-25rem: 1.25rem;
  --size--0-25rem: 0.25rem;
  --size--1rem: 1rem;
  --text-large--font-family: var(--font--secondary-family);
  --text-large--letter-spacing: var(--text-large--letter-spacing);
  --size--2-5rem: 2.5rem;
  --button--border: var(--swatch--dark-secondary);
  --button--border-hover: white;
  --button--background: var(--swatch--brand);
  --button--text-hover: var(--button--text);
  --size--0-85rem: 0.85rem;
  --text-small--line-height: var(--line-height--1-5em);
  --text-small--letter-spacing: var(--letter-spacing--0-1em);
  --padding-vertical--small: var(--size--5rem);
  --size--6rem: 6rem;
  --grid-gap--main: 1rem;
  --size--0rem: 0rem;
  --padding-horizontal--main: 3rem;
  --font--display-family: Xirod, Verdana, sans-serif;
  --display--font-size: var(--size--12rem);
  --swatch--deep-night: #050505;
  --swatch--light: #fff;
  --swatch--dark-secondary: #dadada;
  --size--4rem: 4rem;
  --size--0-4rem: 0.4rem;
  --line-height--0-8em: 0.8em;
  --normal: 400;
  --size--0-7rem: 0.7rem;
  --line-height--0-7em: 0.7em;
  --swatch--light-secondary: #eee;
  --swatch--brand-text: var(--swatch--dark);
  --swatch--berlin: #ff6200;
  --swatch--grey: #7c7c7c;
  --max-width--main: 90rem;
  --max-width--none: 100vw;
  --padding-vertical--none: var(--size--0rem);
  --padding-vertical--main: var(--size--7rem);
  --padding-vertical--large: var(--size--10rem);
  --svg-stroke-width--main: 1.5px;
  --all-headings--heading-font-weight: var(--font--primary-medium);
  --all-headings--heading-line-height: var(--line-height--0-8em);
  --all-headings--heading-letter-spacing: var(--letter-spacing--0em);
  --all-headings--heading-text-transform: var(--text-transform--uppercase);
  --display--font-weight: var(--all-headings--heading-font-weight);
  --display--text-transform: var(--all-headings--heading-text-transform);
  --display--color: var(--button--text);
  --h1--font-weight: var(--all-headings--heading-font-weight);
  --h1--text-transform: var(--all-headings--heading-text-transform);
  --h2--font-weight: var(--all-headings--heading-font-weight);
  --h2--text-transform: var(--all-headings--heading-text-transform);
  --h3--font-weight: var(--font--primary-regular);
  --h3--text-transform: var(--all-headings--heading-text-transform);
  --h4--font-weight: var(--all-headings--heading-font-weight);
  --h4--text-transform: var(--all-headings--heading-text-transform);
  --h5--font-weight: var(--all-headings--heading-font-weight);
  --h5--text-transform: var(--all-headings--heading-text-transform);
  --h6--font-weight: var(--all-headings--heading-font-weight);
  --h6--text-transform: var(--all-headings--heading-text-transform);
  --text-large--font-weight: var(--font--primary-light);
  --text-large--text-transform: var(--text-transform--uppercase);
  --text-main--font-weight: var(--font--primary-light);
  --text-main--text-transform: var(--text-transform--none);
  --text-small--font-size: var(--size--1rem);
  --text-small--font-family: var(--font--secondary-family);
  --text-small--font-weight: var(--font--primary-light);
  --text-small--text-transform: var(--text-transform--inherit);
  --text-tiny--font-family: var(--font--secondary-family);
  --text-tiny--font-size: var(--size--0-7rem);
  --text-tiny--text-transform: var(--text-transform--inherit);
  --font--primary-light: var(--font-weight--300);
  --font--primary-regular: var(--font-weight--400);
  --font--primary-medium: var(--font-weight--500);
  --font--primary-bold: var(--font-weight--700);
  --font-weight--inherit: 0px;
  --font-weight--100: 0px;
  --font-weight--200: 0px;
  --font-weight--300: 0px;
  --font-weight--400: 0px;
  --font-weight--500: 0px;
  --font-weight--600: 0px;
  --font-weight--700: 0px;
  --font-weight--800: 0px;
  --font-weight--900: 0px;
  --letter-spacing--0em: 0em;
  --letter-spacing--0-03em: -0.03em;
  --letter-spacing--0-1em: 0.1em;
  --line-height--1-5em: 1.5em;
  --line-height--1-4em: 1.4em;
  --line-height--1-3em: 1.3em;
  --line-height--1-1em: 1.1em;
  --line-height--0-9em: 0.9em;
  --size--0-125rem: 0.125rem;
  --size--0-6rem: 0.6rem;
  --size--0-9rem: 0.9rem;
  --size--5-5rem: 5.5rem;
  --size--6-5rem: 6.5rem;
  --size--7rem: 7rem;
  --size--7-5rem: 7.5rem;
  --size--8rem: 8rem;
  --size--8-5rem: 8.5rem;
  --size--9rem: 9rem;
  --size--9-5rem: 9.5rem;
  --size--10rem: 10rem;
  --size--11rem: 11rem;
  --size--11-5rem: 11.5rem;
  --size--12rem: 12rem;
  --size--12-5rem: 12.7rem;
  --size--13rem: 13rem;
  --size--14rem: 14rem;
  --size--15rem: 15rem;
  --size--16rem: 16rem;
  --text-transform--inherit: 0px;
  --text-transform--none: 0px;
  --text-transform--uppercase: 0px;
  --text-transform--capitalize: 0px;
  --text-transform--lowercase: 0px;
}

body {
  background-color: var(--theme--background);
  font-family: var(--text-main--font-family);
  color: var(--theme--text);
  font-size: var(--text-main--font-size);
  line-height: var(--text-main--line-height);
  letter-spacing: var(--text-main--letter-spacing);
  overscroll-behavior: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: unset;
  padding: unset;
  list-style-type: none;
}

img {
  object-fit: cover;
  width: auto;
  max-width: 100%;
}

blockquote {
  padding: unset;
  border-width: 0;
}

figure {
  margin: 0;
}

.u-text-display {
  font-family: var(--display--font-family);
  color: var(--swatch--dark);
  font-size: 11.4vw;
  line-height: var(--display--line-height);
  text-align: center;
  letter-spacing: var(--display--letter-spacing);
  font-weight: var(--display--font-weight);
  text-transform: var(--display--text-transform);
  display: block;
}

display.is_left_align {
  text-align: right;
}

display.is_right_align {
  text-align: right;
  flex-flow: row;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

display.is_right_align.u-line-clamp-1 {
  pointer-events: none;
}

h1 {
  font-family: var(--h1--font-family);
  font-size: var(--h1--font-size);
  line-height: var(--h1--line-height);
  letter-spacing: var(--h1--letter-spacing);
  font-weight: var(--h1--font-weight);
  text-transform: var(--h1--text-transform);
}

h1.is-right-align {
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
}

h1.is-right-align.text-flicker-in-glow {
  color: var(--all-headings--color);
  mix-blend-mode: normal;
  font-size: clamp(6rem, 5rem + 5vw, 11rem);
  position: static;
}

h2 {
  font-family: var(--h2--font-family);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  letter-spacing: var(--h2--letter-spacing);
  font-weight: var(--h2--font-weight);
  text-transform: var(--h2--text-transform);
  margin-top: 0;
  margin-bottom: 0;
}

h2.right-align {
  text-align: right;
}

h2.text-flicker-in-glow {
  font-size: clamp(3rem, 3rem + 4vw, 9rem);
}

h3 {
  font-family: var(--all-headings--heading-font-family);
  color: var(--swatch--brand);
  font-size: var(--size--4-5rem);
  line-height: var(--h3--line-height);
  text-align: left;
  letter-spacing: var(--h3--letter-spacing);
  text-transform: uppercase;
  white-space: normal;
  word-break: normal;
  font-weight: var(--h3--font-weight);
}

h3.u-vflex-center-center {
  justify-content: flex-start;
  align-items: center;
}

h3.centered-text {
  text-align: right;
  margin-left: auto;
  margin-right: auto;
}

h3.centered-text.text-flicker-in-glow {
  z-index: 1;
  font-size: var(--size--4-5rem);
  text-align: right;
  flex: 1;
  justify-content: center;
  width: auto;
  display: block;
  position: relative;
  inset: 0% 0% auto;
}

h3.centered-text.text-flicker-in-glow.block {
  color: var(--all-headings--color);
  font-size: var(--size--5rem);
  text-align: center;
  white-space: normal;
  margin-top: 2rem;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  bottom: 0%;
}

h3.text-flicker-in-glow {
  color: var(--button--text);
  text-align: left;
  white-space: pre-line;
  width: auto;
  margin-bottom: 2rem;
  font-size: clamp(3.5rem, 3rem + 4vw, 4.5rem);
}

h3.text-flicker-in-glow.left-align {
  text-align: right;
}

/* ============================================================================
   SECTION TITLE ANIMATIONS - INITIAL STATES
   ============================================================================ */

/* Ensure all section titles start hidden for GSAP animations */
h1.is-right-align.text-flicker-in-glow,
h2.text-flicker-in-glow,
h3.text-flicker-in-glow,
h3.berlin-2094-title,
h4.text-flicker-in-glow {
  opacity: 0;
  visibility: visible;
  /* Disable CSS animations - GSAP will handle all animations */
  animation: none !important;
  -webkit-animation: none !important;
  /* Ensure proper initial transform state for GSAP */
  transform: translateY(120px) scale(0.8) rotateX(15deg);
  will-change: opacity, transform, text-shadow;
}

h3.berlin-2094-title {
  color: var(--button--text);
  text-align: left;
  white-space: pre-line;
  width: auto;
  margin-bottom: 2rem;
  font-size: clamp(3.5rem, calc(2rem + 3vw), 4.5rem);
}

.berlin-2094-text {
  opacity: 0;
  visibility: visible;
  font-size: clamp(1.8rem, calc(1.5rem + 1.5vw), 3rem);
  line-height: 1.4em;
  padding-bottom: 2rem;
  overflow: visible;
}

h4 {
  z-index: 5;
  font-family: var(--h4--font-family);
  font-size: var(--h4--font-size);
  line-height: var(--h4--line-height);
  letter-spacing: var(--h4--letter-spacing);
  font-weight: var(--h4--font-weight);
  text-transform: var(--h4--text-transform);
  position: relative;
  inset: 0% 0% auto;
}

h4:hover {
  color: var(--swatch--brand);
  font-size: 4rem;
}

h4.centered-text.text-flicker-in-glow {
  z-index: 2;
  text-align: center;
  justify-content: center;
  align-self: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

h4.u-hflex-center-center.centered-text {
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
}

h4.u-hflex-center-center.centered-text.text-flicker-in-glow {
  color: var(--all-headings--color);
  margin-top: 2rem;
}

h4.center {
  position: relative;
}

h4.menu-item {
  font-size: clamp(2rem, 2.5rem + 2.5vw, 2.5rem);
}

h4.menu-item:hover {
  font-size: clamp(3rem, 2.5rem + 3vw, 3rem);
}

h5 {
  font-family: var(--h5--font-family);
  color: var(--button--text);
  font-size: var(--h5--font-size);
  line-height: var(--h5--line-height);
  letter-spacing: var(--h5--letter-spacing);
  font-weight: var(--h5--font-weight);
  text-transform: var(--h5--text-transform);
}

h6 {
  font-family: var(--h6--font-family);
  font-size: var(--h6--font-size);
  line-height: var(--h6--line-height);
  letter-spacing: var(--h6--letter-spacing);
  font-weight: var(--h6--font-weight);
  text-transform: var(--h6--text-transform);
  display: block;
}

.face-particles {
  z-index: -1;
  mix-blend-mode: screen;
  position: relative;
  inset: 0%;
} 

main {
  opacity: 1;
  font-family: var(--font--primary-family);
  font-size: clamp(1rem, calc(0.9rem + 0.5vw), 1.3rem);
  line-height: var(--text-main--line-height);
  letter-spacing: var(--text-main--letter-spacing);
  white-space: pre-wrap;
  font-weight: var(--text-main--font-weight);
  text-transform: var(--text-main--text-transform);
  display: inline-block;
}

main.styleguide_spacing.typing {
  white-space: pre-wrap;
  overflow-wrap: normal;
}

main.styleguide_spacing.typing-text {
  -webkit-text-stroke-color: var(--theme--text);
}

main.styleguide_spacing.typed-text {
  display: block;
}

main.styleguide_spacing.type-text {
  white-space: normal;
  display: block;
  transition: opacity 0.3s ease;
}

/* Enhanced typing animation styles */
.type-text {
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* Performance optimizations for mobile */
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.type-text.typing {
  opacity: 1;
  visibility: visible;
  /* Hint browser about animation for better performance */
  will-change: contents;
}

.type-text.typing-complete {
  opacity: 1;
  visibility: visible;
  /* Remove will-change after animation to free memory */
  will-change: auto;
}

/* Hide text cards containing type-text until animation starts */
.text-card.type-text-container,
.date.type-text-container,
.right-column-content.type-text-container {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.text-card.type-text-container.show,
.date.type-text-container.show,
.right-column-content.type-text-container.show {
  opacity: 1;
  visibility: visible;
}

/* Simple, fast cursor animation - optimized for performance */
.type-text.typing::after {
  content: "|";
  animation: blink 1s infinite;
  color: #ffff00;
  font-weight: bold;
  margin-left: 2px;
  opacity: 1;
  /* GPU acceleration for smooth cursor animation */
  transform: translateZ(0);
  will-change: opacity;
}

.type-text.typing-complete::after {
  display: none;
}

/* Fast, simple blinking */
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

main.typing-text {
  -webkit-text-stroke-color: var(--button--text);
}

/* ============================================================================
   DISABLED FORM STYLES - COMMENTED OUT (UNUSED)
   ============================================================================ */

/* .form_main_label.u-weight-medium {
  font-family: var(--font--secondary-family);
  text-transform: uppercase;
}

.form_main_option_link.w--redirected-checked {
  border-color: var(--swatch--brand);
  border-radius: var(--radius--small);
  background-color: var(--swatch--brand);
  background-size: 60%;
}

.form_main_option_link.w--redirected-focus {
  box-shadow: none;
}

.form_main_option_link.radio {
  border-radius: var(--radius--round);
}


.form_main_field_input:focus {
  border-bottom-color: var(--theme--text);
}

.form_main_field_input::placeholder {
  color: color-mix(in srgb, var(--theme--text) 60%, transparent);
}

.form_main_field_input.is-message {
  padding-top: var(--size--0-5rem);
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 7rem;
  max-height: 10rem;
} */

.u-rich-text {
  font-family: var(--font--secondary-family);
  color: var(--swatch--brand);
  font-size: var(--size--0-8rem);
}

.u-rich-text h1 {
  margin-top: var(--space--small);
  margin-bottom: var(--space--extra-small);
  font-family: var(--h1--font-family);
  font-size: var(--h1--font-size);
  line-height: var(--h1--line-height);
  letter-spacing: var(--h1--letter-spacing);
  font-weight: var(--h1--font-weight);
  text-transform: var(--h1--text-transform);
}

.u-rich-text p {
  margin-top: var(--space--extra-small);
  margin-bottom: var(--space--extra-small);
}

.u-rich-text h2 {
  margin-top: var(--space--small);
  margin-bottom: var(--space--extra-small);
  font-family: var(--h2--font-family);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  letter-spacing: var(--h2--letter-spacing);
  font-weight: var(--h2--font-weight);
  text-transform: var(--h2--text-transform);
}

.u-rich-text h3 {
  margin-top: var(--space--small);
  margin-bottom: var(--space--extra-small);
  font-family: var(--h3--font-family);
  font-size: var(--h3--font-size);
  line-height: var(--h3--line-height);
  letter-spacing: var(--h3--letter-spacing);
  font-weight: var(--h3--font-weight);
  text-transform: var(--h3--text-transform);
}

.u-rich-text h4 {
  margin-top: var(--space--small);
  margin-bottom: var(--space--extra-small);
  font-family: var(--h4--font-family);
  font-size: var(--h4--font-size);
  line-height: var(--h4--line-height);
  letter-spacing: var(--h4--letter-spacing);
  font-weight: var(--h4--font-weight);
  text-transform: var(--h4--text-transform);
}

.u-rich-text h5 {
  margin-top: var(--space--small);
  margin-bottom: var(--space--extra-small);
  font-family: var(--h5--font-family);
  font-size: var(--h5--font-size);
  line-height: var(--h5--line-height);
  letter-spacing: var(--h5--letter-spacing);
  font-weight: var(--h5--font-weight);
  text-transform: var(--h5--text-transform);
}

.u-rich-text h6 {
  margin-top: var(--space--small);
  margin-bottom: var(--space--extra-small);
  font-family: var(--h6--font-family);
  font-size: var(--h6--font-size);
  line-height: var(--h6--line-height);
  letter-spacing: var(--h6--letter-spacing);
  font-weight: var(--h6--font-weight);
  text-transform: var(--h6--text-transform);
}

.u-rich-text figure {
  margin-top: var(--space--small);
  margin-bottom: var(--space--small);
}

.u-rich-text ul {
  margin-top: var(--size--0-4rem);
  margin-bottom: var(--size--0-4rem);
  padding-left: var(--size--1-25rem);
  list-style-type: disc;
}

.u-rich-text li {
  margin-top: var(--size--0-25rem);
  margin-bottom: var(--size--0-25rem);
}

.u-rich-text blockquote {
  margin-top: var(--size--2rem);
  margin-bottom: var(--size--2rem);
  padding-top: var(--size--0-5rem);
  padding-bottom: var(--size--0-5rem);
  padding-left: var(--size--1rem);
  font-family: var(--text-large--font-family);
  font-size: var(--text-large--font-size);
  line-height: var(--text-large--line-height);
  letter-spacing: var(--text-large--letter-spacing);
  font-weight: var(--text-large--font-weight);
  text-transform: var(--text-large--text-transform);
  border-left-style: solid;
  border-left-width: 0.2rem;
}

.u-rich-text ol {
  padding-left: var(--size--1-25rem);
  list-style-type: decimal;
}

.btn_play_wrap:hover {
  border-color: var(--button--border-hover);
  background-color: var(--button--background-hover);
  color: var(--button--text-hover);
}

.page_wrap {
  width: 100%;
  display: block;
  overflow: visible;
}

.page_main {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.u-container {
  grid-column-gap: var(--space--large);
  flex-flow: column;
  justify-content: space-around;
  align-items: stretch;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 0;
  display: flex;
  position: relative;
}

.u-text-large {
  letter-spacing: var(--text-large--letter-spacing);
  text-transform: none;
  font-family: Aldone light, sans-serif;
  font-size: clamp(1rem, calc(1.35rem + 0.35vw), 1.35rem);
  line-height: 1.2em;
  font-weight: var(--text-large--font-weight);
  min-height: 500px;
}

.u-text-small {
  font-family: var(--font--primary-family);
  font-size: var(--size--0-85rem);
  line-height: var(--text-small--line-height);
  letter-spacing: var(--text-small--letter-spacing);
  text-transform: var(--text-small--text-transform);
  font-weight: 300;
}

.hero_utility-page_contain.u-container {
  min-height: 100vh;
}

.hero_utility-page_contain.u-container.u-vflex-center-center {
  flex-flow: column;
  margin-bottom: 0;
  padding-top: 0;
  display: flex;
  position: relative;
}

.hero_placeholder_contain.u-container {
  text-align: center;
  min-height: 100vh;
}

/* Custom Two-Column Layout - 30%/70% */
.u-grid-column-30-70 {
  grid-column-gap: var(--grid-gap--main);
  grid-row-gap: var(--grid-gap--main);
  grid-template-rows: auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: 25% 75%;
  display: grid;
}

.space-hud {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #00000064;
}

@media screen and (min-width: 768px) {
  .u-text-large {
    font-size: clamp(1.7rem, calc(1.4rem + 1.5vw), 3rem);
  }
}

@media screen and (min-width: 768px) and (max-width: 1440px) {
  .u-grid-column-30-70 {
    grid-template-columns: 25% 75%;
  }

  .preloader-lottie {
    opacity: 100;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    width: 100%;
    min-height: 100vh;
    scale: 1.5;
  }
}

/* Right column content styling */
.right-column-content {
  display: block;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
}

.u-hflex-right-top {
  flex-flow: row;
  place-content: flex-start flex-end;
  align-items: flex-start;
  display: flex;
}

.u-vflex-center-center {
  text-align: left;
  flex-flow: column;
  place-content: center;
  align-items: center;
  margin-bottom: 3vh;
  display: flex;
}

.g_content_wrap.u-gap-medium.u-vflex-center-center {
  text-align: center;
}

.g_content_wrap.u-gap-medium.u-vflex-center-center.is-left-aligned {
  text-align: left;
  justify-content: center;
  align-items: flex-start;
}

.g_content_btn_wrap.u-gap-xsmall.u-hflex-center-center {
  flex-flow: wrap;
}

.g_content_btn_wrap.u-gap-xsmall.u-hflex-center-center.is-left-aligned {
  justify-content: flex-start;
  align-items: center;
}

.g_content_header.u-gap-small.u-vflex-center-center.is-left-aligned {
  justify-content: center;
  align-items: flex-start;
}

.u-grid-column-3 {
  grid-column-gap: var(--grid-gap--main);
  grid-row-gap: var(--grid-gap--main);
  grid-template:
    "."
    / 1fr 1fr 1fr;
  grid-auto-columns: minmax(0, 1fr);
  place-content: stretch;
  display: grid;
}

.u-grid-column-3.bottom-footer {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  justify-content: space-between;
  justify-items: stretch;
  display: grid;
}

/* Box Shadow Utility */
.box-shadow {
  -webkit-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.3);
}

/* Text Selection Utilities - moved to media queries section */

/* Allow text selection on input elements */
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Remove system styling from form elements */
select,
input,
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Screen Reader Only */

.logo {
  aspect-ratio: auto;
  object-fit: cover;
  align-self: auto;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
}

.navbar-wrapper {
  z-index: 100000;
  margin-top: var(--size--2rem);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 3% 0% auto;
}

.nav-link:hover {
  color: #1a1b1fbf;
}

.nav-link:focus-visible,
.nav-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.nav-dropdown-toggle:hover {
  color: #1a1b1fbf;
}

.nav-dropdown-toggle:focus-visible,
.nav-dropdown-toggle[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.nav-dropdown-list.w--open {
  padding-top: 10px;
  padding-bottom: 10px;
}

.nav-dropdown-link:focus-visible,
.nav-dropdown-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}

.button-primary:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary:active {
  background-color: #43464d;
}

.body {
  background-color: var(--swatch--deep-night);
  color: var(--theme--text);
  cursor: auto;
  overflow: visible;
}

.body.no-scroll {
  overflow: visible;
}


.title-2.truncate {
  color: #fffffff2;
  font-weight: 600;
}

.container {
  grid-column-gap: var(--size--1rem);
  grid-row-gap: var(--size--1rem);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 92%;
  max-width: none;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.container.u-hflex-center-center {
  flex-flow: column;
}

.container.footer {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-self: center;
  align-items: center;
  width: 92%;
  height: 100%;
  margin: 3rem;
  padding-left: 0;
  display: flex;
}

.container.flex-horizontal {
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
}

.section-button:hover {
  background-color: #4968becc;
}

.hero {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-wrap {
  cursor: pointer;
  position: relative;
}

.button-wrap.is_left_align {
  justify-content: flex-end;
  display: flex;
}

.button-wrap.is_right_align {
  z-index: 9;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 0;
  display: block;
  position: relative;
  inset: 0% auto auto 0%;
}

.button-wrap.is_right_align.small {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 16px;
}

.grid_col {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #f59f9f94;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 30vw;
  display: flex;
}

.grid_col.align-left {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #f59f9f00;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 30vw;
}

.grid_col.bottom {
  background-color: #f59f9f00;
  justify-content: center;
  align-items: flex-end;
  width: 30vw;
}

.grid_col.align-right {
  background-color: #f59f9f00;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 30vw;
}

.section {
  z-index: auto;
  flex-flow: row;
  justify-content: space-around;
  align-items: stretch;
  width: 100%;
  height: 100vh;
  margin-top: 4rem;
  display: flex;
  position: relative;
  inset: 0%;
  overflow: visible;
}

.section.first-content {
  margin-top: 4rem;
  position: absolute;
  inset: auto 0% 0%;
}

.section.u-gap-column-large {
  justify-content: center;
  align-items: stretch;
}

.section.u-gap-column-large.u-hflex-center-center.fixed {
  position: static;
}

.section.footer {
  z-index: 9999;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--swatch--brand);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: relative;
  inset: 0%;
  overflow: visible;
}

/* Grid overlay effect - Completely removed */
.section.footer .cyber-grid-overlay {
  display: none;
}

.section.footer:hover .cyber-grid-overlay {
  opacity: 0.5;
}

/* Scan line effect - Disabled */
.section.footer .scan-line {
  display: none;
}

/* Scan line animation - Disabled */
@-webkit-keyframes scanLine {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes scanLine {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

/* Glitch effect on hover - Disabled */
.section.footer:hover::before {
  display: none;
}

/* Glitch effect based on JavaScript intensity - Disabled */
.section.footer::before {
  display: none;
}

@keyframes glitchEffect {
  0%,
  100% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }
}

/* Enhanced hover effects - Disabled */
.section.footer:hover::after {
  display: none;
}

.section.footer:hover .cyber-grid-overlay {
  display: none;
}
*/


/* Mouse trail effect */
.section.footer .pixel.trail {
  transform: translateZ(0) scale(1);
  background: rgba(205, 171, 0, 0.6);
  border: none;
  box-shadow: none;
  opacity: 1;
  filter: brightness(1);
  box-sizing: border-box;
}

/* Random pop effect */
@keyframes pixelPop {
  0% {
    transform: translateZ(0) scale(1);
    opacity: 0;
  }

  50% {
    transform: translateZ(15px) scale(1.04);
    opacity: 1;
  }

  100% {
    transform: translateZ(0) scale(1);
    opacity: 0;
  }
}

.section.footer .pixel.pop {
  animation: pixelPop 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glitch effect animations - No overlap */
@keyframes glitchEffect {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(1);
  }

  10% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  20% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  30% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  40% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  60% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  70% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  80% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  90% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes glitchJump {
  0% {
    transform: translateX(0) translateY(0);
  }

  25% {
    transform: translateX(0) translateY(0);
  }

  50% {
    transform: translateX(0) translateY(0);
  }

  75% {
    transform: translateX(0) translateY(0);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

/* Test effect - make it more visible */
.section.footer::before {
  opacity: 0.8;
}

.section.footer:hover::before {
  opacity: 1;
}
*/

/* ============================================================================
   3. ACTIVE COMPONENT STYLES
   ============================================================================ */

.section.player {
  margin-top: 0;
  margin-bottom: -70px;
  position: relative;
}

.section.no-top-spacing {
  margin-top: 0;
}

.section.menu-open {
  z-index: 99999;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: var(--swatch--dark);
  pointer-events: auto;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 0;
  display: none;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.section.particles {
  z-index: auto;
}

.section.get-involved {
  position: absolute;
  top: 316%;
}

.section-col {
  grid-column-gap: var(--grid-gap--main);
  grid-row-gap: var(--grid-gap--main);
  flex-flow: column;
  justify-content: flex-start;
  align-self: flex-start;
  width: calc(33.333% - 1.33rem);
  height: 100%;
  display: flex;
  position: relative;
  flex: 1;
}

.section-col.top {
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
}

.section-col.bottom {
  justify-content: flex-end;
  align-items: flex-end;
}

.section-col.centered {
  justify-content: center;
  align-items: center;
}

.section-col.right-align {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.section-wrap-content {
  z-index: 88;
  align-self: auto;
  margin: 8rem 0;
  position: relative;
}

.section-wrap-content.no-space {
  margin-top: 0;
}

.section-wrap-content.no-space.right-align {
  align-self: flex-end;
}

.text-card {
  padding: 1.5rem;
  border: 0.2px solid var(--swatch--dark-secondary);
  opacity: 1;
  background-color: var(--swatch--dark);
  -webkit-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.3);
  width: 100%;
  max-width: 26rem;
}

.text-card.slide-in-left {
  border-width: var(--border-width--main);
  margin-top: 14rem;
}

.text-card.slide-in-left.box-shadow,
.text-card.slide-in-right.box-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* Fix height issue for text-card with specific classes */
.text-card.type-text-container.slide-in-right.box-shadow.show {
  height: auto;
  max-height: none;
}

.navbar-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: start space-between;
  align-self: center;
  align-items: flex-start;
  width: 92%;
  height: 4em;
  padding-top: 0;
  display: grid;
}

.navbar-audio {
  flex-flow: row;
  height: 100%;
  display: flex;
}

.page-wrap {
  z-index: 2;
  opacity: 1;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  position: sticky;
  inset: 0%;
  overflow: visible;
}

.page-wrap.preloader {
  z-index: 9999;
  background-color: var(--swatch--transparent);
  opacity: 100;
  position: static;
  overflow: clip;
}

.menu-button-container {
  z-index: 100001;
  width: 51px;
  height: auto;
  position: absolute;
}

.u-text-tiny {
  font-size: var(--size--0-4rem);
  text-align: center;
  letter-spacing: 0.2em;
}

.u-text-tiny.left-align {
  color: var(--swatch--brand);
  text-align: left;
}

.sound-status {
  display: block;
}

.sound-active {
  border: 0px none var(--button--border);
  width: 50px;
  height: auto;
}

.frame {
  z-index: 3;
  opacity: 1;
  mix-blend-mode: normal;
  pointer-events: none;
  background-image: url("../images/circles-v2-1.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding-top: 0;
  padding-left: 0;
  position: fixed;
  inset: 0%;
}

.grid {
  grid-column-gap: 2rem;
  grid-row-gap: 3rem;
  flex-wrap: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  display: grid;
}

.button:hover {
  color: #121212;
  background-color: #c6fb50;
  border-color: #c6fb50;
}

.row {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: stretch center;
  align-self: auto;
  place-items: stretch stretch;
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
}

.row.centered-text {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.dash-line {
  border: 0.5px dashed var(--swatch--dark-secondary);
  position: absolute;
  inset: 2% 1%;
}

.corner.top-right {
  margin-top: -3px;
  margin-right: -3px;
  padding-top: 0;
  padding-right: 0;
  position: absolute;
  inset: 0% 0% auto auto;
}

.corner.top-left {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin-top: -3px;
  margin-left: -3px;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: rotateX(0) rotateY(-180deg) rotateZ(0);
}

.corner.bottom-left {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin-bottom: -3px;
  margin-left: -3px;
  position: absolute;
  inset: auto auto 0% 0%;
  transform: rotateX(-180deg) rotateY(180deg) rotateZ(0);
}

.corner.bottom-right {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  margin-bottom: -3px;
  margin-right: -3px;
  position: absolute;
  inset: auto 0% 0% auto;
  transform: rotateX(180deg) rotateY(0) rotateZ(0);
}

.content {
  position: static;
  overflow: clip;
  width: 100vw;
  height: 100vh;
}

.preloader-wrap {
  display: block;
  overflow: clip;
}

.preloader-inner {
  overflow: clip;
}

.preloader-lottie {
  z-index: 999;
  background-color: var(--swatch--deep-night);
  opacity: 1;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.preloader {
  z-index: 9999;
  background-color: var(--swatch--dark);
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  inset: 0%;
  overflow: clip;
}

/* Hide preloader on pages other than home */
body:not([data-wf-page="669799f5afcf09e77ccd7a31"]) .preloader {
  display: none;
}

.copyright-text {
  color: var(--swatch--dark);
}

.copyright-textsmall.uppercase {
  text-transform: uppercase;
}

.copyright-text.uppercase {
  font-family: var(--text-main--font-family);
  color: var(--swatch--dark);
  font-size: var(--line-height--0-8em);
  line-height: var(--size--1rem);
  font-weight: var(--normal);
  text-transform: uppercase;
  display: block;
}

.credits {
  width: auto;
  max-width: 320px;
}

.spline-scene {
  width: 100%;
  height: 100vh;
  /* Ensure smooth transitions for scroll-triggered animations */
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Prevent layout shifts during animation */
  will-change: opacity, transform;
  /* Ensure proper 3D rendering */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Initial state for scroll-triggered 3D elements */
.spline-scene[data-scroll-animation="enabled"] {
  opacity: 0;
  transform: scale(0.1);
  transform-origin: center center;
}

/* Animation state for 3D elements */
.spline-scene.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* Hover effects for interactive 3D elements */
.spline-scene:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
  cursor: pointer;
}

/* Ensure smooth scaling animations */
.spline-scene canvas {
  transition: transform 0.3s ease;
  will-change: transform;
  cursor: pointer;
}

.followbutton {
  z-index: 9999;
  cursor: pointer;
  position: absolute;
  inset: 0%;
}

.exp-text {
  margin: 4rem 0rem;
  padding-left: 0;
  position: relative;
  right: 0;
  top: 0;
}

.date {
  border: var(--border-width--main) solid var(--button--border);
  background-color: var(--swatch--dark);
  -webkit-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.3);
  opacity: 1;
  width: 35rem;
  margin: 3rem 0;
  padding: 2.5rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

.map {
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  border: var(--border-width--main) solid var(--theme--border);
  object-fit: cover;
  width: auto;
  max-width: none;
  height: 65vh;
  min-height: 0;
  margin: 0 0;
  display: block;
  position: static;
}

.sound-on {
  border: 0.7px solid var(--swatch--light);
  -webkit-text-stroke-width: 1px;
  height: 55px;
  margin-top: -1px;
}

.lottie-soundwave {
  border: 0 #000;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
  display: block;
}

.social-links {
  text-align: center;
}

.list-item {
  cursor: pointer;
  margin-bottom: 1rem;
}

.list-item.hover-sound {
  margin-bottom: 1.5rem;
}

.primary-button {
  cursor: pointer;
}

.primary-button.hover-sound {
  position: relative;
}

.toggle-sound {
  border: 0.5px solid var(--button--border);
  outline-offset: 0px;
  cursor: pointer;
  border-radius: 0;
  outline: 3px #eee;
  margin-top: -1px;
}

.toggle-sound.hover-sound {
  border-color: var(--swatch--light);
}

.scroll-down {
  z-index: -10;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  perspective: none;
  width: auto;
  display: flex;
  position: fixed;
  inset: auto 4% 32% auto;
  transform: none;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.scroll-down .u-rich-text {
  color: white;
}

.noise {
  z-index: 2147483647;
  position: fixed;
  inset: 0%;
}

.map-pointer {
  z-index: 3;
  width: 70px;
  position: absolute;
  left: 597px;
  animation: yellowGlowPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 1px rgba(255, 240, 0, 1));
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.map-pointer.hover {
  display: none;
}

.map-pointer.visible {
  opacity: 1;
  transform: scale(1);
}

.map-pointer:hover {
  animation: none;
  filter: none;
}

.map-pointer.first {
  bottom: 54%;
  left: 11%;
  animation-delay: 0s;
}

.map-pointer.second {
  bottom: 73%;
  left: 40%;
  animation-delay: 0.6s;
}

.map-pointer.third {
  bottom: 48%;
  left: 67%;
  animation-delay: 1.2s;
}

/* Yellow glow pulse animation for map pointers */
@keyframes yellowGlowPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 1px rgba(255, 240, 0, 1))
      drop-shadow(0 0 2px rgba(255, 230, 0, 0.6));
  }

  50% {
    filter: drop-shadow(0 0 2px rgba(255, 245, 0, 1))
      drop-shadow(0 0 3px rgba(255, 240, 0, 0.8));
  }
}

.social-link {
  font-family: var(--font--secondary-family);
  font-size: var(--size--1-25rem);
  cursor: pointer;
  font-weight: 300;
}

.social-link:hover,
.social-link.hover {
  color: var(--button--text);
  background-color: var(--swatch--brand);
  padding: 4px 8px;
  border-radius: 2px;
}

.exploration-wrap {
  z-index: 10;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 0.5px none var(--button--border);
  background-color: var(--swatch--transparent);
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 300px;
  height: 460px;
  display: flex;
  position: absolute;
  bottom: 16%;
  left: 56%;
}

.exploration-wrap.first {
  height: 475px;
  left: 14%;
  bottom: 10%;
}

.exploration-wrap.second {
  transform-origin: 0%;
  height: 475px;
  bottom: 10%;
  left: 44%;
}

.exploration-wrap.third {
  height: 475px;
  left: 73%;
  bottom: 10%;
}

.exploration-card {
  border: 0.2px solid var(--swatch--light);
  background-color: var(--swatch--dark);
  -webkit-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0px 0px 11px 4px rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 9px rgba(255, 255, 255, 0.3);
  perspective: none;
  perspective-origin: 0 0;
  transform-origin: 0%;
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  border-top-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
  align-self: center;
  width: 100%;
  height: 100%;
  padding: 3rem 1.5rem;
  display: block;
  position: absolute;
  overflow: visible;
}

.exploration-card.box-shadow {
  border-top-left-radius: 3rem;
}

.card {
  font-family: var(--font--secondary-family);
  color: var(--theme--text);
  font-size: var(--size--0-7rem);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 2rem;
}

.menu-button {
  cursor: pointer;
}

.button-wrap-contact {
  margin-bottom: 1rem;
}

.terminal {
  z-index: 1000000;
  font-family: var(--font--secondary-family);
  color: var(--theme--text);
  font-size: var(--size--0-7rem);
  width: 500px;
  position: absolute;
  inset: auto 5% 8% ;
}

.terminal.typing-text {
  z-index: 1000000000;
  width: 217px;
  display: none;
  right: 2%;
}

.terminal.typing-text.first {
  display: none;
  top: 11%;
}

.terminal.typing-text.second {
  display: none;
  top: 14%;
}

.terminal.typing-text.third {
  display: none;
  top: 17%;
}

.terminal.typing-text.last {
  color: #fff;
  font-size: 1rem;
  line-height: var(--line-height--0-7em);
  text-align: left;
  white-space: normal;
  width: 12.8em;
  display: block;
  inset: auto auto 9% 5%;
}

.terminal.typing-text.fourth {
  display: none;
  top: 20%;
}

.terminal.last {
  width: auto;
  overflow: visible;
}

.terminal.last.typing-text {
  font-family: var(--text-main--font-family);
  width: auto;
  position: static;
}

.terminal.last.typed-text {
  width: auto;
  display: block;
}

.terminal.last.type-text {
  white-space: pre-line;

  width: auto;
  display: block;
  text-align: left;
  font-family: monospace;
  line-height: 1.5;
}

.terminal.last.type-text.block {
  display: inline-block;
}

.terminal-line {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-family: var(--font--secondary-family);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  color: var(--theme--text);
  font-size: var(--size--0-8rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 300;
}

.terminal-line.visible {
  opacity: 1;
  transform: translateY(0);
  text-shadow: 0 0 10px rgba(230, 192, 0, 0.5);
}

.image-7 {
  width: 100%;
  height: auto;
}

.card-map-image {
  width: 100%;
  height: auto;
  padding-bottom: 1rem;
}

.map-card-title,
.card__title {
  font-family: var(--font--display-family);
  color: var(--theme--text);
  font-size: var(--size--1-5rem);
  line-height: var(--line-height--1-3em);
  letter-spacing: var(--letter-spacing--0em);
  font-weight: var(--font--primary-medium);
  text-transform: uppercase;
  text-align: left;
  margin-top: 0;
  margin-bottom: var(--space--small);
  display: block;
}

.menu-item-link {
  justify-content: center;
  align-items: center;
  display: flex;
}

.menu-item-link.active .menu-item {
  color: #ffff00 !important;
}

.bar {
  z-index: 9999999;
  font-family: var(--font--secondary-family);
  font-size: var(--size--0-8rem);
  position: absolute;
  inset: 5% 5% auto auto;
}

.menu-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  align-content: center;
  align-self: center;
  place-items: center;
  width: 100vw;
  height: 100vh;
  margin: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
  overflow: hidden;
}

.link-block,
.lottie-animation-5 {
  width: 100%;
  display: none;
  position: absolute;
}

.circle-shape-1 {
  width: 1rem;
}

.join-the-movement {
  display: block;
  position: absolute;
  left: 2rem;
  top: 33%;
  z-index: 1000;
}

.text-block-4 {
  display: none;
}

.map-title {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  justify-items: stretch;
  width: 100%;
  display: flex;
}

.map-compass-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-end;
  align-items: flex-end;
  width: 30%;
  display: flex;
}

.map-title-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 70%;
  display: flex;
}

.text-container-1 {
  margin: 4rem 0rem;
  padding-left: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 34rem;
}

.x-close {
  display: none;
}

/* ============================================================================
   4. RESPONSIVE DESIGN - MEDIA QUERIES
   ============================================================================ */

/* Tablet landscape styles - moved to media queries section */

@media screen and (max-width: 767px) {
  /* ============================================================================
     MOBILE SPECIFIC (0px - 767px)
     ============================================================================ */
  .u-text-display {
    font-size: 15vw;
  }

  h1.is-right-align {
    text-align: center;
  }

  h1.is-right-align.text-flicker-in-glow {
    font-size: 22.6vw;
  }

  h2.text-flicker-in-glow {
    text-align: center;
    font-size: 21vw;
  }

  h3 {
    margin-top: 0;
    margin-bottom: 0;
  }

  h3.centered-text.text-flicker-in-glow.block {
    font-size: 1.8rem;
    line-height: 1em;
  }

  h3.text-flicker-in-glow {
    font-size: 9.5vw;
  }

  h4.u-hflex-center-center.centered-text.text-flicker-in-glow {
    font-size: var(--size--2rem);
  }

  h4.menu-item {
    font-size: clamp(2rem, 2.5rem + 2.5vw, 2.3rem);
  }

  h4.menu-item:hover {
    font-size: clamp(2.5rem, 2.5rem + 3vw, 2.5rem);
  }

  main {
    flex-flow: row;
    display: block;
  }

  .u-container {
    grid-column-gap: var(--space--large);
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding: 0 1rem;
    display: flex;
    height: fit-content;
    min-height: 100vh;
  }

  .u-text-small {
    font-family: var(--font--primary-family);
    font-size: var(--size--0-85rem);
  }

  .u-hflex-right-top {
    justify-content: center;
    align-items: center;
  }

  .u-grid-column-3.bottom-footer {
    grid-column-gap: var(--grid-gap--main);
    grid-row-gap: var(--grid-gap--main);
    grid-template-rows: auto;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-columns: var(--grid-1);
    flex-flow: column;
    align-self: auto;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
  }

  .logo {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .navbar-wrapper {
    margin-top: 0rem;
    padding: 0.5rem;
  }

  .body.no-scroll {
    max-width: 100%;
    overflow: visible;
  }

  .container {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow-x: hidden;
  }

  .container.footer {
    flex-flow: column;
    flex: 0 auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .container.block {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
    display: block;
  }

  .container.flex-horizontal {
    flex-flow: column;
    gap: 0;
    height: 100%;
    justify-content: space-between;
    align-items: stretch;
  }

  .button-wrap.is_right_align.small {
    z-index: auto;
  }

  .grid_col {
    width: 27vw;
  }

  .grid_col.align-left {
    width: auto;
  }

  .grid_col.bottom {
    align-self: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .grid_col.align-right {
    width: 100%;
  }

  .section {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: stretch;
    height: auto;
    display: flex;
    position: relative;
    overflow-x: hidden;
  }

  .section.first-content {
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    height: 95vh;
    position: relative;
    margin-top: 0;
  }

  /* Face particles behind hero on mobile, limited to hero height */
  #particle-image {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
  }

  #particle-image .face-particles,
  #particle-image .face-particles .scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: auto;
  }

  /* Pull hero over the sticky particle section */
  .section.first-content {
    margin-top: -99vh;
    z-index: 2;
  }

  .container.flex-horizontal.hero {
    position: relative;
    z-index: 2;
    /* Allow particle canvas interactions underneath while keeping inner controls clickable */
    pointer-events: none;
  }

  /* Re-enable pointer events for interactive elements within the hero */
  .container.flex-horizontal.hero a,
  .container.flex-horizontal.hero button,
  .container.flex-horizontal.hero [role="button"],
  .container.flex-horizontal.hero .text-card,
  .container.flex-horizontal.hero .scroll-down {
    pointer-events: auto;
  }

  .section.u-gap-column-large {
    flex-flow: column;
    overflow: hidden;
  }

  /* Hide second section on mobile to prevent visibility */
  .section:nth-child(2) {
    display: none;
  }

  .section.footer {
    position: relative;
    overflow: visible;
  }

  .section.player {
    position: relative;
  }

  .section.menu-open {
    overflow: hidden;
  }

  .section-col {
    flex-flow: column;
    flex: 0 auto;
    order: 0;
    align-self: auto;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
  }

  .section-col.top {
    margin-top: 0;
    justify-content: flex-start;
    height: auto;
    flex: 0 0 auto;
  }

  .section-col.bottom {
    justify-content: flex-end;
    height: auto;
    flex: 0 0 auto;
    margin-top: auto;
  }

  .section-col.centered {
    align-items: center;
  }

  .section-wrap-content {
    justify-content: center;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
    display: block;
    margin: auto;
    padding: 2rem 1rem;
  }

  .text-card {
    clear: none;
    width: 90vw;
    max-width: 90vw;
    position: relative;
    margin: 0 auto;
  }

  .text-card.slide-in-left {
    padding: var(--size--2rem);
    margin-top: 0;
    top: auto;
  }

  .text-card.slide-in-left.box-shadow {
    margin-top: 0;
  }

  /* Mobile-specific animation adjustments to prevent layout shifts */

  .space-hud {
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: hidden;
    background-color: #00000064;
  }

  .perspective-container {
    position: relative !important;
  }

  #main-svg {
    width: 100% !important;
    height: 100% !important;
  }

  .map-title {
    padding: 0 20px;
  }

  .page-wrap {
    overflow: visible;
  }

  .menu-button-container {
    width: 50px;
  }

  .sound-active {
    width: auto;
  }

  .row {
    max-width: 90%;
    display: block;
  }

  .row.centered-text {
    text-align: left;
    justify-content: center;
    align-self: auto;
    align-items: center;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .dash-line {
    inset: 2%;
  }

  .preloader-lottie {
    opacity: 100;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    width: 100%;
    min-height: 100vh;
    scale: 3;
  }

  .preloader {
    display: block;
  }

  .copyright-text.uppercase {
    text-align: center;
  }

  .spline-scene {
    width: auto;
    height: 36vh;
    position: relative;
    overflow: hidden;
    /* Ensure smooth transitions for scroll-triggered animations on mobile */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .exp-text {
    width: 90vw;
    margin-top: 0;
    margin-left: 0;
    position: relative;
  }

  .date {
    width: 100%;
    margin-left: 0;
    padding: 2rem;
    position: relative;
    min-height: 120px; /* Ensure stable height for typing animation */
  }

  .map {
    box-sizing: border-box;
    aspect-ratio: auto;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    perspective: none;
    perspective-origin: 50%;
    transform-origin: 50%;
    object-fit: cover;
    align-self: center;
    width: 90vw;
    height: auto;
    min-height: 80vh;
    display: inline-block;
    transform: none;
  }

  .sound-on {
    display: none;
  }

  .toggle-sound.hover-sound {
    outline-width: 4px;
    width: 50px;
    height: 50px;
  }

  .scroll-down {
    display: none;
  }

  .noise {
    min-height: 100vh;
    height: 100vh;
    inset: 0%;
  }

  .map-pointer.first,
  .map-pointer.second,
  .map-pointer.third {
    z-index: 99;
  }

  .exploration-wrap.first {
    z-index: auto;
    align-self: auto;
    bottom: auto;
    left: auto;
  }

  .exploration-wrap.second {
    z-index: auto;
    justify-content: center;
    align-items: center;
    display: block;
    position: absolute;
    inset: auto;
  }

  .exploration-wrap.third {
    z-index: auto;
    position: absolute;
    bottom: auto;
    left: auto;
    right: auto;
  }

  .exploration-card {
    z-index: 999;
    position: relative;
    left: auto;
  }

  .menu-button {
    padding: 0;
  }

  .text-container-1 {
    margin: 4rem 0rem 0rem;
    padding-left: 0;
    position: relative;
    left: 0;
    top: 0;
    width: 34rem;
  }

  .spline-container {
    flex-flow: column;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
    /* Ensure proper 3D rendering context */
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .join-the-movement {
    position: relative;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%);
  }

  .text-container-1 {
    width: auto;
  }

  .image-9 {
    object-fit: fill;
    display: block;
  }

  .u-text-large {
    letter-spacing: var(--text-large--letter-spacing);
    text-transform: none;
    font-family: Aldone light, sans-serif;
    line-height: 1.2em;
    font-weight: var(--text-large--font-weight);
  }

  .u-text-large.berlin-2094-text {
    min-height: auto;
    padding-bottom: 3rem;
    margin-bottom: 2rem;
  }

  .right-column-content.type-text-container {
    overflow: visible;
    height: auto;
    min-height: auto;
  }

  /* Reserve space for berlin-2094-text container on mobile to prevent layout shift */
  .right-column-content.type-text-container:has(.berlin-2094-text) {
    min-height: 500px;
  }

  /* Reduce bottom margin of berlin-2094-title on mobile */
  h3.berlin-2094-title {
    margin-bottom: 1rem;
  }

  /* Ensure section containing berlin-2094-text doesn't constrain height */
  .section.berlin-2094-section,
  .section:has(.berlin-2094-text) {
    height: auto !important;
    min-height: 600px !important;
    overflow: visible !important;
  }

  .x-close {
    z-index: 10;
    font-family: var(--font--secondary-family);
    font-size: var(--text-main--line-height);
    letter-spacing: -1px;
    margin-top: -40px;
    display: block;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  /* Maintain square grid on smallest mobile */
  .section.footer .pixel-grid {
    grid-template-columns: repeat(20, minmax(0, 1fr));
    grid-template-rows: repeat(20, minmax(0, 1fr));
    gap: 1px;
    aspect-ratio: 1 / 1;
  }

  .section.footer .pixel {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
  }

  h1.is-right-align.text-flicker-in-glow {
    font-size: 22vw;
  }

  .u-grid-column-4,
  .u-grid-column-2,
  .u-grid-column-3 {
    grid-template-columns: var(--grid-1);
  }

  .nav-dropdown-list.shadow-three {
    box-shadow: 0 8px 50px #0000000d;
  }

  .nav-dropdown-list.shadow-three.w--open {
    position: relative;
  }

  .nav-dropdown-list.shadow-three.mobile-shadow-hide {
    box-shadow: none;
  }

  .container.flex-horizontal {
    flex-flow: column;
    width: 100%;
    overflow: visible;
    gap: 0;
    height: 92%;
    justify-content: space-between;
    align-items: stretch;
  }

  .section.footer {
    align-items: stretch;
  }

  .section-col.centered {
    height: auto;
  }

  /* Maintain square grid on mobile */
  .section.footer .pixel-grid {
    grid-template-columns: repeat(20, minmax(0, 1fr));
    grid-template-rows: repeat(20, minmax(0, 1fr));
    gap: 2px;
    aspect-ratio: 1 / 1;
  }

  .section.footer .pixel {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
  }

  .u-grid-column-30-70 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Hide compass element on mobile */
  .map-compass-container {
    display: none;
  }
}

#w-node-_70f97f21-5947-60e4-96c5-b200ea0953b2-7ccd7a31 {
  justify-self: auto;
}

#w-node-c6dceb10-04c5-e75a-60ea-886d24bc93cc-7ccd7a31 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_31f6d1d5-9ea7-4a75-1b31-e7b2d1a48231-d1a4821b {
  place-self: auto;
}

#w-node-_31f6d1d5-9ea7-4a75-1b31-e7b2d1a48235-d1a4821b {
  justify-self: auto;
}

#w-node-_31f6d1d5-9ea7-4a75-1b31-e7b2d1a48238-d1a4821b {
  place-self: auto;
}

#w-node-_804eca98-a821-6f65-eb34-13b37a46701c-7a467010,
#w-node-_0410d28e-1b40-9fde-1347-45a36c30c325-3bd2fc40 {
  justify-self: end;
}

#w-node-_70f97f21-5947-60e4-96c5-b200ea0953b2-3bd2fc40,
#w-node-_384850ba-3cf3-db7e-c531-2fc71da9f0b6-3bd2fc40 {
  justify-self: auto;
}

#w-node-_7932c4ca-95bc-27fb-f805-e5e3a17f9712-3bd2fc40 {
  place-self: auto;
}

#w-node-_9374b13d-70ff-eb9a-677b-948194e7b194-3bd2fc40 {
  justify-self: auto;
}

#w-node-_65035bea-90f0-ce49-1425-968f69da25ed-3bd2fc40 {
  place-self: auto;
}

#w-node-_0410d28e-1b40-9fde-1347-45a36c30c325-2e66442c {
  justify-self: end;
}

#w-node-_7932c4ca-95bc-27fb-f805-e5e3a17f9712-2e66442c {
  place-self: auto;
}

#w-node-_9374b13d-70ff-eb9a-677b-948194e7b194-2e66442c {
  justify-self: auto;
}

#w-node-_65035bea-90f0-ce49-1425-968f69da25ed-2e66442c {
  place-self: auto;
}

#w-node-_0410d28e-1b40-9fde-1347-45a36c30c325-05182512 {
  justify-self: end;
}

#w-node-_70f97f21-5947-60e4-96c5-b200ea0953b2-05182512 {
  justify-self: auto;
}

#w-node-_7932c4ca-95bc-27fb-f805-e5e3a17f9712-05182512 {
  place-self: auto;
}

#w-node-_9374b13d-70ff-eb9a-677b-948194e7b194-05182512 {
  justify-self: auto;
}

#w-node-_65035bea-90f0-ce49-1425-968f69da25ed-05182512 {
  place-self: auto;
}

/* CSS Footer Animations - Working Version */
/* GSAP handles footer animations - removed keyframe animation */

/* Initial state for footer elements - handled by GSAP */
/* GSAP sets initial opacity: 0 and y: 60 for footer elements */

/* GSAP Footer Animations - Initial states handled by JavaScript */
/* Removed Webflow animation classes in favor of GSAP animations */

/* Enhanced bottom footer styling */
.u-grid-column-3.bottom-footer {
  position: relative;
  transition: all 0.3s ease;
}

.u-grid-column-3.bottom-footer:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

/* Ensure smooth animation performance */
.section.footer [data-w-id] {
  will-change: transform, opacity;
}

/* Add a subtle entrance effect for the bottom footer */
.u-grid-column-3.bottom-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.u-grid-column-3.bottom-footer:hover::before {
  opacity: 1;
}

/* Ensure smooth animation for footer elements */
.section.footer [data-w-id] {
  will-change: transform, opacity;
}

/* Debug: Ensure footer is visible by default */
.u-grid-column-3.bottom-footer {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

/* Debug: Ensure footer section is visible */
.section.footer {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* HTML base styles */
html {
  min-height: 100%;
  font-size: 1rem;
}

/* Hide scrollbars */
::-webkit-scrollbar {
  display: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide grid wrapper */

/* Text styling with stroke effect */

.text span {
  color: #fff;
}

/* Noise texture overlay */
.noise {
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: hard-light;
  opacity: 40%;
}

.noise::before {
  content: "";
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: url(https://cdn.prod.website-files.com/669799f4afcf09e77ccd79c9/677c0a4e607d776a00b5833e_tex__free_noise_glitter_texture_by_cocobunnie-d7tzw2j-1.webp);
  -webkit-animation: 150ms infinite noise;
  animation: 150ms infinite noise;
}

/* Noise animation keyframes */
@-webkit-keyframes noise {
  0%,
  100% {
    background-position: 0 0;
  }

  10% {
    background-position: -5% -10%;
  }

  20% {
    background-position: -15% 5%;
  }

  30% {
    background-position: 7% -25%;
  }

  40% {
    background-position: 20% 25%;
  }

  50% {
    background-position: -25% 10%;
  }

  60% {
    background-position: 15% 5%;
  }

  70% {
    background-position: 0 15%;
  }

  80% {
    background-position: 25% 35%;
  }

  90% {
    background-position: -10% 10%;
  }
}

@keyframes noise {
  0%,
  100% {
    background-position: 0 0;
  }

  10% {
    background-position: -5% -10%;
  }

  20% {
    background-position: -15% 5%;
  }

  30% {
    background-position: 7% -25%;
  }

  40% {
    background-position: 20% 25%;
  }

  50% {
    background-position: -25% 10%;
  }

  60% {
    background-position: 15% 5%;
  }

  70% {
    background-position: 0 15%;
  }

  80% {
    background-position: 25% 35%;
  }

  90% {
    background-position: -10% 10%;
  }
}

/* Cyberpunk button styles */
.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1001;
}

.cyber-button {
  --button-color: var(--swatch--brand);
  --button-glow: rgba(255, 98, 0, 0.3);
  --hover-color: var(--swatch--berlin);
  background: var(--button-color);
  color: #000;
  font-family: "Tx 02", monospace;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px var(--button-glow);
}

.cyber-button:hover {
  background: var(--hover-color);
  box-shadow: 0 0 20px var(--hover-color);
}

.cyber-button-secondary {
  --button-color: var(--swatch--deep-night);
  --button-glow: rgba(255, 98, 0, 0.3);
  --hover-color: var(--swatch--berlin);
  background: var(--button-color);
  color: var(--swatch--light);
  font-family: "Tx 02", monospace;
  font-size: 1rem;
  font-weight: medium;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px var(--button-glow);
}

.cyber-button-secondary:hover {
  background: var(--hover-color);
  box-shadow: 0 0 20px var(--hover-color);
  color: #000;
}

.button-svg {
  transition: all 0.3s ease;
}

.button-svg.left {
  margin-right: -53px;
}

.button-svg.right {
  margin-left: -53px;
}

.button-container:hover .button-svg.left {
  margin-right: -45px;
}

.button-container:hover .button-svg.right {
  margin-left: -45px;
}

.button-container:hover .button-svg path {
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.button-container:hover .button-svg circle {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* Appear animation for blocks */
@keyframes appear {
  from {
    opacity: 0;
    -webkit-clip-path: inset(100% 100% 0 0);
    clip-path: inset(100% 100% 0 0);
  }

  to {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

/* Loading bar styles */
#loading-text {
  margin-bottom: 20px;
  transition: opacity 0.3s ease;
  font-family: var(--font--secondary-family);
  font-size: var(--size--0-8rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 300;
}

#loading-bar-bg {
  width: 200px;
  height: 2px;
  background-color: #777;
  position: relative;
}

#loading-bar {
  width: 0;
  height: 100%;
  background-color: #fff;
  transition: width 0.02s ease-out;
  position: relative;
}

#loader-container {
  transition: opacity 0.3s ease;
  text-align: center;
}

#loader-container {
  transition: opacity 0.5s ease;
}

/* Slide-in-top animation */
.slide-in-top {
  -webkit-animation: slide-in-top 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    1.5s both;
  animation: slide-in-top 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.5s both;
}

/* Slide-in-top keyframes */
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-150px);
    transform: translateY(-150px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-150px);
    transform: translateY(-150px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* Text flicker-in-glow animation */
.text-flicker-in-glow {
  -webkit-animation: text-flicker-in-glow 1.5s cubic-bezier(1, 0, 0, 1) 2s both;
  animation: text-flicker-in-glow 1.5s cubic-bezier(1, 0, 0, 1) 2s both;
}

/* Text flicker-in-glow keyframes */
@-webkit-keyframes text-flicker-in-glow {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
    text-shadow: none;
  }

  30% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  }

  40% {
    opacity: 0;
    text-shadow: none;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3),
      0 0 30px rgba(255, 255, 255, 0.2);
  }

  60% {
    opacity: 0;
    text-shadow: none;
  }

  70% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4),
      0 0 30px rgba(255, 255, 255, 0.2), 0 0 50px rgba(255, 255, 255, 0.1);
  }

  80% {
    opacity: 0;
    text-shadow: none;
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5),
      0 0 30px rgba(255, 255, 255, 0.3);
  }
}

@keyframes text-flicker-in-glow {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
    text-shadow: none;
  }

  15% {
    opacity: 1;
    text-shadow: none;
  }

  20% {
    opacity: 0;
    text-shadow: none;
  }

  30% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  }

  40% {
    opacity: 0;
    text-shadow: none;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3),
      0 0 30px rgba(255, 255, 255, 0.2);
  }

  60% {
    opacity: 0;
    text-shadow: none;
  }

  70% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4),
      0 0 30px rgba(255, 255, 255, 0.2), 0 0 50px rgba(255, 255, 255, 0.1);
  }

  80% {
    opacity: 0;
    text-shadow: none;
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5),
      0 0 30px rgba(255, 255, 255, 0.3);
  }
}

/* Slide-in-left animation */
.slide-in-left {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 6s
    both;
  animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 6s both;
}

/* Slide-in-left with shorter delay for CTA buttons */

/* Enhanced hover effect for CTA button */
.join-the-movement:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* Animation for text-block-4 with staggered timing */
.text-block-4.slide-in-bottom-1 {
  -webkit-animation: slide-in-bottom-1 0.5s cubic-bezier(0.215, 0.61, 0.355, 1)
    1.5s both;
  animation: slide-in-bottom-1 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s
    both;
}

/* ============================================================================
   DISABLED FOURTH SECTION STYLES - COMMENTED OUT (UNUSED)
   ============================================================================ */

/* Fourth section scroll-triggered animation initial states */
/* [data-w-id="fourth-section-title"] {
  opacity: 0;
  transform: translateY(-50px);
}

[data-w-id="fourth-section-button"] {
  opacity: 0;
  transform: translateX(-100px);
}

[data-w-id="fourth-section-text"] {
  opacity: 0;
  transform: translateX(100px);
}

[data-w-id="fourth-section-button"] .text-block-4 {
  opacity: 0;
  transform: translateY(20px);
} */

/* Slide-in-left keyframes */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide-in-right animation */
.slide-in-right {
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s
    both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s both;
}

/* Slide-in-right keyframes */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(50vw);
    transform: translateX(50vw);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(50vw);
    transform: translateX(50vw);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* Rotate-in-ver animation */
.rotate-in-ver {
  -webkit-animation: rotate-in-ver 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 11s
    both;
  animation: rotate-in-ver 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 11s both;
}

/* Rotate-in-ver keyframes */
@-webkit-keyframes rotate-in-ver {
  0% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes rotate-in-ver {
  0% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/* Menu slide-in animations */

@-webkit-keyframes slide-in-bottom-1 {
  0% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom-1 {
  0% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-bottom-2 {
  0% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom-2 {
  0% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-bottom-3 {
  0% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom-3 {
  0% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* Exploration card styles */
.exploration-card {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform: translateY(10px);
  pointer-events: auto;
  /* Enable interactions with the card itself */
}

.exploration-card.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ensure all text in exploration cards is left-aligned */
.exploration-card,
.exploration-card *,
.exploration-card .u-text-card,
.exploration-card .map-card-eyebrow,
.exploration-card .map-card-title,
.exploration-card .card__title,
.exploration-card .u-text-h5,
.exploration-card .u-text-small,
.exploration-card .map-card-text,
.exploration-card h1,
.exploration-card h5,
.exploration-card h6,
.exploration-card card,
.exploration-card small,
.exploration-card div {
  text-align: left !important;
}

/* Reset internal elements to initial state */
card,
h5,
.card-map-image,
small {
  opacity: 0;
  transform: translateY(20px);
}

.card-map-image {
  transform: scale(0.9);
}

.map-pointer {
  touch-action: manipulation;
  /* Improve touch responsiveness */
  cursor: pointer;
  /* Show tap indication */
}

/* Perspective container for 3D effects */
.perspective-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.perspective-container.visible {
  opacity: 0.5;
  transform: scale(1);
}

#main-svg {
  width: 100%;
  height: 100vh;
}

/* Terminal Window */
.terminal-window {
  position: absolute;
  bottom: 5rem;
  width: 29rem;
  height: auto;
  background-color: black;
  border: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  margin: auto;
}

.terminal-window.visible {
  opacity: 1;
  transform: translateY(0);
}

/* HUD Terminal lines specific styling */
.terminal-window .terminal-line {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.terminal-window .terminal-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.terminal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terminal-title {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

.terminal-controls {
  display: flex;
  gap: 8px;
}

.terminal-control {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
}

.terminal-content {
  padding: 12px;
  font-size: 0.8rem;
  font-family: monospace;
  height: calc(100% - 28px);
  overflow: auto;
}

.terminal-line {
  opacity: 0;
  transition: opacity 0.3s;
  margin-bottom: 4px;
}

.terminal-line.visible {
  opacity: 1;
}

.success {
  color: #fb3a04;
  /* green-400 */
}

/* Terminal Window Mobile Responsive */
@media (max-width: 768px) {
  .terminal-window {
    width: 95vw;
    max-width: 95vw;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
  }

  .terminal {
    width: 95vw;
    max-width: 95vw;
  }

  .terminal.typing-text {
    width: 95vw;
    max-width: 95vw;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .terminal.last {
    width: 95vw;
    max-width: 95vw;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Extra small screens - additional terminal constraints */
@media (max-width: 480px) {
  .berlin-2094-text {
    padding-bottom: 4rem;
    line-height: 1.5em;
  }

  .u-text-large.berlin-2094-text {
    padding-bottom: 4rem;
    margin-bottom: 3rem;
  }

  /* Reduce bottom margin of berlin-2094-title on very small screens */
  h3.berlin-2094-title {
    margin-bottom: 0.75rem;
  }

  /* Reserve space for berlin-2094-text container on very small screens */
  .right-column-content.type-text-container:has(.berlin-2094-text) {
    min-height: 450px;
  }

  /* Ensure section containing berlin-2094-text doesn't constrain height on very small screens */
  .section.berlin-2094-section,
  .section:has(.berlin-2094-text) {
    height: auto !important;
    min-height: 550px !important;
    overflow: visible !important;
  }

  .terminal-window {
    width: 95vw;
    max-width: 95vw;
    bottom: 1rem;
    padding: 0.5rem;
  }

  .terminal-window .terminal-content {
    padding: 8px;
    font-size: 0.7rem;
  }

  .terminal {
    width: 95vw;
    max-width: 95vw;
  }

  .terminal.typing-text {
    width: 95vw;
    max-width: 95vw;
  }

  .terminal.last {
    width: 95vw;
    max-width: 95vw;
  }

  .join-the-movement {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Animations */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    r: 5;
    opacity: 1;
  }

  50% {
    r: 10;
    opacity: 0.5;
  }

  100% {
    r: 5;
    opacity: 1;
  }
}

@keyframes scan {
  0% {
    transform: rotate(0deg);
    stroke-opacity: 0.8;
  }

  50% {
    stroke-opacity: 0.2;
  }

  100% {
    transform: rotate(360deg);
    stroke-opacity: 0.8;
  }
}

/* Apply animations */

.radar-scan {
  animation: scan 4s linear infinite;
  transform-origin: 0px 0px;
}

/* CSS animations for elements that don't need JavaScript */
.node-pulse {
  animation: rotate 10s linear infinite;
  transform-origin: 600px 400px;
}

.orbit-3d-1 {
  animation: rotate 60s linear infinite;
  transform-origin: 600px 400px;
}

.orbit-3d-2 {
  animation: rotate 45s linear infinite reverse;
  transform-origin: 600px 400px;
}

.orbit-3d-3 {
  animation: rotate 50s linear infinite;
  transform-origin: 600px 400px;
}

.orbit-3d-4 {
  animation: rotate 40s linear infinite reverse;
  transform-origin: 600px 400px;
}

.satellite-3d-1 {
  animation: radar 8s ease-in-out infinite;
}

.satellite-3d-2 {
  animation: radar 10s ease-in-out infinite;
}

.node-3d-1,
.node-3d-2,
.node-3d-3,
.node-3d-4 {
  animation: radar 7s ease-in-out infinite;
}

.connection-line {
  stroke-dasharray: 5, 5;
  animation: dash 20s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

/* Follow button styles */
#followButton {
  position: absolute;
  --button-color: var(--swatch--brand);
  --button-glow: rgba(255, 98, 0, 0.3);
  --hover-color: var(--swatch--berlin);
  background: var(--button-color);
  color: #000;
  font-family: "Tx 02", monospace;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  transition: all 0.2s ease, opacity 0.5s ease-in-out;
  box-shadow: 0 0 10px var(--button-glow);
  cursor: pointer;
  z-index: 1000;
  /* Initially hidden to prevent flash on page reload */
  opacity: 0;
  display: none;
  /* Ensure the button is on top */
  /* Performance optimizations */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  contain: layout style paint;
  isolation: isolate;
}

#followButton:hover {
  background: var(--hover-color);
  box-shadow: 0 0 20px var(--hover-color);
  cursor: pointer;
  /* Performance optimization for hover state */
  transform: translateZ(0) scale(1.02);
}

/* Scene styles */

/* Responsive typography */
:root {
  --h1--font-size: clamp(
    2rem,
    1.4285714285714286rem + 2.857142857142857vw,
    4rem
  );
}

/* Ensure smooth scaling animations */
.spline-scene canvas {
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Performance optimizations for 3D elements */
.spline-scene {
  /* Hardware acceleration for smooth animations */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  /* Optimize for animations */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* Prevent layout shifts */
  contain: layout style paint;
}

/* Container optimizations for 3D rendering */
.spline-container {
  /* Ensure proper 3D rendering context */
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  /* Hardware acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  cursor: pointer;
}

/* Scroll-triggered animation states for 3D elements */
.spline-scene.scroll-hidden {
  opacity: 0;
  transform: scale(0.1);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.spline-scene.scroll-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Loading state for 3D elements */
.spline-scene.loading {
  opacity: 0.5;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Error state for 3D elements */
.spline-scene.error {
  opacity: 0.3;
  transform: scale(0.9);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced animation states with better easing */
.spline-scene.scroll-hidden {
  opacity: 0;
  transform: scale(0.1) translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.spline-scene.scroll-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Loading animation for 3D elements */
.spline-scene.loading {
  opacity: 0.5;
  transform: scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.spline-scene.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
  pointer-events: none;
}

/* Ensure proper positioning for loading state */
.spline-scene.loading canvas {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

/* Loading spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Smooth hover transitions */
.spline-scene:hover {
  transform: scale(1.03) translateY(-3px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* Focus states for accessibility */
.spline-scene:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .spline-scene,
  .spline-scene * {
    transition: none !important;
    animation: none !important;
  }

  .spline-scene.scroll-hidden {
    opacity: 1;
    transform: scale(1);
  }
}


/* Shader canvas responsive width constraints - all screen sizes */
canvas[style*="position: fixed"] {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100vw !important;
  height: 100vh !important;
  left: 0 !important;
  top: 0 !important;
  overflow: hidden !important;
}

/* Shader canvas mobile width constraints */
@media (max-width: 768px) {
  canvas[style*="position: fixed"] {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    overflow: hidden !important;
  }
}

/* ============================================================================
   5. UTILITY CLASSES & ANIMATIONS
   ============================================================================ */

/* Extra small screens - additional shader constraints */
@media (max-width: 480px) {
  canvas[style*="position: fixed"] {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
  }
}

/* Mobile-specific animation adjustments for very small screens */
@media (max-width: 480px) {
  @keyframes slide-in-left {
    0% {
      transform: translateX(-50vw);
      opacity: 0;
    }

    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-right {
    0% {
      transform: translateX(50vw);
      opacity: 0;
    }

    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-bottom-1 {
    0% {
      transform: translateY(50vh);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-bottom-2 {
    0% {
      transform: translateY(50vh);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slide-in-bottom-3 {
    0% {
      transform: translateY(50vh);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}