/* Frost & Prins · Coming soon. Page layer on top of tokens.css (Green theme). */

@layer page {
  :root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html { color-scheme: dark; }

  body {
    margin: 0;
    min-height: 100svh;
    background-color: var(--color-surface-base);
  }

  .stage {
    /* Logo width; the origin line's hairlines match the logo rule (1107.95 / 1325.4 of the artwork) */
    --logo-w: clamp(260px, 30vw + 40px, 520px);
    box-sizing: border-box;
    min-height: 100svh;
    display: grid;
    grid-template-rows: minmax(var(--space-3xl), 0.8fr) auto minmax(var(--space-4xl), 1fr);
    justify-items: center;
    padding: 0 var(--space-lg) clamp(var(--space-2xl), 9vh, var(--space-4xl));
  }

  .logo {
    grid-row: 2;
    width: var(--logo-w);
    margin: 0;
  }

  .logo-link { display: block; color: inherit; }

  .logo-art {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .soon {
    grid-row: 3;
    align-self: end;
    width: calc(var(--logo-w) * 0.836);
    max-width: none;
    margin: 0;
    display: grid;
    gap: var(--space-md);
    justify-items: center;
    text-align: center;
    color: var(--color-text-primary);
  }

  .soon::before,
  .soon::after {
    content: "";
    width: 100%;
    height: var(--stroke-hairline);
    background: var(--color-border-rule);
  }

  /* One orchestrated reveal that follows the logo's own construction:
     protea, name, rule, descriptor, then the line beneath. */
  @media (prefers-reduced-motion: no-preference) {
    .logo-mark,
    .logo-rule,
    .soon::before,
    .soon::after { transform-box: fill-box; }

    .logo-mark { transform-origin: 50% 100%; animation: rise 1.4s var(--ease-out) 0.1s both; }
    .logo-wordmark { animation: appear 1.2s var(--ease-out) 0.45s both; }
    .logo-rule { transform-origin: 50% 50%; animation: draw 1.3s var(--ease-out) 0.75s both; }
    .logo-descriptor { animation: appear 1.2s var(--ease-out) 1.05s both; }
    .soon { animation: appear 1.2s var(--ease-out) 1.45s both; }
    .soon::before,
    .soon::after { animation: draw 1.4s var(--ease-out) 1.4s both; }
  }

  @keyframes rise { from { opacity: 0; transform: translateY(40px); /* SVG user units: about 14px at desktop size */ } }
  @keyframes appear { from { opacity: 0; } }
  @keyframes draw { from { transform: scaleX(0); } }
}