@tailwind base;
@tailwind components;
@tailwind utilities;
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/* =============================================================
   Lightning Rails landing page — animations & custom effects.
   Layout/spacing/colors live in Tailwind utilities; this file
   handles keyframes, masks, gradients, and the typewriter terminal.
   ============================================================= */

.lr-font-serif { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
.lr-font-mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.lr-font-sans  { font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }

html .lr-page {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #0c0c10 !important;
  background: #f6f3ec;
}

/* Contain horizontal overflow on the sections that have over-the-edge
   visuals (hero glow bolts, marquee track) without affecting page-level
   scroll context. */
.lr-marquee,
.lr-hero-clip {
  max-width: 100vw;
  overflow-x: hidden;
}
/* Defensive: every text element under the landing inherits the dark foreground
   unless an inline style or class explicitly overrides it. */
html .lr-page h1,
html .lr-page h2,
html .lr-page h3,
html .lr-page h4,
html .lr-page p,
html .lr-page li,
html .lr-page summary,
html .lr-page span,
html .lr-page div,
html .lr-page a {
  color: inherit;
}
html .lr-page ::selection { background: #f9462f; color: white; }

/* Hero grid + bolts */
.lr-hero-grid {
  background-image:
    linear-gradient(var(--line-c) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-c) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
}
.lr-hero-bolt { filter: blur(60px); opacity: .55; animation: lr-pulse 6s ease-in-out infinite; }
.lr-hero-bolt-coral { background: radial-gradient(circle, var(--bolt) 0%, transparent 60%); }
.lr-hero-bolt-peri  { background: radial-gradient(circle, var(--periwinkle) 0%, transparent 60%); animation-delay: -3s; opacity: .4; }
@keyframes lr-pulse {
  0%,100% { transform: scale(1) rotate(0); opacity: .45; }
  50%     { transform: scale(1.15) rotate(8deg); opacity: .7; }
}

/* Floating bolt SVG accents */
.lr-bolt-float { animation: lr-float 8s ease-in-out infinite; color: var(--bolt); }
@keyframes lr-float {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-10px) rotate(4deg); }
}

/* Live-status dot */
.lr-dot-live {
  background: #22c55e;
  box-shadow: 0 0 0 4px color-mix(in oklab, #22c55e 20%, transparent);
  animation: lr-blink 2s ease-in-out infinite;
}
@keyframes lr-blink { 50% { opacity: .4; } }

/* Headline strike + pop */
.lr-strike { position: relative; color: var(--muted-c); font-style: italic; display: inline-block; }
.lr-strike::after {
  content: ""; position: absolute;
  left: -2%; right: -2%; top: 55%;
  height: 5px; background: var(--bolt);
  transform: scaleX(0); transform-origin: left;
  animation: lr-strike 1.2s .7s cubic-bezier(.5,0,.2,1) forwards;
  border-radius: 6px;
}
@keyframes lr-strike { to { transform: scaleX(1); } }

.lr-pop {
  display: inline-block; color: var(--bolt);
  opacity: 0; transform: translateY(.4em);
  animation: lr-pop 1s 1.6s cubic-bezier(.2,1.6,.3,1) forwards;
}
@keyframes lr-pop { to { opacity: 1; transform: translateY(0); } }

/* Stack-bridge pulse line */
.lr-bridge-bg {
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--bolt) 5%, transparent), transparent);
}
.lr-pulse-line { background: var(--bolt); animation: lr-pulseLine 2.4s linear infinite; opacity: .6; }
@keyframes lr-pulseLine { 0% { top: 0; } 100% { top: 100%; } }

/* Marquee */
.lr-marquee-track { animation: lr-scroll 40s linear infinite; }
.lr-marquee:hover .lr-marquee-track { animation-play-state: paused; }
@keyframes lr-scroll { to { transform: translateX(-50%); } }

/* Reveal-on-scroll — opt-in via .js on <html> so no-JS still shows content */
.js .lr-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.js .lr-reveal.lr-in { opacity: 1; transform: none; }

