/* =========================
   1. ROOT & RESET
========================= */

:root {
  --green-1: #6dbf5f;
  --green-2: #2f7d32;
  --green-3: #4caf50;
  --green-4: #1b5e20;

  --accent: #d4ff9d;
  --gold: #ffd700;
  --text: #ffffff;

  --glass: rgba(255, 255, 255, 0.1);
  --glass-strong: rgba(255, 255, 255, 0.2);

  --shadow-soft: 0 8px 40px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.4);

  --radius: 20px;
}

/* THEME VARIABLES */
:root {
  --bg-gradient: linear-gradient(-45deg, #6dbf5f, #2f7d32, #4caf50, #1b5e20);
  --text: #ffffff;
  --glass: rgba(255, 255, 255, 0.1);
  --glass-strong: rgba(255, 255, 255, 0.2);
}

/* LIGHT MODE */
body.light {
  --bg-gradient: linear-gradient(-45deg, #e8f5e9, #c8e6c9, #a5d6a7, #81c784);
  --text: #1b5e20;
  --glass: rgba(0, 0, 0, 0.05);
  --glass-strong: rgba(0, 0, 0, 0.1);
}

/* použij proměnnou */
body {
  background: var(--bg-gradient);
  color: var(--text);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-45deg, var(--green-1), var(--green-2), var(--green-3), var(--green-4));
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* SMOOTH THEME TRANSITION */
body {
  transition: 
    background 0.6s ease,
    color 0.4s ease;
}

/* všechny důležité prvky */
.container,
.status,
.partner a,
.theme-toggle {
  transition: 
    background 0.4s ease,
    color 0.3s ease,
    box-shadow 0.4s ease,
    transform 0.3s ease;
}

/* =========================
   2. LAYOUT
========================= */

.container {
  text-align: center;
  padding: 40px;
  max-width: 600px;
  width: 90%;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);

  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);

  position: relative;
  z-index: 2;

  transition: transform 0.6s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.container:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-hover);
}

/* =========================
   3. TYPOGRAPHY
========================= */

.logo {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 20px;
  word-break: break-word;
}

.logo span {
  color: var(--accent);
}

h1 {
  font-size: 2rem;
  margin-bottom: 15px;
}

p {
  opacity: 0.9;
  margin-bottom: 25px;
  line-height: 1.6;
}

.status {
  margin-bottom: 20px;
  font-size: 0.9rem;
  background: var(--glass-strong);
  padding: 8px 18px;
  border-radius: 50px;
  display: inline-block;
}

/* =========================
   4. LINKS & INTERACTIONS
========================= */

a {
  text-decoration: none;
  transition: all 0.25s ease;
}

.partner a {
  color: var(--gold);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 15px;
  background: var(--glass);
}

.partner a:hover {
  background: var(--glass-strong);
  color: var(--text);
  transform: translateY(-2px);
}

.contact a,
.created-by a {
  color: var(--accent);
}

.created-by {
  margin-top: 20px;
  font-size: 0.8rem;
  opacity: 0.7;
}

.created-by a:hover {
  color: var(--text);
}

/* =========================
   5. LOADING BAR
========================= */

.loading {
  width: 100%;
  height: 8px;
  background: var(--glass-strong);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.loading-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  animation: load 4s ease-in-out infinite;
}

/* =========================
   6. AVOCADOS 😄
========================= */

.avocado {
  position: absolute;
  font-size: 60px;
  animation: float 6s ease-in-out infinite;
  opacity: 0.9;
  will-change: transform;
}

.avocado:nth-child(1) {
  top: 10%;
  left: 10%;
}

.avocado:nth-child(2) {
  bottom: 15%;
  right: 10%;
  animation-delay: 2s;
  opacity: 0.6;
  filter: blur(1px);
}

.avocado:nth-child(3) {
  top: 50%;
  left: 80%;
  animation-delay: 4s;
  opacity: 0.6;
  filter: blur(1px);
}

/* =========================
   7. SVG LOGO
========================= */

.hlavac-logo {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.hlavac-logo:hover {
  transform: scale(1.08);
}

.hlavac-logo:hover .draw {
  stroke: #818cf8;
}

.draw {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw 1.2s ease forwards;
}

.draw:nth-child(1) { animation-delay: 0s; }
.draw:nth-child(2) { animation-delay: 0.1s; }
.draw:nth-child(3) { animation-delay: 0.2s; }
.draw:nth-child(4) { animation-delay: 0.3s; }
.draw:nth-child(5) { animation-delay: 0.4s; }
.draw:nth-child(6) { animation-delay: 0.5s; }

/* =========================
   8. SOCIAL ICONS
========================= */

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icons img {
  width: 18px;
  transition: transform 0.2s ease;
}

.social-icons img:hover {
  transform: scale(1.2);
}

/* =========================
   9. ANIMATIONS
========================= */

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes load {
  0% { width: 0%; }
  80% { width: 100%; }
  100% { width: 100%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* =========================
   10. RESPONSIVE
========================= */

@media (max-width: 500px) {
  .avocado {
    font-size: 50px;
  }

  .avocado:nth-child(1) {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
  }

  .avocado:nth-child(2) {
    bottom: 8%;
    right: 5%;
  }

  .avocado:nth-child(3) {
    top: 65%;
    left: 65%;
  }

  h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 360px) {
  .logo span {
    display: block;
  }

  .container {
    padding: 25px 15px;
    width: 95%;
  }

  .logo {
    font-size: 1.4rem;
  }
}

.theme-toggle {
  position: absolute;
  top: 15px;
  right: 15px;

  background: var(--glass);
  border: none;
  border-radius: 50%;

  width: 40px;
  height: 40px;

  cursor: pointer;
  font-size: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--glass-strong);
  transform: rotate(15deg) scale(1.1);
}