@import url('converter.css');
@import url('reset.css');
@import url('mini-classes.css');
@import url('typography.css');
@import url('background.css');
@import url('structure.css');
@import url('layered-background.css');
@import url('chapters.css');
@import url('modals.css');
@import url('forms.css');
@import url('books.css');
@import url('projects.css');
@import url('responsive.css');


:root {
  --primary: #ddbe97;
  --primary-hover: #ffddb2;
  --primary-dark: #8a6d4f;
  --bg-texture: url('../images/pink-paper-cover.webp');
}

. {
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fall-away {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  95% {
    transform: translateY(100vh) rotate(30deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(30deg);
    opacity: 0;
  }
}

.fall-away {
  animation: fall-away 1.5s ease-in forwards;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards;
}


:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

#site-tabs {
  overscroll-behavior-x: contain;   /* stops history swipe in Chrome/Edge */
}

#site-tabs .tab {
  -webkit-user-select: none;
  user-select: none;                /* avoids drag-select triggering pointer weirdness */
  padding: 0.25rem 0.6rem;          /* a bit more hit-area */
}