/*
  monar.ai — Launch page styled per brand guidelines
  Uses Monar color tokens and typography hierarchy.
*/

/* Google Fonts are now loaded via <link> in HTML for better performance. */

:root {
  /* Brand tokens */
  --monar-black: #091718;
  --monar-magnolia: #F2F3FF;
  --monar-yellow: #FFFF38;
  --monar-turquoise: #56ECFF;
  --monar-violet: #7243FD;

  /* Radii */
  --radius-small: 8px;
  --radius-button: 4.652px;
  --radius-card: 22.826px;
  --radius-container: 26.362px;

  /* App-level vars mapped to brand */
  --bg-0: #071113; /* deep Monar black */
  --bg-1: #0b1719;
  --fg: var(--monar-magnolia);
  --muted: #C9D4DA; /* magnolia-muted */
  --accent: var(--monar-turquoise);
  --accent-2: var(--monar-violet);
  /* Accessible accent for text (higher contrast than turquoise) */
  --accent-text: #0E6A73;
  --card: var(--monar-magnolia);
  --border: rgba(9, 23, 24, 0.10);
  --shadow: rgba(4, 10, 12, 0.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Reddit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 10% 10%, #0d1b1e 0%, var(--bg-1) 35%, var(--bg-0) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Shared Spline orb component */
.spline-orb-wrap { position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); width: clamp(140px, 18vw, 240px); height: clamp(140px, 18vw, 240px); z-index: 2147483647; overflow: hidden; border-radius: 14px; background: transparent; opacity: 0; transition: opacity 420ms ease; }
.spline-orb-wrap.is-ready { opacity: 1; }
.spline-orb-scale { position: absolute; left: 50%; top: 50%; width: 1024px; height: 1024px; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(0.2); }
.spline-orb-scale spline-viewer { display: block; width: 1024px !important; height: 1024px !important; background: transparent; }
.spline-iframe { display: none; width: 100%; height: 100%; border: 0; }
.spline-orb-wrap.fallback .spline-orb-scale { display: none; }
.spline-orb-wrap.fallback .spline-iframe { display: block; }
@media (max-width: 720px) { .spline-orb-wrap { width: 120px; height: 120px; right: max(8px, 8px + env(safe-area-inset-right)); top: max(8px, 8px + env(safe-area-inset-top)); bottom: auto; } }

/* Version badge (desktop bottom-left; mobile centered) */
.version-badge { position: fixed; left: calc(12px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10; color: var(--muted); opacity: 0.85; font: 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; pointer-events: none; }
@media (max-width: 720px) { .version-badge { left: 50%; transform: translateX(-50%); } }

.page {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  /* Allow background layers to extend smoothly on scroll */
  overflow: visible;
}

/* Decorative layers */
.bg--aurora {
  position: fixed;
  inset: -20% -10% -10% -20%;
  background: radial-gradient(40% 30% at 20% 20%, rgba(122, 203, 255, 0.25), transparent 60%),
              radial-gradient(40% 30% at 80% 20%, rgba(177, 140, 255, 0.22), transparent 60%),
              radial-gradient(30% 25% at 50% 80%, rgba(84, 255, 200, 0.18), transparent 65%);
  filter: blur(40px) saturate(120%);
  pointer-events: none;
}

.bg--grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" opacity="0.06" filter="url(%23n)"/></svg>');
  opacity: 0.3;
  mix-blend-mode: soft-light;
}

.card {
  position: relative;
  width: min(880px, 100%);
  /* Use mobile-friendly compact spacing and radius by default */
  padding: 20px 14px 14px;
  border-radius: 16px;
  background: var(--card);
  color: var(--monar-black);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px var(--shadow);
}

.header { display: flex; align-items: center; justify-content: center; text-align: center; }

.brand { display: grid; place-items: center; gap: 10px; text-align: center; }
.brand-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.brand-name { font-family: 'Jura', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 500; letter-spacing: 0.2px; font-size: clamp(18px, 2.6vw, 26px); color: var(--monar-black); }
.brand-slogan { font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 12px; color: var(--accent-text); opacity: 0.98; }
.logo-img { height: clamp(32px, 7vw, 64px); width: auto; display: block; transition: transform 260ms cubic-bezier(.2,.7,.2,1), filter 260ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.badge {
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: var(--monar-black);
  background: var(--monar-yellow);
  padding: 4px 8px;
  border-radius: var(--radius-button);
  font-weight: 600;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), background-color 220ms ease, filter 220ms ease;
}

.content { text-align: center; padding: 20px 6px 14px; }
.headline {
  margin: 0 0 8px 0;
  font-family: 'Jura', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 3.8vw, 44px);
  color: var(--monar-black);
}
.subhead {
  margin: 0 auto 22px;
  max-width: 56ch;
  color: color-mix(in srgb, var(--monar-black) 72%, white 28%);
  font-size: clamp(13px, 2.1vw, 16px);
}

