tremor-tracker/src/app/globals.css

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

:root {
    --background: #ffffff;
    --foreground: #171717;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

body {
    color: var(--foreground);
    background: var(--background);
}

/* Increase specificity and use !important where necessary */
.mapboxgl-popup .mapboxgl-popup-content {
    @apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
}

/* Hide the popup tip */
.mapboxgl-popup .mapboxgl-popup-tip {
    display: none !important;
}

/* Child elements */
.mapboxgl-popup-content h3 {
    @apply text-sm font-medium text-neutral-800 !important;
}

.mapboxgl-popup-content p {
    @apply text-xs text-neutral-600 !important;
}

.mapboxgl-popup-content p+p {
    @apply text-neutral-500 !important;
}

.icon-link {
    /* default styles if needed */
}

.icon-link:hover,
.icon-link:focus {
    background-color: #16424b;
}

.icon-link:hover h3,
.icon-link:focus h3,
.icon-link:hover p,
.icon-link:focus p {
    color: #fff !important;
}

.icon-link:hover h3,
.icon-link:hover p,
.icon-link:focus h3,
.icon-link:focus p {
    color: #111;
    /* or black */
}

/* ---- LAVA FLOOD OVERLAY ---- */
.lava-flood-overlay {
    pointer-events: none;
    position: fixed;
    top: -100vh;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transition: top 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}

.lava-flood-overlay.lava-active {
    top: 0;
    transition: top 0.33s cubic-bezier(0.6, 0, 0.2, 1);
}

.lava-flood-overlay img,
.lava-gradient {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 80px #ff5500);
}

/* ---- INSANE SCREEN SHAKE (LinkedIn) ---- */
@keyframes supershake {
    0% {
        transform: translate(0, 0) rotate(0);
    }

    5% {
        transform: translate(-20px, 5px) rotate(-2deg);
    }

    10% {
        transform: translate(18px, -8px) rotate(2deg);
    }

    15% {
        transform: translate(-22px, 8px) rotate(-4deg);
    }

    20% {
        transform: translate(22px, -2px) rotate(4deg);
    }

    25% {
        transform: translate(-18px, 12px) rotate(-2deg);
    }

    30% {
        transform: translate(18px, -10px) rotate(2deg);
    }

    35% {
        transform: translate(-22px, 14px) rotate(-4deg);
    }

    40% {
        transform: translate(22px, -12px) rotate(4deg);
    }

    45% {
        transform: translate(-18px, 8px) rotate(-2deg);
    }

    50% {
        transform: translate(18px, -14px) rotate(4deg);
    }

    55% {
        transform: translate(-22px, 12px) rotate(-4deg);
    }

    60% {
        transform: translate(22px, -8px) rotate(2deg);
    }

    65% {
        transform: translate(-18px, 10px) rotate(-2deg);
    }

    70% {
        transform: translate(18px, -12px) rotate(2deg);
    }

    75% {
        transform: translate(-22px, 14px) rotate(-4deg);
    }

    80% {
        transform: translate(22px, -10px) rotate(4deg);
    }

    85% {
        transform: translate(-18px, 8px) rotate(-2deg);
    }

    90% {
        transform: translate(18px, -14px) rotate(2deg);
    }

    95% {
        transform: translate(-20px, 5px) rotate(-2deg);
    }

    100% {
        transform: translate(0, 0) rotate(0);
    }
}

.shake-screen {
    animation: supershake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ---- CRACK + COLLAPSE OVERLAY (X icon) ---- */
.crack-overlay {
    pointer-events: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.5s;
    will-change: transform, opacity;
}

.crack {
    position: absolute;
    pointer-events: none;
}

.crack1 {
    width: 35vw;
    left: 10vw;
    top: 22vh;
    opacity: 0.8;
}

.crack2 {
    width: 32vw;
    right: 12vw;
    top: 42vh;
    opacity: 0.7;
    transform: rotate(-8deg);
}

/* Add more .crackN classes if using more cracks */

/* Collapse falling effect */
.crack-collapse {
    transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
    opacity: 0;
    transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.6s;
}

/* --- X Logo Crack-and-Spin Easter Egg --- */
.x-logo.cracked {
    /* Overlay cracks with a clip-path or filters for effect (simple grayscale/contrast for demo) */
    filter: grayscale(1) brightness(0.6) contrast(2);
    /* Slight shake + scale for realism */
    transform: scale(1.04);
    transition: filter 0.2s, transform 0.2s;
}

.x-logo.spin {
    animation: xspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

@keyframes xspin180 {
    0% {
        transform: rotate(0deg) scale(1.04);
    }

    80% {
        transform: rotate(200deg) scale(1.04);
    }

    100% {
        transform: rotate(180deg) scale(1.04);
    }
}

.x-logo.cracked {
    filter: grayscale(1) brightness(0.7) contrast(2.6);
    transition: filter 0.2s, transform 0.2s;
}

.x-logo.spin {
    animation: xspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

.x-logo.nospin {
    transform: rotate(0deg) scale(1.0);
    filter: none;
    transition: none;
}

.x-logo-cracks {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.x-logo-cracks img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.55;
    pointer-events: none;
}

.footer-x-logo-wrap {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
}

/* === X Logo Full Page Crack-and-Spin Easter Egg === */
.body-cracked .crack-overlay,
.body-cracked .crack1,
.body-cracked .crack2 {
    pointer-events: none;
}

.body-cracked {
    /* Animate the whole page spin with a transform on html/body! */
    animation: bodyspin180 0.8s cubic-bezier(0.77, 0, 0.18, 1) forwards;
    will-change: transform;
}

.body-spin-back {
    /* Immediately resets the transform, no animation needed */
    animation: none !important;
    transform: rotate(0deg) !important;
}

@keyframes bodyspin180 {
    0% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(200deg);
    }

    100% {
        transform: rotate(180deg);
    }
}