/* Button styles */
.button {
  position: relative;
  cursor: pointer;
  transition: fill 300ms cubic-bezier(0.2, 0.6, 0.35, 1);
}
.button:hover {
  fill: var(--color-red);
}

/* Menu toggle */
#menu-toggle {
  cursor: pointer;
  width: clamp(4rem, 3.711rem + 1.235vw, 4.5rem);
  height: clamp(4rem, 3.711rem + 1.235vw, 4.5rem);
}
#menu-toggle span {
  position: relative;
  z-index: 100;
  display: block;
}
@media (min-width: 1025px) {
  #menu-toggle {
    width: clamp(2.375rem, -0.054rem + 3.795vw, 4.5rem);
    height: clamp(2.375rem, -0.054rem + 3.795vw, 4.5rem);
  }
}

/* Navigation animations */
#navigation {
  transform: translateY(-100%);
  transition: transform 2000ms cubic-bezier(0.8, 0, 0.2, 1) 1000ms;
}
html.mounted #navigation {
  transform: translateY(0);
}

/* Hero section animations */
#hero-left {
  transition: clip-path 2000ms cubic-bezier(0.8, 0, 0.2, 1) 1000ms;
}
#hero-left {
  clip-path: inset(50% 0 0 0 round var(--radius-4xl));
}
html.mounted #hero-left {
  clip-path: inset(0 0 50% 0 round var(--radius-4xl));
}
@media (min-width: 640px) {
  #hero-left {
    clip-path: inset(0 0 50% 0 round var(--radius-4xl));
  }
  html.mounted #hero-left {
    clip-path: inset(
      calc(50% + var(--navbar-height)) 0 0 0 round var(--radius-4xl)
    );
  }
}
@media (min-width: 1024px) {
  #hero-left {
    clip-path: inset(0 50% 0 0 round var(--radius-4xl));
  }
  html.mounted #hero-left {
    clip-path: inset(var(--navbar-height) 0 0 50% round var(--radius-4xl));
  }
}

#hero-right {
  transition: clip-path 2000ms cubic-bezier(0.8, 0, 0.2, 1) 1000ms;
}
#hero-right {
  clip-path: inset(0 0 50% 0 round var(--radius-4xl));
}
html.mounted #hero-right {
  clip-path: inset(50% 0 0 0 round var(--radius-4xl));
}
@media (min-width: 640px) {
  #hero-right {
    clip-path: inset(0 0 50% 0 round var(--radius-4xl));
  }
  html.mounted #hero-right {
    clip-path: inset(
      calc(50% + var(--navbar-height)) 0 0 0 round var(--radius-4xl)
    );
  }
}
@media (min-width: 1024px) {
  #hero-right {
    clip-path: inset(0 0 0 50% round var(--radius-4xl));
  }
  html.mounted #hero-right {
    clip-path: inset(var(--navbar-height) 50% 0 0 round var(--radius-4xl));
  }
}

#hero-sequencer {
  transition: clip-path 2000ms cubic-bezier(0.8, 0, 0.2, 1) 1000ms,
    width 2000ms cubic-bezier(0.8, 0, 0.2, 1) 1000ms;
}
#hero-sequencer {
  clip-path: inset(0 0 0 0 round var(--radius-4xl));
}
html.mounted #hero-sequencer {
  clip-path: inset(
    calc(var(--hero-right-height) + var(--navbar-height) + 1px) 0
      calc(var(--hero-left-height) + 1px) 0 round var(--radius-4xl)
  );
}
@media (min-width: 640px) {
  html.mounted #hero-sequencer {
    clip-path: inset(
      calc(var(--hero-right-height) + 1px) 0 0 0 round var(--radius-4xl)
    );
  }
}
@media (min-width: 1024px) {
  #hero-sequencer {
    width: 200%;
  }
  html.mounted #hero-sequencer {
    width: 100%;
    clip-path: inset(var(--navbar-height) 1px 0 1px round var(--radius-4xl));
  }
}

