/* ============================================
   SKELI.CZ - Base Styles
   Core layout, typography, theme variables
   ============================================ */

/* CSS Variables */
:root {
  --bg: #0b0c0d;
  --text: #e7e9ea;
  --panel: rgba(0, 0, 0, 0.60);
  --panel-strong: rgba(0, 0, 0, 0.75);
  --panel-border: rgba(255, 255, 255, 0.18);
  --accent: #ffd700;
  --spotify: #CC2B2B;
  --youtube: #FF0000;
  --fw: 400;
}

body.light {
  --bg: #f6f6f6;
  --text: #111;
  /* soften whites in light theme to blend with red background */
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: rgba(255, 255, 255, 0.94);
  --panel-border: rgba(0, 0, 0, 0.18);
  --accent: #a37b00;
}

body.dark {
  --bg: #0b0c0d;
  --text: #e7e9ea;
  --panel: rgba(0, 0, 0, 0.60);
  --panel-strong: rgba(0, 0, 0, 0.75);
  --panel-border: rgba(255, 255, 255, 0.18);
  --accent: #ffd700;
}

/* Typography */
.comforter-brush-regular {
  font-family: "Comforter Brush", cursive;
  font-weight: 800;
  font-style: normal;
}

.bruno-ace-sc-regular {
  font-family: "Bruno Ace SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.cpy {
  font-family: 'Alumni Sans Pinstripe', Arial, sans-serif;
  font-size: 1em;
  color: gold;
  font-weight: bold;
}

p {
  font-family: 'Inter', 'Alumni Sans Pinstripe', Arial, sans-serif;
  font-size: 1.05em;
  color: var(--text);
  font-weight: var(--fw);
  line-height: 1.6;
}

h3 {
  font-family: "Bruno Ace SC", sans-serif;
  letter-spacing: 0.5px;
}

/* Base Layout */
html, body {
  height: 100%;
}

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--bg) url('/img/IMG_0090.JPG') center center/cover no-repeat fixed;
  color: var(--text);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
header {
  width: 100%;
  color: gold;
  padding: 120px 0 40px 0px;
  text-align: center;
  border-radius: 0;
  margin: 0;
  position: relative;
  background: linear-gradient(
    to bottom,
    rgba(34, 34, 34, 0.9) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Navigation */
nav a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
}

nav a.active {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent);
  position: relative;
}

nav a:hover {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent);
  text-decoration: underline;
}

/* Main Content Area */
main {
  flex: 1 0 auto;
  width: calc(100vw - 60px);
  max-width: none;
  margin: 30px auto;
  background: var(--panel);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
}

/* Footer */
footer {
  background: linear-gradient(
    to top,
    rgba(34, 34, 34, 0.9) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  color: white;
  text-align: center;
  padding: 80px 0;
  position: static;
  width: 100%;
  border-radius: 3px 3px 0px 0px;
  margin-top: auto;
}

/* Carousel */
.carousel iframe {
  display: block;
  margin: 0 auto;
}

/* Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.reveal.show {
  opacity: 1;
  transform: none;
}

/* Smoke Veil Effect */
.smoke-veil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35vh;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.06), transparent 60%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent);
  opacity: .55;
  animation: smokeMove 14s ease-in-out infinite alternate;
}

@keyframes smokeMove {
  0% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(10px)
  }
}