/* Fireworks Factory placeholder
 * 1:1 translation of the Figma frame (1440x1024).
 * Layout uses absolute positioning relative to the viewport center to
 * preserve the exact composition described in the design at any size.
 */

:root {
  --ff-bg: #363a45;
  --ff-accent: #c9ff28;
  --ff-fg-muted: #e4e0d9;
  --ff-wordmark-w: 586.315px;
  --ff-wordmark-h: 140.33px;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--ff-bg);
  color: var(--ff-fg-muted);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--ff-bg);
}

/* Background image — sized to overscan the frame, mix-blend-mode: multiply
 * over the dark slate to produce the dim, photo-tinted background.
 */
.stage__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Figma renders the photo desaturated under the multiply blend, giving
   * the bg a neutral grey tint instead of the photo's grass-green. Match
   * that by stripping saturation before the blend composites with the slate. */
  filter: grayscale(1);
  mix-blend-mode: multiply;
  user-select: none;
}

.stage__wordmark {
  position: absolute;
  top: calc(50% + 7.94px);
  left: 50%;
  margin: 0;
  /* Figma: 586.315px on a 1440px-wide frame ~= 40.7% of width.
   * Scale fluidly relative to viewport width, clamped for sanity. */
  width: clamp(280px, 40.7vw, 720px);
  aspect-ratio: 586.315 / 140.33;
  transform: translate(-50%, -50%);
  line-height: 0;
}

.stage__wordmark img {
  display: block;
  width: 100%;
  height: 100%;
}

.stage__footer {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 6vh, 56px);
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.stage__footer p {
  margin: 0;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ff-fg-muted);
  white-space: nowrap;
}

/* Small viewport polish — keep the wordmark legible without crowding the
 * footer on narrow phones. The composition still mirrors the design.
 */
@media (max-width: 480px) {
  .stage__wordmark {
    width: 82vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* OG variant — used by og.html to render a 1200x630 social preview.
 * The wordmark is sized larger relative to the frame so it reads at
 * thumbnail (~200px) in feed previews, and the footer is hidden.
 */
.stage--og {
  width: 1200px;
  height: 630px;
}

.stage--og .stage__wordmark {
  width: 720px;
  top: 50%;
}

.stage--og .stage__footer {
  display: none;
}