/* ============================================================
   Ravenworks Ventures — shared styles
   Deep-ink ground, drifting fog, an origami raven under the moon.
   Restraint is the brief: atmosphere, never spectacle.
   ============================================================ */

:root {
  --ink:       #0C0E13; /* raven-feather blue-black ground */
  --ink-deep:  #07080B; /* the dark the edges fall into */
  --bone:      #E9E6DF; /* restrained warm off-white */
  --bone-dim:  #C9C6BF; /* supporting line */
  --slate:     #94A1B2; /* desaturated slate-blue accent */
  --slate-dim: #7C8AA3; /* a colder slate */
  --muted:     #8A9199; /* footer — lifted a touch to clear the treeline */

  /* Warm light in the cold dark: a single lantern-moon and the faint lift
     where its light meets the horizon. The ground stays cool ink; the warmth
     is only ever a small point of light falling on it, never a wash. */
  --moon:      #F3E4C4; /* the lantern-moon itself */

  /* The mark's size, shared by both pages. About shows it at a fixed
     proportion of this rather than a size of its own, so the two stay in
     relation at any viewport. */
  --mark: clamp(34px, min(7vw, 6.3svh), 62px);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  padding: 0 1.5rem;
  position: relative;
  overflow-x: hidden;
  /* Deep ink ground: a faint iridescent lift toward centre, then a
     vignette letting the edges fall away into the dark. */
  background-color: var(--ink);
  background-image:
    radial-gradient(120% 90% at 50% 38%, #141824 0%, #0C0E13 60%, #080A0E 100%),
    radial-gradient(100% 100% at 50% 46%, transparent 50%, rgba(0, 0, 0, 0.45) 100%);
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Atmosphere: drifting fog + a breath of film grain ----
   Two fixed, non-interactive layers behind everything. The fog is a
   handful of very low-opacity slate glows that never quite resolve;
   the grain keeps the gradients from banding and adds a little haze. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25%;              /* overscan so the slow drift never shows an edge */
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(40% 34% at 20% 26%, rgba(128, 142, 168, 0.15), transparent 70%),
    radial-gradient(46% 40% at 82% 66%, rgba(92, 106, 134, 0.14), transparent 72%),
    radial-gradient(50% 44% at 60% 12%, rgba(70, 82, 110, 0.11), transparent 75%),
    radial-gradient(95% 52% at 50% 98%, rgba(112, 128, 158, 0.09), transparent 78%);
  mix-blend-mode: screen;
}

body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* ============================================================
   Night scene — the lantern-moon, a treeline, drifting mist.
   All fixed, non-interactive, z-index:0 (behind `main`, which is 1).
   Their paint order is DOM order: horizon, pines, mist, lantern.
   The moon reads as a crisp disc with only a tight halo — no wash.
   (The raven now lives up top as the mark, not in the scene.)
   ============================================================ */
.horizon,
.scene,
.mist,
.lantern {
  position: fixed;
  z-index: 0;
  pointer-events: none;
}

/* the lantern-moon: the one warm light, high on the right. A small, clean
   disc — just enough halo to sit in the dark, not a glow over the page. */
.lantern {
  right: max(9vw, 64px);
  top: clamp(58px, 14vh, 120px);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFF8E8 0%, var(--moon) 55%, #D9C69F 100%);
  box-shadow:
    0 0 4px 1px rgba(243, 228, 196, 0.4),
    0 0 14px 3px rgba(243, 228, 196, 0.12);
}

/* a barely-there warm lift where the sky meets the trees — grounds the
   treeline without washing the page */
.horizon {
  left: 0;
  right: 0;
  bottom: 0;
  height: min(34vh, 340px);
  background: linear-gradient(
    to top,
    rgba(243, 228, 196, 0.022),
    rgba(243, 228, 196, 0.007) 44%,
    transparent
  );
}

/* low ground mist rolling through the treeline — soft banks of cold light
   that drift sideways, so the pines sit in fog rather than on a clean edge.
   Overscanned left/right so the horizontal drift never shows an edge. */
.mist {
  left: -20%;
  right: -20%;
  bottom: 0;
  height: min(48vh, 500px);
  /* flat, wide banks sitting across the treeline so the pines break up into
     fog rather than reading as a hard serrated edge */
  background:
    radial-gradient(46% 24% at 20% 80%, rgba(162, 176, 202, 0.15), transparent 70%),
    radial-gradient(58% 28% at 54% 90%, rgba(128, 144, 176, 0.13), transparent 72%),
    radial-gradient(50% 24% at 83% 82%, rgba(162, 176, 202, 0.14), transparent 70%),
    radial-gradient(130% 22% at 50% 99%, rgba(150, 166, 196, 0.12), transparent 76%);
  mix-blend-mode: screen;
  filter: blur(9px);
}

/* rows of pines receding into the dark, anchored to the bottom edge */
.scene {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: min(24vh, 260px);
}

@media print {
  .horizon, .scene, .mist, .lantern { display: none; }
}

/* On a narrow screen the centred column fills the width, so the moon is moved
   into the top corner — clear sky, not beside the mark. Decorative layers
   only; the hero column stays governed by --rhythm and --mark. */
@media (max-width: 640px) {
  .lantern { top: 26px; right: 26px; width: 18px; height: 18px; }
}

/* main centres itself rather than being centred by body: at min-height it has
   free space to centre into, and when the content is taller it simply grows.
   Centring it from body pushed the top of the block past the scroll origin,
   which cut the mark off the top of the window. */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  min-height: 100svh;
  /* ---- the vertical rhythm, as a single unit ----
     Every gap in the hero is a multiple of --rhythm, so the whole column is
     tuned from one number. It tracks the shorter axis, and the -0.43rem term
     makes it tighten faster than proportionally as the screen gets short —
     which is what the old `@media (max-height: 720px)` block did as an abrupt
     step at one breakpoint. Continuous, so there is no jump to land on. */
  --rhythm: clamp(0.55rem, min(calc(3.45svh - 0.55rem), 4vw), 1.6rem);
  padding-block: calc(var(--rhythm) * 1.15) calc(var(--rhythm) * 1.35);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ============================================================
   The raven mark — the origami raven, kinetic
   ============================================================ */
.mark-wrap {
  position: relative;
  margin-bottom: calc(var(--rhythm) * 0.9);
  perspective: 620px; /* so the cursor-lean reads as depth, not a flat spin */
}

/* the faintest lift behind the mark so it isn't floating in pure void —
   a breath of light, not a halo */
.mark-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(120px, min(24vw, 24svh), 190px);
  height: clamp(120px, min(24vw, 24svh), 190px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(148, 161, 178, 0.07), transparent 68%);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}

