/* Houzzy home: HO | LA part around a photo capsule; "Karibu" appears inside it once it has opened;
   Rent / Stay / Buy rise beneath it. Opening animation only (no closing).

   One timeline (seconds). Each step starts as the previous one is settling, so motion hands over
   without gaps or pile-ups; every entrance uses the same easing curve:
     0.30  HO, then LA rise
     1.05  hairline draws down
     1.45  capsule opens: pill, circle, wide (1.35s)       photo fades in at 1.55, slow zoom starts
     2.70  "Karibu" letters rise, photo glides up (parallax)
     3.15  Rent, Stay, Buy (0.12s apart)
     3.45  top bar, ripples
     3.65  intro text · 3.85 hairline · 4.05 pill · 4.25 footer */

:root {
  --navy: #060040;
  --lime: #dcef00;
  --bg: #f4f4f8;
  --surface: #ffffff;
  --ink: #0b0830;
  --ink-2: #4b4d63;
  --ring: rgb(6 0 64 / 0.05);
  --line: rgb(6 0 64 / 0.14);
  --pill-bg: var(--navy);
  --pill-ink: #ffffff;
  --cap-h: 0.74em;
  --cap-w: 1.9em;
  --text: 15.5px;
  /* expo-out for entrances, a soft in-out for the capsule's change of shape */
  --ease: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07032e;
    --surface: #110c4d;
    --ink: #f4f4fb;
    --ink-2: #b9bad0;
    --ring: rgb(220 239 0 / 0.045);
    --line: rgb(255 255 255 / 0.16);
    --pill-bg: var(--lime);
    --pill-ink: var(--navy);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: var(--text)/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Soft concentric ripples, like water rings on the Tana. */
.ripples {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 78% 115%, transparent 0 46px, var(--ring) 47px 48px);
  opacity: 0;
  animation: fade 1.8s var(--ease-out) 3.45s forwards;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 1400px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

/* Top bar */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  opacity: 0;
  transform: translateY(-10px);
  animation: rise 1s var(--ease-out) 3.45s forwards;
}
.top a { display: inline-flex; padding: 6px 0; }
.top img.logo { height: 42px; width: auto; display: block; }
.top img.logo-for-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .top img.logo-for-light { display: none; }
  :root:not([data-theme="light"]) .top img.logo-for-dark { display: block; }
}
.place { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); }
.place .pin { width: 20px; height: 20px; color: var(--ink); flex: none; }

/* Hero */
.stage {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(18px, 3vw, 34px);
  padding: 24px 0;
}
.word {
  margin: 0;
  display: flex;
  align-items: center;
  font-family: "Urbanist", sans-serif;
  font-weight: 900;
  font-size: clamp(92px, 18vw, 270px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ink);
  transition: translate 0.2s linear;
}
.half {
  display: block;
  overflow: hidden;
  padding: 0.02em 0.01em 0.04em;
}
.half span {
  display: block;
  transform: translateY(105%);
  animation: up 1.15s var(--ease-out) 0.3s forwards;
}
.half.la span { animation-delay: 0.42s; }

/* The capsule: a hairline that grows into a pill, a circle, then a wide capsule.
   Reason: width is animated (not transform) on purpose, so HO and LA are pushed apart by real layout,
   like the reference. It is one small element, so the reflow cost is negligible. */
.capsule {
  position: relative;
  flex: none;
  width: 2px;
  height: var(--cap-h);
  /* a clear gap either side, so the capsule never reads as another "O" */
  margin: 0 0.11em 0 0.13em;
  border-radius: 999px;
  overflow: hidden;
  /* Reason: forces a clean rounded clip while the photo moves inside (some browsers leak at the corners). */
  isolation: isolate;
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  animation:
    line-in 0.55s var(--ease-out) 1.05s forwards,
    open 1.35s var(--ease) 1.45s forwards,
    clear-fill 0.5s ease 2.3s forwards;
}
@keyframes open {
  0% { width: 2px; }
  25% { width: 0.16em; }
  55% { width: var(--cap-h); }
  100% { width: var(--cap-w); }
}

/* Photo layers: .cap-photo fades and glides for the reveal parallax, .cap-move follows the mouse,
   img zooms slowly. Reason: three wrappers so the three transforms never overwrite each other. */
