/* Calm Adventures — landing page
   Warm cream background with a slow drifting gradient and a gently
   floating suitcase logo. Single centered column, mobile-safe by
   construction (capped width + side padding). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #FBF3E4;
}

/* Full-viewport stage: warm cream gradient that drifts slowly. */
.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;

  background: linear-gradient(115deg, #FBF3E4 15%, #F9E4BC 40%, #EDEBDC 65%, #FBF3E4 90%);
  background-size: 300% 300%;
  animation: drift-warm 18s ease-in-out infinite;

  color: #3A2A1A;
  font-family: 'Nunito Sans', sans-serif;
}

.hero {
  max-width: 560px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Suitcase logo — bobs slowly, like it's waiting at a gate. */
.logo {
  width: 220px;
  height: auto;
  animation: float-gentle 7s ease-in-out infinite;
}

.title {
  margin: 28px 0 0 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.02em;
}

.intro {
  margin: 18px 0 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: #5C4A33;
  text-wrap: pretty;
}

.contact {
  margin: 26px 0 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: #5C4A33;
}

a {
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Venture links in warm orange, contact/mailto in the logo's blue. */
.intro a { color: #D96B12; }
.contact a { color: #3E5A85; }

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

@keyframes drift-warm {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Respect a reduced-motion preference — hold everything still. */
@media (prefers-reduced-motion: reduce) {
  .stage, .logo { animation: none; }
}