html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
  margin: 0;
  font-family: "Antipasto", sans-serif;
  /* text-transform: uppercase; */
  letter-spacing: 0.1em;
  font-size: 20px;
  background: #000;
  color: #fff;
}
main {
  padding: 1.5rem;
  /* max-width: 650px; */
  max-width: calc(100% - 40vh);
}
@media (max-width: 600px) {
  main {
    max-width: 100%;
  }
}
h1 {
  font-size: clamp(2.3rem, 6vw, 5rem);
  margin-top: 5px;
}
p {
  font-size: clamp(1.4rem, 4vw, 3rem);
  line-height: clamp(1.6rem, 4.5vw, 3.1rem);
}
ul{
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: clamp(2.2rem, 5.5vw, 4rem);
}
li {
}
#ian {
  position: absolute;
  top: 17vw;
  right: 0;
  height: calc(100vh - 14vw);
  /* width: calc(100vw - 650px); */
  width: stretch;
  /* overflow: hidden; */
}
@media (max-width: 600px) {
  #ian {
    right: 2px;
  }
}
#handsOverlay {
  position: absolute;
  right: -65px;
  height: 100%;
}
#ianHands {
  position: absolute;
  right: -65px;
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.5s linear, transform 0.5s ease-in;
  height: 100%;
}
@media (max-width: 600px) {
  #ianHands, #handsOverlay {
    right: -43px;
  }
}
#ianBody {
  position: absolute;
  right: -65px;
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.5s linear, transform 0.8s ease-out;
  height: 100%;
  z-index: 1;
}
@media (max-width: 600px) {
  #ianBody {
  /* right: -252px; */
  }
}
#handsOverlay { z-index: 13; }
#ianHands { z-index: 12; }
#ianBody { z-index: 11; }

#handsOverlay img,
#ianHands img,
#ianBody img {
  height: 100%;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  #handsOverlay, #ianHands, #ianBody {
    height: 50vh;
  }
}



@media (max-width: 600px) {
  ul{
    padding-left: 1.5rem;
  }
}

/* DEFAULT: fade only #blur (all pages except index) */
#blur {
  position: relative;
}

#pageFade {
  position: absolute;
  inset: 0;
  background: black;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 5;
}

/* INDEX PAGE: fade entire screen including hamburger */
.index-page #pageFade {
  position: fixed;
  z-index: 20; /* above everything */
}

/* Fade-out class */
#pageFade.fade-out {
  opacity: 0;
}

/* Fade-to-black for navigation */
#pageFade.active {
  opacity: 1;
  pointer-events: auto;
  position: fixed;
  inset: 0;
  z-index: 5;
}



