<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
        content="OA MediaKraft - The Art of Digital. We architect visuals that define brands and captivate audiences.">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? config('app.name', 'OA MediaKraft') }}</title>

    <!-- Load Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

    <!-- Styles -->
    <style>
        /* Configure Inter font and smooth scrolling */

        /* --- GLOBAL FONT SIZE REDUCTION (40% less) --- */
        html {
            font-size: 60%;
            scroll-padding-top: 5rem;
        }

        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            transition: background-color 0.3s, color 0.3s;
        }

        /* Custom style for the background gradient in the Hero section */
        #hero-background {
            background: radial-gradient(circle at top, #1e3a8a 0%, transparent 70%);
        }

        /* ---------------------------------------------------- */
        /* --- ANIMATION STYLES: On-Load and On-Scroll --- */
        /* ---------------------------------------------------- */

        /* 1. CSS Keyframes for Fade-in-Up effect */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 2. On-Load animation for Hero elements (staggered CSS animation) */
        .hero-animate-onload>* {
            opacity: 0;
            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* Staggered delays based on child index in the hero section */
        .hero-animate-onload>*:nth-child(1) {
            animation-delay: 0.1s;
        }

        .hero-animate-onload>*:nth-child(2) {
            animation-delay: 0.3s;
        }

        .hero-animate-onload>*:nth-child(3) {
            animation-delay: 0.5s;
        }

        .hero-animate-onload>*:nth-child(4) {
            animation-delay: 0.7s;
        }

        /* 3. Base styles for scroll animation (Hidden state) */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* Target state when visible (Appears on Intersection) */
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>

    <!-- Theme color for browser -->
    <meta name="theme-color" content="#111827" id="theme-color">
</head>

<body class="min-h-screen antialiased dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900">
    <!-- Root element for the main content -->
    <div id="app-root">
        @yield('content')
    </div>

    <!-- Scripts -->
    @stack('scripts')
</body>

</html>
