/* Caliber homepage — shared tokens and base styles */

html { scroll-behavior: smooth; }

@font-face { font-family: 'Outfit Fallback'; src: local('Arial'); }

:root {
  /* Brand */
  --cal-blue-ink: #0009B6;          /* Atlantic Blue */
  --cal-blue-solid: #0141D7;        /* Solid brand blue (from icon lockup) */
  --cal-blue: #0052FF;              /* interactive blue */
  --cal-blue-600: #0066FF;
  --cal-blue-500: #1677FF;
  --cal-blue-400: #4E8FFF;
  --cal-blue-200: #B8D0FF;
  --cal-blue-50:  #EEF4FF;
  --cal-blue-gradient: linear-gradient(135deg, #0084FF 0%, #0009B6 100%);

  /* Warm accent — picked a rich sunrise coral for D4A574 / FF613E family
     (closer to brand-used FF613E, but richer). Reads confidently on white
     and doesn't compete with the brand blue. */
  --cal-accent: #FF6A3D;
  --cal-accent-soft: #FFE4D4;
  --cal-accent-ink: #B23C12;

  --cal-amber: #F5B544;
  --cal-green: #16A34A;
  --cal-green-soft: #DCFCE7;

  /* Neutrals */
  --cal-ink: #0A0A0B;
  --cal-ink-2: #17171A;
  --cal-body: #3D3D42;
  --cal-muted: #6B7280;
  --cal-muted-2: #8A8F98;
  --cal-line: #E7E8EC;
  --cal-line-2: #EEEFF3;
  --cal-bg: #FFFFFF;
  --cal-bg-soft: #F7F7F8;
  --cal-bg-warm: #FAF7F2;
  --cal-bg-cool: #F3F5FA;

  /* Type */
  --cal-font: 'Outfit', 'Outfit Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --cal-serif: 'Fraunces', 'Cormorant Garamond', 'Georgia', serif; /* used sparingly */

  /* Radii / shadows */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(10,10,20,0.04), 0 1px 1px rgba(10,10,20,0.03);
  --shadow-md: 0 6px 24px -8px rgba(10,20,60,0.14), 0 2px 6px rgba(10,20,60,0.06);
  --shadow-lg: 0 24px 60px -20px rgba(10,20,60,0.22), 0 8px 20px -10px rgba(10,20,60,0.10);
  --shadow-blue: 0 18px 50px -18px rgba(0,9,182,0.45);
}

* { box-sizing: border-box; }

.cal-page {
  font-family: var(--cal-font);
  color: var(--cal-ink);
  background: var(--cal-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on, "cv11" on;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.cal-page * { box-sizing: border-box; }

/* scrollbars inside artboards */
.cal-page ::-webkit-scrollbar { width: 10px; height: 10px; }
.cal-page ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 10px; }
.cal-page ::-webkit-scrollbar-track { background: transparent; }

.cal-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--cal-blue-ink);
  background: var(--cal-blue-50);
  border: 1px solid rgba(0,9,182,0.14);
  border-radius: 999px; padding: 6px 12px;
}
.cal-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--cal-blue);
  box-shadow: 0 0 0 3px rgba(0,82,255,0.18);
}

