html {
  scroll-behavior: smooth;
  cursor: url("Images/curshover.png") 0 0, default;
}

* {
  cursor: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: black;
}

header {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-family: skyrim;
  font-size: 38px;
  color: rgb(0, 0, 0);
  padding: 10px 0;
  z-index: 10;
  transition: all 1s ease;
  opacity: 0.7;
}

.scroll {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.scrolltext {
  position: relative;
  z-index: 10;
  padding: 100px 46px;
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
  header {
    font-size: 22px;
  }
}


/* Buttons */


.enter-btn-img {
  width: 180px;
  height: auto;
  display: block;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.8));
}

@media (max-width: 768px) {
  .enter-btn-img {
    width: 165px;
  }
}

.enter-button {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: rgb(195, 195, 195);
  font-size: 21px;
  z-index: 4;
  font-family: skyrim;
  transition: all 0.3s ease;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
  animation: fadeInEnter 0.5s ease 0.5s both;
}

@keyframes fadeInEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.back-button {
  position: fixed;
  top: 9%;
  font-size: 5px;
  left: 10%;
  transform: translateX(-50%);
  background: none;
  border: none;
  z-index: 500;
  opacity: 1;
  transition: all 0.3s ease;
  animation: fadeInEnter 0.8s ease 0.8s both;
}

.home-button {
  z-index: 500;
  transition: transform 1s ease;
  border: none;
  padding: 10px;
  background-color: #00000000;
}

.home-button:hover {
  transform: scale(1.25);
}

.enter-button:hover,
.back-button:hover {
  color: #bdbdbd85;
  transform: translateX(-50%) scale(1.1);
}

.arrow {
  width: 95px;
  transition: transform 8s ease;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.95));
  opacity: 0.9;
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
  .back-button {
    scale: 1.5;
    left: 24%;
    top: 7%;
  }

  .enter-button {
    font-size: 22px;
    bottom: max(12%, env(safe-area-inset-bottom, 0px) + 2rem);
  }

  .arrow {
  width: 65px;
  }
}


/* Text */


p {
  font-family: skyrim;
  font-size: 30px;
  color: rgba(207, 207, 207, 0.689);
  background-color: #00000000;
  padding: 50px;
  margin: 15vh auto;
  max-width: 800px;
  text-align: center;
  box-shadow: 0 100px 40px rgba(0, 0, 0, 0.854);
}

#welcome,
#bourgeois {
  z-index: 500;
  pointer-events: none;
  font-family: skyrim;
}

#bourgeois {
  position: fixed;
  top: 50%;
  font-size: 280px;
  color: white;
  transform: translate(-50%, -50%);
  left: 50%;
  opacity: 0;
}

#welcome {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
  opacity: 0;
  background: radial-gradient(ellipse at center, #0c0a08 0%, #000 70%);
}

#welcome-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

#welcome-logo {
  width: clamp(190px, 34vw, 370px);
  height: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  filter: brightness(0.95) drop-shadow(0 6px 26px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(170,50,45,0.16));
  animation: welcomeLogoIn 1.7s cubic-bezier(.16,1,.3,1) 0.3s forwards;
}

#welcome-bar {
  position: relative;
  margin-top: clamp(26px, 5.5vh, 50px);
  width: clamp(150px, 26vw, 250px);
  height: 1px;
  background: rgba(206, 184, 144, 0.16);
  overflow: hidden;
  opacity: 0;
  animation: welcomeFade 1.1s ease 0.9s forwards;
}

#welcome-bar::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(214,190,148,0.95));
  box-shadow: 0 0 12px rgba(200,150,90,0.5);
  animation: welcomeBar 3s cubic-bezier(.45,.05,.2,1) 1s forwards;
}

@keyframes welcomeLogoIn { to { opacity: 1; transform: none; } }
@keyframes welcomeFade { to { opacity: 1; } }
@keyframes welcomeBar { to { width: 100%; } }

.neon-text {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px rgb(210, 210, 210),
    0 0 80px rgb(170, 168, 168),
    0 0 90px rgb(160, 160, 160),
    0 0 100px rgb(67, 67, 67),
    0 0 150px rgb(43, 43, 43);
}

