jhonny-editor/code/landing/app/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-black text-white;
    font-feature-settings: "ss01" 1, "cv02" 1;
  }
  ::selection {
    background: rgb(196 181 253 / 35%);
    color: white;
  }
}

.hero-grid {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 78%);
}

.hero-glow {
  background: radial-gradient(ellipse at 50% 0%, rgb(139 124 255 / 0.11), transparent 68%);
}

.hero-timeline {
  height: 14rem;
  opacity: 0.42;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.timeline-rule,
.timeline-clip {
  position: absolute;
  display: block;
}

.timeline-rule {
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgb(255 255 255 / 0.08);
}

.timeline-rule-one { top: 5.5rem; }
.timeline-rule-two { top: 9.5rem; }

.timeline-clip {
  height: 1.3rem;
  border: 1px solid rgb(196 181 253 / 0.22);
  background: rgb(139 124 255 / 0.09);
  opacity: 0;
  transform: scaleX(0.82);
  transform-origin: left;
  animation: timeline-settle 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.timeline-clip-one { left: 15%; top: 4.8rem; width: 19%; animation-delay: 300ms; }
.timeline-clip-two { left: 42%; top: 4.8rem; width: 30%; animation-delay: 440ms; }
.timeline-clip-three { left: 28%; top: 8.8rem; width: 38%; animation-delay: 580ms; }

.timeline-clip::after {
  position: absolute;
  inset-block: 0;
  left: 20%;
  width: 1px;
  background: rgb(255 255 255 / 0.18);
  content: "";
}

.accent-text {
  color: #c4b5fd;
}

section[id] {
  scroll-margin-top: 5rem;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-150%);
  border-radius: 0.375rem;
  background: white;
  color: black;
  padding: 0.75rem 1rem;
  font-weight: 700;
  transition: transform 150ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #a99cff;
  outline-offset: 3px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

@keyframes marquee-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-100% - var(--gap))); }
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes terminal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0); }
  50% { box-shadow: 0 0 0 5px rgb(16 185 129 / 0.12); }
}

@keyframes timeline-settle {
  from {
    opacity: 0;
    transform: scaleX(0.82);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes timeline-copy-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes timeline-clip-enter {
  from {
    opacity: 0;
    transform: scaleX(0.45);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes waveform-pulse {
  0%, 100% { transform: scaleY(0.68); }
  50% { transform: scaleY(1); }
}

@keyframes timeline-playhead {
  from { left: 4%; }
  to { left: 96%; }
}

@keyframes border-beam-spin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

.timeline-copy-enter {
  opacity: 0;
  animation: timeline-copy-enter 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.timeline-clip-enter {
  opacity: 0;
  animation: timeline-clip-enter 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.timeline-waveform-bar {
  transform-origin: center;
  animation-name: waveform-pulse;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.timeline-playhead {
  animation: timeline-playhead 6.5s linear infinite;
}

.border-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.border-beam::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(160%, var(--border-beam-size));
  aspect-ratio: 1;
  padding: var(--border-beam-width);
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 42%, var(--border-beam-from) 47%, var(--border-beam-to) 52%, transparent 57% 100%);
  content: "";
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transform: translate(-50%, -50%);
  animation: border-beam-spin var(--border-beam-duration) linear var(--border-beam-delay) infinite;
}

.border-beam-reverse::before {
  animation-direction: reverse;
}

.hero-enter {
  opacity: 0;
  animation: hero-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-enter-1 { animation-delay: 80ms; }
.hero-enter-2 { animation-delay: 170ms; }
.hero-enter-3 { animation-delay: 260ms; }
.hero-enter-4 { animation-delay: 350ms; }
.hero-enter-5 { animation-delay: 440ms; }

.terminal-float {
  animation-name: hero-enter, terminal-float;
  animation-duration: 700ms, 7s;
  animation-delay: 350ms, 1.2s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
}

.status-pulse {
  animation: status-pulse 2.4s ease-in-out infinite;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

@supports (animation-timeline: view()) {
  .reveal-section > div {
    animation: hero-enter linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 24%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-enter,
  .terminal-float,
  .status-pulse,
  .timeline-clip,
  .timeline-copy-enter,
  .timeline-clip-enter,
  .timeline-waveform-bar,
  .timeline-playhead,
  .border-beam::before {
    animation: none;
    opacity: 1;
  }
}

@layer utilities {
  .animate-marquee {
    animation: marquee var(--duration) linear infinite;
  }
  .animate-marquee-vertical {
    animation: marquee-vertical var(--duration) linear infinite;
  }
  .animate-gradient {
    animation: gradient 8s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}