/**
 * Layout
 */
body {
  background: #000;
  color: #fff;
  overflow: hidden;
  position: relative;
}

main {
  position: relative;
  width: 100vw; /* Full width */
  height: 100vh; /* Full height */
  overflow: hidden; /* Hide overflow */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: none;
}

a, button {
  cursor: none !important;
}

.cursor {
   position: fixed;
 top: 0;
 left: 0;
 pointer-events: none;
 transform: translate(-50%, -50%);
  z-index: 999999999;
}

.cursor-dot {
 background-color: white;
 width: 10px;
 height: 10px;
 border-radius: 100rem;

}

.cursor-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
    filter: blur(30px);
    transform: translate(-50%, -50%);
}

/**
 * Background
 */
.background {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  transform: translate(-50%, -50%);

  @media (min-width: 769px) {
    top: 44%;
    transform: translate(-50%, -50%);
  }

  @media (max-width: 768px) {
    left: auto;
    right: 0;
    top: 0;
    transform: scale(1.19) translate(0, 0);
    transform-origin: right center;
  }
}

/**
 * Background Image
 */
.background_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/**
 * Logos Container
 */
.logos-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  aspect-ratio: 9 / 16; /* Maintain 9:16 aspect ratio */
  will-change: transform;
  z-index: 1; /* Bring overlay above background */
}

/**
 * Statics Container
 */
.statics-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  will-change: transform;
  pointer-events: none;
  z-index: 1; /* Bring overlay above background */
}

/**
 * Hotspots
 */
.hotspot {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  transition: opacity 0.2s ease;

  /* opacity: 1 !important; */

  img {
    opacity: 0;
    object-fit: contain;
    width: 100%;

    /* opacity: 1 !important; */
  }

  &[data-logo="gdk"] img {
    aspect-ratio: 268 / 160;
  }

  &[data-logo="nxt"] img {
    aspect-ratio: 324 / 136;
  }

  &[data-logo="pg"] img {
    aspect-ratio: 213 / 160;
  }

  &[data-logo="sides"] img {
    aspect-ratio: 146 / 260;
  }

  &[data-logo="me"] img {
    aspect-ratio: 548 / 364;
  }

  &[data-logo="rightdose"] img {
    aspect-ratio: 1;
  }

  &[data-logo="duck-and-dry"] img {
    aspect-ratio: 444 / 492;
  }

  &.is-visible {
    opacity: 1;

    img {
      opacity: 1;
    }
  }
}

/**
 * Flicker Animations - Different durations and delays for each logo
 */
