@import url("./footer.css");

/* Site-wide base layout */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

main {
  flex: 1;
  overflow-x: clip;
  max-width: 100%;
}

.container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.home-section__header {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}

.home-section__label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.home-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--color-black);
  margin: 0 0 0.5rem;
}

.home-section__desc {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.home-section__desc a {
  color: var(--color-brand-dark);
  text-underline-offset: 0.15em;
}

.home-section__desc a i {
  margin-right: 0.25rem;
}

/* Scroll reveal — WOW.js / animate.css fadeInUp style (see eon.co.tz) */
@keyframes reveal-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

[data-reveal],
.section-reveal,
.reveal-on-scroll,
.home-about__text,
.home-about__stat,
.home-section__title,
.home-section__desc,
.home-section__label,
.home-about__script,
.dest-page__lead,
.dest-page__text,
.dest-page__photo,
.dest-slideshow,
.dest-page__aside-block,
.experience-card__title,
.experience-card__text,
.testimonial-card__quote,
.credentials-grid__item,
.home-contact__title,
.home-contact__text,
.site-footer,
.site-footer__col,
.site-footer__brand,
.site-footer__social {
  opacity: 1;
  transform: none;
  filter: none;
}

html.js-reveal-ready [data-reveal]:not(.is-visible),
html.js-reveal-ready .section-reveal:not(.is-visible),
html.js-reveal-ready .reveal-on-scroll:not(.is-visible),
html.js-reveal-ready .home-about__text:not(.is-visible),
html.js-reveal-ready .home-about__stat:not(.is-visible),
html.js-reveal-ready .home-about__script:not(.is-visible),
html.js-reveal-ready .dest-page__lead:not(.is-visible),
html.js-reveal-ready .dest-page__text:not(.is-visible),
html.js-reveal-ready .dest-page__photo:not(.is-visible),
html.js-reveal-ready .dest-page__aside-block:not(.is-visible),
html.js-reveal-ready .experience-card__title:not(.is-visible),
html.js-reveal-ready .experience-card__text:not(.is-visible),
html.js-reveal-ready .testimonial-card__quote:not(.is-visible),
html.js-reveal-ready .credentials-grid__item:not(.is-visible),
html.js-reveal-ready .site-footer__col:not(.is-visible),
html.js-reveal-ready .site-footer__brand:not(.is-visible),
html.js-reveal-ready .site-footer__social:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.985);
  pointer-events: none;
}

html.js-reveal-ready .section-reveal.is-visible .home-section__label,
html.js-reveal-ready .section-reveal.is-visible .home-section__title,
html.js-reveal-ready .section-reveal.is-visible .home-section__desc,
html.js-enhanced .section-reveal.is-visible .home-about__text,
html.js-enhanced .section-reveal.is-visible .home-about__stat {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

[data-reveal]:not(.dest-card):not(.safari-card).is-visible,
.section-reveal.is-visible,
.reveal-on-scroll.is-visible,
.home-about__text.is-visible,
.home-about__stat.is-visible,
.home-section__title.is-visible,
.home-section__desc.is-visible,
.home-section__label.is-visible,
.home-about__script.is-visible,
.dest-page__lead.is-visible,
.dest-page__text.is-visible,
.dest-page__photo.is-visible,
.dest-slideshow.is-visible,
.dest-page__aside-block.is-visible,
.experience-card__title.is-visible,
.experience-card__text.is-visible,
.testimonial-card__quote.is-visible,
.credentials-grid__item.is-visible,
.home-contact__title.is-visible,
.home-contact__text.is-visible,
.site-footer.is-visible,
.site-footer__col.is-visible,
.site-footer__brand.is-visible,
.site-footer__social.is-visible {
  pointer-events: auto;
  animation: reveal-fade-up 0.95s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

.dest-card.is-visible,
.safari-card.is-visible {
  pointer-events: auto;
  animation: reveal-card-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes reveal-card-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

[data-reveal-delay="1"],
.home-about__stat:nth-child(2),
.dest-page__photo:nth-child(3n + 2) {
  --reveal-delay: 120ms;
}

[data-reveal-delay="2"],
.home-about__stat:nth-child(3),
.dest-page__photo:nth-child(3n + 3) {
  --reveal-delay: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .section-reveal,
  .reveal-on-scroll,
  .home-about__text,
  .home-about__stat,
  .home-section__title,
  .home-section__desc,
  .home-section__label,
  .home-about__script,
  .dest-page__lead,
  .dest-page__text,
  .dest-page__photo,
  .dest-slideshow,
  .dest-page__aside-block,
  .experience-card__title,
  .experience-card__text,
  .testimonial-card__quote,
  .credentials-grid__item,
  .home-contact__title,
  .home-contact__text,
  .site-footer,
  .site-footer__col,
  .site-footer__brand,
  .site-footer__social {
    opacity: 1;
    transform: none;
    filter: none;
    visibility: visible;
    animation: none !important;
    transition: none;
  }
}

.home-section {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.home-section--alt {
  background: var(--color-surface);
}

.home-section__actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.home-section__actions .btn + .btn {
  margin-left: 0;
}

@media (max-width: 600px) {
  .home-section__actions .btn {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
  }
}