/* ============================
   RESET
============================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================
   GLOBAL
============================ */

html, body {
  width: 100%;
  height: 100%;
  background-color: #464646;
  color: #f5f1e8;
  overflow: hidden;

  font-family: 'Raleway', 'Poppins', sans-serif !important;
  font-weight: 200 !important;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================
   VIEW SYSTEM
============================ */

.view {
  display: none;
  width: 100%;
  height: 100vh;
  position: relative;

  align-items: center;
  justify-content: center;
}

.view.active {
  display: flex;
}

/* ============================
   HOME
============================ */

#home {
  flex-direction: column;
}

#logo {
  width: 70%;
  max-width: 240px;
  opacity: 0;
  transform: translateY(24px);
}

#logo.animate {
  animation: logoReveal 3s ease-out forwards;
}

@keyframes logoReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ivory dot */

#enterDot {
  position: fixed;
  bottom: 32px;
  right: 32px;

  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f5f1e8;

  opacity: 0;
  border: none;
  cursor: pointer;
}

#enterDot.animate {
  animation: dotFade 3s ease-out forwards;
}

@keyframes dotFade {
  to {
    opacity: 1;
  }
}

/* ============================
   CONTACT
============================ */

#contact {
  flex-direction: column;
}

#emailContainer {
  font-size: 16px;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(18px);
}

#emailContainer.animate {
  animation: emailReveal 2.8s ease-out forwards;
}

@keyframes emailReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Return arrow */

#backArrow {
  position: fixed;
  bottom: 32px;
  right: 32px;

  background: none;
  border: none;
  color: #f5f1e8;

  font-size: 18px;
  opacity: 0;
  cursor: pointer;
}

#backArrow.animate {
  animation: arrowFade 3s ease-out forwards;
}

@keyframes arrowFade {
  to {
    opacity: 1;
  }
}

/* ============================
   FORCE ANIMATIONS (CRITICAL)
============================ */

/* Firefox / DuckDuckGo Android default to reduced motion.
   We explicitly re-enable animations for this site. */

@media (prefers-reduced-motion: reduce) {

  #logo.animate,
  #enterDot.animate,
  #emailContainer.animate,
  #backArrow.animate {
    animation-duration: inherit;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }
}