/* Tawtheeq - Static Site Styles */

/* Custom Font */
@font-face {
    font-family: 'ITC Bauhaus';
    src: url('../fonts/ITC_Bauhaus_Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow on mobile */
html, body {
    overflow-x: hidden;
}

img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* Screen reader text */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Prose styles for content areas */
.prose h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 0.75em;
    margin-top: 1.5em;
}

.prose p {
    margin-bottom: 1.25em;
    line-height: 1.75;
}

.prose a {
    text-decoration: underline;
}

/* Animations */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -50px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes beam-pulse {
    0% { opacity: 0; }
    20% { opacity: 0.7; }
    80% { opacity: 0.7; }
    100% { opacity: 0; }
}

@keyframes particle-travel {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.animate-blob {
    animation: blob 7s infinite ease-in-out;
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-beam-pulse {
    animation: beam-pulse 3s ease-in-out infinite;
}

.animate-particle-travel {
    animation: particle-travel 3s ease-in-out infinite;
}

.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 3s ease infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}