@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: 'Cairo', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Deep aqua blue - headers, primary surfaces */
    --color-abyss-50: #eef8fc;
    --color-abyss-100: #d5eef7;
    --color-abyss-200: #b0dded;
    --color-abyss-300: #78c4de;
    --color-abyss-400: #39a3c7;
    --color-abyss-500: #1d86ad;
    --color-abyss-600: #186c92;
    --color-abyss-700: #185877;
    --color-abyss-800: #0f3d56;
    --color-abyss-900: #082b3e;
    --color-abyss-950: #041c2a;

    /* Turquoise - accents, calls to action */
    --color-aqua-50: #eefdfb;
    --color-aqua-100: #d3faf6;
    --color-aqua-200: #adf3ee;
    --color-aqua-300: #75e6da;
    --color-aqua-400: #3ed2c8;
    --color-aqua-500: #1eb7ae;
    --color-aqua-600: #14938e;
    --color-aqua-700: #147573;
    --color-aqua-800: #155d5c;
    --color-aqua-900: #164d4c;
    --color-aqua-950: #052e30;

    --shadow-glow: 0 0 45px -10px --alpha(var(--color-aqua-400) / 55%);
    --shadow-card: 0 18px 45px -22px --alpha(var(--color-abyss-950) / 45%);

    --animate-float: float 6s ease-in-out infinite;
    --animate-shimmer: shimmer 2.4s linear infinite;
    --animate-bubble: bubble 11s ease-in infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes bubble {
    0% { transform: translateY(0) scale(0.7); opacity: 0; }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(-90vh) scale(1.25); opacity: 0; }
}

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

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

    h1, h2, h3, h4, h5, h6 {
        @apply font-bold text-abyss-900;
        text-wrap: balance;
    }

    p {
        text-wrap: pretty;
    }

    /* Keep focus rings visible for keyboard users without boxing every click. */
    :focus-visible {
        @apply outline-2 outline-offset-2 outline-aqua-500;
    }

    [x-cloak] {
        display: none !important;
    }
}

@utility container-page {
    @apply mx-auto w-full max-w-7xl px-5 sm:px-8 lg:px-10;
}

@utility section {
    @apply py-20 sm:py-24 lg:py-28;
}

@utility btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-7 py-3 text-sm font-bold
           transition-all duration-300 ease-out focus-visible:outline-2 focus-visible:outline-offset-2;
}

@utility btn-primary {
    @apply btn bg-aqua-500 text-white shadow-lg shadow-aqua-500/25
           hover:-translate-y-0.5 hover:bg-aqua-400 hover:shadow-xl hover:shadow-aqua-400/35;
}

@utility btn-outline {
    @apply btn border-2 border-white/70 text-white backdrop-blur-sm
           hover:-translate-y-0.5 hover:border-white hover:bg-white/15;
}

@utility btn-dark {
    @apply btn bg-abyss-800 text-white hover:-translate-y-0.5 hover:bg-abyss-700;
}

@utility card-surface {
    @apply overflow-hidden rounded-3xl border border-slate-100 bg-white shadow-card
           transition-all duration-500 ease-out;
}

@utility glass-panel {
    @apply rounded-3xl border border-white/20 bg-white/10 backdrop-blur-xl;
}

@utility eyebrow {
    @apply inline-flex items-center gap-2 rounded-full bg-aqua-50 px-4 py-1.5
           text-xs font-bold tracking-widest text-aqua-700 uppercase;
}

@utility text-gradient {
    @apply bg-gradient-to-l from-aqua-300 via-aqua-100 to-white bg-clip-text text-transparent;
}

/* Reveal-on-scroll: elements start hidden and are unset by an IntersectionObserver. */
@utility reveal {
    @apply translate-y-6 opacity-0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;

    &.is-visible {
        @apply translate-y-0 opacity-100;
    }
}

/* Long-form copy coming out of the admin rich editor. */
@utility prose-site {
    & :is(h2, h3, h4) {
        @apply mt-8 mb-3 text-abyss-900;
    }

    & p {
        @apply mb-4 text-lg leading-loose text-slate-600;
    }

    & :is(ul, ol) {
        @apply mb-4 space-y-2;
    }

    & li {
        @apply relative ps-6 leading-loose text-slate-600;
    }

    & li::before {
        @apply absolute top-3 start-0 size-2 rounded-full bg-aqua-400 content-[''];
    }

    & a {
        @apply font-semibold text-aqua-600 underline underline-offset-4 hover:text-aqua-500;
    }

    & strong {
        @apply font-bold text-abyss-800;
    }
}

/* Swiper overrides so the hero slider matches the brand. */
.hero-swiper {
    @apply h-full w-full;
}

.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    @apply size-12 rounded-full border border-white/30 bg-white/10 text-white backdrop-blur-md
           transition hover:bg-white/25;
}

.hero-swiper .swiper-button-next::after,
.hero-swiper .swiper-button-prev::after {
    @apply text-lg font-black;
}

.hero-swiper .swiper-pagination-bullet {
    @apply size-2.5 bg-white/60 opacity-100 transition-all;
}

.hero-swiper .swiper-pagination-bullet-active {
    @apply w-8 rounded-full bg-aqua-300;
}

/* The "zoom" animation is fade plus a slow Ken Burns push on the active slide. */
.hero-swiper--zoom .swiper-slide-active img {
    animation: kenburns 9s ease-out forwards;
}

@keyframes kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-swiper--zoom .swiper-slide-active img,
    .animate-bubble,
    .animate-float {
        animation: none;
    }

    .reveal {
        transition: none;
    }
}