/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Google Font - Space Grotesk for hero headers */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap");

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    cursor: pointer;
}

/* Hero Header Styles */
.hero-title {
    font-family:
        "Space Grotesk",
        system-ui,
        -apple-system,
        sans-serif;
    letter-spacing: -0.025em;
}

/* Animated gradient for hero text */
.hero-gradient-text {
    background: linear-gradient(
        135deg,
        #ff6b35 0%,
        #f7931e 20%,
        #ec4899 40%,
        #8b5cf6 60%,
        #3b82f6 80%,
        #06b6d4 100%
    );
    background-size: 200% 200%;
    animation: gradientShift 40s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Header logo gradient - subtler version for blue header */
.header-logo-gradient {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Live activity dot on "Your recent lookups" heading. */
.live-dot {
    display: inline-block;
    height: 8px;
    width: 8px;
    border-radius: 9999px;
    background-color: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    animation: live-pulse 2.2s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes live-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
        opacity: 0.75;
    }
}

/* Small animated accent for the homepage breakdowns heading. */
.breakdown-dancer {
    color: #ea580c;
}

.breakdown-dancer__body {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: breakdown-bounce 1.15s ease-in-out infinite;
}

.breakdown-dancer__left-arm,
.breakdown-dancer__right-arm,
.breakdown-dancer__left-leg,
.breakdown-dancer__right-leg {
    transform-box: fill-box;
    transform-origin: center;
}

.breakdown-dancer__left-arm {
    animation: breakdown-left-arm 1.15s ease-in-out infinite;
}

.breakdown-dancer__right-arm {
    animation: breakdown-right-arm 1.15s ease-in-out infinite;
}

.breakdown-dancer__left-leg {
    animation: breakdown-left-leg 1.15s ease-in-out infinite;
}

.breakdown-dancer__right-leg {
    animation: breakdown-right-leg 1.15s ease-in-out infinite;
}

.breakdown-dancer__beat {
    opacity: 0;
    stroke-width: 2;
    animation: breakdown-beat 1.15s ease-out infinite;
}

@keyframes breakdown-bounce {
    0%,
    100% {
        transform: translateY(1px) rotate(-3deg);
    }
    50% {
        transform: translateY(-2px) rotate(4deg);
    }
}

@keyframes breakdown-left-arm {
    0%,
    100% {
        transform: rotate(-9deg);
    }
    50% {
        transform: rotate(13deg);
    }
}

@keyframes breakdown-right-arm {
    0%,
    100% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-15deg);
    }
}

@keyframes breakdown-left-leg {
    0%,
    100% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-10deg);
    }
}

@keyframes breakdown-right-leg {
    0%,
    100% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(9deg);
    }
}

@keyframes breakdown-beat {
    0%,
    42% {
        opacity: 0;
        transform: scale(0.75);
    }
    58% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-2px) scale(1.1);
    }
}

/* Full-screen dialog layout so clicking outside the card fires backdropClick */
dialog[open] {
  margin: 0;
  padding: 1rem;
  border: none;
  background: transparent;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark frosted overlay rendered in the top layer — never affects dialog content */
dialog::backdrop {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
    .live-dot,
    .breakdown-dancer__body,
    .breakdown-dancer__left-arm,
    .breakdown-dancer__right-arm,
    .breakdown-dancer__left-leg,
    .breakdown-dancer__right-leg,
    .breakdown-dancer__beat {
        animation: none;
    }
}