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

.font-display {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-variant-ligatures: common-ligatures;
}

/* Film grain — animated SVG noise for the retro treatment */
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  animation: grain-shift 1.2s steps(6) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 6px); }
  40% { transform: translate(6px, -10px); }
  60% { transform: translate(-10px, -4px); }
  80% { transform: translate(8px, 8px); }
  100% { transform: translate(0, 0); }
}

/* Vignette over the painting */
.vignette {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(10, 6, 2, 0.55) 100%);
}

/* Slow Ken Burns drift on the backgrounds */
.bg-drift {
  animation: drift 90s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.1); }
}

.volume {
  accent-color: rgba(254, 243, 199, 0.85);
}