/* ============================================================================
   Sema PTA landing — 01 — Base tokens, ambient background, resets
   ----------------------------------------------------------------------------
   To edit this section, open css/base.css. All rules are grouped here.
   ============================================================================ */

:root {
    --bg: #0E0B08;
    --bg-2: #14100C;
    --card: #1A1512;
    --border: rgba(255, 138, 76, 0.14);
    --border-strong: rgba(255, 138, 76, 0.32);
    --text: #F4EEE6;
    --text-dim: #A89B8C;
    --text-mute: #6B5F52;
    --sema-100: #FFE9D6;
    --sema-300: #FFB482;
    --sema-500: #FF8A4C;
    --sema-600: #F26A2E;
    --sema-700: #C74E1A;
    --sema-900: #4A1F0B;
    --font-display: "Space Grotesk", "PP Neue Montreal", -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", monospace;
  }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-display);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

/* ========== Ambient background ========== */

.ambient {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
  }

.ambient::before,
  .ambient::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(120px);
    opacity: 0.6;
    animation: float 18s ease-in-out infinite;
  }

.ambient::before {
    width: 700px; height: 700px;
    background: radial-gradient(circle, var(--sema-600), transparent 60%);
    top: -200px; right: -100px;
  }

.ambient::after {
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--sema-700), transparent 60%);
    bottom: -150px; left: -100px;
    animation-delay: -9s;
    opacity: 0.4;
  }

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.05); }
    66% { transform: translate(-30px, 20px) scale(0.95); }
  }

.ambient .grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,138,76,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,138,76,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 75%);
  }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
  }

@keyframes blink { 50% { opacity: 0; } }

@keyframes bob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
  }

/* ============ AI demo section ============ */

@keyframes blink { 50% { opacity: 0; } }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@keyframes pd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
  }

html { scroll-behavior: smooth; }

@keyframes hAP {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10,7,5,0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(10,7,5,0);  }
  }

@keyframes hASlideIn {
    to { opacity: 1; transform: translateY(0); }
  }

@keyframes hADown {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50%      { transform: translateX(4px); opacity: 1; }
  }

@keyframes slnDash {
    to { stroke-dashoffset: -24; }
  }

@keyframes caretBlink { 50% { opacity: 0; } }