/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
*/

/* Base */

@font-face {
  font-family: 'Klasik';
  src: url("/assets/Klasik-d4b51b11.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Shared: Toast */

.application-toast {
  animation: toast-enter 200ms cubic-bezier(0.16, 1, 0.3, 1);
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--toast-navigation-inset, 0px) + var(--overlay-bottom-inset, 0px));
  right: max(1rem, env(safe-area-inset-right));
  left: max(1rem, env(safe-area-inset-left));
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .application-toast { animation: none; }
}

@media (width < 64rem) {
  body:has([data-primary-navigation-tab-bar]) .application-toast {
    /* The web dock includes safe-area padding in addition to its bottom offset. */
    --toast-navigation-inset: calc(var(--content-bottom-inset, 0px) + env(safe-area-inset-bottom));
  }
}

/* Shared: Sortable */

.sortable-item.sortable-chosen .sortable-item-surface {
  filter: brightness(var(--surface-lift-brightness));
}

.sortable-item.sortable-ghost .sortable-item-surface {
  filter: none;
}

.sortable-item.sortable-drag .sortable-item-surface {
  filter: brightness(var(--surface-lift-brightness)) drop-shadow(0 14px 15px var(--shadow-ink-drag));
}

.sortable-ghost {
  opacity: 0.45;
}

/* Page: Daily Page */

/* Page: Daily Page - States */

.daily-page-frame[data-navigation-loading="true"] .daily-page-spinner {
  opacity: 1;
}

.daily-page-frame[data-navigation-loading="true"] .daily-page-surface {
  pointer-events: none;
}

.daily-page-frame[data-navigation-state="exiting"][data-navigation-direction="previous"] .daily-page-surface {
  animation: daily-page-exit-to-right 180ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.daily-page-frame[data-navigation-state="exiting"][data-navigation-direction="next"] .daily-page-surface {
  animation: daily-page-exit-to-left 180ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.daily-page-frame[data-navigation-state="entering"][data-navigation-direction="previous"] .daily-page-surface {
  animation: daily-page-enter-from-left 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-page-frame[data-navigation-state="entering"][data-navigation-direction="next"] .daily-page-surface {
  animation: daily-page-enter-from-right 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-page-frame[data-navigation-state="rendering"] .daily-page-surface {
  opacity: 0;
}

.daily-page-frame[data-navigation-state="exiting"][data-navigation-transition="scope"] .daily-page-surface {
  animation: daily-page-scope-exit 140ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.daily-page-frame[data-navigation-state="rendering"][data-navigation-transition="scope"] .daily-page-surface {
  transform: scale(0.985);
}

.daily-page-frame[data-navigation-state="entering"][data-navigation-transition="scope"] .daily-page-surface {
  animation: daily-page-scope-enter 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Page: Daily Page - Keyframes */

@keyframes daily-page-scope-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes daily-page-scope-enter {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes daily-page-exit-to-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes daily-page-exit-to-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes daily-page-enter-from-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes daily-page-enter-from-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Page: Daily Page - Reduced Motion */

@media (prefers-reduced-motion: reduce) {
  .daily-page-surface {
    animation: none;
    transition: none;
    transform: none;
  }
}