.cal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 12px 22px;
  font-family: inherit; font-size: 15px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.cal-btn--primary { background: var(--cal-ink); color: #fff; }
.cal-btn--primary:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cal-btn--blue { background: var(--cal-blue-ink); color: #fff; }
.cal-btn--blue:hover { background: #000A9A; transform: translateY(-1px); box-shadow: var(--shadow-blue); }
.cal-btn--accent { background: var(--cal-accent); color: #fff; }
.cal-btn--accent:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 18px 40px -18px rgba(255,106,61,0.6); }
.cal-btn--ghost { background: transparent; color: var(--cal-ink); border-color: var(--cal-line); }
.cal-btn--ghost:hover { background: var(--cal-bg-soft); }
.cal-btn--white { background: #fff; color: var(--cal-ink); box-shadow: var(--shadow-sm); }
.cal-btn--white:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Interactive chip (used in hero rotator, filters, etc.) */
.cal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  background: var(--cal-blue-50); color: var(--cal-blue-ink);
  border: 1px solid rgba(0,9,182,0.12);
}
.cal-chip--accent { background: #FFF1E9; color: var(--cal-accent-ink); border-color: rgba(255,106,61,0.25); }
.cal-chip--gray { background: #F3F4F6; color: #4B5563; border-color: #E5E7EB; }
.cal-chip--green { background: var(--cal-green-soft); color: #166534; border-color: #BBF7D0; }

/* Card */
.cal-card {
  background: #fff; border: 1px solid var(--cal-line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* Animations */
@keyframes cal-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Mega menu entry — same motion but preserves the translateX(-50%) used
   for horizontal centering (animation transforms override inline ones). */
@keyframes cal-mega-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes cal-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
@keyframes cal-star-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes cal-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes cal-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes cal-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}

.cal-blink { animation: cal-blink 1s steps(2) infinite; }

/* Scout world-map country pulse — one-shot pulse ring, dot fade, label
   reveal-hold-fade. Three keyframes run in lock-step over 2.5s. */
@keyframes scout-pulse-ring {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(4);   opacity: 0;   }
}
@keyframes scout-pulse-dot {
  0%        { opacity: 0; transform: scale(0.6); }
  15%, 75%  { opacity: 1; transform: scale(1);   }
  100%      { opacity: 0; transform: scale(1);   }
}
@keyframes scout-pulse-label {
  0%        { opacity: 0; transform: translateX(-50%) translateY(6px);  }
  20%, 75%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
  100%      { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* Small live dot — 6px green with pulsing halo. Used in nav heartbeat,
   live status chips. Reuses cal-pulse-dot keyframe. */
.cal-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cal-green);
  animation: cal-pulse-dot 2.4s ease-out infinite;
  flex-shrink: 0;
}

/* Nav logo — gradient star with orange-crossfade hover + click bounce.
   Base and overlay crossfade TOGETHER (base fades out as overlay fades
   in) so there's no edge bleed from the gradient under the orange.
   Inner wrapper carries the bounce animation so hover scale does not
   compound with click scale. */
.cal-nav-logo-inner {
  display: inline-flex;
  position: relative;
  transform-origin: 50% 55%;
  will-change: transform;
}
.cal-nav-logo-base {
  display: inline-flex;
  opacity: 1;
  transition: opacity 0.28s ease;
}
.cal-nav-logo-overlay {
  position: absolute; inset: 0;
  display: inline-flex;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.cal-nav-logo:hover .cal-nav-logo-base    { opacity: 0; }
.cal-nav-logo:hover .cal-nav-logo-overlay { opacity: 1; }
.cal-nav-logo--bounce .cal-nav-logo-inner {
  animation: cal-nav-logo-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cal-nav-logo-bounce {
  0%   { transform: scale(1)    rotate(0deg); }
  22%  { transform: scale(1.28) rotate(-9deg); }
  48%  { transform: scale(0.9)  rotate(5deg); }
  70%  { transform: scale(1.06) rotate(-2deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Nav capsule responsive: hide secondary items on narrow screens so only
   logo + ⌘K + primary CTA remain. Pill shrinks to content. */
@media (max-width: 960px) {
  .cal-nav-collapse { display: none !important; }
  .cal-nav-pill { width: fit-content !important; max-width: 100% !important; }
}

/* section defaults */
.cal-section { padding: 120px 72px; }
.cal-section h2 { font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 18px; }
.cal-section h3 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 8px; }
.cal-section p.lede { font-size: 20px; color: var(--cal-body); line-height: 1.5; margin: 0 0 36px; max-width: 640px; }

.cal-container { max-width: 1280px; margin: 0 auto; }

/* Ticker (logo strip) */
.cal-ticker {
  display: flex; gap: 64px;
  animation: cal-ticker-scroll 40s linear infinite;
  width: max-content;
}
@keyframes cal-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Noise texture overlay (used on dark blue blocks) */
.cal-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Date input on dark backgrounds — invert the calendar picker icon so
   it's visible against dark form fields, and render the native picker
   popover in dark mode. */
.cal-dark-date { color-scheme: dark; }
.cal-dark-date::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
  padding: 2px;
  transition: opacity .15s;
}
.cal-dark-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ProposalGate — iris-reveal overlay for /proposals/* pages.
   Starts fully covering, clip-path shrinks to a point on unlock,
   revealing the proposal behind. Shared across Proposal.html (template
   preview) and proposals/<slug>.html (per-prospect instances). */
.prop-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 820ms cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden;
  padding: 24px;
}
.prop-gate--opening { clip-path: circle(0% at 50% 50%); }

.prop-gate-card {
  position: relative;
  z-index: 1;
  width: 100%; max-width: 480px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 24px;
  padding: 40px 36px 32px;
  box-shadow: 0 40px 80px -30px rgba(6,8,44,0.25), 0 0 0 1px rgba(6,8,44,0.04);
}
.prop-gate-card--shake { animation: prop-shake 420ms cubic-bezier(.36,.07,.19,.97) both; }

@keyframes prop-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

@keyframes prop-confetti {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; }
}

/* Print CSS — shared across all proposal pages. "Save as PDF" output
   reflows to A4, hides the sticky nav + gate + shadows so the PDF
   doesn't read as a browser screenshot. */
@media print {
  @page { size: A4; margin: 12mm; }
  .prop-page { background: #fff !important; }
  .prop-no-print, .prop-gate { display: none !important; }
  .prop-nav { position: static !important; }
  .prop-page section { break-inside: avoid; page-break-inside: avoid; }
  .prop-page .cal-noise { display: none !important; }
  .prop-page * { box-shadow: none !important; }
}