/**
 * Client Public Site Styles
 *
 * Shared component styles for the marketing / public pages.
 * Uses the semantic theme tokens defined in input.css so the public site
 * adapts to light / dark / system preferences.
 */

/* Gradient text used in hero headings and 404 page */
.gradient-text {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero section overlay */
.hero-gradient {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
}

/* Card lift hover effect */
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Navigation link underline */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: var(--color-accent);
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}

/* Fade-in entrance animation */
.animate-fade-in {
    animation: fadeIn 0.8s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Floating animation used on the 404 page */
.animate-float {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Feature icon gradient background */
.feature-icon {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

/* ============================================================
   LANDING PAGE (home + public pages)
   ============================================================ */

/* Soft ambient glows behind the hero / dark sections */
.hero-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
}
.hero-glow-a {
    width: 34rem;
    height: 34rem;
    top: -8rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.28), transparent 65%);
}
.hero-glow-b {
    width: 30rem;
    height: 30rem;
    bottom: -10rem;
    right: -6rem;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.20), transparent 65%);
}

/* Frosted-glass surface (reserved for dark hero overlays) */
.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Editorial serif for premium headlines */
.font-display {
    font-family: "Playfair Display", Georgia, serif;
}

/* Scroll reveal — JS adds .reveal-prep at init, then .reveal-in when the
   element scrolls into view. Without JS, content is fully visible. */
.reveal-prep {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-in {
    opacity: 1;
    transform: translateY(0);
}

/* Showcase cards straighten and lift on hover (they sit rotated on desktop) */
.showcase-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.showcase-card:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.02);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 20;
}
@media (max-width: 767px) {
    .showcase-card:hover {
        transform: translateY(-6px);
    }
}

/* ============================================================
   NAVBAR THEME DROPDOWN OVERRIDES
   ============================================================
   The shared theme-ui.css is built for the inverse sidebar where the
   panel opens upward. The navbar sits at the top of the page, so its
   theme menu panel opens downward and is anchored to the right.
   ============================================================ */

.navbar-theme-menu .theme-menu-panel {
    left: auto;
    right: 0;
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 0.5rem;
    min-width: 11rem;
}

/* The public navbar uses the inverse (always-dark) palette, so the
   existing theme-ui.css inverse tokens already match. We only smooth the
   chevron transition for the navbar trigger. */
.navbar-theme-menu [data-action="theme-menu"] .theme-menu-chevron {
    transition: transform 0.2s ease;
}

/* ============================================================
   MOBILE SIDE DRAWER
   ============================================================
   The public mobile nav slides in from the right over a frosted
   backdrop. Classes are toggled by navbarUI.js; the transition
   timing matches the Tailwind utilities on the drawer itself.
   ============================================================ */

/* Prevent background scrolling while the drawer is open. */
body.mobile-menu-open {
    overflow: hidden;
}

/* Premium mobile nav links: large tap targets, subtle scale on hover,
   and a soft active state that matches the inverse palette. */
.mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 1rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-inverse-ink);
    transition: all 0.2s ease;
}

.mobile-nav-link:hover {
    background-color: var(--color-inverse-subtle);
    color: var(--color-inverse-ink);
    transform: translateX(4px);
}

.mobile-nav-link.text-inverse-ink-secondary\/80 {
    font-size: 1rem;
}

/* Circular close button with a soft press state. */
.mobile-menu-close-btn:active {
    transform: scale(0.95);
}

/* Theme cycle toggle inside the drawer. */
.mobile-theme-toggle:active {
    transform: scale(0.98);
}