/* The origami raven is wide, so it is sized off --mark by a factor that keeps
   its height near the old feather's — the mark is still one --mark unit. */
.mark {
  display: block;
  width: calc(var(--mark) * 2.05);
  height: auto;
  opacity: 0.98;
  transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.25, 1);
  will-change: transform;
}

/* ---- Eyebrow ---- */
.eyebrow {
  margin: 0 0 var(--rhythm);
  font-family: var(--sans);
  font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-indent: 0.36em;
  color: var(--slate);
}

/* ---- Wordmark ---- */
.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, min(10.5vw, 7svh), 6rem);
  line-height: 0.95;
  letter-spacing: -0.018em;
  color: var(--bone);
}

.wordmark .v {
  display: block; /* keep the two-line lockup at every size, not by wrap luck */
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---- Supporting + model lines ---- */
.supporting,
.model {
  margin: var(--rhythm) auto 0;
  max-width: 30rem;
  font-family: var(--sans);
  font-size: clamp(0.92rem, 2.2vw, 1.06rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--bone-dim);
}

.model {
  margin-top: calc(var(--rhythm) * 0.8);
  max-width: 31rem;
}

/* ---- Capability row ---- */
.capabilities {
  margin: calc(var(--rhythm) * 0.9) auto 0;
  padding: 0;
  max-width: 34rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em 0;
  font-family: var(--sans);
  font-size: clamp(0.64rem, 1.5vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

.capabilities li { list-style: none; white-space: nowrap; }

.capabilities li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.85em;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ---- Invitation ---- */
.invite {
  margin: calc(var(--rhythm) * 1.1) auto 0;
  max-width: 29rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 2.6vw, 1.3rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.003em;
  color: var(--bone);
}

/* ---- Contact ---- */
.contact {
  margin: var(--rhythm) 0 0;
  font-family: var(--sans);
  font-size: clamp(0.9rem, 2.1vw, 1rem);
  letter-spacing: 0.02em;
}

.contact a {
  color: var(--bone);
  text-decoration: none;
  padding: 0.35em 0.1em;
  border-bottom: 1px solid rgba(148, 161, 178, 0.4);
  transition: border-color 0.35s ease, color 0.35s ease;
}

.contact a:hover { border-bottom-color: var(--slate); color: #FFFFFF; }

.contact a:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 4px;
  border-radius: 2px;
  border-bottom-color: transparent;
}

/* ---- Footer + the quiet way to the workshop ---- */
.footer {
  margin: calc(var(--rhythm) * 1.4) 0 0;
  font-family: var(--sans);
  font-size: clamp(0.66rem, 1.7vw, 0.74rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--rhythm) * 0.45);
}

/* ============================================================
   Motion — all opt-in, all slow. Nothing here is load-blocking,
   and everything reads as complete with motion disabled.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* one orchestrated page-load moment */
  .settle {
    opacity: 0;
    transform: translateY(10px);
    animation: settle 1.1s cubic-bezier(0.2, 0.65, 0.3, 1) forwards;
  }

  /* home (hero) sequence */
  .mark-wrap.settle    { animation-delay: 0.15s; transform: translateY(6px); }
  .eyebrow.settle      { animation-delay: 0.5s; }
  .wordmark.settle     { animation-delay: 0.66s; }
  .supporting.settle   { animation-delay: 1.05s; }
  .model.settle        { animation-delay: 1.22s; }
  .capabilities.settle { animation-delay: 1.4s; }
  .invite.settle       { animation-delay: 1.58s; }
  .contact.settle      { animation-delay: 1.76s; }
  .footer.settle       { animation-delay: 1.92s; }

  @keyframes settle {
    to { opacity: 1; transform: translateY(0); }
  }

  /* one authored moment: the lantern kindles as the page settles */
  .lantern {
    opacity: 0;
    animation: kindle 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  }
  @keyframes kindle { to { opacity: 1; } }

  /* the origami folds resolve into being as the mark settles */
  .mark-wrap.settle .facet {
    opacity: 0;
    animation: facetIn 0.6s cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
  }
  .mark-wrap.settle .facet:nth-child(1) { animation-delay: 1.05s; }
  .mark-wrap.settle .facet:nth-child(2) { animation-delay: 1.13s; }
  .mark-wrap.settle .facet:nth-child(3) { animation-delay: 1.21s; }
  .mark-wrap.settle .facet:nth-child(4) { animation-delay: 1.29s; }
  .mark-wrap.settle .facet:nth-child(5) { animation-delay: 1.37s; }
  .mark-wrap.settle .facet:nth-child(6) { animation-delay: 1.45s; }
  .mark-wrap.settle .facet:nth-child(7) { animation-delay: 1.53s; }
  .mark-wrap.settle .facet:nth-child(8) { animation-delay: 1.61s; }

  @keyframes facetIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* the fog breathes and drifts — very slow, barely there */
  body::before {
    animation: drift 46s ease-in-out infinite alternate;
  }

  @keyframes drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
    100% { transform: translate3d(3%, 2%, 0) scale(1.12); }
  }

  /* the ground mist rolls sideways through the trees, slower still */
  .mist {
    animation: mistdrift 64s ease-in-out infinite alternate;
  }

  @keyframes mistdrift {
    0%   { transform: translate3d(-3%, 0, 0); }
    100% { transform: translate3d(3%, 1.5%, 0); }
  }

  /* the lift behind the mark breathes, barely — kept faint on purpose */
  .mark-wrap::before {
    animation: breathe 10s ease-in-out infinite;
  }

  @keyframes breathe {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.98); }
    50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.03); }
  }
}