/* =====================================================================
   Hogle Zoo Culinary Ops - 8-bit Fall / Thanksgiving theme
   Turn ON:  add class "theme-fall" to <body>.   Turn OFF: remove it.
   Everything is scoped under .theme-fall, so nothing changes when off.
   Needs palette.css (imported below) and the assets/ folder next to it.
   ===================================================================== */
@import url("palette.css");

@font-face {                       /* bundled copy, works offline */
  font-family: "Press Start 2P";
  src: url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display: swap;
}

.theme-fall {
  --fall-font-pixel: "Press Start 2P", ui-monospace, monospace; /* accents + headers only */
  --fall-font-body: inherit;      /* keep the app's own readable body font */
  --fall-px: 2;                   /* pixel scale for decor: 2, 3 or 4 (whole numbers only) */
  --fall-asset-path: "assets/svg/";
  background-color: var(--fall-bg);
  color: var(--fall-text);
}
.theme-fall a { color: var(--fall-link); }

/* Pixel font: opt-in only, never for body copy or table data */
.theme-fall .fall-title,
.theme-fall .fall-accent {
  font-family: var(--fall-font-pixel);
  color: var(--fall-text-strong);
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: uppercase;
}
.theme-fall .fall-title  { font-size: 16px; }  /* multiples of 8px keep the font crisp */
.theme-fall .fall-accent { font-size: 8px; }

/* Any pixel image: never smooth it */
.theme-fall .fall-pixel,
.theme-fall img[src*="assets/"] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Integer sizes for 16px icons (2x = 32, 3x = 48) */
.fall-icon-16 { width: 32px; height: 32px; }
.fall-icon-16.x3 { width: 48px; height: 48px; }
.fall-critter-32 { width: 64px; height: 64px; }
.fall-critter-32.x3 { width: 96px; height: 96px; }

/* Header bar + banner */
.theme-fall .fall-header {
  position: relative;
  background: var(--fall-bark-500);
  color: var(--fall-on-dark);
  border-bottom: 4px solid var(--fall-ink);
  overflow: hidden;
}
.theme-fall .fall-header .fall-title { color: var(--fall-gold-100); }
.theme-fall .fall-banner { width: 320px; height: 48px; image-rendering: pixelated; } /* 160x24 at 2x */

/* Garland strip (seamless, repeats sideways) */
.theme-fall .fall-garland {
  height: 32px;
  background: url("assets/svg/leaf-garland-border-64x16.svg") repeat-x 0 0 / 128px 32px;
  image-rendering: pixelated;
}
/* Plaid divider */
.theme-fall .fall-divider {
  height: 16px; border: 0;
  background: url("assets/svg/plaid-divider-64x8.svg") repeat-x 0 0 / 128px 16px;
  image-rendering: pixelated;
}

/* 9-slice panel (8px border, leaf corners) shown at 2x = 16px */
.theme-fall .fall-panel {
  border: 16px solid transparent;
  border-image: url("assets/svg/panel-frame-9slice-24.svg") 8 fill / 16px stretch;
  image-rendering: pixelated;
  background-clip: padding-box;
  color: var(--fall-text);
  padding: 8px;
}

/* Buttons + status */
.theme-fall .fall-btn,
.theme-fall .btn-primary {
  background: var(--fall-primary);
  color: var(--fall-on-primary);
  border: 2px solid var(--fall-ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--fall-ink);
}
.theme-fall .fall-btn:hover,
.theme-fall .btn-primary:hover { background: var(--fall-primary-hover); }
.theme-fall .fall-btn:active,
.theme-fall .btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fall-ink); }
.theme-fall .fall-badge-success { background: var(--fall-success); color: var(--fall-on-dark); }
.theme-fall .fall-badge-alert   { background: var(--fall-alert);   color: var(--fall-on-dark); }
.theme-fall .fall-text-success  { color: var(--fall-success-text); }
.theme-fall .fall-text-alert    { color: var(--fall-alert); }

/* Data tables: plain and readable, never decor behind them */
.theme-fall table {
  background: var(--fall-surface);
  color: var(--fall-text-strong);
  background-image: none;
}
.theme-fall th { border-bottom: 2px solid var(--fall-border); }
.theme-fall td { border-bottom: 1px solid var(--fall-border-soft); }

/* Footer */
.theme-fall .fall-footer {
  background: var(--fall-ink);
  color: var(--fall-gold-100);
}

/* Acorn spinner (4 frames, 16px each) at 2x */
.theme-fall .fall-spinner {
  display: inline-block; width: 32px; height: 32px;
  background: url("assets/svg/acorn-spinner-4frame-64x16.svg") 0 0 / 128px 32px no-repeat;
  image-rendering: pixelated;
  animation: fall-spin 0.6s steps(4) infinite;
}
@keyframes fall-spin { to { background-position: -128px 0; } }

/* Steaming cider mug (2 frames) at 2x */
.theme-fall .fall-cider {
  display: inline-block; width: 32px; height: 32px;
  background: url("assets/svg/cider-mug-steam-2frame-32x16.svg") 0 0 / 64px 32px no-repeat;
  image-rendering: pixelated;
  animation: fall-steam 1s steps(2) infinite;
}
@keyframes fall-steam { to { background-position: -64px 0; } }

/* Falling leaves: only inside the header (never over data) */
.theme-fall .fall-leaves {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.theme-fall .fall-leaves i {
  position: absolute; top: -16px; width: 16px; height: 16px;
  background: url("assets/svg/leaf-particle-orange-8.svg") 0 0 / 16px 16px;
  image-rendering: pixelated;
  animation: fall-drop 6s steps(24) infinite;
}
.theme-fall .fall-leaves i:nth-child(2) { background-image: url("assets/svg/leaf-particle-red-8.svg"); }
.theme-fall .fall-leaves i:nth-child(3) { background-image: url("assets/svg/leaf-particle-gold-r90-8.svg"); }
.theme-fall .fall-leaves i:nth-child(4) { background-image: url("assets/svg/leaf-particle-orange-r180-8.svg"); }
.theme-fall .fall-leaves i:nth-child(5) { background-image: url("assets/svg/leaf-particle-red-r90-8.svg"); }
.theme-fall .fall-leaves i:nth-child(6) { background-image: url("assets/svg/leaf-particle-gold-r180-8.svg"); }
.theme-fall .fall-leaves i:nth-child(1) { left: 8%;  animation-delay: 0s; }
.theme-fall .fall-leaves i:nth-child(2) { left: 22%; animation-delay: -2s;  animation-duration: 7s; }
.theme-fall .fall-leaves i:nth-child(3) { left: 41%; animation-delay: -4s; }
.theme-fall .fall-leaves i:nth-child(4) { left: 63%; animation-delay: -1s;  animation-duration: 8s; }
.theme-fall .fall-leaves i:nth-child(5) { left: 80%; animation-delay: -3s; }
.theme-fall .fall-leaves i:nth-child(6) { left: 93%; animation-delay: -5s;  animation-duration: 7s; }
@keyframes fall-drop {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(16px, 70px) rotate(180deg); }
  100% { transform: translate(-8px, 140px) rotate(360deg); }
}

/* Respect reduced motion: stop everything, hide the falling leaves */
@media (prefers-reduced-motion: reduce) {
  .theme-fall .fall-leaves { display: none; }
  .theme-fall .fall-spinner,
  .theme-fall .fall-cider { animation: none; }
}
/* Manual "calm" switch: add class fall-calm to <body> as well */
.theme-fall.fall-calm .fall-leaves { display: none; }
.theme-fall.fall-calm .fall-spinner,
.theme-fall.fall-calm .fall-cider { animation: none; }