/* ═══════════════════════════════════════
   СпортКалендарь — Base / Reset
   ═══════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
  font-family:var(--font-family);
  font-size:var(--font-base);
  color:var(--foreground);
  background:var(--background);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:var(--violet-500);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
a:hover{color:var(--violet-700)}
input,select,textarea,button{font-family:inherit;font-size:inherit}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;color:var(--foreground);letter-spacing:-.02em}
h1{font-size:var(--font-2xl)}
h2{font-size:var(--font-xl)}
h3{font-size:var(--font-lg)}

::selection{background:var(--violet-100);color:var(--violet-700)}

:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground)}

/* Utilities */
.text-center{text-align:center}
.text-muted{color:var(--muted-foreground)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ═══ Animations ═══ */

/* Staggered fade-in (login page + page transitions) */
@keyframes fadeSlideIn{
  to{opacity:1;filter:blur(0);transform:translateY(0)}
}
@keyframes slideRightIn{
  to{opacity:1;filter:blur(0);transform:translateX(0)}
}
@keyframes pageIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.96) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Staggered animation classes for login */
.anim{
  opacity:0;
  filter:blur(6px);
  transform:translateY(14px);
  animation:fadeSlideIn .6s var(--ease) forwards;
}
.anim-1{animation-delay:80ms}
.anim-2{animation-delay:160ms}
.anim-3{animation-delay:240ms}
.anim-4{animation-delay:320ms}
.anim-5{animation-delay:400ms}
.anim-6{animation-delay:480ms}
.anim-7{animation-delay:560ms}
.anim-8{animation-delay:640ms}
.anim-9{animation-delay:720ms}

.anim-slide-right{
  opacity:0;
  filter:blur(10px);
  transform:translateX(40px);
  animation:slideRightIn .8s var(--ease) .3s forwards;
}