@keyframes flicker {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flicker-out {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.hotspot.is-visible img.flicker {
  animation: flicker ease-in-out forwards;
}

.hotspot img.flicker-out {
  animation: flicker-out ease-in-out forwards;
}

/* GDK - duration 0.4s, delay 0s */
.hotspot[data-logo="gdk"].is-visible img.flicker {
  animation-duration: 0.3s;
  animation-delay: 0s;
}

.hotspot[data-logo="gdk"] img.flicker-out {
  animation-duration: 0.4s;
  animation-delay: 0s;
}

/* NXT - duration 0.5s, delay 0.1s */
.hotspot[data-logo="nxt"].is-visible img.flicker {
  animation-duration: 0.4s;
  animation-delay: 0.1s;
}

.hotspot[data-logo="nxt"] img.flicker-out {
  animation-duration: 0.5s;
  animation-delay: 0s;
}

/* PG - duration 0.45s, delay 0.15s */
.hotspot[data-logo="pg"].is-visible img.flicker {
  animation-duration: 0.35s;
  animation-delay: 0.15s;
}

.hotspot[data-logo="pg"] img.flicker-out {
  animation-duration: 0.45s;
  animation-delay: 0s;
}

/* Sides - duration 0.5s, delay 0.2s */
.hotspot[data-logo="sides"].is-visible img.flicker {
  animation-duration: 0.4s;
  animation-delay: 0.2s;
}

.hotspot[data-logo="sides"] img.flicker-out {
  animation-duration: 0.5s;
  animation-delay: 0s;
}

/* ME - duration 0.5s, delay 0.2s */
.hotspot[data-logo="me"].is-visible img.flicker {
  animation-duration: 0.4s;
  animation-delay: 0.2s;
}


.hotspot[data-logo="me"] img.flicker-out {
  animation-duration: 0.5s;
  animation-delay: 0s;
}

/* Rightdose - duration 0.5s, delay 0.2s */

.hotspot[data-logo="rightdose"] img.flicker-out {
  animation-duration: 0.5s;
  animation-delay: 0s;
}

/* Duck & Dry - duration 0.5s, delay 0.2s */

.hotspot[data-logo="duck-and-dry"] img.flicker-out {
  animation-duration: 0.5s;
  animation-delay: 0s;
}

/**
 * Statics (always visible, no hover states)
 */
.static {
  opacity: 1;
  position: absolute;

  video {
    object-fit: contain;
    width: 100%;
    height: auto;
  }

  img {
    object-fit: contain;
    width: 100%;
    height: auto;
  }
}

.static-headlights {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;

  /* opacity: 1 !important; */

  img {
    aspect-ratio: 1368 / 250;
  }

  &.is-visible {
    opacity: 1;
  }
}

/**
 * Menu Container
 */
.menu-container {
  position: fixed;
  top: 48px;
  right: 48px;
  z-index: 1000;
  pointer-events: none;

  @media (max-width: 768px) {
    top: 20px;
    right: 20px;
  }
}

.menu-toggle {
  background: #b56bf8;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 60px;
  height: 60px;
  pointer-events: auto;
  transition: transform 0.1s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  z-index: 2;

  &:active {
    transform: translateZ(0) scale(0.95);
  }

  svg {
    display: block;
  }
}

.menu-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.menu-item {
  background: #2a3b79;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease,
    left 0.3s ease;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;

  &:hover {
    background: #2a3b79;
  }

  img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    position: relative;
    z-index: 2;
  }

  .menu-item-fill {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #b56bf8;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
    left: 50%;
    top: 50%;
  }

  &:hover {
    .menu-item-fill {
      transform: translate(-50%, -50%) scale(var(--scale, 4));
    }
  }

  &:not(:hover) .menu-item-fill {
    transform: translate(-50%, -50%) scale(0);
  }

  &:active {
    transform: translate(-50%, -50%) scale(0.95);
  }
}

.menu-container.is-open {
  .menu-item {
    opacity: 1;
    pointer-events: auto;
  }

  .menu-item:nth-child(1) {
    top: 0px;
    left: -68px;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.05s;
    transition: opacity 0.3s ease 0.05s, transform 0.2s ease,
      top 0.3s ease 0.05s, left 0.3s ease 0.05s;

    &:hover {
      transform: translate(-50%, -50%) scale(1.2);
      transition-delay: 0s;
    }
  }

  .menu-item:nth-child(2) {
    top: 48px;
    left: -48px;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.1s;
    transition: opacity 0.3s ease 0.1s, transform 0.2s ease, top 0.3s ease 0.1s,
      left 0.3s ease 0.1s;

    &:hover {
      transform: translate(-50%, -50%) scale(1.2);
      transition-delay: 0s;
    }
  }

  .menu-item:nth-child(3) {
    top: 66px;
    left: 2px;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0.15s;
    transition: opacity 0.3s ease 0.15s, transform 0.2s ease,
      top 0.3s ease 0.15s, left 0.3s ease 0.15s;

    &:hover {
      transform: translate(-50%, -50%) scale(1.2);
      transition-delay: 0s;
    }
  }
}

.menu-container:not(.is-open) .menu-item {
  top: 0 !important;
  left: 0 !important;
  transform: translate(-50%, -50%) scale(0) !important;
  opacity: 0 !important;
  transition-delay: 0s !important;

  &:nth-child(1) {
    transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s,
      top 0.3s ease 0.15s, left 0.3s ease 0.15s;
  }

  &:nth-child(2) {
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s,
      top 0.3s ease 0.1s, left 0.3s ease 0.1s;
  }

  &:nth-child(3) {
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s,
      top 0.3s ease 0.05s, left 0.3s ease 0.05s;
  }
}