/* forked from: https://codepen.io/una/pen/eYojgZw */

@font-face {
  font-display: swap;
  font-family: "Hip";
  src: url("https://assets.codepen.io/1149983/Turtles.otf");
}

:where(html) {
  --accent: oklch(0.75 0.14 145);
  --accent-hover: oklch(0.68 0.16 145);
  --surface: oklch(0.15 0.02 240);
  --border: oklch(0.55 0.08 120);
  --text: oklch(0.95 0.02 110);

  --leo: oklch(0.63 0.19 240);
  --raph: oklch(0.65 0.21 25);
  --mikey: oklch(0.78 0.22 65);
  --donnie: oklch(0.65 0.18 320);
  --spacer-xs: 0.25rem;
  --spacer-sm: 0.5rem;
  --spacer-md: 1rem;
  --spacer-lg: 1.5rem;

  --ease: ease;

  --ease-out-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-strong: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-in-out-gentle: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-in-out-strong: cubic-bezier(0.7, 0, 0.3, 1);

  --entrance-gentle: cubic-bezier(0.25, 1, 0.5, 1);
  --entrance: cubic-bezier(0.34, 1.56, 0.64, 1);
  --entrance-strong: cubic-bezier(0.68, 0, 0.32, 1.6);

  --ease-in-gentle: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-strong: cubic-bezier(0.7, 0, 1, 0.5);

  --overshoot-gentle: cubic-bezier(0.25, 1.15, 0.5, 1);
  --overshoot: cubic-bezier(0.34, 1.3, 0.64, 1);
  --overshoot-strong: cubic-bezier(0.68, 1.5, 0.32, 1);

  --spring: linear(
    0,
    0.005 5%,
    0.02,
    0.15 15%,
    0.3 20%,
    0.5 25%,
    0.7 30%,
    0.85 35%,
    0.95 40%,
    1.02 50%,
    1.02 55%,
    1.01 60%,
    1.005 70%,
    1 80%
  );
  --motion-exit: 133.33ms;
  --motion-hover: 166.67ms;
  --motion-interactive: 200ms;
  --motion-overlay: 266.67ms;
  --motion-gentle: 333.33ms;
  --motion-delay: 49.98ms;

  --opacity: 0;
  --scale: 0.9;
}

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

@property --opacity {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@property --reveal {
  syntax: "<percentage>";
  initial-value: 100%;
  inherits: false;
}

@property --rotate {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --translate-y {
  syntax: "<length-percentage>";
  initial-value: 0;
  inherits: false;
}

@starting-style {
  select:open::picker(select) {
    --opacity: 0;
    --scale: 0.9;
  }
}

label {
  color: var(--donnie);
  font-size: calc(var(--spacer-md) * 2);
  line-height: 1.25;
}

label,
select,
::picker(select) {
  font-family: "Hip";
}

select,
::picker(select) {
  color: var(--text);
}

/* Select styles */
select {
  --scale: 1;
  anchor-name: --select;
  display: flex;
  align-items: flex-end;
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--border);
  gap: 0;
  border-radius: var(--spacer-md);
  padding: var(--spacer-md);
  scale: var(--scale);
  transition-property: border-radius, border-color, scale;
  transition-duration: var(--motion-interactive), var(--motion-hover),
    var(--motion-interactive);
  transition-timing-function: var(--spring), var(--spring), var(--spring);
  transition-delay: 0s, var(--motion-delay), 0s;

  &:open {
    border-right-color: transparent;
    border-radius: var(--spacer-md) 0rem 0rem var(--spacer-md);
  }

  &:open::picker(select) {
    --opacity: 1;
    --scale: 1;
    border-radius: 0rem var(--spacer-md) var(--spacer-md) var(--spacer-md);
    transition: --opacity var(--motion-overlay) var(--spring),
      --scale var(--motion-overlay) var(--entrance-strong);
  }

  &:open:has(> button > selectedcontent img)::picker(select) {
    border-radius: 0rem var(--spacer-md) var(--spacer-md) 0rem;
  }

  &:hover::picker-icon {
    --rotate: -12deg;
  }

  &:active:not(:open) {
    --scale: 0.98;
  }

  &:active::picker-icon {
    --rotate: 0deg;
  }
}

/* New select properties */
::picker-icon {
  --rotate: 0deg;
  content: "";
  inline-size: calc(var(--spacer-md) * 4);
  block-size: calc(var(--spacer-md) * 3);
  background: url("https://assets.codepen.io/1149983/Party-wagon.png") no-repeat
    center / contain;
  transform-origin: 10% 50%;
  transform: rotate(var(--rotate));
  transition: --rotate var(--motion-hover) var(--spring);
}

select:active::picker-icon {
  transition: --rotate var(--motion-interactive) var(--spring);
}

::picker(select) {
  --scale: 0;
  --opacity: 0;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(calc(var(--spacer-md) * 4.5), calc(var(--spacer-md) * 7))
  );
  gap: var(--spacer-xs);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0rem var(--spacer-md) var(--spacer-md) 0rem;
  align-content: start;
  justify-items: stretch;
  left: anchor(right);
  top: anchor(top);
  bottom: anchor(bottom);
  max-width: min(600px, 90vw);
  max-height: 80vh;
  opacity: var(--opacity);
  scale: var(--scale);
  transform-origin: left center;
  transition: --opacity var(--motion-exit) var(--ease-out);
  overflow: auto;
}

