/* public/assets/css/creative-preloader.css */

:root {
    --preloader-bg-light: #eef2f7; /* Very light cool gray */
    --preloader-bg-dark: #0d1117;  /* GitHub dark dim */
    --main-text-color-light: #1a2b47; /* Deep blue */
    --main-text-color-dark: #c9d1d9;  /* GitHub dark text */
    --sub-text-color-light: #3498db;
    --sub-text-color-dark: #58a6ff; /* GitHub dark blue */
    --accent-color-light: #e74c3c; /* Accent for underline/glow */
    --accent-color-dark: #f07167;  /* Brighter accent for dark */
}

#creative-preloader {
    position: fixed;
    inset: 0;
    background-color: var(--preloader-bg-light);
    /* Subtle animated gradient background */
    background: linear-gradient(-45deg, var(--preloader-bg-light), #ffffff, #e0e8f0, var(--preloader-bg-light));
    background-size: 400% 400%;
    animation: preloaderBgAnimate 15s ease infinite;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1), 
                visibility 0s linear 0.8s;
}

@keyframes preloaderBgAnimate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html.dark #creative-preloader {
    background-color: var(--preloader-bg-dark);
    background: linear-gradient(-45deg, var(--preloader-bg-dark), #010409, #0d1625, var(--preloader-bg-dark));
    background-size: 400% 400%;
    animation: preloaderBgAnimate 15s ease infinite; /* Same animation, different colors */
}

#creative-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content-area {
    text-align: center;
    font-family: 'Poppins', 'Inter', sans-serif; /* Poppins for a modern feel, fallback to Inter */
}

.main-text-reveal {
    font-size: clamp(2.5rem, 8vw, 5rem); /* Responsive font size */
    font-weight: 700;
    color: var(--main-text-color-light);
    line-height: 1;
    margin-bottom: 0.5em; /* More space for subtext */
    display: flex; /* Use flex for letter alignment if needed */
    justify-content: center;
    position: relative; /* For pseudo-element underline */
}
html.dark .main-text-reveal {
    color: var(--main-text-color-dark);
}

.main-text-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: revealLetter 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    position: relative; /* For individual letter underline */
    padding: 0 0.05em; /* Slight horizontal padding for letters */
}

/* Staggered animation for each letter of "CeylonSoft" */
.main-text-reveal span:nth-child(1) { animation-delay: 0.2s; }
.main-text-reveal span:nth-child(2) { animation-delay: 0.25s; }
.main-text-reveal span:nth-child(3) { animation-delay: 0.3s; }
.main-text-reveal span:nth-child(4) { animation-delay: 0.35s; }
.main-text-reveal span:nth-child(5) { animation-delay: 0.4s; }
.main-text-reveal span:nth-child(6) { animation-delay: 0.45s; }
.main-text-reveal span:nth-child(7) { animation-delay: 0.5s; }
.main-text-reveal span:nth-child(8) { animation-delay: 0.55s; }
.main-text-reveal span:nth-child(9) { animation-delay: 0.6s; }
.main-text-reveal span:nth-child(10) { animation-delay: 0.65s; }


@keyframes revealLetter {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

/* Underline effect for main text after letters reveal */
.main-text-reveal::after {
    content: '';
    position: absolute;
    bottom: -8px; /* Position below the text */
    left: 50%; /* Start from center for outward expansion */
    transform: translateX(-50%);
    width: 0%;
    height: 3px; /* Thickness of the underline */
    background-color: var(--accent-color-light);
    animation: drawUnderline 0.8s 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; /* Starts after letter reveal */
}
html.dark .main-text-reveal::after {
    background-color: var(--accent-color-dark);
}

@keyframes drawUnderline {
    to {
        width: 100%; /* Expand to full width */
    }
}


.sub-text-reveal {
    font-size: clamp(0.9rem, 3vw, 1.25rem); /* Responsive font size */
    font-weight: 400;
    color: var(--sub-text-color-light);
    letter-spacing: 0.3em; /* Start wide */
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInSubText 1.2s 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Starts after main text underline */
    text-shadow: 0 0 5px rgba(var(--sub-text-color-light-rgb, 52, 152, 219), 0.3); /* Subtle glow - define RGB for opacity */
}
html.dark .sub-text-reveal {
    color: var(--sub-text-color-dark);
    text-shadow: 0 0 8px rgba(var(--sub-text-color-dark-rgb, 88, 166, 255), 0.4);
}
/* Helper for text-shadow opacity - define these in :root if you use them */
/*
:root {
    --sub-text-color-light-rgb: 52, 152, 219;
    --sub-text-color-dark-rgb: 88, 166, 255;
}
*/


@keyframes fadeInSubText {
    0% {
        opacity: 0;
        transform: translateY(15px);
        letter-spacing: 0.4em;
    }
    70% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0.2em; /* Final letter spacing */
    }
}

