@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Playfair+Display:wght@700;900&display=swap');

:root {
  --pink: #ff3aaf;
  --pale: #ffd1ed;
  --wine: #340020;
  --screen-height: 100svh;
  --art-width: 100%;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background: #180014;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  color: white;
  font-family: 'DM Sans', sans-serif;
}

.welcome {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: clamp(4px, 1vh, 12px);
  padding: 8px 12px;

  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 42%,
      #a00063 0%,
      #49002d 45%,
      #140011 100%
    );
}

.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .28;

  background-image:
    radial-gradient(
      ellipse 13px 9px at 20px 20px,
      #ff56b4 35%,
      transparent 42%
    ),
    radial-gradient(
      ellipse 8px 15px at 64px 67px,
      #080007 35%,
      transparent 42%
    ),
    radial-gradient(
      ellipse 13px 8px at 112px 38px,
      #ff87cf 35%,
      transparent 42%
    );

  background-size: 150px 120px;
}

.welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 10% 15%,
      #ffb7ee 0 2px,
      transparent 4px
    ),
    radial-gradient(
      circle at 85% 25%,
      #fff 0 2px,
      transparent 5px
    ),
    radial-gradient(
      circle at 20% 80%,
      #fff 0 1px,
      transparent 4px
    ),
    radial-gradient(
      circle at 92% 75%,
      #ff8ddd 0 2px,
      transparent 5px
    );

  background-size: 320px 270px;
  animation: breathe 4s ease-in-out infinite alternate;
}

.ambient {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(65px);
  opacity: .35;
  pointer-events: none;
  z-index: -1;
}

.ambient-one {
  top: -25%;
  left: -18%;
  background: #f00094;
}

.ambient-two {
  bottom: -30%;
  right: -20%;
  background: #ff43b0;
}

/* THE FRAME FITS THE AVAILABLE SCREEN */

.welcome-stage {
  width: var(--art-width);
  max-width: 1200px;
  flex: 0 0 auto;

  position: relative;
  padding: clamp(4px, .8vh, 12px);

  border: 1px solid rgba(255, 196, 237, .65);
  border-radius: 22px;

  background:
    linear-gradient(
      140deg,
      #ff8cda20,
      #2b001e80
    );

  box-shadow:
    0 0 30px #ff37a955,
    0 0 90px #ff169d35,
    inset 0 0 35px #ff8fdd12;
}

.top-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 5px 10px 8px;

  color: #ffd6ee;
  font-size: clamp(7px, .9vw, 11px);
  font-weight: 800;
  letter-spacing: .18em;
}

.artwork {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 45px #ff2aa76b;
}

.artwork img {
  display: block;
  width: 100%;
  height: auto;
}

/* ORIGINAL ARTWORK ENTER BUTTON */

.enter-hotspot {
  position: absolute;
  left: 29%;
  top: 79%;
  width: 42%;
  height: 11%;
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
}

.enter-hotspot:hover {
  box-shadow: 0 0 32px 14px #ff5eb777;
}

.enter-hotspot:focus-visible {
  outline: 4px solid white;
  outline-offset: 3px;
}

/* RUNAWAY BUTTON BESIDE ENTER */

.no-thanks {
  position: absolute;
  z-index: 3;

  left: 73%;
  top: 84.5%;
  transform: translateY(-50%);

  width: 25%;
  min-height: clamp(18px, 3vw, 36px);
  padding: clamp(3px, .7vw, 8px) 2px;

  border: 2px solid white;
  border-radius: 100px;

  font-family: 'Playfair Display', serif;
  font-size: clamp(6px, 1.05vw, 13px);
  font-weight: 900;
  white-space: nowrap;
  color: #7a003e;
  cursor: pointer;

  background:
    linear-gradient(
      #fff,
      #ffd5ee 42%,
      #ff64bd 85%,
      #ed218f
    );

  box-shadow:
    0 5px 0 #a40060,
    0 0 22px #ff63bf;

  transition: box-shadow .15s;
}

.no-thanks:hover {
  box-shadow:
    0 5px 0 #a40060,
    0 0 35px #ffb3e1;
}

.no-thanks:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}

/* BOTTOM TEXT */

.welcome-bottom {
  position: relative;
  min-height: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;
  padding: 9px 6px 5px;
}

.welcome-note {
  margin: 0;
  text-align: center;
  font-size: clamp(9px, 1.2vw, 14px);
  font-weight: 800;
  letter-spacing: .13em;
  color: #ffc3e9;
}

.clapback {
  margin: 0;
  min-height: 18px;
  text-align: center;
  color: #ffd8f0;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 700;
}

.welcome footer {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-size: clamp(8px, .8vw, 10px);
  letter-spacing: .2em;
  color: #ff9ed8;
}

/* SPARKLES */

.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 20;
  color: #fff;

  text-shadow:
    0 0 8px #fff,
    0 0 18px #ff5cb5;

  animation: sparkle-out .8s ease-out forwards;
}

@keyframes sparkle-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform:
      translate(-50%, -95%)
      scale(.2)
      rotate(60deg);
  }
}

@keyframes breathe {
  from {
    opacity: .45;
  }

  to {
    opacity: 1;
  }
}

/* CUSTOM CURSOR */

html,
body,
button,
a {
  cursor: url("cursor.svg") 8 8, auto;
}

button,
a {
  cursor: url("cursor.svg") 8 8, pointer;
}

/* MOBILE */

@media (max-width: 600px) {
  .welcome {
    padding: 5px 7px;
    gap: 5px;
  }

  .welcome-stage {
    padding: 5px;
    border-radius: 14px;
  }

  .top-ribbon {
    font-size: 7px;
    letter-spacing: .06em;
    padding: 4px 7px 6px;
  }

  .welcome-bottom {
    gap: 4px;
    padding: 6px 4px 3px;
  }

  .welcome-note {
    font-size: clamp(8px, 2vw, 11px);
    letter-spacing: .06em;
  }

  .clapback {
    font-size: 10px;
    min-height: 15px;
  }

  .no-thanks {
    left: 73%;
    top: 84.5%;
    width: 26%;
    min-height: 18px;
    padding: 3px 1px;
    border-width: 1px;
    font-size: clamp(5px, 1.35vw, 8px);
  }

  .welcome footer {
    font-size: 8px;
    letter-spacing: .1em;
  }
}

@media (max-height: 500px) {
  .welcome {
    gap: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .top-ribbon {
    padding-top: 2px;
    padding-bottom: 3px;
  }

  .welcome-bottom {
    padding-top: 4px;
    padding-bottom: 2px;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}