@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-pretendard: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

body {
  font-family: var(--font-pretendard);
}

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
li,
ol {
  list-style: none;
}

/* Split Layout Styles */
.split {
  display: flex;
  flex-direction: row;
}

.gutter {
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-horizontal {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
  cursor: col-resize;
}

/* Swagger UI Overrides */
.swagger-ui {
  height: auto !important;
}

.swagger-ui .wrapper {
  height: auto !important;
}

/* Hover Button */
.hover-button-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hover-button-wrapper::before,
.hover-button-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms;
  border-radius: inherit;
  pointer-events: none;
}

.hover-button-wrapper::before {
  background: radial-gradient(
    800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 1;
}

.hover-button-wrapper::after {
  background: radial-gradient(
    100px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.4),
    transparent 40%
  );
  z-index: -1;
}

.hover-button-wrapper:hover::before,
.hover-button-wrapper:hover::after {
  opacity: 1;
}

/* API Icons Animation */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes glow {
  0% {
    box-shadow:
      0 0 5px rgba(255, 105, 180, 0.5),
      0 0 10px rgba(255, 105, 180, 0.3),
      0 0 15px rgba(255, 105, 180, 0.1);
  }
  50% {
    box-shadow:
      0 0 10px rgba(255, 105, 180, 0.8),
      0 0 20px rgba(255, 105, 180, 0.5),
      0 0 30px rgba(255, 105, 180, 0.3);
  }
  100% {
    box-shadow:
      0 0 5px rgba(255, 105, 180, 0.5),
      0 0 10px rgba(255, 105, 180, 0.3),
      0 0 15px rgba(255, 105, 180, 0.1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}