/* When preloader is hiding, animate text out */
#creative-preloader.loaded .preloader-content-area {
    animation: contentFadeOutScaleDown 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes contentFadeOutScaleDown {
    to {
        opacity: 0;
        transform: scale(0.7);
    }
}


/* public/assets/css/simple-chatbot.css */

:root {
    --chatbot-primary-color: #4A90E2; /* Example primary color */
    --chatbot-secondary-color: #f0f2f5;
    --chatbot-text-color: #333;
    --chatbot-bg-color: #fff;
    --chatbot-user-msg-bg: #e6f2ff;
    --chatbot-bot-msg-bg: #f1f0f0;

    /* Dark Mode (Optional - assumes 'dark' class on html/body) */
    --chatbot-primary-color-dark: #60A5FA;
    --chatbot-secondary-color-dark: #1e293b; /* Tailwind slate-800 */
    --chatbot-text-color-dark: #e2e8f0;      /* Tailwind slate-200 */
    --chatbot-bg-color-dark: #0f172a;        /* Tailwind slate-900 */
    --chatbot-user-msg-bg-dark: #1d4ed8;   /* Tailwind blue-700 */
    --chatbot-bot-msg-bg-dark: #334155;    /* Tailwind slate-700 */
}

#simple-chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    font-family: 'Inter', sans-serif;
}

#chatbot-toggle-button {
    width: 60px;
    height: 60px;
    background-color: var(--chatbot-primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease-in-out;
}
#chatbot-toggle-button:hover {
    transform: scale(1.1);
}
#chatbot-toggle-button svg {
    width: 28px;
    height: 28px;
}

#chatbot-window {
    width: 350px;
    max-width: 90vw;
    height: 500px;
    max-height: 70vh;
    background-color: var(--chatbot-bg-color);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-out, visibility 0s linear 0.3s;
    position: absolute; /* Position relative to the toggle button's parent */
    bottom: 80px; /* Above toggle button */
    right: 0;
}

#simple-chatbot-container.chatbot-open #chatbot-window {
    transform: scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s, 0s;
}

#chatbot-header {
    background-color: var(--chatbot-primary-color);
    color: white;
    padding: 12px 15px;
    font-weight: 600;
    font-size: 1rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatbot-messages {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chatbot-message {
    padding: 8px 12px;
    border-radius: 18px;
    max-width: 75%;
    word-wrap: break-word;
    font-size: 0.9rem;
    line-height: 1.4;
}

.user-message {
    background-color: var(--chatbot-user-msg-bg);
    color: var(--chatbot-text-color);
    align-self: flex-end;
    border-bottom-right-radius: 5px;
}

.bot-message {
    background-color: var(--chatbot-bot-msg-bg);
    color: var(--chatbot-text-color);
    align-self: flex-start;
    border-bottom-left-radius: 5px;
}
.bot-message strong { /* For bolding keywords in bot response */
    font-weight: 600;
    color: var(--chatbot-primary-color);
}
html.dark .bot-message strong {
    color: var(--chatbot-primary-color-dark);
}


#chatbot-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid #e0e0e0;
    background-color: var(--chatbot-secondary-color);
}

#chatbot-input {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 0.9rem;
    outline: none;
    margin-right: 8px;
}
#chatbot-input:focus {
    border-color: var(--chatbot-primary-color);
    box-shadow: 0 0 0 2px rgba(var(--chatbot-primary-color-rgb, 74, 144, 226), 0.2); /* Define --chatbot-primary-color-rgb for glow */
}

#chatbot-send-button {
    background-color: var(--chatbot-primary-color);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}
#chatbot-send-button:hover {
    background-color: #3a7bc8; /* Darker shade of primary */
}

/* Dark Mode Specific Adjustments */
html.dark #chatbot-toggle-button {
    background-color: var(--chatbot-primary-color-dark);
}
html.dark #chatbot-window {
    background-color: var(--chatbot-bg-color-dark);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
html.dark #chatbot-header {
    background-color: var(--chatbot-primary-color-dark);
}
html.dark #chatbot-input-area {
    background-color: var(--chatbot-secondary-color-dark);
    border-top-color: #2d3748; /* Tailwind gray-700 */
}
html.dark #chatbot-input {
    background-color: #1a202c; /* Tailwind gray-800/900 */
    border-color: #2d3748;
    color: var(--chatbot-text-color-dark);
}
html.dark #chatbot-input:focus {
    border-color: var(--chatbot-primary-color-dark);
    box-shadow: 0 0 0 2px rgba(var(--chatbot-primary-color-dark-rgb, 96, 165, 250), 0.3);
}
html.dark #chatbot-send-button {
    background-color: var(--chatbot-primary-color-dark);
}
html.dark #chatbot-send-button:hover {
    background-color: #2b6cb0; /* Darker shade of primary-dark */
}
html.dark .user-message {
    background-color: var(--chatbot-user-msg-bg-dark);
    color: white; /* Or a very light gray */
}
html.dark .bot-message {
    background-color: var(--chatbot-bot-msg-bg-dark);
    color: var(--chatbot-text-color-dark);
}

