/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps.
 *
 * IMPORTANT:
 * - Don't @import other CSS files here (it causes runtime /assets/*.css requests -> 404).
 * - Load extra css files via stylesheet_link_tag in the layout instead.
 */

/* Animations */
@keyframes slow-tilt {
  0% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}
.animate-tilt {
  animation: slow-tilt 6s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* Slightly smoother hover transitions for linked era elements */
.timeline-era-pill,
.timeline-era-lane,
.timeline-era-card {
  transition: opacity 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.timeline-era-pill:hover {
  transform: translateY(-1px);
  max-width: 260px;
}

/* Era background wrapper ensures correct stacking */
.era-bg-wrap {
  position: relative;
}

/* Era background image layer */
.era-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.35;              /* increased slightly */
  filter: saturate(0.9) contrast(1.05);
}

/* Ensure page content sits above the background */
.era-page {
  position: relative;
  z-index: 1;
}

/* Era pages: keep content surfaces opaque so background image never shows through */
.era-page .bg-card {
  background-color: rgba(255, 255, 255, 0.96);
}

.era-page .bg-background {
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.era-page [class*="bg-background/40"],
.era-page [class*="bg-background/50"] {
  background-color: rgba(255, 255, 255, 0.88);
}

.era-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.25) 100%
  );
}