:root {
  --dark: #06181f;
  --green: #8aeab0;
  --accent: #d1ffe4;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  /* Full-bleed split: dark fills the left edge, green the right edge.
     Stays behind the centered content on ultra-wide screens. */
  background: linear-gradient(to right, var(--dark) 0 50%, var(--green) 50% 100%);
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout ---------- */
.layout {
  display: flex;
  min-height: 100vh;
  /* Full width: the two colored halves bleed all the way to the edges.
     The content inside each half is capped (see .right) so it stays
     readable and positioned instead of stretching on huge screens. */
}

.left,
.right {
  flex: 1 1 50%;
  /* Allow the panels to collapse fully during the intro push
     (without this, min-width:auto keeps the green panel at its
     content width and the page never lands fully dark). */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px;
}

.left {
  background: var(--dark);
  align-items: center;
}

.right {
  background: var(--green);
  align-items: flex-start;
  gap: 32px;
  /* Clip content while the panel collapses to zero during the intro. */
  overflow: hidden;
}

/* Cap the content width inside the green half so text stays readable and
   left-aligned (matching the original design) instead of stretching wide. */
.right > * {
  width: 100%;
  max-width: 528px;
}

/* ---------- Logo ---------- */
.logo {
  display: block;
  width: 100%;
  max-width: 528px;
  height: auto;
}

/* ---------- Heading ---------- */
.heading {
  font-family: "Kalnia", serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.2;
  color: var(--dark);
  text-transform: uppercase;
}

.heading .accent {
  color: var(--accent);
}

/* ---------- Body ---------- */
.body {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
}

.body strong {
  font-weight: 600;
}

/* ---------- Contact ---------- */
.contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-heading {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.people {
  display: flex;
  gap: 32px;
}

.person {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.links {
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
}

.links a {
  color: var(--dark);
  text-decoration: underline;
  text-underline-position: from-font;
}

.links a:hover {
  opacity: 0.7;
}

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  /* Stacked: sections carry their own colors, so drop the L/R split
     (which would otherwise show through any gap below the content). */
  body {
    background: var(--green);
  }

  .layout {
    flex-direction: column;
    max-width: none;
  }

  /* Top (logo) — 48px padding, logo centered with breathing room. */
  .left {
    flex: 0 0 auto;
    min-height: 422px;
    padding: 48px;
  }

  /* Bottom (content) — 32px padding, 24px gap, left-aligned. */
  .right {
    flex: 0 0 auto;
    padding: 32px;
    gap: 24px;
  }

  .right > * {
    max-width: none;
  }

  .heading {
    font-size: 32px;
  }

  .body {
    line-height: 1.6;
  }

  /* Contact people stack vertically, each row: avatar left, links right. */
  .people {
    flex-direction: column;
    gap: 32px;
  }

  .person {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

/* ============================================================
   Intro animation
   Land fully dark → logo springs in centered → green pushes in
   (from the right on desktop, up from below on mobile) and moves
   the logo into place → heading, body and contact reveal in turn.
   ============================================================ */
@keyframes logoSpring {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Desktop only. The logo lives centered in the left (dark) half — its
   final home. During the intro we offset it +25vw with `translate` so it
   sits dead-center of the screen while it scales in, then slide it back to
   0 (its home on the left). Using `translate`/`transform` means nothing in
   the layout reflows, so the logo's vertical position never moves. */
@keyframes logoSlideIn {
  from {
    translate: 25vw 0;
  }
  to {
    translate: 0 0;
  }
}

/* Desktop only. Green half starts pushed off the right edge and slides in
   to cover its half, revealing the dark-blue background behind it as it goes. */
@keyframes greenSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes topCollapse {
  from {
    min-height: 100vh;
  }
  to {
    min-height: 422px;
  }
}

@keyframes greenIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shared: logo spring + staggered content reveal */
@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: logoSpring 1.1s cubic-bezier(0.34, 1.25, 0.4, 1) 0.3s both;
  }

  .heading {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.15s both;
  }

  .body {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.3s both;
  }

  .contact-heading {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.45s both;
  }

  .people .person:nth-child(1) {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.6s both;
  }

  .people .person:nth-child(2) {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 2.72s both;
  }
}

/* Desktop: the whole screen starts dark blue. The green half is slid off
   to the right (see greenSlideIn), so the dark-blue base shows through
   underneath it until it slides into place. `overflow-x: clip` hides the
   off-screen green half WITHOUT turning <body> into a scroll container —
   `hidden` would, which causes Chrome to jump the scroll on load. */
@media (min-width: 801px) {
  body {
    background: var(--dark);
    overflow-x: clip;
  }
}

/* Desktop intro sequence:
   1. Logo scales in, centered on screen at its final height (logoSpring,
      offset to center by logoSlideIn's start state).
   2. Logo slides left to its home (logoSlideIn) while…
   3. …the green half slides in from the right (greenSlideIn).
   4. Heading, body and contact then reveal in turn (shared fadeUp block). */
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .logo {
    animation:
      logoSpring 1.1s cubic-bezier(0.34, 1.25, 0.4, 1) 0.3s both,
      logoSlideIn 0.7s cubic-bezier(0.34, 1.15, 0.5, 1) 1.5s both;
  }

  .right {
    animation: greenSlideIn 0.7s cubic-bezier(0.34, 1.15, 0.5, 1) 1.5s both;
  }
}

/* Mobile: dark fills the whole screen, then collapses upward and the
   green section rises in from below. */
@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .left {
    animation: topCollapse 0.7s cubic-bezier(0.34, 1.15, 0.5, 1) 1.3s both;
  }

  .right {
    animation: greenIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
  }
}