@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

    /* Golden Era Royal Group — logo palette */
    --color-gerg-50: #e8f4fc;
    --color-gerg-100: #c5e4f7;
    --color-gerg-200: #8ecbef;
    --color-gerg-300: #57b2e7;
    --color-gerg-400: #3399d4;
    --color-gerg-500: #0078bd;
    --color-gerg-600: #0066a3;
    --color-gerg-700: #005489;
    --color-gerg-800: #004270;
    --color-gerg-900: #003052;
    --color-gerg-950: #001f33;
    --color-gerg-grey: #d1d3d4;
    --color-gerg-black: #000000;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply antialiased text-slate-700 bg-slate-50;
    }
}

@layer components {
    .font-display {
        font-family: var(--font-display);
    }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-lg bg-gerg-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-gerg-500/30 transition hover:bg-gerg-600 hover:shadow-gerg-600/30;
    }

    .btn-outline {
        @apply inline-flex items-center justify-center gap-2 rounded-lg border-2 border-white/40 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:border-white hover:bg-white/20;
    }

    .btn-outline-dark {
        @apply inline-flex items-center justify-center gap-2 rounded-lg border-2 border-gerg-500 bg-transparent px-6 py-3 text-sm font-semibold text-gerg-600 transition hover:bg-gerg-50;
    }

    .section-heading {
        @apply font-display text-3xl font-bold tracking-tight text-gerg-900 md:text-4xl;
    }

    .section-subheading {
        @apply mt-3 max-w-2xl text-lg text-slate-600;
    }

    .card {
        @apply rounded-2xl border border-gerg-grey/60 bg-white p-6 shadow-sm transition hover:border-gerg-500/40 hover:shadow-md;
    }

    .page-hero {
        @apply relative overflow-hidden bg-gerg-600 py-20 text-white md:py-28;
    }

    .page-hero::before {
        content: '';
        @apply pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.12),transparent_55%)];
    }

    .brand-gradient-text {
        @apply bg-gradient-to-r from-gerg-300 via-gerg-400 to-gerg-500 bg-clip-text text-transparent;
    }

    .hero-slider__viewport {
        @apply pb-16;
    }

    .hero-slider__track {
        will-change: transform;
    }

    .hero-mesh--a {
        animation: hero-float 14s ease-in-out infinite;
    }

    .hero-mesh--b {
        animation: hero-float 18s ease-in-out infinite reverse;
    }

    @keyframes hero-float {
        0%,
        100% {
            transform: translate(0, 0) scale(1);
        }
        50% {
            transform: translate(3%, 5%) scale(1.05);
        }
    }

    .welcome-tab[aria-selected='true'] {
        @apply border-transparent bg-gerg-500 text-white shadow-md shadow-gerg-500/25;
    }

    .welcome-tab[aria-selected='false'] {
        @apply border border-gerg-grey/80 bg-white text-gerg-800 hover:border-gerg-300 hover:bg-gerg-50;
    }

    .portfolio-card {
        @apply will-change-transform;
    }

    .service-tab[aria-selected='true'] {
        @apply bg-gerg-500 text-white shadow-md shadow-gerg-500/25;
    }

    .service-tab[aria-selected='true'] .rounded-lg {
        @apply bg-white/20 ring-white/30;
    }

    .service-tab[aria-selected='true'] svg {
        @apply text-white;
    }

    .service-tab[aria-selected='false'] {
        @apply bg-white text-gerg-800 ring-1 ring-gerg-100 hover:bg-gerg-50 hover:ring-gerg-200;
    }

    .progress-card {
        @apply will-change-transform;
    }

    .progress-carousel #progress-carousel-viewport {
        cursor: grab;
    }

    .progress-carousel #progress-carousel-viewport::-webkit-scrollbar {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-slider__track {
            transition-duration: 0.01ms !important;
        }

        .hero-mesh--a,
        .hero-mesh--b {
            animation: none !important;
        }
    }
}