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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020303;
}

body {
  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
}

.hero {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background: #020303;
}


/* =========================
   BACKGROUND IMAGE
========================= */

.background {
  position: absolute;
  inset: 0;

  background-image:
    url("foye-bg.png");

  background-position:
    center center;

  background-repeat:
    no-repeat;

  background-size:
    cover;

  transform:
    scale(1.01);

  animation:
    slowBreath 14s ease-in-out infinite;

  z-index: 1;
}


/* =========================
   DARK OVERLAY
========================= */

.shade {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:

    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.12),
      rgba(0, 0, 0, 0.02) 40%,
      rgba(0, 0, 0, 0.26)
    ),

    radial-gradient(
      circle at center,
      transparent 25%,
      rgba(0, 0, 0, 0.15) 65%,
      rgba(0, 0, 0, 0.45) 100%
    );
}


/* =========================
   MOUSE LIGHT
========================= */

.mouse-light {
  position: fixed;

  width: 420px;
  height: 420px;

  margin-left: -210px;
  margin-top: -210px;

  border-radius: 50%;

  background:

    radial-gradient(
      circle,
      rgba(255, 197, 95, 0.09) 0%,
      rgba(255, 178, 71, 0.035) 35%,
      transparent 68%
    );

  filter:
    blur(10px);

  pointer-events: none;

  z-index: 3;

  opacity: 0.8;
}


/* =========================
   BREATHING EFFECT
========================= */

@keyframes slowBreath {

  0% {
    transform: scale(1.01);
  }

  50% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1.01);
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .background {

    /*
      Desktop image is landscape.
      On mobile we keep Buddha centered.
    */

    background-position:
      50% center;

    background-size:
      cover;
  }

  .mouse-light {
    display: none;
  }

}