/*
  SMooth Brain single-page site
  --------------------------------
  Beginner-friendly structure:
  - Desktop uses assets/desktop-bg.png
  - Mobile uses assets/mobile-bg.png
  - Buttons are clickable image links positioned on top
*/

/* Basic page reset */
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background: #f8d4e7;
}

/* Main artwork area */
.landing-page {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;

  background-image: url("assets/desktop-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/*
  Button group.
  Keeping the Shopify button and social icons in one stack prevents overlap
  on browser sizes that are not exactly the same ratio as the original artwork.
*/
.button-stack {
  position: absolute;
  left: clamp(95px, 8.5vw, 185px);
  bottom: clamp(18px, 2.2vh, 34px);
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vh, 16px);
}

/* Clickable image links */
.image-link {
  display: block;
  border-radius: 999px;
  transition:
    transform 160ms ease,
    filter 160ms ease;
}

.image-link img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.image-link:hover,
.image-link:focus-visible {
  transform: translateY(-4px) scale(1.025);
  filter: brightness(1.04) saturate(1.05);
  outline: none;
}

.image-link:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 0 8px rgba(255, 111, 170, 0.5);
}

/* Desktop button sizing */
.shopify-link {
  width: clamp(150px, 10vw, 220px);
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1vw, 18px);
}

.social-icon {
  width: clamp(36px, 2.8vw, 56px);
}

/* Make the wallet slightly wider because the art is wider */
.wallet-link {
  width: clamp(45px, 3.2vw, 68px);
}

/*
  Mobile design.
  This switches automatically when the screen is portrait/narrow.
*/
@media (max-width: 767.98px), (orientation: portrait) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .landing-page {
    min-height: 120vh;
    background-image: url("assets/mobile-bg.png");
    background-position: center top;
    background-size: cover;
  }

  /*
    Mobile button placement:
    - Centered instead of using the desktop bottom-left placement.
    - Positioned higher than the bottom edge to match the artwork.
    - Sized moderately so they stay readable without covering too much artwork.
  */
  .button-stack {
    left: 50%;
    bottom: clamp(80px, 16vh, 120px);
    transform: translateX(-50%);
    width: min(68vw, 340px);
    gap: clamp(4px, 0.8vh, 10px);
  }

  .shopify-link {
    width: clamp(120px, 45vw, 180px);
  }

  .social-links {
    width: 78%;
    gap: clamp(12px, 4vw, 28px);
  }

  .social-icon {
    width: clamp(32px, 10vw, 48px);
  }

  .wallet-link {
    width: clamp(40px, 11vw, 58px);
  }
}

/*
  Very short screens, such as landscape phones.
  Keep the icons from taking over the page.
*/
@media (max-height: 560px) {
  .button-stack {
    bottom: 12px;
    gap: 4px;
  }

  .shopify-link {
    width: clamp(190px, 16vw, 310px);
  }

  .social-icon {
    width: clamp(52px, 4.2vw, 84px);
  }

  .wallet-link {
    width: clamp(62px, 5vw, 100px);
  }
}