/* ==========================================================================
   Home (animated draft) – /home-animation/
   Builds on home.css (cards, quote/process, roots, articles).
   ========================================================================== */

/* Pinned scroll scene (enabled by the inline script at ≥768px) */
.ha-pin { background: var(--c-gray-100); }
.ha-animated .ha-pin { position: sticky; }

/* ---------- Hero ---------- */
.ha-hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: 24px;
  pointer-events: none;
}
.ha-hero a { pointer-events: auto; }
.ha-hero.is-faded a { pointer-events: none; }
/* Only overlay the cards while the scroll scene runs (≥768px, motion allowed, JS on) */
.ha-animated .ha-hero { position: fixed; top: 0; left: 0; right: 0; }

.ha-hero__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  padding: 10px;
  transform-origin: center top;
  will-change: transform, opacity;
}
.ha-hero__row { display: flex; justify-content: center; gap: 24px; width: 100%; padding: 10px; }
.ha-hero__hello { display: flex; flex: 0 0 300px; flex-direction: column; align-items: flex-end; padding: 10px; }
.ha-hero__title {
  margin: 0 0 20px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-primary);
  text-align: right;
}
.ha-hero__about {
  display: flex;
  flex: 0 0 52%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 10px;
}
.ha-hero__headline-anim.is-animated,
.ha-hero__forbes.is-animated { animation-duration: .75s; }
.ha-hero__forbes {
  margin: 0;
  padding-bottom: 22.4px;
  font-family: var(--f-head);
  font-size: 14px;
  line-height: 1.2;
  color: var(--c-navy);
}


.ha-hero__scroll { padding-top: 90.5px; line-height: 0; }
.ha-hero__scroll a { display: flex; justify-content: center; width: 24px; height: 24px; margin-bottom: 4.8px; color: var(--c-text); }
.ha-hero__scroll a:hover, .ha-hero__scroll a:focus-visible { color: var(--c-text); }
.ha-hero__scroll svg { width: 21px; height: 24px; fill: currentColor; }

/* Animated headline (typing) */
.ha-headline {
  margin: 0 0 20px;
  font-family: var(--f-head);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-navy);
  text-align: left;
}
.ha-headline__dynamic {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  text-align: left;
}
.ha-headline__dynamic::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 90%;
  background: #0d0d0d;
  transform: translateY(-50%);
  animation: ha-cursor 1s infinite;
}
.ha-headline__dynamic.is-selected { background: var(--c-primary); }
.ha-headline__dynamic.is-selected::after { visibility: hidden; animation: none; }
.ha-headline__word {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  visibility: hidden;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--c-primary);
}
.ha-headline__word.is-active { position: relative; visibility: visible; }
.is-selected .ha-headline__word { color: #fff; }
.ha-headline__letter:not(.is-in) { position: absolute; visibility: hidden; }
@keyframes ha-cursor {
  0% { opacity: 1; transform: translateY(-50%) scale(1); }
  40% { opacity: 0; transform: translateY(-50%) scale(.9); }
  100% { opacity: 0; transform: translateY(-50%) scale(0); }
}

@media (max-width: 1024px) {
  .ha-hero__wrap { max-width: 80%; }
  .ha-hero__hello { flex-basis: 45%; }
}
@media (max-width: 767px) {
  .ha-hero__wrap { max-width: 90%; }
  .ha-hero__row { flex-direction: column; }
  .ha-hero__hello, .ha-hero__about { flex: 0 0 auto; width: 100%; align-items: flex-start; }
  .ha-hero__title { text-align: left; }
}

/* ---------- Work cards ---------- */
.ha-work {
  position: relative;
  padding: 100px 0;
  background: var(--c-gray-100);
  transition: background-color .1s linear;
}
.ha-animated .ha-work { padding-top: 300px; }
.ha-work.is-dark { background: var(--c-navy); }
.ha-work__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 40px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.ha-work__cell {
  display: flex;
  width: 50%;
  min-height: 400px;
  padding: 0 20px;
  will-change: transform, opacity;
}
.ha-work__cell--full { width: 100%; }
.ha-animated .ha-work__cell:not([style]) { opacity: 0; }
.ha-work__cell > .work-card { flex: 1 0 0; min-width: 0; }

.ha-hotel-card {
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-image: url("/assets/uploads/2024/01/Hotelzzz-background.png");
}
.ha-hotel-card__media { flex: 1 0 40%; min-width: 0; padding: 10px; }
.ha-hotel-card__media img { width: 100%; }
.ha-hotel-card__text {
  display: flex;
  flex: 1 0 40%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 10px;
}
.ha-hotel-card__label {
  margin: 0;
  padding-bottom: 10.4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-navy);
}
.ha-hotel-card__title { margin: 0 0 19.2px; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--c-navy); }

@media (max-width: 1024px) {
  .ha-work__grid { max-width: 80%; }
  .ha-hotel-card { padding: 16px; }
}
@media (max-width: 767px) {
  .ha-work { padding: 0; }
  .ha-work__grid { max-width: 90%; }
  .ha-work__cell { width: 100%; }
  .ha-hotel-card { flex-direction: column; }
  .ha-hotel-card__media, .ha-hotel-card__text { flex: 0 0 auto; width: 100%; }
  .ha-hotel-card .work-card__cta { width: 100%; }
  .ha-hotel-card__media { padding-bottom: 15px; }
  .ha-hotel-card__text { padding: 12px 10px 13px; }
}

/* ---------- Articles (light variant) ---------- */
.home-articles--light { background: var(--c-gray-100); }
.home-articles--light .home-article__body { color: var(--c-navy); }
.home-articles--light .home-article__label { margin-bottom: 23.2px; }
.home-articles--light .home-article__title { margin-bottom: 23.2px; color: var(--c-navy); }
.home-articles--light .home-article__desc { margin-bottom: 26.4px; }
.home-articles--light .home-article__btn:hover,
.home-articles--light .home-article__btn:focus-visible { background: var(--c-gray-50); }