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

/* Text Rotator Animations */
.text-rotator {
  position: relative;
  display: inline-block;
  overflow: visible;
  min-width: 160px;
  height: 1em;
  vertical-align: baseline;
  text-align: left;

  span {
    margin-top: 5px;
  }
}

.text-rotator [data-text-rotator-target="text"] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.text-rotator .slide-out {
  animation: slideOut 0.4s ease-in-out forwards;
}

.text-rotator .slide-in {
  animation: slideIn 0.4s ease-in-out forwards;
}

@keyframes slideOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideDown {
  animation: slideDown 0.2s ease-out forwards;
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-slideUp {
  animation: slideUp 0.2s ease-out forwards;
}
turbo-frame {
  display: contents;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.pagy {
  display: flex;
}

.pagy > :not([hidden]) ~ :not([hidden]) {
  --space-reverse: 0;
  margin-right: calc(0.25rem * var(--space-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
}

.pagy {
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(107 114 128);
}

.pagy .page.gap {
  /* if you need to customize it */
}

.pagy .page a {
  display: block;
  text-decoration: none;
  border-radius: 0.5rem;
  background-color: rgb(229 231 235);
  padding: 0.25rem 0.75rem;
  color: inherit;
}

.pagy .page a:hover {
  background-color: rgb(209 213 219);
}

.pagy .page.active a {
  cursor: default;
  background-color: rgb(156 163 175);
  color: rgb(255 255 255);
}

.pagy .page.disabled a {
  cursor: default;
  background-color: rgb(243 244 246);
  color: rgb(209 213 219);
}

.pagy .pagy-combo-input,
.pagy.pagy-items-selector-js {
  white-space: nowrap;
  display: inline-block;
  border-radius: 0.5rem;
  background-color: rgb(229 231 235);
  padding: 0.125rem 0.75rem;
}

.pagy .pagy-combo-input input,
.pagy.pagy-items-selector-js input {
  line-height: 1.5rem;
  border-radius: 0.375rem;
  border-style: none;
  background-color: rgb(243 244 246);
}

.firebase-provider-buttons {
  transition: opacity 0.2s ease;
}

.firebase-provider-buttons--initializing .firebase-loading-spinner {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.firebase-provider-buttons .firebase-loading-spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.firebase-provider-buttons--initializing > div:not(.firebase-loading-spinner) {
  opacity: 0.3;
  pointer-events: none;
}
.dark .participant-button {
  background: linear-gradient(
    135deg,
    #64748b 0%,
    #64748b 40%,
    var(--participant-color) 100%
  ) !important;
}

/* Premium Navbar Golden Corner */
.premium-navbar::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0px 50px 50px;
  border-color: transparent transparent #fbbf24 transparent;
  background: linear-gradient(135deg, transparent 50%, #fbbf24 50%);
  box-shadow: 3px 3px 3px rgba(251, 191, 36, 0.3);
  z-index: 10;
  pointer-events: none;
}

.dark .premium-navbar::before {
  border-color: transparent transparent #f59e0b transparent;
  background: linear-gradient(135deg, transparent 50%, #f59e0b 0);
  box-shadow: 0px 0px 0px rgba(245, 158, 11, .3);
  pointer-events: none;
}

/* Premium Star Icon */
.premium-navbar::after {
  content: '★';
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 18px;
  color: #3b82f6;
  z-index: 11;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.8),
               0 0 12px rgba(59, 130, 246, 0.6);
  animation: starPop 2s ease-in-out infinite;
}

.dark .premium-navbar::after {
  color: #60a5fa;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.9),
               0 0 15px rgba(96, 165, 250, 0.7);
}

@keyframes starPop {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2) rotate(10deg);
  }
}