/* 
    World of Technology Sudan - Apple Minimalist Style
    Light Theme Coming Soon Page
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

:root {
    --apple-gray: #f5f5f7;
    --apple-blue: #0071e3;
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--white);
    color: var(--text-primary);
    overflow-x: hidden;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
}

/* Apple-style Blur */
.blur-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Subtle Shadow */
.apple-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Buttons */
.btn-apple {
    background-color: var(--apple-blue);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 980px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-apple:hover {
    background-color: #0077ed;
    transform: scale(1.02);
}

/* Hero Text Animation */
.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* Custom Input */
.apple-input {
    background: var(--apple-gray);
    border: none;
    padding: 18px 24px;
    border-radius: 12px;
    width: 100%;
    font-size: 16px;
    transition: background 0.3s;
}

.apple-input:focus {
    background: #e8e8ed;
    outline: none;
}

/* Floating Elements */
.float {
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translatey(0px); }
    50% { transform: translatey(-15px); }
    100% { transform: translatey(0px); }
}