/* For CSS variables like --chatbot-primary-color-rgb, define them in :root if you use them for box-shadow */
/*
:root {
    --chatbot-primary-color-rgb: 74, 144, 226; // For light mode blue
    --chatbot-primary-color-dark-rgb: 96, 165, 250; // For dark mode blue
}
*/

.bot-message strong { 
    font-weight: 600; /* Or 700 for bolder */
    color: var(--chatbot-primary-color); /* Or a distinct color */
}
html.dark .bot-message strong {
    color: var(--chatbot-primary-color-dark);
}






/* In your main CSS file (e.g., style.css) */

.hero-logo-container {
    perspective: 1500px; /* Increased perspective for more depth */
    display: flex;
    justify-content: center;
    align-items: center;
    /* mb-8 from Tailwind handles bottom margin */
}

.hero-brand-logo {
    display: block;
    height: 7.5rem; /* approx 120px. Adjust as needed */
    width: auto;
    max-width: 80%;

    /* Initial state for entrance animation */
    opacity: 0;
    /* Start further off, more rotated, and slightly blurred */
    transform: scale(0.3) rotateY(-90deg) translateY(50px) translateX(-50px);
    filter: blur(8px) brightness(0.8);
    
    /* Animations: 1. Entrance, 2. Subtle Float (after entrance) */
    animation: 
        logoEntranceDynamic 1.5s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, /* Entrance with a slight overshoot */
        logoSubtleFloat 6s 2s infinite ease-in-out; /* Starts 2s after page load (1.5s + 0.4s delay for entrance is ~1.9s) */

    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), 
                filter 0.5s ease-out;
}

@keyframes logoEntranceDynamic {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateY(-90deg) translateY(50px) translateX(-50px);
        filter: blur(8px) brightness(0.7);
    }
    60% { /* Overshoot slightly */
        opacity: 0.9;
        transform: scale(1.15) rotateY(15deg) translateY(-10px) translateX(10px);
        filter: blur(1px) brightness(1.1) drop-shadow(0px 20px 25px rgba(var(--color-primary-rgb, 79, 70, 229), 0.25));
    }
    80% { /* Bounce back */
        opacity: 1;
        transform: scale(0.95) rotateY(-5deg) translateY(5px) translateX(-5px);
        filter: blur(0px) brightness(1.05) drop-shadow(0px 10px 18px rgba(var(--color-primary-rgb, 79, 70, 229), 0.2));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg) translateY(0) translateX(0);
        filter: blur(0px) brightness(1) drop-shadow(0px 12px 20px rgba(var(--color-primary-rgb, 79, 70, 229), 0.15));
    }
}

@keyframes logoSubtleFloat {
    0%, 100% {
        transform: translateY(0px) rotateZ(0deg); /* Keep final transform from entrance */
    }
    25% {
        transform: translateY(-4px) rotateZ(-1deg);
    }
    75% {
        transform: translateY(2px) rotateZ(1deg);
    }
}

.hero-brand-logo:hover {
    transform: scale(1.12) translateY(-8px) rotateY(8deg) rotateZ(2deg); /* More playful hover */
    filter: drop-shadow(0px 18px 30px rgba(var(--color-primary-rgb, 79, 70, 229), 0.35));
    animation-play-state: paused; /* Pause float animation on hover to prevent conflict */
}

/* Define your primary color RGB for the shadow effect (optional) */
/* Add this to your :root or a general variables section */
/*
:root {
    --color-primary-rgb: 79, 70, 229; // Example: Indigo-600
}
html.dark .hero-brand-logo { // Example for dark mode specific shadow base
    // filter: blur(0px) brightness(1) drop-shadow(0px 12px 20px rgba(var(--color-primary-dark-rgb, 96, 165, 250), 0.2));
}
html.dark .hero-brand-logo:hover {
    // filter: drop-shadow(0px 18px 30px rgba(var(--color-primary-dark-rgb, 96, 165, 250), 0.4));
}
*/

/* Responsive adjustments for logo height */
@media (max-width: 768px) {
    .hero-brand-logo {
        height: 6.5rem;
    }
    @keyframes logoSubtleFloat { /* Adjust float for smaller logo if needed */
        25% { transform: translateY(-3px) rotateZ(-1deg); }
        75% { transform: translateY(1px) rotateZ(1deg); }
    }
}

@media (max-width: 640px) {
    .hero-brand-logo {
        height: 5.5rem;
    }
    @keyframes logoSubtleFloat {
        25% { transform: translateY(-2px) rotateZ(-0.5deg); }
        75% { transform: translateY(1px) rotateZ(0.5deg); }
    }
}