/* Terminal */
.lr-terminal {
  background: #0d0d12;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px -30px rgba(249,70,47,.35), 0 30px 60px -30px rgba(0,0,0,.6);
  font-family: 'JetBrains Mono', monospace;
  color: #e6e6ee;
}
.lr-term-bar { background: #15151d; border-bottom: 1px solid rgba(255,255,255,.06); }
.lr-term-line { white-space: pre-wrap; line-height: 1.6; margin: 4px 0; }
.lr-term-prompt { color: var(--bolt); font-weight: 700; }
.lr-term-cmd  { color: #e6e6ee; }
.lr-term-out  { color: #9aa0aa; }
.lr-term-ok   { color: #34d399; }
.lr-term-warn { color: #fbbf24; }
.lr-term-key  { color: #c3c8ff; }
.lr-cursor {
  display: inline-block; width: 8px; height: 1em;
  background: var(--bolt); vertical-align: -0.15em; margin-left: 2px;
  animation: lr-blinkCursor 1s steps(2) infinite;
}
@keyframes lr-blinkCursor { 50% { opacity: 0; } }

/* Final CTA grid + glow */
.lr-final-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 75%);
}
.lr-final-glow {
  background: radial-gradient(circle, rgba(249,70,47,.35), transparent 60%);
  filter: blur(60px);
}

/* Pricing featured-card outline */
.lr-price-featured {
  background: linear-gradient(180deg, color-mix(in oklab, var(--bolt) 6%, var(--card)), var(--card));
  outline: 2px solid var(--bolt);
  outline-offset: -2px;
}

/* Founder placeholder gradient (used only if real photo missing) */
.lr-founder-placeholder {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--bolt) 25%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, var(--bg-2) 0 8px, var(--bg) 8px 16px);
}

/* Hero feat (Claudatron flagship card) gradient backdrop */
.lr-feat-flagship {
  background:
    radial-gradient(ellipse at top right, color-mix(in oklab, var(--bolt) 18%, transparent), transparent 60%),
    var(--card);
}

/* FAQ details marker hide */
.lr-faq summary { list-style: none; cursor: pointer; }
.lr-faq summary::-webkit-details-marker { display: none; }
.lr-faq[open] .lr-faq-plus { transform: rotate(45deg); background: var(--bolt); color: white; border-color: var(--bolt); }
.lr-faq-plus { transition: transform .2s, background .2s; }

/* Nav blurred backdrop */
.lr-nav {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line-c);
}

/* Buttons (small custom shadows beyond utility classes) */
.lr-btn-primary,
.lr-btn-primary:visited,
.lr-btn-primary:hover,
.lr-btn-primary:focus {
  background: var(--bolt) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px -10px var(--bolt), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s, box-shadow .2s;
}
.lr-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px var(--bolt) !important; }
.lr-btn-ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line-c);
  transition: background .15s;
}
.lr-btn-ghost:hover { background: var(--card); }
.lr-btn .lr-arrow { transition: transform .2s; display: inline-block; }
.lr-btn:hover .lr-arrow { transform: translateX(3px); }

/* Feature cards hover lift */
.lr-feat {
  transition: transform .25s, box-shadow .25s, border-color .25s;
  background: var(--card);
}
.lr-feat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--bolt) 40%, var(--line-c));
  box-shadow: 0 24px 48px -28px rgba(249,70,47,.35);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
html {
  scroll-behavior: smooth;
}

@plugin "daisyui" {
  themes: light --default;
 }

[data-theme="lightning-theme"]{
  --color-primary: #F9462F;
  --color-primary-content: #ffffff;
  --color-secondary: #000000;
  --color-secondary-content: #ffffff;
  --color-base-100: #ffffff;
  --color-base-200: #C3C8FF;
  --color-base-300: #9FA6FF;
  --color-base-400: #7C85FF;
  --color-base-500: #5964FF;
  --color-base-600: #3643FF;
  --color-base-700: #152642;
  --color-accent: #4C5BD7;
  --color-neutral: #C1C7CD;
  --color-neutral-content: #152642;
}

/* Lightning Rails redesign tokens — global so they don't depend on data-theme */
:root {
  --bolt: #f9462f;
  --bolt-2: #ff7a3d;
  --periwinkle: #c3c8ff;
  --ink: #0c0c10;
  --ink-2: #15151c;
  --paper: #f6f3ec;
  --paper-2: #efe9dc;
  --line-c: rgba(12, 12, 16, .12);
  --muted-c: #6b6b76;
  --bg: #f6f3ec;
  --bg-2: #efe9dc;
  --fg: #0c0c10;
  --card: #fffdf6;
}