select,
::picker(select) {
  appearance: base-select;
}

selectedcontent {
  display: flex;
  flex-direction: column;
  font-size: calc(var(--spacer-md) * 2);
  block-size: 100%;
  align-items: center;
  line-height: 1.5;
}

selectedcontent img {
  --translate-y: var(--spacer-md);
  --scale: 0.9;
  --opacity: 0;
  max-width: calc(var(--spacer-md) * 13);
  aspect-ratio: 4/5;
  width: 100%;
  opacity: var(--opacity);
  transform: translateY(var(--translate-y)) scale(var(--scale));
  animation: slideInContent var(--motion-gentle) var(--entrance-strong) forwards;
  animation-delay: var(--motion-hover);
}

/* Option styles */

option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacer-sm);
  font-size: 1rem;
  position: relative;
  padding: var(--spacer-xs);
  transition: scale var(--motion-hover) var(--spring),
    opacity var(--motion-hover) var(--spring);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: inset(0 var(--reveal) 0 0);
    transition: --reveal var(--motion-hover) var(--spring);
    z-index: -1;
  }

  &::checkmark {
    content: "";
    position: absolute;
    inset: 0;

    outline: var(--spacer-xs) solid var(--text);
    outline-offset: calc(-2 * var(--spacer-md));
    background-color: var(--accent-hover);
    z-index: -1;
  }

  &:hover > span {
    mix-blend-mode: hard-light;
  }

  &:hover::before {
    --reveal: 0%;
  }

  &:nth-of-type(4n + 2)::before {
    background-color: var(--raph);
  }

  &:nth-of-type(4n + 3)::before {
    background-color: var(--leo);
  }

  &:nth-of-type(4n)::before {
    background-color: var(--donnie);
  }

  &:nth-of-type(4n + 1)::before {
    background-color: var(--mikey);
  }

  img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    display: block;
  }
}

@keyframes slideInContent {
  to {
    --opacity: 1;
    --translate-y: 0;
    --scale: 1;
    transform: translateY(var(--translate-y)) scale(var(--scale));
  }
}

[hidden] {
  display: none;
}

body {
  margin: 2rem 4rem;
  background: linear-gradient(
    135deg,
    oklch(0.12 0.02 240) 0%,
    oklch(0.15 0.02 320) 100%
  );
}

@layer reset {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
  }

  body {
    overflow-x: hidden;
  }

  *:focus-visible {
    outline: calc(var(--spacer-xs) / 2) solid var(--border);
    outline-offset: calc(var(--spacer-xs) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html) {
    --motion-exit: 0s;
    --motion-hover: 0s;
    --motion-interactive: 0s;
    --motion-overlay: 0s;
    --motion-gentle: 0s;
  }
}