/* S4P AG — holding portal. Dark, minimal, one purpose: choose a company.
   No framework, no build. Motion follows Emil/Apple rubric:
   ease-out entrances, transform+opacity only, press-states, reduced-motion = static. */

:root {
  --bg: #0a0b0d;
  --ink: #e9ecf1;          /* primary text — AA on --bg */
  --ink-dim: #9aa0ab;      /* secondary text — AA on --bg */
  --ink-faint: #6a707b;
  --line: rgba(255, 255, 255, 0.08);
  --card: rgba(255, 255, 255, 0.022);
  --card-hover: rgba(255, 255, 255, 0.05);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint top glow + vignette so the black has depth, no image needed */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(120, 130, 150, 0.10), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%);
  background-attachment: fixed;
}

.stage {
  min-height: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 6rem) clamp(1.25rem, 5vw, 2rem) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 6vh, 3.75rem);
}

/* ---- Brand ---- */
.brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.wordmark {
  margin: 0;
  font-weight: 700;
  font-size: clamp(4.5rem, 22vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  /* "schwarz-auf-dunkel", edel — engraved graphite reading on near-black */
  background: linear-gradient(178deg, #6b6f79 0%, #3c3f46 46%, #23262c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* engrave: bright top edge + dark bottom carve */
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10))
    drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.7));
}

.tagline {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(0.62rem, 2.4vw, 0.75rem);
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  text-transform: uppercase;
  max-width: 34ch;
}

/* ---- Companies ---- */
.companies {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.15rem 1.05rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition:
    transform 200ms var(--ease-out),
    background-color 200ms ease,
    border-color 200ms ease;
}

/* Kennfarben accent rail — grows from top on hover */
.rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0.34);
  transform-origin: center;
  opacity: 0.85;
  transition: transform 240ms var(--ease-out), opacity 200ms ease;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.card-name {
  font-weight: 600;
  font-size: clamp(1.15rem, 4.6vw, 1.4rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.tag {
  font-family: var(--mono);
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--accent);
  vertical-align: 0.18em;
  margin-left: 0.15em;
}

.card-desc {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 2.8vw, 0.8rem);
  letter-spacing: 0.005em;
  color: var(--ink-dim);
  line-height: 1.35;
}

.card-go {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--ink-faint);
  transform: translateX(-2px);
  transition: transform 220ms var(--ease-out), color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    background: var(--card-hover);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    transform: translateY(-2px);
  }
  .card:hover .rail { transform: scaleY(1); opacity: 1; }
  .card:hover .card-go { transform: translateX(2px); color: var(--accent); }
}

/* keyboard focus — visible, on-brand */
.card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* press feedback — the interface hears you (Emil) */
.card:active {
  transform: scale(0.985);
  transition: transform 120ms var(--ease-out);
}

/* ---- Footer ---- */
.foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.foot a {
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 160ms ease;
}
.foot a:hover { color: var(--ink); }
.foot a:focus-visible {
  outline: 2px solid var(--ink-dim);
  outline-offset: 3px;
  border-radius: 3px;
}
.sep { color: var(--ink-faint); }

/* ---- Staged entrance: wordmark, then tagline, then cards (boom·boom·boom) ---- */
.wordmark,
.tagline,
.card { will-change: transform, opacity; }

.wordmark { opacity: 0; animation: rise 640ms var(--ease-out) 80ms forwards; }
.tagline  { opacity: 0; animation: rise 560ms var(--ease-out) 460ms forwards; }

.card { opacity: 0; animation: rise 520ms var(--ease-out) forwards; }
.card:nth-child(1) { animation-delay: 700ms; }
.card:nth-child(2) { animation-delay: 790ms; }
.card:nth-child(3) { animation-delay: 880ms; }
.card:nth-child(4) { animation-delay: 970ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reduced motion — everything is simply there, no movement (Apple/Emil) */
@media (prefers-reduced-motion: reduce) {
  .wordmark, .tagline, .card {
    animation: none;
    opacity: 1;
    will-change: auto;
  }
  .card, .rail, .card-go, .foot a { transition: none; }
}