/*
  Custom styles for Litequo SPA
  - Minimal overrides on top of Tailwind
  - Keyframes for reveal-on-scroll
*/

:root {
  --ease-out-custom: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth reveal */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.reveal-in { opacity: 1; transform: translateY(0); transition: opacity .7s var(--ease-out-custom), transform .7s var(--ease-out-custom); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal.reveal-in { opacity: 1 !important; transform: none !important; }
}

/* Fine-tune focus ring for better a11y contrast */
:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; border-radius: 6px; }

/* Better text rendering */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Print styles (basic) */
@media print {
  a[href]:after { content: " (" attr(href) ")"; font-size: 90%; color: #64748b; }
  header, footer, #mobile-menu { display: none !important; }
}

/* Hover transforms on primary elements (complement Tailwind) */
.service-card:hover { transform: translateY(-4px); }

/* Hide default scrollbar for aesthetic (keeps accessible scroll) */
@media (min-width: 640px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* Utility for opacity/scale transitions if Tailwind classes are toggled in JS */
#mobile-menu { transition: transform .15s var(--ease-out-custom), opacity .15s var(--ease-out-custom); }

/* RTL support: flip margins/paddings if needed (minimal since Tailwind handles logical props) */
html[dir="rtl"] body { font-family: 'Noto Sans Arabic', Inter, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }