@charset "UTF-8";
/*


 */
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");
/* line 8, app/assets/stylesheets/application.css.scss */
* {
  font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* line 12, app/assets/stylesheets/application.css.scss */
body {
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* line 18, app/assets/stylesheets/application.css.scss */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* line 24, app/assets/stylesheets/application.css.scss */
.font-light {
  font-weight: 300;
}

/* line 25, app/assets/stylesheets/application.css.scss */
.font-normal {
  font-weight: 400;
}

/* line 26, app/assets/stylesheets/application.css.scss */
.font-medium {
  font-weight: 500;
}

/* line 27, app/assets/stylesheets/application.css.scss */
.font-semibold {
  font-weight: 600;
}

/* line 28, app/assets/stylesheets/application.css.scss */
.font-bold {
  font-weight: 700;
}

/* line 29, app/assets/stylesheets/application.css.scss */
.font-black,
.font-extrabold {
  font-weight: 900;
}

/* JetBrains Mono for anything in <code> / .font-mono */
/* line 33, app/assets/stylesheets/application.css.scss */
code, kbd, samp, .font-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* ─── App cards: hover state + glow orb driven by --glow CSS var ──────── */
/* The card stores its accent color as `--glow` (set inline per card).    */
/* All hover/glow effects derive from that single source of truth, which  */
/* lets the ERB template stay data-driven without fighting Tailwind's JIT.*/
/* line 42, app/assets/stylesheets/application.css.scss */
.iam-app-card {
  transition: border-color 250ms ease, background-color 250ms ease;
}

/* line 45, app/assets/stylesheets/application.css.scss */
.iam-app-card:hover {
  border-color: color-mix(in srgb, var(--glow) 40%, transparent);
}

/* line 49, app/assets/stylesheets/application.css.scss */
.iam-app-orb {
  background-color: color-mix(in srgb, var(--glow) 10%, transparent);
}

/* line 52, app/assets/stylesheets/application.css.scss */
.iam-app-card:hover .iam-app-orb {
  background-color: color-mix(in srgb, var(--glow) 25%, transparent);
}

/* line 56, app/assets/stylesheets/application.css.scss */
.iam-app-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--glow) 90%, transparent), color-mix(in srgb, var(--glow) 45%, transparent));
  box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--glow) 30%, transparent);
}

/* ─── Hero terminal: line-by-line reveal + blinking cursor ───────────── */
/* 16s loop; each line fades in at its own offset, then holds. */
/* line 66, app/assets/stylesheets/application.css.scss */
.iam-term-line {
  opacity: 0;
}

@keyframes l1 {
  0%, 0% {
    opacity: 0;
    transform: translateY(4px);
  }
  2%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 73, app/assets/stylesheets/application.css.scss */
.iam-term-l1 {
  animation: l1 16s infinite ease-out;
}

@keyframes l2 {
  0%, 6% {
    opacity: 0;
    transform: translateY(4px);
  }
  8%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 73, app/assets/stylesheets/application.css.scss */
.iam-term-l2 {
  animation: l2 16s infinite ease-out;
}

@keyframes l3 {
  0%, 14% {
    opacity: 0;
    transform: translateY(4px);
  }
  16%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 73, app/assets/stylesheets/application.css.scss */
.iam-term-l3 {
  animation: l3 16s infinite ease-out;
}

@keyframes l4 {
  0%, 20% {
    opacity: 0;
    transform: translateY(4px);
  }
  22%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 73, app/assets/stylesheets/application.css.scss */
.iam-term-l4 {
  animation: l4 16s infinite ease-out;
}

@keyframes l5 {
  0%, 34% {
    opacity: 0;
    transform: translateY(4px);
  }
  36%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 73, app/assets/stylesheets/application.css.scss */
.iam-term-l5 {
  animation: l5 16s infinite ease-out;
}

@keyframes l6 {
  0%, 42% {
    opacity: 0;
    transform: translateY(4px);
  }
  44%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 73, app/assets/stylesheets/application.css.scss */
.iam-term-l6 {
  animation: l6 16s infinite ease-out;
}

@keyframes l7 {
  0%, 58% {
    opacity: 0;
    transform: translateY(4px);
  }
  60%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 73, app/assets/stylesheets/application.css.scss */
.iam-term-l7 {
  animation: l7 16s infinite ease-out;
}

/* Blinking cursor — kicks in only after the final line appears */
@keyframes iam-cursor-blink {
  0%, 60% {
    opacity: 0;
  }
  62%, 70% {
    opacity: 1;
  }
  72%, 80% {
    opacity: 0;
  }
  82%, 90% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

/* line 92, app/assets/stylesheets/application.css.scss */
.iam-term-cursor {
  animation: iam-cursor-blink 16s infinite step-end;
}

/* Respect prefers-reduced-motion: skip the reveal, show everything */
@media (prefers-reduced-motion: reduce) {
  /* line 96, app/assets/stylesheets/application.css.scss */
  .iam-term-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* line 97, app/assets/stylesheets/application.css.scss */
  .iam-term-cursor {
    animation: none !important;
    opacity: 1 !important;
  }
}