@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700&display=swap');

:root {
  --bg-color: #141e24;
  --text-main: #e8ecf1;
  --text-secondary: #a1aab8;
  --stroke-color: #5a6b7a;
  --accent-color: #ffd166;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Wix Madefor Display", sans-serif;
  color: var(--text-main);
  background: var(--bg-color);
}

.loader-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  /* New synchronized crossfade with subtle scale for ease-in/out
     - 3s total cycle (faster)
     - camera visible first half, house visible second half
     - small scale up on visible state for subtle motion
  */
  .camera-icon {
    animation: none;
    will-change: auto;
  }

  .house-icon {
    display: none;
  }

  @keyframes fade-camera {
    0%   { opacity: 1; transform: scale(1.03); }
    42%  { opacity: 1; transform: scale(1.01); }
    48%  { opacity: 0.6; transform: scale(0.985); }
    52%  { opacity: 0; transform: scale(0.96); }
    100% { opacity: 0; transform: scale(0.96); }
  }

  @keyframes fade-house {
    0%   { opacity: 0; transform: scale(0.96); }
    48%  { opacity: 0; transform: scale(0.96); }
    52%  { opacity: 0.6; transform: scale(0.985); }
    58%  { opacity: 1; transform: scale(1.01); }
    100% { opacity: 1; transform: scale(1.03); }
  }
  stroke-width: 1.5;
}

  .camera-icon {
    animation: fade-camera 4s ease-in-out infinite;
  }
  
  .house-icon {
    animation: fade-house 4s ease-in-out infinite;
  }
  
  @keyframes fade-camera {
    0% {
      opacity: 1;
    }
    48% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes fade-house {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    52% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
  }



.loading-text {
  position: relative;
  z-index: 1;
  margin: 0 0 28px 0;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-main);
  text-transform: lowercase;
}

/* Interactive hover / touch-activated state */
.loading-text {
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), color 220ms ease, text-shadow 220ms ease;
  cursor: default;
}

.loading-text:hover,
.loading-text.interactive-activated {
  transform: translateY(-6px) scale(1.03);
  color: var(--accent-color);
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.dots span {
  animation: blink 1.4s infinite both;
  font-size: 1.2em;
  line-height: 0.1;
  color: var(--text-main);
}

.dots span:nth-child(1) { animation-delay: 0s; }
.dots span:nth-child(2) { animation-delay: 0.18s; }
.dots span:nth-child(3) { animation-delay: 0.36s; }
.dots span:nth-child(4) { animation-delay: 0.54s; }

.fact-section {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 80%;
  text-align: center;
}

.fact-label {
  margin: 0 0 8px 0;
  font-size: clamp(0.75rem, 1.6vw, 0.9rem);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fact-text {
  margin: 0;
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-main);
  opacity: 0.9;
}

.artstation-button {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--text-main);
  color: var(--text-main);
  text-decoration: none;
  font-weight: 600;
  background: transparent;
  transition: background 180ms ease, transform 180ms ease;
}

.artstation-button.interactive-activated {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.05);
}

.artstation-button:hover,
.artstation-button:focus {
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}

@keyframes blink {
  0% { opacity: 0.4; }
  20% { opacity: 1; }
  100% { opacity: 0.4; }
}

@media (max-width: 640px) {
  .logo-container {
    display: none; /* hide logos on small screens */
    width: 110px;
    height: 110px;
    margin-bottom: 20px;
  }

  .logo-circle {
    width: 80px;
    height: 80px;
  }

  .icon {
    width: 40px;
    height: 40px;
  }

  .loading-text {
    margin-bottom: 20px;
  }
}