/* Shared UI tokens + lightweight motion for Hatıkan */

:root {
    --ui-bg: #f5f5f7;
    --ui-text: #0f172a; /* slate-900 */
    --ui-muted: rgba(15, 23, 42, 0.65);
    --ui-ring: rgba(15, 23, 42, 0.10);
    --ui-glass-bg: rgba(255, 255, 255, 0.70);
    --ui-glass-border: rgba(255, 255, 255, 0.30);
    --ui-radius-lg: 1rem;
    --ui-radius-xl: 1.25rem;
    --ui-radius-2xl: 1.5rem;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ui-text);
    background-color: var(--ui-bg);
}

	.glass {
	    background: var(--ui-glass-bg);
	    backdrop-filter: blur(10px);
	    border: 1px solid var(--ui-glass-border);
	}

	/* Hero backdrop (no video) */
	.hero-backdrop {
	    background:
	        radial-gradient(1200px circle at 12% 6%, rgba(37, 99, 235, 0.12), transparent 55%),
	        radial-gradient(900px circle at 92% 18%, rgba(15, 23, 42, 0.10), transparent 60%),
	        radial-gradient(800px circle at 45% 92%, rgba(16, 185, 129, 0.10), transparent 62%),
	        linear-gradient(180deg, #ffffff, #f5f7fb 58%, #f3f4f6);
	}
	.hero-grid {
	    background-image:
	        linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
	        linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
	    background-size: 42px 42px;
	    mask-image: radial-gradient(closest-side at 30% 20%, rgba(0,0,0,0.9), transparent 72%);
	    opacity: 0.55;
	}
	.hero-sheen {
	    background: radial-gradient(closest-side, rgba(255,255,255,0.65), rgba(255,255,255,0) 70%);
	    filter: blur(18px);
	    mix-blend-mode: screen;
	    animation: heroSheen 10s ease-in-out infinite;
	    opacity: 0.8;
	}
	@keyframes heroSheen {
	    0%, 100% { transform: translateX(-18%) translateY(-10%) scale(1); }
	    50% { transform: translateX(18%) translateY(10%) scale(1.15); }
	}

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

/* Subtle scroll-reveal motion (opt-in via [data-reveal]) */
[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
    transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

	@media (prefers-reduced-motion: reduce) {
	    html {
	        scroll-behavior: auto;
	    }
	    .hero-sheen {
	        animation: none;
	    }
	    [data-reveal] {
	        opacity: 1;
	        transform: none;
	        filter: none;
	        transition: none;
	    }
	}