/* Teaser grid — Coming Soon cards for the 13 pages */
.teaser-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  max-width: 900px;
  margin-left: auto; margin-right: auto;
}
.teaser-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  color: var(--text-primary);
  text-align: left;
  transition: border-color 120ms ease, transform 120ms ease;
  text-decoration: none;
}
.teaser-card:hover {
  border-color: var(--border-orange);
  transform: translateY(-2px);
  text-decoration: none;
}
.teaser-card .teaser-label {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--brand-orange);
  margin-bottom: var(--space-2);
}
.teaser-card .teaser-blurb {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Buttons — for later pages */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--brand-orange);
  color: var(--bg-base);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: background 120ms ease;
}
.btn:hover { background: #ff8020; text-decoration: none; }
.btn.btn-alert { background: var(--brand-red); color: #fff; }
.btn.btn-alert:hover { background: var(--brand-red-alt); }

/* ---------- G5: sibling-page layout ---------- */
main.page {
  flex: 1;
  padding: var(--space-6) var(--space-5);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.page-hero {
  padding: var(--space-6) 0 var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-6);
  background: radial-gradient(ellipse at center top, rgba(247,108,0,0.06) 0%, transparent 65%);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  color: var(--brand-orange);
  line-height: 1.1;
  text-shadow: 0 0 24px var(--brand-orange-glow);
  margin-bottom: var(--space-3);
}
.page-hero .hero-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 19px);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
}
.page-body {
  padding: 0 0 var(--space-7);
}
.page-body h2 {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--brand-orange);
  margin: var(--space-6) 0 var(--space-3);
  border-bottom: 1px solid var(--border-orange);
  padding-bottom: var(--space-2);
}
.page-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-primary);
  margin: var(--space-5) 0 var(--space-2);
}
.page-body p { margin-bottom: var(--space-4); color: var(--text-muted); }
.page-body ul, .page-body ol { margin: 0 0 var(--space-4) var(--space-5); color: var(--text-muted); }
.page-body li { margin-bottom: var(--space-2); }
.page-body dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.page-body dt { color: var(--brand-orange); font-weight: 600; }
.page-body dd { color: var(--text-primary); }

/* Info card — for Visit, Donate, etc. */
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.info-card h3 { margin-top: 0; }

/* Empty-state / placeholder */
.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--text-dim);
  font-style: italic;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-subtle);
}

/* Forms — subscribe */
.form-row { margin-bottom: var(--space-4); }
.form-row label { display: block; margin-bottom: var(--space-2); color: var(--text-primary); font-weight: 600; font-size: 14px; }
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=tel],
.form-row input[type=password],
.form-row select,
.form-row textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body); font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
.form-row textarea { resize: vertical; min-height: 100px; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; border-color: var(--brand-orange); }
.form-help { color: var(--text-dim); font-size: 12px; margin-top: var(--space-1); }

/* Alert / flash messages */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  font-size: 14px;
  border: 1px solid transparent;
}
.alert-success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #86efac; }
.alert-error   { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.3);  color: #fca5a5; }
.alert-info    { background: rgba(247,108,0,0.10);  border-color: var(--border-orange);  color: var(--text-muted); }

/* Calendar grid */
.cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.cal-month { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-4); border: 1px solid var(--border-subtle); }
.cal-month h3 { margin: 0 0 var(--space-3); color: var(--brand-orange); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12px; }
.cal-days .h { color: var(--text-dim); text-align: center; padding: 4px 0; }
.cal-days .d { text-align: center; padding: 6px 0; border-radius: 6px; color: var(--text-muted); }
.cal-days .d.pad { color: var(--text-dim); opacity: 0.3; }
.cal-days .d.wk { background: rgba(247,108,0,0.10); color: var(--text-primary); }
.cal-days .d.wknd { background: var(--brand-orange); color: var(--bg-base); font-weight: 600; }

/* Monster / photo grid */
.item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.item-tile { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--space-4); }
.item-tile h3 { color: var(--brand-orange); margin-bottom: var(--space-2); }

/* Small "back home" link on 404 */
.back-home { text-align: center; margin-top: var(--space-6); }
.back-home a { font-family: var(--font-display); font-size: 22px; color: var(--brand-orange); }

/* ===== Visual Atmosphere System ===== */
#bg-atm {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--atm-image, none) center / cover no-repeat;
  filter: brightness(1.4) blur(var(--atm-blur, 0px));
  transform: scale(1.08);
  pointer-events: none;
  will-change: filter;
}
#bg-atm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--atm-overlay, rgba(0,0,0,0.30));
  animation: atm-breathe 12s ease-in-out infinite;
}
@keyframes atm-breathe {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.82; }
}
body.has-bg {
  background: transparent;
}
body.has-bg main.hero,
body.has-bg .page-hero {
  background: transparent;
}


/* ===== Art Bible Atmosphere Extensions — Spencer v1.0 ===== */
/* Vignette + fog drift + embers (global) · Raven (home) · Cobwebs (scenes/monsters/history) · Ghost (history) */

/* Vignette burned onto the background layer, below all content */
#bg-atm::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, transparent 25%, rgba(0,0,0,0.68) 100%);
  pointer-events: none;
}

