/* crumblylogic — coming soon
 * One page. Read-only. Hand-tuned for warmth + restraint.
 * Premium feel comes from typography, spacing, and paper texture —
 * not from JavaScript. */

:root {
  --bg: #f5efe6;
  --surface: #ede4d3;
  --ink: #2a211c;
  --ink-soft: #6b5d52;
  --accent: #c45b3e;
  --muted: #3d6b66;
  --subtle: #d9cdb8;
  --focus: #c45b3e;

  --font-display: "Fraunces", ui-serif, "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --enter-duration: 1100ms;
  --enter-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-theme="dark"] {
  --bg: #1b1714;
  --surface: #241e1a;
  --ink: #ede4d3;
  --ink-soft: #a89c8c;
  --accent: #e07a5f;
  --muted: #7fb3ad;
  --subtle: #3a322c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

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

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-feature-settings: "ss01", "liga", "calt";
  font-size: clamp(15px, 1vw + 13px, 17px);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;

  /* Two soft tinted vignettes — warm at the top, cool at the bottom —
   * encode the brand metaphor (warm "crumbly" + cool "logic") in the
   * background itself. Plus a hand-set paper-fibre noise overlay that
   * keeps the surface from feeling printed-by-a-laser-printer. */
  background-image:
    radial-gradient(70% 55% at 25% 12%, rgba(196, 91, 62, 0.07), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(61, 107, 102, 0.06), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

:root[data-theme="dark"] body {
  background-image:
    radial-gradient(70% 55% at 25% 12%, rgba(224, 122, 95, 0.08), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(127, 179, 173, 0.06), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.89 0 0 0 0 0.83 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-data: reduce), print {
  body { background-image: none; }
}

::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- stage ---------- */

.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6rem);
}

.composition {
  text-align: center;
  max-width: min(34rem, 92vw);
}

/* ---------- wordmark ---------- */

.wordmark {
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(2.6rem, 9vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;

  opacity: 0;
  transform: translateY(8px);
  animation: enter var(--enter-duration) var(--enter-ease) 120ms forwards;
}

.wordmark__word {
  display: inline-block;
}

.wordmark__dot {
  color: var(--accent);
  margin-left: 0.02em;
  /* The dot gets its own tiny pop-in so it lands a beat after the word —
   * tiny detail, real character. */
  display: inline-block;
  opacity: 0;
  transform: translateY(-4px) scale(0.7);
  animation: dot-drop 600ms var(--enter-ease) 950ms forwards;
}

@keyframes enter {
  to { opacity: 1; transform: none; }
}

@keyframes dot-drop {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.7); }
  60%  { opacity: 1; transform: translateY(1px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- tagline ---------- */

.tagline {
  margin: 0;
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 60;
  font-size: clamp(1.15rem, 2vw + 0.5rem, 1.6rem);
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: balance;

  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.tagline__line {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  animation: enter 900ms var(--enter-ease) forwards;
}

.tagline__line:nth-child(1) { animation-delay: 500ms; }
.tagline__line:nth-child(2) { animation-delay: 750ms; }

.tagline__line--accent {
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 100;
  color: var(--accent);
}

/* ---------- status footer ---------- */

.status {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 6vw, 6rem) clamp(2rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;

  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);

  opacity: 0;
  animation: enter 1000ms var(--enter-ease) 1400ms forwards;
}

.status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(196, 91, 62, 0.45);
  animation: pulse 2.6s ease-in-out infinite 2000ms;
}

:root[data-theme="dark"] .status__dot {
  box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.5);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 91, 62, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(196, 91, 62, 0); }
}

:root[data-theme="dark"] .status__dot {
  animation-name: pulse-dark;
}
@keyframes pulse-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.4); }
  50%      { box-shadow: 0 0 0 7px rgba(224, 122, 95, 0); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wordmark,
  .wordmark__dot,
  .tagline__line,
  .status {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .status__dot { animation: none !important; }
}