/* ---------------------------------------------------------
   Karibu — Coming Soon
   Minimal: centered mark, breathing pulse, warm dark / light
--------------------------------------------------------- */

:root {
  color-scheme: light;

  /* palette */
  --palette-cream-50: #faf7f2;
  --palette-ink-900: #17130f;
  --palette-ink-600: #857a6e;
  --palette-terracotta-500: #d9552b;
  --palette-gold-400: #e8a33d;

  --palette-coal-950: #100d0b;
  --palette-sand-50: #f6f1ea;
  --palette-sand-400: #9a8f83;

  /* semantic — light (default) */
  --color-bg: var(--palette-cream-50);
  --color-text: var(--palette-ink-900);
  --color-muted: var(--palette-ink-600);
  --color-border-strong: rgba(23, 19, 15, 0.22);
  --input-bg: rgba(23, 19, 15, 0.04);
  --glow-alpha-1: 0.16;
  --glow-alpha-2: 0.12;
  --grain-opacity: 0.05;

  --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--palette-coal-950);
  --color-text: var(--palette-sand-50);
  --color-muted: var(--palette-sand-400);
  --color-border-strong: rgba(246, 241, 234, 0.24);
  --input-bg: rgba(246, 241, 234, 0.05);
  --glow-alpha-1: 0.22;
  --glow-alpha-2: 0.16;
  --grain-opacity: 0.07;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--palette-coal-950);
    --color-text: var(--palette-sand-50);
    --color-muted: var(--palette-sand-400);
    --color-border-strong: rgba(246, 241, 234, 0.24);
    --input-bg: rgba(246, 241, 234, 0.05);
    --glow-alpha-1: 0.22;
    --glow-alpha-2: 0.16;
    --grain-opacity: 0.07;
  }
}

@font-face {
  font-family: "Hector";
  src: url("font/hector-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background-color 0.45s var(--ease-out),
    color 0.45s var(--ease-out);
}

/* ---------------- atmosphere ---------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.glow--one {
  top: -18%;
  left: -12%;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(
    circle,
    rgba(217, 85, 43, var(--glow-alpha-1)) 0%,
    transparent 68%
  );
}

.glow--two {
  bottom: -22%;
  right: -14%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(
    circle,
    rgba(232, 163, 61, var(--glow-alpha-2)) 0%,
    transparent 70%
  );
}

/* ---------------- stage ---------------- */

.hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: stretch;
}

.hero__media {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  background: #1a1a1a;
}

.strip {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Five different source photos, shot in different light and locations —
     a shared grade (desaturated, slightly cooled, contrast-lifted) makes
     them read as one continuous scene instead of five clashing stock shots. */
  filter: grayscale(28%) saturate(0.85) contrast(1.06) brightness(0.97);
}

.strip--1 {
  background-color: #bcd6e0;
  background-image: url("assets/hero/strip-1.jpg");
  background-image: image-set(
    url("assets/hero/strip-1.webp") type("image/webp"),
    url("assets/hero/strip-1.jpg") type("image/jpeg")
  );
}
.strip--2 {
  background-color: #8fb6c9;
  background-image: url("assets/hero/strip-2.jpg");
  background-image: image-set(
    url("assets/hero/strip-2.webp") type("image/webp"),
    url("assets/hero/strip-2.jpg") type("image/jpeg")
  );
}
.strip--3 {
  background-color: #c98f56;
  background-image: url("assets/hero/strip-3.jpg");
  background-image: image-set(
    url("assets/hero/strip-3.webp") type("image/webp"),
    url("assets/hero/strip-3.jpg") type("image/jpeg")
  );
}
.strip--4 {
  background-color: #d9dbe0;
  background-image: url("assets/hero/strip-4.jpg");
  background-image: image-set(
    url("assets/hero/strip-4.webp") type("image/webp"),
    url("assets/hero/strip-4.jpg") type("image/jpeg")
  );
}
.strip--5 {
  background-color: #eef1f4;
  background-image: url("assets/hero/strip-5.jpg");
  background-image: image-set(
    url("assets/hero/strip-5.webp") type("image/webp"),
    url("assets/hero/strip-5.jpg") type("image/jpeg")
  );
}

/* Soft seams between strips + a bottom scrim, tying the five different
   source photos together into one continuous frame. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(8, 7, 6, 0.5) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(8, 7, 6, 0.28) 0,
      rgba(8, 7, 6, 0.28) 2px,
      transparent 2px,
      transparent 20%
    );
}

.hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4.5rem) clamp(2rem, 4.5vw, 5rem);
  background: #0a0a0a;
  color: white;
}

.hero__logo {
  /* the source PNG is a 2000x2000 canvas with the wordmark centered in a
     narrow band (bbox ~22.7%-77.2% x, 43.3%-56.6% y) — background-size/
     position crops straight to that band instead of the padded square. */
  align-self: flex-start;
  height: clamp(28px, 2.6vw, 38px);
  aspect-ratio: 1089 / 267;
  margin: 0 0 2.2rem;
  background-image: url("assets/Karibu(White).png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183.66% 749.06%;
}

.hero__text h1 {
  margin: 0;
  max-width: 18ch;
  font-family: "Hector", var(--font-body);
  font-size: clamp(3.2rem, 5.6vw, 5.8rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.hero__status {
  display: block;
  margin: 2rem 0 0;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9e;
}

.hero__foot {
  position: absolute;
  right: clamp(2rem, 4.5vw, 5rem);
  bottom: clamp(2rem, 4vw, 4rem);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.hero__foot:hover .hero__brand,
.hero__foot:focus-visible .hero__brand {
  color: #f3f3f6;
}

.hero__foot:hover .hero__arrow,
.hero__foot:focus-visible .hero__arrow {
  transform: translate(2px, 2px);
}

.hero__brand {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #7a7a7f;
  white-space: nowrap;
  transition: color 0.2s var(--ease-out);
}

.hero__arrow {
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  color: #f3f3f6;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero__media {
    min-height: 46vh;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hero__text {
    padding: 2.6rem 1.8rem 3.6rem;
  }

  .hero__text h1 {
    max-width: none;
  }

  .hero__foot {
    position: static;
    margin-top: 1.8rem;
  }
}

@media (max-width: 640px) {
  .hero__media {
    min-height: 34vh;
  }

  .hero__credit {
    font-size: 0.78rem;
  }

  .hero__text {
    padding: 2.2rem 1.3rem 3rem;
  }

  .hero__text h1 {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }
}

/* ---------------- footer ---------------- */

.footer {
  position: relative;
  z-index: 2;
  padding: 1.4rem 1rem clamp(20px, 4vw, 32px);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  opacity: 0.75;
}

.footer__sep {
  margin: 0 6px;
}

.footer__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-text);
  border-bottom-color: currentColor;
}

/* ---------------- motion prefs ---------------- */

@media (prefers-reduced-motion: reduce) {
  .mark {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}