/* Universal fade-up animation */
.fade-seq {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* Stagger helpers */
.delay-0  { animation-delay: 0s; }
.delay-1  { animation-delay: 0.2s; }
.delay-2  { animation-delay: 0.4s; }
.delay-3  { animation-delay: 0.6s; }
.delay-4  { animation-delay: 0.8s; }
.delay-5  { animation-delay: 1.0s; }
.delay-6  { animation-delay: 1.2s; }
.delay-7  { animation-delay: 1.4s; }
.delay-8  { animation-delay: 1.6s; }
.delay-9  { animation-delay: 1.8s; }
.delay-10  { animation-delay: 2s; }
.delay-11  { animation-delay: 2.2s; }
.delay-12  { animation-delay: 2.4s; }
.delay-13  { animation-delay: 2.6s; }
.delay-14  { animation-delay: 2.8s; }
.delay-15  { animation-delay: 3s; }


@font-face {
  font-family: "Antipasto";
  src: url("Fonts/Antipasto/Antipasto-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("Fonts/Quicksand/Quicksand_Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Hide the break by default (Desktop/Tablet) */
.mobile-break {
  display: none;
}

/* Show the break only on small screens */
@media (max-width: 600px) {
  .mobile-break {
    display: inline;
  }
  .mobile-size {
    font-size: 36vw;
  }
  .masked-text {
    line-height: 31vw !important;
    padding-top: 3.1rem !important;
    font-size: 23.3vw !important;
  }
}


:root {
  --tile-width: 750px;
  --tile-height: 1000px;
}

/* Masked text with drifting background */
.masked-text {
  font-family: "Boldonse", system-ui;
  font-size: 16vw;
  text-transform: uppercase;

  line-height: 20vw;
  padding-top: 1.5rem;
  padding-left: 1.5rem;

  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  background-image: url("RainbowSkies_Tile.jpg");
  background-repeat: repeat;
  background-size: var(--tile-width) var(--tile-height);

  /* base position from CSS variables */
  background-position-x: var(--start-x, 0px);
  background-position-y: var(--start-y, 0px);

  animation:
    panY 40s linear infinite,
    panX 160s linear infinite;

  filter: hue-rotate(0deg);
  transition: filter 10s linear;
}
.masked-text:active {
  /* filter: drop-shadow(0px 0px 1px #fff); */
  cursor: wait !important;
  filter: hue-rotate(3600deg);
  /* animation-play-state: paused; */
}
.masked-text:hover {
  cursor: pointer;
}

/* Vertical scroll: start at --start-y, move one tile height */
@keyframes panY {
  from { background-position-y: var(--start-y); }
  to   { background-position-y: calc(var(--start-y) + var(--tile-height)); }
}

/* Horizontal scroll: start at --start-x, move one tile width */
@keyframes panX {
  from { background-position-x: var(--start-x); }
  to   { background-position-x: calc(var(--start-x) + var(--tile-width)); }
}


.boldonse-regular {
  font-family: "Boldonse", system-ui;
  font-weight: 400;
  font-style: normal;
}

.top-menu {
  background: #000;
  color: #fff;
  position: relative;
  /* height: 74px; */
  z-index: 1;
  /* background-image: url(RainbowSkies_Tile.jpg);
  background-position: 0px 260px;
  background-size: cover; */
}
.logo {
  /* position: relative; */
  left: 20px;
  /* bottom: -20px; */
  /* width: 255px; */
}
.logo svg {
  width: 255px;
}
.menuItem {
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding-left: 0px;
  transition: 0.25s;
  font-size: clamp(8vh, 9vh, 12vw);
}
.menuItem:hover {
  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 0px 10px #fff;
  transition: 0.25s;
}
/* #menuWrapper {
  overflow: hidden;
  width: calc(100vw - 0px);
  height: calc(100vh - 0px);
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 10;
} */
#menuWrapper {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  pointer-events: none; /* <— THIS is the key */
}

#hamburger,
#menuContainer {
  pointer-events: auto; /* restore interactivity only where needed */
}

#hamburgerWrapper,
#hamburger {
  position: relative;
  z-index: 15; /* higher than pageFade */
}

#hamburgerWrapper {
  mix-blend-mode: normal;
}

#hamburger {
  position: absolute;
  top: 25px;
  right: 30px;
  cursor: pointer;
  transition: filter 0.25s linear;
}
#hamburger:hover {
  filter: drop-shadow(0px 0px 5px #fff);
}
#hamburger .line {
  width: 40px;
  height: 5px;
  background-color: #fff;
  margin-bottom: 5px;
  border-radius: 5px;
}
#closeX {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  opacity: 0.75;
  transition: 0.25s;
}
#closeX:hover {
  opacity: 1;
  filter: drop-shadow(0px 0px 5px #fff);
}
#menuContainer {
  background-color: rgba(0, 56, 136, 0.85);
  overflow: hidden;
  border: 0px solid #fff;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  transition: background-color 2s;
  padding-right: 20px;
}
#menuContainer div {
  opacity: 0;
  position: relative;
  top: 0;
  left: 10px;
  padding: 10px;
}
#blur {
  transition: 1s;
}