/*
 * 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.
 */

/* Accent color gradients — set --accent-color on the element to activate */
.accent-gradient {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 8%, transparent) 0%, transparent 60%);
}

.accent-bg-gradient {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 6%, var(--color-base-200)) 0%, var(--color-base-200) 40%);
}

/* iOS safe area: html background determines the color of the top inset/overscroll area */
html {
  background-color: var(--color-base-100);
}

/* View Transitions for Turbo navigation */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
  }

  ::view-transition-old(root) {
    animation-name: fade-out;
  }

  ::view-transition-new(root) {
    animation-name: fade-in;
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}