.cap-photo {
  position: absolute;
  /* oversized on every side, so zoom, reveal and mouse parallax never expose an edge */
  inset: -16%;
  opacity: 0;
  transform: translateY(10%);
  animation:
    fade 0.8s ease 1.55s forwards,
    glide 1.5s var(--ease-out) 2.6s forwards;
}
.cap-move {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -9px), 0);
  transition: transform 0.7s var(--ease-out);
}
.capsule img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 55%;
  transform-origin: 50% 60%;
  filter: brightness(1);
  animation:
    zoom 18s cubic-bezier(0.22, 0.61, 0.36, 1) 1.55s forwards,
    dim 1.1s ease 2.6s forwards;
}
.karibu {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 0.17em;
  letter-spacing: 0.04em;
  color: #fff;
  /* moves the opposite way to the photo, so the greeting floats above it */
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px), 0);
  transition: transform 0.7s var(--ease-out);
}
.karibu span { display: inline-flex; overflow: hidden; padding: 0.06em 0; }
.karibu i {
  display: inline-block;
  font-style: normal;
  /* letters travel further than the photo glides, which is what reads as parallax */
  transform: translateY(160%);
  animation: up 1.1s var(--ease-out) calc(2.7s + var(--i) * 0.05s) forwards;
}
.karibu i:last-child::after { content: "."; color: var(--lime); }

/* Rent, Stay, Buy */
.modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.modes li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px 0 7px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  font-weight: 700;
  color: var(--ink);
  /* blur-in: rises, sharpens and settles, one after another */
  opacity: 0;
  filter: blur(8px);
  transform: translateY(18px) scale(0.94);
  animation: blur-in 1s var(--ease-out) calc(3.15s + var(--n) * 0.12s) forwards;
}
.mode-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
}
.mode-ico svg { width: 17px; height: 17px; }

/* Intro + coming soon (one text size throughout) */
.bottom {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr auto;
  align-items: end;
  gap: 28px;
}
.intro {
  margin: 0;
  color: var(--ink-2);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  animation: blur-in 1.1s var(--ease-out) 3.65s forwards;
}
.intro strong { color: var(--ink); font-weight: 700; }
.soon-note { display: block; margin-top: 10px; color: var(--ink-2); }
.soon-note b { color: var(--ink); }
.rule {
  height: 1px;
  margin-bottom: 22px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  animation: draw 1.3s var(--ease) 3.85s forwards;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 20px 0 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px) scale(0.94);
  animation: blur-in 1s var(--ease-out) 4.05s forwards;
}
.pill i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-style: normal;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill i { background: var(--navy); color: var(--lime); }
}
.pill svg { width: 17px; height: 17px; }

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  opacity: 0;
  animation: fade 1.2s ease 4.25s forwards;
}
footer nav { display: flex; gap: 6px 22px; flex-wrap: wrap; }
footer a { display: inline-block; color: var(--ink); text-decoration: none; font-weight: 600; padding: 6px 0; }
footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

@keyframes up { to { transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes blur-in { to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes line-in { to { transform: scaleY(1); } }
@keyframes zoom { to { transform: scale(1.16); } }
@keyframes glide { to { opacity: 1; transform: translateY(0); } }
@keyframes dim { to { filter: brightness(0.8); } }
/* the hairline's navy fill goes once the photo covers the capsule, so no dark rim shows */
@keyframes clear-fill { to { background-color: transparent; } }

/* Desktop: one step up for all reading text. */
@media (min-width: 901px) {
  :root { --text: 17px; }
  .place .pin { width: 22px; height: 22px; }
  .modes li { height: 50px; padding-right: 22px; }
  .mode-ico { width: 36px; height: 36px; }
}

/* Tablets */
@media (max-width: 900px) {
  .top img.logo { height: 34px; }
  .bottom { grid-template-columns: minmax(0, 1fr) auto; }
  .rule { display: none; }
}

/* Phones: a narrower capsule so HO + capsule + LA fit; text stacks; bigger tap targets. */
@media (max-width: 640px) {
  :root { --cap-w: 1.3em; --cap-h: 0.72em; --text: 15px; }
  .page { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .top { min-height: 56px; }
  .top img.logo { height: 30px; }
  .place { gap: 8px; }
  .place .pin { width: 18px; height: 18px; }
  .word { font-size: clamp(60px, 21.5vw, 130px); }
  .karibu { font-size: 0.2em; }
  .modes { gap: 8px; }
  .modes li { height: 42px; gap: 8px; padding: 0 14px 0 6px; }
  .mode-ico { width: 30px; height: 30px; }
  .mode-ico svg { width: 16px; height: 16px; }
  .bottom { grid-template-columns: 1fr; gap: 16px; }
  .pill { justify-self: start; }
  footer { flex-direction: column; align-items: flex-start; }
}

/* People who turn animations off get the finished page at once (no zoom, blur or parallax). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition: none !important;
  }
  .cap-photo { opacity: 1; transform: none; }
  .cap-move, .karibu { transform: none !important; }
}