@keyframes flash {
  0% {
    background-color: oklch(90.92% 0.125 92.56);
  }
  100% {
    background-color: transparent;
  }
}

@keyframes blink-anim {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

body,
html {
  font-family:
    "Spline Sans Variable",
    "Spline Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Inter",
    "Segoe UI",
    sans-serif;
  overflow-x: hidden;
  color-scheme: var(--app-color-scheme, dark);
}

*,
*::before,
*::after {
  font-family: inherit;
}

.blink {
  animation: blink-anim 1s infinite;
}

code,
pre,
kbd,
samp {
  @apply font-mono;
}

.monospace {
  @apply font-mono;
}

/* Ensure forms and inputs respect dark mode */
input,
textarea,
select {
  color-scheme: var(--app-color-scheme, dark);
}

select {
  @apply mx-0 my-0.5 px-2 py-0.5;
}

.superadmin-tool {
  @apply rounded-md border border-[rgb(251,44,54)] border-dashed bg-[rgba(255,255,255,0.02)];
}

.admin-tool {
  @apply rounded-md border border-[rgb(240,177,0)] border-dashed bg-[rgba(255,255,255,0.02)];
}

.viewer-tool {
  @apply rounded-md border border-[rgb(43,127,255)] border-dashed bg-[rgba(255,255,255,0.02)];
}

.dev-tool {
  @apply rounded-md border border-dashed bg-[rgba(255,255,255,0.02)];
  border-color: var(--color-green);
}

.flash-message {
  @apply rounded-md text-center text-sm border px-4 py-3;
  will-change: opacity, transform;
}

.flash-message--success {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: color-mix(in oklab, var(--color-success) 20%, var(--color-surface));
}

.flash-message--error {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background-color: color-mix(in oklab, var(--color-danger) 20%, var(--color-surface));
}

.flash-message--enter {
  animation: flash-enter 180ms ease-out;
}

.flash-message--leaving {
  animation: flash-exit 240ms ease-in forwards;
}

@keyframes flash-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes flash-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

.loading {
  @apply grayscale;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bits-modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bits-modal-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes bits-modal-content-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes bits-modal-content-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

@keyframes dashboard-select-content-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashboard-select-content-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

.bits-modal-overlay[data-state="open"] {
  animation: bits-modal-overlay-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bits-modal-overlay[data-state="closed"] {
  animation: bits-modal-overlay-out 180ms cubic-bezier(0.22, 1, 0.5, 1) both;
}

.bits-modal-content {
  will-change: transform, opacity;
}

.bits-modal-content[data-state="open"] {
  animation: bits-modal-content-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bits-modal-content[data-state="closed"] {
  animation: bits-modal-content-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}

.dashboard-select-popover {
  transform-origin: top left;
  will-change: opacity, transform;
}

.dashboard-select-popover[data-state="open"] {
  animation: dashboard-select-content-in 180ms cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

.dashboard-select-popover[data-state="closed"] {
  animation: dashboard-select-content-out 130ms cubic-bezier(0.32, 0, 0.67, 0)
    both;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.activity-cell--0 {
  background-color: color-mix(
    in oklab,
    var(--color-surface-content) 12%,
    var(--color-surface)
  );
}

.activity-cell--1 {
  background-color: color-mix(
    in oklab,
    var(--color-success) 35%,
    var(--color-surface)
  );
}

.activity-cell--2 {
  background-color: color-mix(
    in oklab,
    var(--color-success) 50%,
    var(--color-surface)
  );
}

.activity-cell--3 {
  background-color: color-mix(
    in oklab,
    var(--color-success) 68%,
    var(--color-surface)
  );
}

.activity-cell--4 {
  background-color: color-mix(
    in oklab,
    var(--color-success) 85%,
    var(--color-surface)
  );
}

.super {
  @apply italic text-sm text-[#ccc] mt-0 mb-0.5 mx-0;
}

.super a {
  @apply text-[#ccc];
}

turbo-frame#mini_leaderboard[aria-busy="true"]::before {
  @apply hidden;
}

#currently_hacking {
  @apply hidden;
}

.clock-display {
  @apply w-full h-[1.5em] text-[15vmin] mx-auto my-8 relative perspective-[62.5rem];
}

.clock-display-inner {
  @apply w-full h-full flex justify-center items-center rounded-[4rem] transform-3d transition-transform duration-300 ease-in-out relative;
  border: 12px solid var(--color-primary);
}

.clock-display:hover .clock-display-inner {
  @apply rotate-x-180;
}

.clock-display-front,
.clock-display-back {
  @apply absolute w-full h-full flex justify-center items-center backface-hidden;
}

.clock-display-front {
  @apply rotate-x-0;
}

.clock-display-back {
  @apply rotate-x-180;
}

.clock-display * {
  @apply leading-normal;
}

@media (max-width: 87.5rem) {
  .clock-display {
    @apply text-[10vmin];
  }
}

.no-scrollbar::-webkit-scrollbar {
  @apply hidden;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.project-desc {
  @apply relative bg-[linear-gradient(145deg,#f6dbba_0%,#e6d4be_100%)] rounded-[clamp(6px,1.5vw,10px)] shadow-[0_4px_15px_rgba(0,0,0,0.15),inset_0_1px_0_rgba(255,255,255,0.6),inset_3px_0_5px_rgba(0,0,0,0.05)] transition-all duration-300 ease-in-out border-[2px] border-[rgba(89,47,49,0.3)] overflow-hidden text-black h-full cursor-pointer flex flex-col z-2 mx-5;
}