.neon-header {
  color: #000000;
  text-shadow:
    0 0 5px #c5c5c587,
    0 0 10px #a5a5a58a,
    0 0 20px #71717181,
    0 0 40px rgba(97, 97, 97, 0.499),
    0 0 80px rgba(67, 66, 66, 0.498),
    0 0 90px rgba(58, 58, 58, 0.508),
    0 0 100px rgba(37, 37, 37, 0.532),
    0 0 150px rgba(43, 43, 43, 0.5);
}

#bourgeois.flicker {
  animation: flicker 0.5s linear;
}


@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

@keyframes appear {
  to {
    opacity: 1;
  }
}

@keyframes flicker {
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  20%  { opacity: 0; }
  30%  { opacity: 0.8; }
  40%  { opacity: 0; }
  50%  { opacity: 0.8; }
  60%  { opacity: 0; }
  70%  { opacity: 0.8; }
  80%  { opacity: 0; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; }
}

@font-face {
  font-family: 'skyrim';
  src: url(Fonts/DarkXShadowSkyrim.ttf);
}

@font-face {
  font-family: 'morris';
  src: url(Fonts/MorrisRoman-Black.ttf);
}

@media only screen and (max-width: 800px), (max-device-width: 800px) {
 p {
  font-size: 30px;
 }
 #welcome {
  transition: opacity 0.8s ease;
}
 #bourgeois {
  font-size: 80px;
  color: white;
}
}


/* Background */


.glitch {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.22;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.castle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.95;
  filter: brightness(1.4);
  z-index: 2;
  pointer-events: none;
}

.fog {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 120vh;
  width: auto;
  object-fit: cover;
  z-index: 4;
  opacity: 0.7;
  pointer-events: none;
}

.fog2 {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 120vh;
  width: auto;
  object-fit: cover;
  z-index: 4;
  opacity: 0.75;
  pointer-events: none;
  will-change: transform;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: black;
  pointer-events: none;
  opacity: 0.25;
  z-index: 9;
}

#fade-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
  z-index: 999;
}

#fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 1;
  pointer-events: none;
  transition: opacity 5s ease;
  z-index: 1000;
}

#black-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.4s ease;   /* lifted by the loading sequence in script.js, not on a fixed timer */
  z-index: 50;
}


/* Contents */


.logo {
  position: absolute;
  width: 85vw;
  max-width: 450px;
  aspect-ratio: 1 / 1;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  z-index: 8;
  transition: all 1s ease;
}  

.icons {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  z-index: 10;
}

.icons img {
  max-width: 25vw;
  max-height: 25vw;
}

.left,
.right {
  width: 325px;
  height: auto;
  opacity: 0.8;
}

.middle {
  width: 450px;
  height: auto;
  z-index: 1;
}

@media (max-device-width: 700px), (max-width: 700px) {
  .icons {
    flex-direction: column;
    align-items: center;
  }

  .icons img {
  max-width: 50vw;
  max-height: 50vw;
  }

  .logo {
  width: 72vw;
  max-width: 340px;
  top: 14%;
  }
  
  .left,
  .right {
    width: 40vw;
  }

  .middle {
    width: 60vw;
    margin-bottom: 20px;
  }

  .icons > .home-button {
    margin: 10px 0;
  }

  .icons > .home-button.left,
  .icons > .home-button.right {
    display: inline-block;
    margin: 0 10px;
  }
}

/* ---- index / landing mobile adaptive ---- */
@media (max-width: 768px) {
  .castle, .overlay, #fade-overlay, #fade, #black-fade, .vignette {
    height: 100svh;
  }
  .fog2 {
    height: 110svh;
  }
  .rain-overlay {
    height: 100svh;
    width: 100vw;
    object-fit: cover;
    left: 0;
    transform: none;
  }
  .glitch {
    height: 100svh;
    object-fit: cover;
  }
}

/* short mobile screens (landscape / small phones) — stack tighter */
@media (max-width: 768px) and (max-height: 600px) {
  .logo {
    top: 5%;
    width: 55vw;
    max-width: 260px;
  }
  .enter-button {
    bottom: 6%;
  }
  .enter-btn-img {
    width: 130px;
  }
}


/* Border */


#site-border {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('website%20border%202.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 5;
  margin: 0;
  padding: 0;
  filter: brightness(0.6);
  opacity: 0;
  transform: scale(1.01);
  transform-origin: center center;
}

