/* Crossing Cloud — shared design tokens
   Used across all three landing-page directions. */

:root {
  /* Brand */
  --cc-blue: #2D6CB0;
  --cc-blue-deep: #1F4E83;
  --cc-blue-night: #0E2540;
  --cc-blue-ink: #0B1A2E;
  --cc-blue-soft: #E5EEF8;
  --cc-blue-mist: #F1F6FB;

  /* Warm accent (peach/amber, low-chroma) */
  --cc-warm: oklch(78% 0.13 65);
  --cc-warm-deep: oklch(64% 0.14 50);
  --cc-warm-soft: oklch(94% 0.04 70);

  /* Neutrals (warm whites, cool inks) */
  --cc-cream: #F7F2EC;
  --cc-paper: #FBFAF7;
  --cc-bone:  #EEE8DF;
  --cc-ink:   #0B1220;
  --cc-ink-2: #1A2434;
  --cc-mute:  #5A6679;
  --cc-rule:  #DCD4C8;

  /* Type */
  --cc-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cc-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* Make every artboard a clean, opaque, fixed-frame design surface. */
.cc-board {
  font-family: var(--cc-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  color: var(--cc-ink);
  position: relative;
  overflow: hidden;
}

.cc-board * { box-sizing: border-box; }

.cc-mono { font-family: var(--cc-mono); letter-spacing: 0; }

/* Animated weave — slow drift + draw-on entrance */
@keyframes ccDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes ccDriftA {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-14px, 8px); }
}
@keyframes ccDriftB {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(12px, -10px); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes ccDriftA { 0%, 100% { transform: none; } }
  @keyframes ccDriftB { 0%, 100% { transform: none; } }
}

/* Link / button hover & focus polish */
.cc-link {
  position: relative;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.cc-link:hover { opacity: 0.86; }
.cc-link.cc-cta:hover { transform: translateY(-1px); opacity: 1; }
.cc-link:focus-visible {
  outline: 2px solid var(--cc-warm-deep);
  outline-offset: 3px;
  border-radius: 999px;
}
/* Underline-on-hover for textual nav links */
.cc-link.cc-nav::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
  background: currentColor; opacity: 0; transform: translateY(2px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.cc-link.cc-nav:hover::after { opacity: 0.7; transform: none; }

/* shared placeholder block */
.cc-ph {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 9px),
    var(--cc-bone);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cc-mono);
  font-size: 11px;
  color: var(--cc-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}