@import url('https://fonts.bunny.net/css?family=sora:500,600,700,800|plus-jakarta-sans:400,500,600,700,800&display=swap');

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

@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: transparent;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        @apply font-sans text-navy-900 antialiased;
        max-width: 100%;
        overflow-x: clip;
    }

    ::selection {
        @apply bg-wise-200 text-navy-900;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        @apply bg-navy-50;
    }

    ::-webkit-scrollbar-thumb {
        @apply rounded-full bg-navy-200 hover:bg-wise-400;
    }
}

@layer components {
    /* ---------- Buttons ---------- */
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 font-semibold
        transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2
        focus-visible:ring-wise-400 focus-visible:ring-offset-2 active:scale-[.97];
    }

    .btn-primary {
        @apply btn bg-navy-800 text-white hover:bg-navy-700 hover:shadow-brand;
    }

    .btn-accent {
        @apply btn relative overflow-hidden bg-wise-400 text-navy-950 hover:bg-wise-300 hover:shadow-wise;
    }

    .btn-accent::after {
        content: '';
        @apply absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700;
    }

    .btn-accent:hover::after {
        @apply translate-x-full;
    }

    .btn-ghost {
        @apply btn bg-transparent text-navy-800 ring-1 ring-inset ring-navy-200 hover:bg-navy-50 hover:ring-navy-300;
    }

    .btn-white {
        @apply btn bg-white text-navy-800 hover:bg-wise-50 shadow-brand;
    }

    .btn-lg {
        @apply px-8 py-4 text-lg;
    }

    .btn-sm {
        @apply px-4 py-2 text-sm;
    }

    /* ---------- Typography ---------- */
    .eyebrow {
        @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.18em] text-wise-600;
    }

    .eyebrow::before {
        content: '';
        @apply h-px w-8 bg-wise-400;
    }

    .section-title {
        @apply font-display text-display-sm md:text-display font-bold text-navy-900;
    }

    /* ---------- Surfaces & cards ---------- */
    .card {
        @apply rounded-brand bg-white p-6 shadow-brand ring-1 ring-navy-100/60;
    }

    .card-hover {
        @apply transition-all duration-300 hover:-translate-y-1.5 hover:shadow-brand-lg;
    }

    /* Gradient-border card: wrap content, glows on hover */
    .card-glow {
        @apply relative rounded-brand bg-white shadow-brand transition-all duration-300;
        background-clip: padding-box;
        border: 2px solid transparent;
    }

    .card-glow::before {
        content: '';
        position: absolute;
        inset: -2px;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(88, 185, 230, .35), rgba(28, 43, 95, .12) 45%, rgba(88, 185, 230, .4));
        opacity: 0;
        transition: opacity .35s ease;
    }

    .card-glow:hover {
        @apply -translate-y-1.5 shadow-brand-lg;
    }

    .card-glow:hover::before {
        opacity: 1;
    }

    /* Cursor spotlight that follows the pointer (vars set in app.js) */
    .card-glow::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity .35s ease;
        background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(88 185 230 / 0.13), transparent 45%);
    }

    .card-glow:hover::after {
        opacity: 1;
    }

    /* Image card with gradient overlay caption */
    .card-photo {
        @apply relative overflow-hidden rounded-brand shadow-brand;
    }

    .card-photo img {
        @apply h-full w-full object-cover transition-transform duration-700;
    }

    .card-photo:hover img {
        transform: scale(1.06);
    }

    .card-photo .overlay {
        @apply absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-navy-950/85 via-navy-900/30 to-transparent p-6;
    }

    .icon-tile {
        @apply grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-wise-50 text-wise-600 transition-all duration-300;
    }

    .group:hover .icon-tile,
    .card-glow:hover .icon-tile {
        @apply bg-wise-400 text-navy-950 scale-110;
    }

    .icon-tile-dark {
        @apply grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-white/10 text-wise-300;
    }

    .chip {
        @apply inline-flex items-center gap-1.5 rounded-full bg-wise-100 px-3 py-1 text-xs font-semibold text-wise-800;
    }

    .section {
        @apply py-12 md:py-16;
    }

    .container-site {
        @apply mx-auto w-full max-w-7xl px-5 sm:px-8;
    }

    /* ---------- Assessment keycaps ---------- */
    .answer-card {
        @apply relative flex w-full cursor-pointer items-center gap-4 rounded-brand bg-white p-5 text-left
        ring-2 ring-navy-100 transition-all duration-150
        hover:ring-wise-300 hover:shadow-brand active:scale-[.98];
    }

    .answer-card.selected {
        @apply ring-wise-500 bg-wise-50 shadow-wise;
    }

    .keycap {
        @apply grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-navy-50 font-display text-sm font-extrabold uppercase text-navy-500
        ring-1 ring-navy-200 transition-all duration-150;
        box-shadow: 0 2px 0 0 rgb(28 43 95 / 0.12);
    }

    .answer-card:hover .keycap {
        @apply bg-wise-100 text-wise-700 ring-wise-300;
    }

    .answer-card.selected .keycap {
        @apply bg-wise-400 text-navy-950 ring-wise-500;
    }

    /* ---------- Range sliders ---------- */
    .slider {
        @apply h-2.5 w-full cursor-pointer appearance-none rounded-full bg-navy-100 accent-wise-500;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        @apply h-6 w-6 rounded-full bg-wise-500 shadow-wise ring-4 ring-white transition-transform;
    }

    .slider::-webkit-slider-thumb:hover {
        transform: scale(1.15);
    }

    .slider::-moz-range-thumb {
        @apply h-6 w-6 rounded-full border-0 bg-wise-500 shadow-wise ring-4 ring-white;
    }

    /* Editable amount box paired with a slider: type any value, no ceiling */
    .amount-box {
        @apply w-36 rounded-xl border-0 bg-white px-3 py-1.5 text-right font-display text-base font-extrabold text-wise-600 ring-1 ring-navy-200 transition focus:ring-2 focus:ring-wise-400;
        -moz-appearance: textfield;
    }

    .amount-box::-webkit-outer-spin-button,
    .amount-box::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* ---------- Decorative ---------- */
    .text-gradient {
        @apply bg-gradient-to-r from-wise-400 to-wise-600 bg-clip-text text-transparent;
    }

    .bg-mesh {
        background-image:
            radial-gradient(at 20% 0%, rgb(88 185 230 / 0.14) 0, transparent 50%),
            radial-gradient(at 80% 100%, rgb(28 43 95 / 0.08) 0, transparent 50%);
    }

    .bg-mesh-dark {
        background-image:
            radial-gradient(at 15% 10%, rgb(88 185 230 / 0.22) 0, transparent 45%),
            radial-gradient(at 85% 90%, rgb(74 100 172 / 0.25) 0, transparent 50%);
    }

    .bg-grid {
        background-image: linear-gradient(rgb(28 43 95 / 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgb(28 43 95 / 0.04) 1px, transparent 1px);
        background-size: 44px 44px;
    }

    .blob {
        @apply pointer-events-none absolute rounded-full opacity-60 blur-3xl;
    }

    /* ---------- Logo marquee ---------- */
    .marquee {
        @apply flex overflow-hidden;
        mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    }

    .marquee-track {
        @apply flex shrink-0 items-center gap-14 pr-14;
        animation: marquee 28s linear infinite;
    }

    /* Photo cards cover a much wider track than the compact media logos.
       A longer dedicated duration keeps their apparent pixel speed calm and
       consistent instead of racing across wide/high-density displays. */
    .marquee-track--moments {
        animation-duration: 90s;
        will-change: transform;
    }

    .marquee:hover .marquee-track {
        animation-play-state: paused;
    }

    @keyframes marquee {
        to {
            transform: translateX(-100%);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .marquee {
            overflow-x: auto;
            mask-image: none;
            scrollbar-width: thin;
        }

        .marquee-track,
        .marquee-text .track {
            animation: none;
            transform: none;
        }

        .marquee-track[aria-hidden="true"] {
            display: none;
        }
    }

    /* ---------- Mega menu ---------- */
    .mega-panel {
        @apply fixed left-1/2 z-[80] -translate-x-1/2 overflow-y-auto overscroll-contain px-3 pt-3;
        top: 4.75rem;
        max-height: calc(100dvh - 5.5rem);
        scrollbar-width: thin;
    }

    .mega-panel-wide {
        width: min(calc(100vw - 2rem), 44rem);
    }

    .mega-panel-medium {
        width: min(calc(100vw - 2rem), 42rem);
    }

    .mega-card {
        @apply rounded-brand bg-white p-4 shadow-brand-lg ring-1 ring-navy-100;
        transform-origin: top center;
    }

    .mega-link {
        @apply flex items-start gap-3.5 rounded-2xl p-3.5 transition-colors duration-150 hover:bg-wise-50;
    }

    /* ---------- Creative kit ---------- */
    .text-outline {
        -webkit-text-stroke: 1.5px rgb(28 43 95 / 0.25);
        color: transparent;
    }

    .text-outline-light {
        -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.35);
        color: transparent;
    }

    /* Scrolling display-text strip between sections */
    .marquee-text {
        @apply flex select-none overflow-hidden whitespace-nowrap;
    }

    .marquee-text .track {
        @apply flex shrink-0 items-center gap-8 pr-8 font-display text-5xl font-extrabold uppercase tracking-tight md:text-7xl;
        animation: marquee 30s linear infinite;
    }

    .marquee-text.reverse .track {
        animation-direction: reverse;
    }

    /* Arch-top photo card (Afro-modern doorway shape) */
    .card-arch {
        @apply relative overflow-hidden shadow-brand;
        border-radius: 12rem 12rem 1.5rem 1.5rem;
    }

    .card-arch img {
        @apply h-full w-full object-cover transition-transform duration-700;
    }

    .card-arch:hover img {
        transform: scale(1.06);
    }

    /* Organic blob-masked image, slowly morphing */
    @keyframes blob-morph {
        0%, 100% {
            border-radius: 58% 42% 38% 62% / 56% 36% 64% 44%;
        }

        33% {
            border-radius: 42% 58% 60% 40% / 45% 60% 40% 55%;
        }

        66% {
            border-radius: 60% 40% 45% 55% / 60% 45% 55% 40%;
        }
    }

    .blob-img {
        @apply overflow-hidden shadow-brand-lg;
        animation: blob-morph 14s ease-in-out infinite;
    }

    .blob-img img {
        @apply h-full w-full object-cover;
    }

    /* Original Money-Wise "kitenge ya pesa" — bogolan-style dense finance patchwork */
    .bg-kitenge {
        background-image: url('/images/pattern-kitenge.svg');
        background-size: 420px 420px;
    }

    .sticker {
        @apply inline-flex items-center gap-1.5 rounded-full bg-wise-400 px-3.5 py-1.5 font-display text-xs font-extrabold uppercase tracking-wide text-navy-950 shadow-wise;
    }

    /* ---------- Real page-flip (flipbook) ---------- */
    .book {
        perspective: 2600px;
    }

    .leaf {
        position: absolute;
        inset: 0;
        transform-origin: left center;
        transform-style: preserve-3d;
        transition: transform .75s cubic-bezier(.45, .05, .35, 1);
    }

    .leaf.flipped {
        transform: rotateY(-180deg);
    }

    /* Once a flip finishes, the turned leaf fades away so the book stays centred */
    .leaf.settled {
        opacity: 0;
        pointer-events: none;
        transition: transform .75s cubic-bezier(.45, .05, .35, 1), opacity .3s ease .05s;
    }

    .leaf .face {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        overflow: hidden;
        border-radius: 0.375rem 1rem 1rem 0.375rem;
    }

    .leaf .face.back {
        transform: rotateY(180deg);
        background:
            linear-gradient(105deg, rgb(28 43 95 / 0.16), transparent 24%),
            #f4f1e9;
        border-radius: 1rem 0.375rem 0.375rem 1rem;
    }

    /* moving shadow while the leaf turns */
    .leaf .face.front::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to right, rgb(13 20 46 / 0.28), transparent 22%);
        opacity: 0;
        transition: opacity .4s;
    }

    .leaf.flipped .face.front::after {
        opacity: 1;
    }

    /* ---------- Hero slider ---------- */
    @keyframes kenburns {
        0% {
            transform: scale(1) translateX(0);
        }

        100% {
            transform: scale(1.12) translateX(-1.5%);
        }
    }

    .kenburns {
        animation: kenburns 9s ease-out forwards;
    }

    @keyframes slidebar {
        from {
            width: 0%;
        }

        to {
            width: 100%;
        }
    }

    .animate-slidebar {
        animation: slidebar 6.5s linear forwards;
    }

    /* Animated underline for top-level nav links */
    .nav-link {
        @apply relative;
    }

    .nav-link::after {
        content: '';
        @apply absolute inset-x-4 bottom-1 h-0.5 origin-left scale-x-0 rounded-full bg-wise-400 transition-transform duration-300;
    }

    .nav-link:hover::after {
        @apply scale-x-100;
    }
}

@layer utilities {
    @media (prefers-reduced-motion: reduce) {

        *,
        ::before,
        ::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

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

    .preserve-3d {
        transform-style: preserve-3d;
    }
}