/*
 * Sinfonia Systems — placeholder landing page.
 * Tokens are the Visual Identity Guide v2.1 values (Brand/Visual-Identity-Guide-v2.1.html §03).
 *
 * Motion convention: every element's resting style is its final state; entrance
 * animations only supply a `from` frame (fill-mode: both). Removing the animations
 * — as prefers-reduced-motion does below — leaves the finished composition.
 */

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core (dark-surface steps) */
  --wine-ond: #ae2a41;
  --brass-ond: #c0a15e;
  --ink: #121013;
  --ink-deep: #0c0a0d;

  /* Dark neutrals */
  --text: #eceae6;
  --text-2: #b0acb2;

  /* Hairline structure: bone at low alpha so it reads as texture, never as content */
  --line: rgb(236 234 230 / 0.075);

  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  /* "Ink depth" — the guide's sanctioned single-hue tonal shift */
  background: radial-gradient(ellipse 120% 90% at 50% 42%, var(--ink) 45%, var(--ink-deep) 100%) var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ─── Field: ember + columns ─────────────────────────────────────────── */

.field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* "Wine ember" — a faint glow in one corner of the ink field */
.ember {
  position: absolute;
  left: -40vmax;
  bottom: -50vmax;
  width: 92vmax;
  height: 92vmax;
  border-radius: 50%;
  /* Wine #6c1525 */
  background: radial-gradient(
    closest-side,
    rgb(108 21 37 / 0.42),
    rgb(108 21 37 / 0.14) 50%,
    rgb(108 21 37 / 0) 100%
  );
  animation:
    ember-warm 3.2s ease-out 0.4s both,
    ember-breathe 10s var(--ease-in-out) 3.6s infinite alternate;
}

@keyframes ember-warm {
  from { opacity: 0; }
}

@keyframes ember-breathe {
  to { transform: scale(1.08) translate(2vmax, -1.5vmax); }
}

/* Columns are placed by main.js; the mask keeps the wordmark's surroundings clear. */
.columns {
  position: absolute;
  inset: 0;
  --py: 50%;
  -webkit-mask-image: radial-gradient(ellipse 50% 34% at 50% 48%, transparent 55%, #000 100%);
  mask-image: radial-gradient(ellipse 50% 34% at 50% 48%, transparent 55%, #000 100%);
}

.column {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform-origin: 50% 0;
  animation: column-draw 1.3s var(--ease-out) var(--delay, 0s) both;
}

.columns.is-settled .column {
  animation: none;
}

/* The warm band a column takes on when the field responds */
.column::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(174 42 65 / 0) calc(var(--py) - 38vh),
    var(--wine-ond) var(--py),
    rgb(174 42 65 / 0) calc(var(--py) + 38vh)
  );
  opacity: var(--w, 0);
}

@keyframes column-draw {
  from { transform: scaleY(0); }
}

/* ─── Stage: wordmark, keyline, status ───────────────────────────────── */

.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    max(24px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    calc(max(24px, env(safe-area-inset-bottom)) + 4vh)
    max(16px, env(safe-area-inset-left));

  /*
   * Clear space: half the cap height of "Sinfonia" (≈36 of the outline's units),
   * expressed as a fraction of each lockup's width so it scales with the logo.
   */
  --lockup-w: clamp(300px, 56vw, 760px);
  --clear: calc(var(--lockup-w) * 0.0592);
}

.mark {
  margin: 0;
  line-height: 0;
  font-size: 0;
}

.lockup {
  display: block;
  width: var(--lockup-w);
  height: auto;
  overflow: visible;
}

.lockup--horizontal { aspect-ratio: 607.81 / 78.1; }
.lockup--stacked { aspect-ratio: 373.3 / 123.1; display: none; }

.lockup__name {
  fill: var(--text);
  animation: name-rise 1.7s var(--ease-out) 1.25s both;
}

.lockup__systems {
  fill: var(--brass-ond);
  animation: systems-arrive 1.2s var(--ease-out) 2.05s both;
}

/* Units are the SVG's own: the name rises past its baseline clip. */
@keyframes name-rise {
  from { transform: translateY(84px); }
}

@keyframes systems-arrive {
  from { opacity: 0; transform: translateY(10px); }
}

.keyline {
  width: calc(var(--lockup-w) * 0.14);
  height: 1px;
  margin-top: calc(var(--clear) * 1.7);
  background: var(--brass-ond);
  opacity: 0.7;
  animation: keyline-draw 1.2s var(--ease-in-out) 2.6s both;
}

@keyframes keyline-draw {
  from { transform: scaleX(0); }
}

.soon {
  --tracking: 0.36em;
  margin: calc(var(--clear) * 1.05) 0 0;
  /* Tracked caps leave trailing space after the last letter; pad the start to re-centre */
  padding-left: var(--tracking);
  color: var(--text-2);
  font-size: clamp(11px, 0.45vw + 9px, 14px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  white-space: nowrap;
  animation: soon-settle 2.2s var(--ease-out) 2.95s both;
}

@keyframes soon-settle {
  from {
    opacity: 0;
    letter-spacing: 0.9em;
    padding-left: 0.9em;
  }
}

/* ─── Narrow and portrait viewports: the stacked lockup ──────────────── */

@media (max-width: 599px), (orientation: portrait) and (max-width: 1199px) {
  .stage {
    --lockup-w: min(78vw, 480px);
    --clear: calc(var(--lockup-w) * 0.0964);
    padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 6vh);
  }

  .lockup--horizontal { display: none; }
  .lockup--stacked { display: block; }

  .keyline { width: calc(var(--lockup-w) * 0.2); }

  .columns {
    -webkit-mask-image: radial-gradient(ellipse 62% 30% at 50% 46%, transparent 50%, #000 100%);
    mask-image: radial-gradient(ellipse 62% 30% at 50% 46%, transparent 50%, #000 100%);
  }
}

/* ─── Reduced motion: the finished composition, still ────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ember,
  .column,
  .lockup__name,
  .lockup__systems,
  .keyline,
  .soon {
    animation: none;
  }
}