/*
  Weaker Potions – Cuphead-inspired styling
  -------------------------------------------------
  Fonts: Supermercado One (main accent) + Montserrat (backup)
*/

:root {
  --ink-black: #1d1d1b;
  --aged-paper: #efe6d3;
  --sepia-edge: #d6c6a4;
  --blood-red: #d83131;
  --sky-blue: #3c9ad2;
  --sickly-green: #4b8b50;
  --shadow: rgba(0, 0, 0, 0.25);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: radial-gradient(circle at 40% 20%, var(--aged-paper) 0%, var(--sepia-edge) 100%);
  color: var(--ink-black);
  overflow-x: hidden;
  /* Subtle grain from pseudo overlay */
  position: relative;
}

.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMicgaGVpZ2h0PScyJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgZmlsbD0nI0ZGRicgcj0nMScgY3g9JzEnIGN5PScxJy8+PC9zdmc+');
  opacity: 0.1;
  mix-blend-mode: overlay;
  animation: grain 6s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10%  { transform: translate(-5%, -10%); }
  20%  { transform: translate(-15%, 5%); }
  30%  { transform: translate(7%, -25%); }
  40%  { transform: translate(-5%, 25%); }
  50%  { transform: translate(-15%, 10%); }
  60%  { transform: translate(15%, 0%); }
  70%  { transform: translate(0%, 15%); }
  80%  { transform: translate(3%, 20%); }
  90%  { transform: translate(-10%, 10%); }
}

/* Heading inspired by 1930s marquees */
header {
  padding: 2rem 1rem 1.5rem;
  text-align: center;
}

header h1 {
  font-family: 'Supermercado One', cursive;
  font-size: clamp(2.5rem, 8vw, 5rem);
  letter-spacing: 0.05em;
  color: var(--ink-black);
  text-shadow: 2px 2px 0 var(--shadow);
  position: relative;
}

header h1::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 120%;
  height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--ink-black) 6px 12px);
  transform: translateX(-50%);
}

/* Banner Row */
.banner {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem 1rem 4rem;
  flex-wrap: wrap;
}

.potion-card {
  background: #fff;
  padding: 1rem;
  border: 4px solid var(--ink-black);
  border-radius: 12px;
  width: clamp(180px, 25vw, 260px);
  text-align: center;
  position: relative;
  box-shadow: 6px 6px 0 var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.potion-card:hover {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 10px 10px 0 var(--shadow);
}

.potion-card img {
  width: 100%;
  height: auto;
  display: block;
  border: 4px solid var(--ink-black);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  filter: saturate(125%) contrast(110%);
}

/* Potion Names */
.potion-card h2 {
  font-family: 'Supermercado One', cursive;
  font-size: 1.3rem;
  color: var(--ink-black);
  text-shadow: 2px 2px 0 var(--shadow);
}

/* Stylized outlines (rubber-hose wobble) */
@media (prefers-reduced-motion: no-preference) {
  .potion-card,
  header h1 {
    animation: wobble 3.6s ease-in-out infinite;
  }
}

@keyframes wobble {
  0%, 100% { transform-origin: center center; }
  25% { transform: perspective(800px) rotateX(2deg) rotateZ(-1deg); }
  50% { transform: perspective(800px) rotateX(-2deg) rotateZ(0.8deg); }
  75% { transform: perspective(800px) rotateX(1deg) rotateZ(-1.2deg); }
}

/* Responsive Tweaks */
@media (max-width: 600px) {
  .banner {
    gap: 1rem;
  }
}

/* Accessibility */
img[alt] { font-style: italic; }