/* ==========================================================================
   Psychoterapia Urszula – style własne (animacje, fonty, tło, zaznaczanie)
   Odtworzenie oryginalnego src/index.css z aplikacji React 1:1
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.text-selectable,
#contact .text-selectable {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

.font-playfair { font-family: 'Playfair Display', serif; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

/* Skip link */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto; height: auto;
  padding: inherit; margin: inherit;
  overflow: visible; clip: auto;
  white-space: normal;
}

/* Siatka w tle (odpowiednik inline backgroundImage z React) */
.pu-bg-grid {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(47, 111, 98, 0.025) 20px, rgba(47, 111, 98, 0.025) 21px),
    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(47, 111, 98, 0.025) 20px, rgba(47, 111, 98, 0.025) 21px);
}

/* Animacje */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.animate-fade-in { animation: fade-in 0.8s ease-out; }
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out; animation-fill-mode: both; }
.animate-slide-in-left { animation: slide-in-left 0.8s ease-out; }
.animate-slide-in-right { animation: slide-in-right 0.8s ease-out; }
.animate-slide-up { animation: slide-up 0.5s ease-out; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-delayed { animation: float 3s ease-in-out infinite; animation-delay: 1.5s; }
.animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }

.hover\:shadow-3xl:hover { box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }