@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
  --animation-duration-first: 20s; /* First word total animation duration */
  --animation-duration: 10s; /* Total animation duration */
}

@keyframes word {
  0% {
    transform: translateY(100%);
  }
  10% {
    transform: translateY(-10%);
    animation-timing-function: ease-out;
  }
  12.5% {
    transform: translateY(0);
  }
  25%,
  100% {
    transform: translateY(-110%);
  }
}

.animate-word {
  animation: word var(--animation-duration) infinite;
}
.animate-word-delay-1 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-1 * (var(--animation-duration) / 8));
}
.animate-word-delay-2 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-2 * (var(--animation-duration) / 8));
}
.animate-word-delay-3 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-3 * (var(--animation-duration) / 8));
}
.animate-word-delay-4 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-4 * (var(--animation-duration) / 8));
}
.animate-word-delay-5 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-5 * (var(--animation-duration) / 8));
}
.animate-word-delay-6 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-6 * (var(--animation-duration) / 8));
}
.animate-word-delay-7 {
  animation: word var(--animation-duration) infinite;
  animation-delay: calc(-7 * (var(--animation-duration) / 8));
}
/* Custom Trix Editor Styling - Tailwind-like buttons */

/* Toolbar styling */
trix-toolbar {
  @apply border border-gray-300 rounded-t-md bg-gray-50 p-2;
}

/* Button groups */
trix-toolbar .trix-button-group {
  @apply inline-flex rounded-md shadow-sm mr-2 mb-2;
}

/* Individual buttons */
trix-toolbar .trix-button {
  @apply relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 hover:text-gray-900 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500;
  border-radius: 0;
}

/* First button in group */
trix-toolbar .trix-button-group .trix-button:first-child {
  @apply rounded-l-md;
}

/* Last button in group */
trix-toolbar .trix-button-group .trix-button:last-child {
  @apply rounded-r-md;
}

/* Active/pressed button state */
trix-toolbar .trix-button.trix-active {
  @apply bg-indigo-600 text-white border-indigo-600;
}

/* Disabled button state */
trix-toolbar .trix-button:disabled {
  @apply opacity-50 cursor-not-allowed bg-gray-100;
}

/* Dialog styling (for links, etc.) */
trix-toolbar .trix-dialog {
  @apply bg-white border border-gray-300 rounded-md shadow-lg p-4 mt-2;
}

trix-toolbar .trix-dialog__link-fields {
  @apply space-y-3;
}

trix-toolbar .trix-dialog__link-fields input {
  @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm;
}

/* Editor content area */
trix-editor {
  @apply rounded-b-md border-t-0;
  min-height: 200px;
}

/* Hide attachment buttons completely */
trix-toolbar .trix-button--icon-attach,
trix-toolbar .trix-button-group--file-tools {
  display: none !important;
}

/* Button icons - make them more visible */
trix-toolbar .trix-button::before {
  @apply text-gray-600;
}

trix-toolbar .trix-button.trix-active::before {
  @apply text-white;
}

/* Input fields in dialogs */
trix-toolbar .trix-input {
  @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2;
}

/* Dialog buttons */
trix-toolbar .trix-button--dialog {
  @apply inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 mr-2;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.bg-primary-color {
  background-color: #0a0185;
}