/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animate-slide-in-right { animation: slide-in-right 0.3s ease-out; }
.animate-fade-out { animation: fade-out 0.3s ease-out forwards; }

turbo-frame[busy] .skeleton-loading { display: grid !important; }
turbo-frame[busy] .actual-content { opacity: 0.4; pointer-events: none; }

/* Hide horizontal scrollbar for edge-to-edge scroll containers (e.g. status pills) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================
   LIZA — Dark Sections
   Hero dark, Privacy dark, CTA dark, Cursor AI
   ============================================================ */

/* ─── 1. HERO DARK ─────────────────────────────────────────── */

.liza-hero-dark {
  background-color: #0f1117 !important;
  background-image:
    linear-gradient(rgba(255, 107, 71, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 71, 0.07) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  position: relative;
  overflow: hidden;
}

.liza-hero-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 62% 45%,
    rgba(255, 107, 71, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.liza-hero-dark > * {
  position: relative;
  z-index: 1;
}

.liza-hero-dark .inline-flex.rounded-full {
  background-color: rgba(255, 107, 71, 0.15) !important;
  color: #ffb49a !important;
  border: 1px solid rgba(255, 107, 71, 0.25) !important;
}

.liza-hero-dark h1 {
  color: #f1f5f9 !important;
}

.liza-hero-dark p.text-lg,
.liza-hero-dark p.text-xl {
  color: #94a3b8 !important;
}

.liza-hero-dark a.border.border-gray-300 {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  background-color: transparent !important;
}
.liza-hero-dark a.border.border-gray-300:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.liza-hero-dark p.text-xs {
  color: #475569 !important;
}

.liza-hero-dark .rounded-2xl.border.border-gray-100 {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.liza-hero-dark .aspect-video.bg-gray-100 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.liza-hero-dark .aspect-video span {
  color: #334155 !important;
}

.liza-hero-dark .absolute.-bottom-4 {
  background-color: rgba(15, 17, 23, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.liza-hero-dark .absolute.-bottom-4 span {
  color: #94a3b8 !important;
}

.liza-hero-dark + section,
.liza-hero-dark + div {
  border-top: none !important;
}


/* ─── 2. PRIVACY DARK ──────────────────────────────────────── */

.liza-privacy-dark {
  background-color: #111827 !important;
  position: relative;
}

.liza-privacy-dark p.text-sm.font-semibold {
  color: rgba(255, 107, 71, 0.85) !important;
}

.liza-privacy-dark h2 {
  color: #f1f5f9 !important;
}

.liza-privacy-dark > div > p {
  color: #94a3b8 !important;
}

.liza-privacy-dark .rounded-xl.border.border-gray-100 {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.liza-privacy-dark .rounded-lg.bg-orange-50 {
  background-color: rgba(255, 107, 71, 0.15) !important;
}

.liza-privacy-dark h3,
.liza-privacy-dark .font-semibold {
  color: #f1f5f9 !important;
}

.liza-privacy-dark .text-sm.leading-6.text-gray-600 {
  color: #94a3b8 !important;
}

.liza-privacy-dark svg {
  color: #FF6B47 !important;
}

.liza-privacy-dark + section,
.liza-privacy-dark + div {
  border-top: none !important;
}


/* ─── 3. CTA DARK ──────────────────────────────────────────── */

.liza-cta-dark {
  background-color: #0f1117 !important;
  background-image:
    linear-gradient(rgba(255, 107, 71, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 71, 0.07) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  position: relative;
  overflow: hidden;
}

.liza-cta-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    rgba(255, 107, 71, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.liza-cta-dark > * {
  position: relative;
  z-index: 1;
}

.liza-cta-dark h2 {
  color: #f1f5f9 !important;
}

.liza-cta-dark p.text-lg {
  color: #94a3b8 !important;
}

.liza-cta-dark p.text-sm {
  color: rgba(255, 107, 71, 0.65) !important;
}

.liza-cta-dark a {
  background-color: #FF6B47 !important;
  color: #ffffff !important;
}
.liza-cta-dark a:hover {
  background-color: #e85d3c !important;
}

.liza-privacy-dark,
.liza-cta-dark {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}


/* ─── 4. CURSOR AI ─────────────────────────────────────────── */

body.liza-custom-cursor,
body.liza-custom-cursor * {
  cursor: none !important;
}

#liza-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#liza-cursor.is-visible {
  opacity: 1;
}

#liza-cursor-ring2 {
  width: 58px;
  height: 58px;
  border: 0.5px solid rgba(255, 107, 71, 0.18);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: liza-spin-ccw 7s linear infinite;
}
#liza-cursor-ring2::before {
  content: '';
  position: absolute;
  bottom: -1.5px;
  left: 50%;
  width: 3px;
  height: 3px;
  background: rgba(255, 107, 71, 0.45);
  border-radius: 50%;
  transform: translateX(-50%);
}

#liza-cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 107, 71, 0.85);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: liza-spin-cw 4s linear infinite;
  box-shadow:
    0 0 10px rgba(255, 107, 71, 0.25),
    inset 0 0 8px rgba(255, 107, 71, 0.06);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
#liza-cursor-ring::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #FF6B47;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px #FF6B47;
}

#liza-cursor-crossh {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#liza-cursor-crossh::before,
#liza-cursor-crossh::after {
  content: '';
  position: absolute;
  background: rgba(255, 107, 71, 0.65);
}
#liza-cursor-crossh::before {
  width: 1px;
  height: 14px;
  top: -7px;
  left: 0;
}
#liza-cursor-crossh::after {
  width: 14px;
  height: 1px;
  left: -7px;
  top: 0;
}

#liza-cursor-dot {
  width: 4px;
  height: 4px;
  background: #FF6B47;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px #FF6B47;
}

#liza-cursor-scan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 107, 71, 0.5),
    transparent
  );
  animation: liza-scan 2.2s ease-in-out infinite;
}

.liza-particle {
  position: fixed;
  pointer-events: none;
  z-index: 999998;
  font-size: 9px;
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  color: rgba(255, 107, 71, 0.85);
  font-weight: 600;
  letter-spacing: 0.03em;
  animation: liza-float 1.1s ease-out forwards;
  white-space: nowrap;
  user-select: none;
}

@keyframes liza-spin-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes liza-spin-ccw {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to   { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes liza-scan {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2); }
  50%       { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
}
@keyframes liza-float {
  0%   { opacity: 1;   transform: translateY(0px)    scale(1);   }
  100% { opacity: 0;   transform: translateY(-30px)  scale(0.6); }
}