.countdown {
  display: grid;
  /* Adopt mobile 2x2 layout across sizes */
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  margin: 6px auto 12px;
  width: 100%;
  background: rgba(9, 23, 24, 0.04);
  border: 1px solid rgba(9, 23, 24, 0.10);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

.time { display: grid; justify-items: center; min-width: unset; }
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 9vw, 36px);
  color: var(--monar-black);
}
.label { color: color-mix(in srgb, var(--monar-black) 60%, white 40%); font-size: 11px; margin-top: 2px; }
.sep { display: none; }

.launch-note { color: color-mix(in srgb, var(--monar-black) 70%, white 30%); margin: 8px 0 0; font-size: 13px; }

.footer { display: grid; gap: 8px; place-items: center; padding-top: 18px; }
.links { color: var(--muted); display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.link { color: var(--accent-text); text-decoration: none; opacity: 0.98; padding: 6px 4px; border-radius: 6px; position: relative; }
.link[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* Subtle animated underline for footer/navigation links */
.footer .link::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  opacity: 0.9;
}
.footer .link:hover::after { transform: scaleX(1); }
.dot { opacity: 0.4; }
.legal { color: var(--muted); opacity: 0.8; }

/* Accessible focus styles */
:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 60%, white); outline-offset: 2px; border-radius: 6px; }

/* Micro-interactions (desktop hover) */
@media (hover: hover) and (pointer: fine) {
  .brand:hover .logo-img {
    transform: translateY(-2px) scale(1.035) rotate(-0.3deg);
    filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--monar-turquoise) 35%, transparent))
            saturate(105%) brightness(1.02);
  }
  .brand:hover .badge {
    transform: translateY(-1px);
    filter: brightness(1.04) saturate(105%);
  }
}

/* Touch feedback (tap) */
.brand:active .logo-img { transform: scale(0.985); }
.brand:active .badge { transform: scale(0.97); }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  body { background-attachment: scroll !important; }
  .brand:hover .logo-img,
  .brand:hover .badge,
  .brand:active .logo-img,
  .brand:active .badge { transform: none !important; filter: none !important; }
}

/* Responsive adjustments */
@media (max-width: 720px) {
  .logo-img { height: clamp(42px, 11.5vw, 69px); }
  .brand-name { font-size: clamp(18px, 3.4vw, 24px); }
  .brand-slogan { font-size: 12px; }
}

@media (max-width: 540px) {
  .headline { font-size: clamp(22px, 7vw, 34px); }
  .subhead { font-size: clamp(14px, 3.8vw, 15px); padding: 0 2px; }
  .links { gap: 8px; }
}

@media (max-width: 380px) {
  .card { padding: 16px 12px 12px; }
  .headline { font-size: clamp(20px, 7.8vw, 26px); }
  .countdown { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
  .num { font-size: clamp(22px, 10vw, 32px); }
  .label { font-size: 10px; }
}