/* RESET */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
}

/* ========================= */
/* LOADER */
/* ========================= */

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 9999;
}

#loadingVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

/* ========================= */
/* MAIN CONTENT */
/* ========================= */

/* MAIN CONTENT centered on screen */
#mainContent {
  display: none;

  width: calc(2304px/1.5);
  height: calc(1296px/1.5);

  position: absolute;
  top: 50%;
  left: 63.65%;
  object-fit: cover;
  transform: translate(-50%, -50%);

  opacity: 0;
transition:  opacity 1s ease;
  overflow: hidden;
}

#bgContent {
  display: none;

  width: calc(2304px/1.5);
  height: calc(1296px/1.5);

  position: absolute;
  top: 50%;
  left: 60%;
  object-fit: cover;
  transform: translate(-50%, -50%);

  opacity: 0;
transition:  opacity 1s ease;
  overflow: hidden;
}



/* IMAGES fill container (no centering needed) */
#img1 {
  position: absolute;
  top: 0;
  left: 0;
  
  width: calc(2304px/1.5);
  height: calc(1296px/1.5);
   pointer-events: none;

  object-fit: contain; /* or 'cover' depending on your goal */
}
#img2 {
  position: absolute;
  top: 0;
  left: 0;

  width: calc(2304px/1.5);
  height: calc(1296px/1.5);
   pointer-events: none;
  opacity:30%;

  object-fit: contain; /* or 'cover' depending on your goal */
}
.fing {
  position: absolute;
   transform: translate(-50%, -50%) scale(0.666);

   pointer-events: none;
  opacity:70%;
  object-fit: contain; /* or 'cover' depending on your goal */
}

/* LAYERS */
#img1 { z-index: -1; }

.hoverAnim {
  position: absolute;
  opacity:70%;

  /* CENTER-BASED POSITIONING */
  transform: translate(-50%, -50%) scale(1);

  /* smooth scaling */
  transition: opacity 0.2s ease;

  /* optional size control */
  width: calc(150px/1.5);
  height: auto;
  
}

/* hover scale */
.hoverAnim.hovering {
  opacity:100%;
}

#sidebar {
  position: absolute;
  top: 50%;
  left: 3.7%;
  transform: translateY(-50%);
  z-index: 20;

  display: inline-flex;      /* 👈 key */
  flex-direction: column;
  align-items: flex-start;   /* prevents stretching */

  pointer-events: auto;
   height: 640px;              /* same idea as textbox */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;

   scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;
}

#sidebar {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 85%,
    transparent 100%
  );
}



#sidebar::-webkit-scrollbar-thumb {
  display: none;
}

#sidebar h1 {
  pointer-events: auto;
  display: inline-block;
  width: fit-content;   /* 👈 important */
}

.helvetica {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}
h1{
  font-size:calc(30px/1.5) !important;
  font-weight:100 !important;
  color:white !important;
  font-family:sans-serif;
  letter-spacing:calc(10px/1.5);
  text-align:left;
  margin:0px;
  line-height:calc(30px);
  opacity:70%;
  text-shadow:
    0 0 5px rgba(255,255,255,0.8),
    0 0 15px rgba(255,255,255,0.5),
    0 0 30px rgba(255,255,255,0.3),
    0 0 60px rgba(255,255,255,0.2);
  transition:0.5s;
}
h1:hover{
   text-shadow:
    0 0 17px rgba(255,255,255,500000.8),
    0 0 15px rgba(255,255,255,0.5),
    0 0 30px rgba(255,255,255,0.3),
    0 0 160px rgba(255,255,255,0.2);
  opacity:100%;
    transition:0.5s;
}

h2{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:calc(22px/1.5) !important;
  font-weight:200;
  color:white !important;
  letter-spacing:calc(5px/1.5);
  text-align:left;
  margin:0px;
  line-height:calc(30px);
  opacity:70%;

}
.textBox {
  position: absolute;
  transform: translate(-50%, -50%);

  
  width: var(--w);
  height: var(--h);

  left: var(--x);
  top: var(--y);
  scroll-behavior: smooth;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 10px;
}

/* fade effect (clean version) */
.textBox {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 85%,
    transparent 100%
  );
}

/* your text styling (slightly adjusted) */
.textBox h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(22px/1.5);
  font-weight: 200;
  color: white;

  letter-spacing: calc(3);
  text-align: left;
  margin: 0;

  line-height: calc(20px);
  opacity: 0.7;

}

.textBox a {
  color: #ffffff; /* keep links white, or your preferred color */
  text-decoration: underline; /* optional, can remove if you want no underline */
  font-weight: 300; /* or bold, whatever fits your style */
  opacity: 1;
}

.textBox::-webkit-scrollbar {
  width: 6px;
}

.textBox::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
}

.dot {
  position: absolute;
  opacity:70%;
  /* visual */
  background: white;
  border-radius: 50%;

  /* optional glow (remove if not wanted) */
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
}

.section {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);

  width: calc(2304px/1.2);
  height: calc(1296px/1.2);

  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;

  z-index: 10;
}

#me2{
    position: absolute;
   transform: translate(-50%, -50%) scale(0.666);

   pointer-events: none;
  opacity:70%;
  object-fit: contain; /* or 'cover' depending on your goal */
}

#meScroll {
  position: absolute;

  left: 772px;
  top: 541.57356px;

  transform: translate(-50%, -50%);

  width: 758px;
  height: 758px;

  overflow-y: auto;
  overflow-x: hidden;

  opacity: 0.8;
  pointer-events: auto;

  display: flex;
  flex-direction: column;
  gap: 31px; /* 👈 THIS controls spacing */

  scroll-behavior: smooth;

  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

#meScroll {
 -webkit-mask-image: linear-gradient(
  to bottom,
  rgba(0,0,0,1) 85%,
  rgba(0,0,0,0.3) 95%,
  rgba(0,0,0,0) 100%
);
mask-image: linear-gradient(
  to bottom,
  rgba(0,0,0,1) 85%,
  rgba(0,0,0,0.3) 95%,
  rgba(0,0,0,0) 100%
);
}

#meScroll::-webkit-scrollbar {
  display: none;
}

#meScroll img,
#meScroll video {
  width: 758px;     /* 👈 fixed width */
  height: auto;     /* 👈 keeps proportions */
  display: block;
}

#meScroll iframe {
  width: 758px;       /* match your images */
  height: 420px;      /* 16:9 ratio */
  border: none;       /* remove default iframe border */
  display: block;
}

.centerItem {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  width: 100%;
  min-height: 758px;       /* iframe height */
}

h3{
  font-size:calc(30px/1.5) !important;
  font-weight:100 !important;
  color:white !important;
  font-family:sans-serif;
  letter-spacing:calc(10px/1.5);
  text-align:left;
  margin:0px;
  line-height:calc(30px);
  opacity:100%;
  text-shadow:
    0 0 5px rgba(255,255,255,0.8),
    0 0 15px rgba(255,255,255,0.5),
    0 0 30px rgba(255,255,255,0.3),
    0 0 60px rgba(255,255,255,0.2);
  transition:0.5s;
}

body {
  cursor: none;
}

#cursor {
  position: fixed;
  width: 32px;
  height: 32px; /* 👈 FORCE SAME BOX */

  object-fit: contain; /* prevents stretching */

  pointer-events: none;
  z-index: 9999;

  transform: translate(-50%, -50%);

  transition: 
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
}