/* Fog — two independent drift layers at z-index:-1 (below content) */
#atm-fog {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#atm-fog::before {
  content: '';
  position: absolute;
  width: 200%; height: 100%;
  bottom: 0; left: 0;
  background: url('/assets/overlays/fog/fog_ground_low.png') repeat-x left bottom / auto 38%;
  opacity: 0.22;
  animation: fog-drift 70s linear infinite;
}
#atm-fog::after {
  content: '';
  position: absolute;
  width: 200%; height: 100%;
  bottom: 0; left: 0;
  background: url('/assets/overlays/fog/fog_mist_soft.png') repeat-x left 60% / auto 50%;
  opacity: 0.14;
  animation: fog-drift 100s linear infinite reverse;
  animation-delay: -35s;
}
@keyframes fog-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Embers / floating dust particles */
#atm-embers {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/assets/overlays/embers/overlay_embers_sparse.png') center / cover no-repeat;
  opacity: 0;
  animation: ember-drift 22s ease-in-out infinite;
  animation-delay: -7s;
}
@keyframes ember-drift {
  0%, 100% { opacity: 0;    transform: translateY(5px); }
  20%       { opacity: 0.18; transform: translateY(0); }
  50%       { opacity: 0.13; transform: translateY(-7px); }
  80%       { opacity: 0.18; transform: translateY(0); }
}

/* Creature container — fixed, full-screen, non-interactive, above content */
#atm-creatures {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

/* Raven crossing — home only, once per ~45s */
body[data-page="home"] #atm-creatures::before {
  content: '';
  position: absolute;
  top: 13%;
  left: -110px;
  width: 90px; height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 55'%3E%3Cpath fill='%23111' d='M60,30 C48,16 26,12 8,20 C18,26 34,28 44,26 C40,34 38,44 42,48 C50,48 52,38 60,26 C68,38 70,48 78,48 C82,44 80,34 76,26 C86,28 102,26 112,20 C94,12 72,16 60,30Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: raven-cross 45s linear infinite;
}
@keyframes raven-cross {
  0%          { transform: translateX(0);     opacity: 0; }
  2%          { opacity: 0.78; }
  18%         { opacity: 0.78; }
  20%         { transform: translateX(115vw); opacity: 0; }
  20.01%,100% { transform: translateX(115vw); opacity: 0; }
}

/* Cobwebs — top-right corner on scenes, monsters, history */
body[data-page="scenes"] #atm-creatures::after,
body[data-page="monsters"] #atm-creatures::after,
body[data-page="history"] #atm-creatures::after {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 170px; height: 170px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 170'%3E%3Cg stroke='%23d0d0d0' stroke-linecap='round' opacity='0.55'%3E%3Cline x1='0' y1='0' x2='170' y2='52' stroke-width='0.9'/%3E%3Cline x1='0' y1='0' x2='138' y2='108' stroke-width='0.8'/%3E%3Cline x1='0' y1='0' x2='75' y2='158' stroke-width='0.7'/%3E%3Cline x1='0' y1='0' x2='0' y2='170' stroke-width='0.7'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b4b4b4' opacity='0.42'%3E%3Cpath d='M42,0 Q34,9 22,15 Q12,19 0,22' stroke-width='0.8'/%3E%3Cpath d='M85,0 Q70,17 50,28 Q32,35 0,42' stroke-width='0.7'/%3E%3Cpath d='M128,0 Q102,24 72,40 Q46,50 0,66' stroke-width='0.7'/%3E%3Cpath d='M170,12 Q136,34 100,52 Q68,62 0,90' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E") top right / contain no-repeat;
  opacity: 0.38;
  pointer-events: none;
}

/* Ghost — history page, slow haunt drift */
body[data-page="history"] #atm-creatures::before {
  content: '';
  position: fixed;
  right: 6%;
  top: 28%;
  width: 56px; height: 76px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 76'%3E%3Cellipse cx='28' cy='26' rx='20' ry='22' fill='%23e4e4e4' opacity='0.55'/%3E%3Crect x='8' y='26' width='40' height='28' fill='%23e4e4e4' opacity='0.55'/%3E%3Ccircle cx='8' cy='54' r='8' fill='%23e4e4e4' opacity='0.55'/%3E%3Ccircle cx='20' cy='58' r='8' fill='%23e4e4e4' opacity='0.55'/%3E%3Ccircle cx='36' cy='58' r='8' fill='%23e4e4e4' opacity='0.55'/%3E%3Ccircle cx='48' cy='54' r='8' fill='%23e4e4e4' opacity='0.55'/%3E%3Ccircle cx='20' cy='20' r='3.5' fill='%23222'/%3E%3Ccircle cx='36' cy='20' r='3.5' fill='%23222'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  filter: blur(1px);
  animation: ghost-haunt 35s ease-in-out infinite;
  animation-delay: -12s;
}
@keyframes ghost-haunt {
  0%   { opacity: 0;    transform: translateY(0); }
  12%  { opacity: 0.20; transform: translateY(-14px); }
  38%  { opacity: 0.16; transform: translateY(-20px) translateX(-6px); }
  62%  { opacity: 0.20; transform: translateY(-14px) translateX(4px); }
  75%  { opacity: 0;    transform: translateY(-6px); }
  100% { opacity: 0;    transform: translateY(0); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #atm-fog::before, #atm-fog::after,
  #atm-embers,
  #atm-creatures::before,
  #atm-creatures::after {
    animation: none !important;
    opacity: 0 !important;
  }
}