/* Fallback for browsers that don't support rounded clip-path */
@supports not (clip-path: inset(0 0 0 0 round 1rem)) {
  #hero-left,
  #hero-right,
  #hero-sequencer {
    border-radius: var(--radius-4xl);
    overflow: hidden;
  }
  #hero-left {
    clip-path: inset(50% 0 0 0);
  }
  html.mounted #hero-left {
    clip-path: inset(0 0 50% 0);
  }
  #hero-right {
    clip-path: inset(0 0 50% 0);
  }
  html.mounted #hero-right {
    clip-path: inset(50% 0 0 0);
  }
  #hero-sequencer {
    clip-path: inset(0 0 0 0);
  }
  html.mounted #hero-sequencer {
    clip-path: inset(
      calc(var(--hero-right-height) + var(--navbar-height) + 1px) 0
        calc(var(--hero-left-height) + 1px) 0
    );
  }
  @media (min-width: 640px) {
    #hero-left {
      clip-path: inset(0 0 50% 0);
    }
    html.mounted #hero-left {
      clip-path: inset(calc(50% + var(--navbar-height)) 0 0 0);
    }
    #hero-right {
      clip-path: inset(0 0 50% 0);
    }
    html.mounted #hero-right {
      clip-path: inset(calc(50% + var(--navbar-height)) 0 0 0);
    }
    html.mounted #hero-sequencer {
      clip-path: inset(calc(var(--hero-right-height) + 1px) 0 0 0);
    }
  }
  @media (min-width: 1024px) {
    #hero-left {
      clip-path: inset(0 50% 0 0);
    }
    html.mounted #hero-left {
      clip-path: inset(var(--navbar-height) 0 0 50%);
    }
    #hero-right {
      clip-path: inset(0 0 0 50%);
    }
    html.mounted #hero-right {
      clip-path: inset(var(--navbar-height) 50% 0 0);
    }
    html.mounted #hero-sequencer {
      clip-path: inset(var(--navbar-height) 1px 0 1px);
    }
  }
}

#hero-sequencer-inner {
  transition: opacity 300ms var(--ease-out-cubic),
    translate 2000ms 1000ms var(--ease-in-out-quart);
}

/* Utility classes for mounted state */
.scale-75 {
  transform: scale(0.75);
}
html.mounted .scale-75 {
  transform: scale(1);
}

.opacity-0 {
  opacity: 0;
}
html.mounted .opacity-0 {
  opacity: 1;
}

.scale-\[0\.2\] {
  transform: scale(0.2);
}
html.mounted .scale-\[0\.2\] {
  transform: scale(1);
}

@media (min-width: 640px) {
  .sm\:scale-\[0\.1\] {
    transform: scale(0.1);
  }
  html.mounted .sm\:scale-\[0\.1\] {
    transform: scale(1);
  }
}

.-translate-y-full {
  transform: translateY(-100%);
}
html.mounted .-translate-y-full {
  transform: translateY(0);
}

.translate-x-\[calc\(100\%\+1px\)\] {
  transform: translateX(calc(100% + 1px));
}

/* Download buttons specific styles */
@media (min-width: 1024px) {
  .download-buttons {
    max-width: 88% !important;
  }
}
@media (max-width: 1023px) {
  .download-buttons a {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .download-buttons {
    flex-direction: row !important;
  }
}

/* Game image specific styles */
@media (max-width: 1023px) {
  .game-image {
    width: 15% !important;
  }
}

.download-buttons a svg {
  margin-left: auto;
}

/* Footer specific styles */
#footer > div {
  overflow: visible;
  gap: 3rem !important;
  justify-content: flex-start !important;
}
#footer > div > wm-shape {
  pointer-events: none;
}
#footer .fill-black path {
  fill: currentColor;
}
#footer .fill-black {
  color: black;
}

/* Navigation logo override */
nav img[alt="Frostbyte"] {
  height: 1.95rem !important;
}
@media (min-width: 1024px) {
  nav img[alt="Frostbyte"] {
    height: 1.95rem !important;
  }
}

/* Section specific overrides */
section .text-red.rounded-full.hidden {
  width: 2.8rem !important;
  height: 2.8rem !important;
}
@media (min-width: 1024px) {
  section .text-red.rounded-full.hidden {
    width: 3rem !important;
    height: 3rem !important;
  }
}
section .text-red.rounded-full.hidden + div {
  margin-top: -0.5rem !important;
}
@media (min-width: 1024px) {
  section .text-red.rounded-full.hidden + div {
    margin-top: -0.75rem !important;
  }
}

#footer .text-red svg[viewBox="0 0 297 297"] {
  width: 65% !important;
}