#site-border::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('phone%20border%20.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (orientation: portrait) and (max-width: 768px) {
  #site-border {
    background-image: none;
  }
  #site-border::after {
    opacity: 1;
  }
}


/* About Page */


.booktext {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 10;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at top left, black 40%, transparent 70%);
  mask-image: radial-gradient(ellipse at top left, black 40%, transparent 70%);
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: revealTopLeft 25s ease-out forwards;
}

@keyframes revealTopLeft {
  0%   { -webkit-mask-size: 0% 0%;   mask-size: 0% 0%; }
  100% { -webkit-mask-size: 350% 350%; mask-size: 350% 350%; }
}

#booktext-1 { animation-delay: 0s; }
#booktext-2 { animation-delay: 2.5s; }
#booktext-3 { animation-delay: 3.5s; }

.book-container {
  position: fixed;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-image {
  max-width: 55vw;
  max-height: 55vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.9));
}

@media (max-width: 768px) {
  .book-image {
    max-width: 95vw;
    max-height: 90vh;
  }
}


/* Bug Video */


.bug-video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: auto;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: brightness(2.5);
}


/* Rain */


.rain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  opacity: 0.2;
  will-change: transform;
}


/* Brickwall */


.brickwall-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;            /* JS sets full document height so the wall never runs out */
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  filter: brightness(0.72) contrast(1.1) saturate(0.6);
  background-image: url("Images/Brickwall-Desktop.jpg");
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

/* the <img> tags are no longer used for layout — kept hidden for safety */
.brickwall-img { display: none; }

@media (max-width: 768px) {
  .brickwall-scroll { background-image: url("Images/Brickwall-Mobile.jpg"); }
}

.brickwall-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 3;
}


/* Vignette */


.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 150;
  display: none;
}


/* Images */


.image-stack {
  position: relative;
  margin: 300px auto 200px;
  width: 94vw;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  transition: all 1.5s ease;
}

.img-wrapper {
  position: relative;
  display: block;
  width: auto;
  margin: 0;
  transition: transform 0.7s ease, opacity 0.7s ease;
}

.img-wrapper:hover { z-index: 10; }

/* flow-layout offsets no longer used in the collage */
.img-wrapper.lhs, .img-wrapper.rhs { margin: 0; }

.img-wrapper.img-hidden-left {
  opacity: 0;
  transform: translateX(-80px);
}

.img-wrapper.img-hidden-right {
  opacity: 0;
  transform: translateX(80px);
}

.img-wrapper.img-visible {
  opacity: 1;
  transform: translateX(0);
}


.img-backboard {
  display: none;
  position: absolute;
  top: -14px;
  left: -14px;
  right: -14px;
  bottom: -14px;
  background-color: #0a0a0a;
  background-image: url('Images/Black-Gravel.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  transition: transform 1s ease, filter 1.8s ease, opacity 1.8s ease;
}

.img-wrapper.lhs:hover .img-backboard {
  transform: translateX(-14vw);
  filter: brightness(0.65);
  opacity: 0.8;
}

.img-wrapper.rhs:hover .img-backboard {
  transform: translateX(14vw);
  filter: brightness(0.65);
  opacity: 0.8;
}

.image-stack img {
  will-change: transform, opacity;
  display: block;
  position: relative;
  width: 27vw;
  max-width: 100%;
  opacity: 1;
  transition: transform 1s ease, box-shadow 1s ease;
}

.image-stack img:hover {
  transform: scale(1.4);
  z-index: 10;
}

/* ----- collage: reds at a normal size, originals small in between ----- */
.img-wrapper.red img  { width: 26vw; }   /* normal feature size */
.img-wrapper.orig img { width: 14vw; }   /* small, fills between */

.img-wrapper.rhs:hover img {
  transform: scale(1.5);
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
  .image-stack {
    margin: 150px auto;
} 
  .image-stack img:hover {
    transform: scale(2);
}
  .image-stack { width: 96vw; gap: 1.5vw; }
  .img-wrapper.red img  { width: 46vw; }   /* normal on mobile */
  .img-wrapper.orig img { width: 28vw; }   /* small, in between */
}

/* Background videos autoplay muted — suppress the iOS/Safari play-button overlay
   (the big centred "start playback" button Safari paints when autoplay is gated). */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}