/* Marketing UI Components - LAW-111 */
/* Premium product marketing treatment for ShotPro. */

/* ===== Vibrant Color Palette ===== */
:root {
  --gradient-primary: var(--brand);
  --gradient-cta: var(--brand);
  --gradient-accent: var(--accent);
  --glow-primary: transparent;
  --glow-cta: transparent;
  --glow-accent: transparent;
}

.dark {
  --gradient-primary: var(--brand);
  --gradient-cta: var(--brand);
  --gradient-accent: var(--accent);
  --glow-primary: transparent;
  --glow-cta: transparent;
  --glow-accent: transparent;
}

/* ===== Glow Effect ===== */
.glow {
  box-shadow: none;
}

.glow-sm {
  box-shadow: none;
}

.glow-accent {
  box-shadow: none;
}

/* Text glow */
.text-glow {
  text-shadow: none;
}

/* ===== Glassmorphism ===== */
.glass {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}

.dark .glass {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}

.glass-strong {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}

.dark .glass-strong {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}

/* ===== Spotlight Card ===== */
.spotlight-card {
  position: relative;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 300ms ease;
  transform: translateZ(0); /* Force GPU layer */
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    oklch(65% 0.18 280 / 0.06),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
}

.spotlight-card:hover::before {
  opacity: 1;
}

.spotlight-card:hover {
  border-color: oklch(65% 0.18 280 / 0.3);
}

.spotlight-card > * {
  position: relative;
  z-index: 2;
}

/* ===== Moving Border Button ===== */

@keyframes border-rotate {
  to {
    --border-angle: 360deg;
  }
}

/* Register custom property for animation */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Primary variant with filled background */

/* ===== Background Beams Grid ===== */
.bg-beams {
  position: relative;
  overflow: hidden;
}

.bg-beams::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, oklch(65% 0.18 280 / 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(65% 0.18 280 / 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 70%, transparent 100%);
  pointer-events: none;
}

.dark .bg-beams::before {
  background-image:
    linear-gradient(to right, oklch(72% 0.14 280 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(72% 0.14 280 / 0.05) 1px, transparent 1px);
}

/* Animated beam rays */
.bg-beams-animated::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    oklch(65% 0.18 280 / 0.02) 60deg,
    transparent 120deg
  );
  animation: beam-rotate 20s linear infinite;
  pointer-events: none;
}

@keyframes beam-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Entrance Animations ===== */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealScale {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal-up {
  opacity: 0;
  animation: revealUp 600ms var(--ease-out-expo) forwards;
}

.reveal-scale {
  opacity: 0;
  animation: revealScale 800ms var(--ease-out-expo) forwards;
}

/* Stagger reveals */
.stagger-container > *:nth-child(1) { animation-delay: 50ms; }
.stagger-container > *:nth-child(2) { animation-delay: 120ms; }
.stagger-container > *:nth-child(3) { animation-delay: 190ms; }
.stagger-container > *:nth-child(4) { animation-delay: 260ms; }
.stagger-container > *:nth-child(5) { animation-delay: 330ms; }

/* ===== Hero Highlight Text ===== */

/* ===== Bento Grid ===== */
.bento-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

.bento-item {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.bento-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* Span variations */
.bento-item-wide {
  grid-column: span 2;
}

.bento-item-tall {
  grid-row: span 2;
}

.bento-item-large {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 640px) {
  .bento-item-wide,
  .bento-item-tall,
  .bento-item-large {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .bg-beams-animated::after {
    animation: none;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-container > * {
    opacity: 1;
    transform: none;
  }
}

/* ===== Vibrant CTA Buttons ===== */
.btn-vibrant {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: var(--brand);
  color: var(--surface-elevated);
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out-expo), transform 150ms var(--ease-out-expo);
}

.btn-vibrant:hover {
  background: var(--brand-hover);
  transform: translateY(-0.5px);
}

.btn-vibrant:active {
  transform: translateY(0);
}

/* Outline variant */
.btn-vibrant-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: transparent;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: border-color 150ms var(--ease-out-expo), background-color 150ms var(--ease-out-expo);
}

.btn-vibrant-outline span {
  color: inherit;
}

.btn-vibrant-outline:hover {
  border-color: var(--text-muted);
  background: var(--surface);
}

/* ===== Enhanced Glow Effects ===== */
.glow-vibrant {
  box-shadow:
    0 0 20px var(--glow-cta),
    0 0 40px oklch(65% 0.22 320 / 0.2),
    0 0 60px oklch(65% 0.22 320 / 0.1);
}

.glow-pulse {
  animation: none;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 20px var(--glow-cta),
      0 0 40px oklch(65% 0.22 320 / 0.2);
  }
  50% {
    box-shadow:
      0 0 30px var(--glow-cta),
      0 0 60px oklch(65% 0.22 320 / 0.3),
      0 0 80px oklch(65% 0.22 320 / 0.15);
  }
}

/* Hover glow for cards */
.hover-glow {
  transition: box-shadow 300ms ease;
}

.hover-glow:hover {
  box-shadow:
    0 8px 30px oklch(65% 0.22 280 / 0.15),
    0 4px 12px oklch(0% 0 0 / 0.1);
}

.dark .hover-glow:hover {
  box-shadow:
    0 8px 30px oklch(72% 0.2 280 / 0.2),
    0 4px 12px oklch(0% 0 0 / 0.3);
}

/* ===== Comparison Table ===== */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
}

.comparison-table th,
.comparison-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.comparison-table th {
  background: var(--surface);
  font-weight: 600;
  color: var(--text);
  font-size: 0.9375rem;
}

.comparison-table th:first-child {
  border-top-left-radius: 1rem;
}

.comparison-table th:last-child {
  border-top-right-radius: 1rem;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table tr:last-child td:first-child {
  border-bottom-left-radius: 1rem;
}

.comparison-table tr:last-child td:last-child {
  border-bottom-right-radius: 1rem;
}

.comparison-table tbody tr {
  transition: background-color 150ms ease;
}

.comparison-table tbody tr:hover {
  background: oklch(65% 0.22 280 / 0.03);
}

.dark .comparison-table tbody tr:hover {
  background: oklch(72% 0.2 280 / 0.05);
}

/* Highlight column */
.comparison-table .highlight-col {
  background: oklch(65% 0.22 280 / 0.05);
}

.comparison-table th.highlight-col {
  background: var(--gradient-cta);
  color: white;
}

.dark .comparison-table .highlight-col {
  background: oklch(72% 0.2 280 / 0.08);
}

.dark .comparison-table th.highlight-col {
  background: var(--gradient-cta);
  color: white;
}

/* Check/cross icons */
.comparison-check {
  color: oklch(65% 0.18 145);
}

.comparison-cross {
  color: oklch(60% 0.2 25);
}

/* ===== Progress Indicators ===== */
.progress-bar {
  width: 100%;
  height: 0.5rem;
  background: var(--surface);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--gradient-cta);
  border-radius: 9999px;
  /* Use transform for animation instead of width to avoid layout thrashing */
  transform-origin: left center;
  transition: transform 500ms ease-out;
}

.progress-bar-animated .progress-bar-fill {
  background-size: 200% 100%;
  animation: progress-shimmer 2s ease-in-out infinite;
}

@keyframes progress-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Step progress */
.progress-steps {
  display: flex;
  align-items: center;
  gap: 0;
}

.progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.progress-step-pending {
  background: var(--surface);
  color: var(--text-muted);
  border: 2px solid var(--border);
}

.progress-step-active {
  background: var(--gradient-cta);
  color: white;
  border: none;
  box-shadow: 0 0 20px var(--glow-cta);
}

.progress-step-completed {
  background: oklch(65% 0.18 145);
  color: white;
  border: none;
}

.progress-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 2rem;
}

.progress-step-line-completed {
  background: oklch(65% 0.18 145);
}

/* ===== Rigid Technical Hover Card Effect ===== */
.card-float {
  transition: border-color 150ms var(--ease-out-expo), transform 150ms var(--ease-out-expo), box-shadow 150ms var(--ease-out-expo);
  border: 1px solid var(--border);
}

.card-float:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* ===== Shimmer Loading Effect ===== */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(100% 0 0 / 0.1) 50%,
    transparent 100%
  );
  animation: shimmer-move 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer-move {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ===== Gradient Border Card ===== */
.card-gradient-border {
  position: relative;
  background: var(--surface-elevated);
  border-radius: 1rem;
  border: 1px solid var(--border);
}

.card-gradient-border-content {
  background: var(--surface-elevated);
  border-radius: inherit;
  padding: 1.5rem;
}

/* ===== Text Gradient Underline ===== */
.link-gradient {
  position: relative;
  color: var(--text);
  text-decoration: none;
}

.link-gradient::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--gradient-cta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease;
}

.link-gradient:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ===== Morphing Shape Background ===== */
.bg-morph {
  position: relative;
  overflow: hidden;
}

.bg-morph::before,
.bg-morph::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.18;
  pointer-events: none;
}

.bg-morph::before {
  top: -10%;
  left: -10%;
  background: oklch(65% 0.12 280 / 0.24);
}

.bg-morph::after {
  bottom: -10%;
  right: -10%;
  background: oklch(75% 0.09 180 / 0.2);
}

@keyframes morph-1 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    border-radius: 50%;
  }
  33% {
    transform: translate(10%, 10%) scale(1.1);
    border-radius: 40% 60% 60% 40%;
  }
  66% {
    transform: translate(-5%, 5%) scale(0.95);
    border-radius: 60% 40% 40% 60%;
  }
}

@keyframes morph-2 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    border-radius: 50%;
  }
  33% {
    transform: translate(-10%, -5%) scale(1.05);
    border-radius: 60% 40% 50% 50%;
  }
  66% {
    transform: translate(5%, -10%) scale(1.1);
    border-radius: 40% 60% 50% 50%;
  }
}

/* ===== Page Transition Overlay ===== */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--gradient-cta);
  z-index: 9999;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: bottom;
}

.page-transition-overlay.entering {
  animation: page-enter 400ms ease forwards;
}

.page-transition-overlay.leaving {
  animation: page-leave 400ms ease forwards;
}

@keyframes page-enter {
  0% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  50% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  50.1% {
    transform-origin: top;
  }
  100% {
    transform: scaleY(0);
    transform-origin: top;
  }
}

@keyframes page-leave {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  100% {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* ===== Modal Animations ===== */
.modal-animated {
  animation: modal-enter 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-enter {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-backdrop-animated {
  animation: backdrop-enter 200ms ease;
}

@keyframes backdrop-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ===== Pricing Card Highlight ===== */
.pricing-card-popular {
  position: relative;
  border: 2px solid transparent;
  background-image: linear-gradient(var(--surface-elevated), var(--surface-elevated)), var(--gradient-cta);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.pricing-card-popular::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--gradient-cta);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.2;
  filter: blur(20px);
}

/* ===== Interactive Badge ===== */
.badge-interactive {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background: oklch(65% 0.18 280 / 0.08);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid oklch(65% 0.18 280 / 0.18);
}

@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--glow-cta);
  }
  50% {
    box-shadow: 0 0 0 8px oklch(65% 0.25 320 / 0);
  }
}

/* ===== Number Ticker Styles ===== */
.number-ticker {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===== Feature Icon Container ===== */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: oklch(65% 0.18 280 / 0.1);
  color: var(--brand);
  flex-shrink: 0;
}

.feature-icon-lg {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
}

/* ===== Dark Mode Enhancements ===== */
.dark .bg-beams::before {
  background-image:
    linear-gradient(to right, oklch(72% 0.14 280 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(72% 0.14 280 / 0.08) 1px, transparent 1px);
}

.dark .spotlight-card::before {
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    oklch(72% 0.2 280 / 0.1),
    transparent 40%
  );
}

.dark .spotlight-card:hover {
  border-color: oklch(72% 0.2 280 / 0.4);
}

.dark .glass {
  background: oklch(0% 0 0 / 0.3);
  border-color: oklch(72% 0.2 280 / 0.15);
}

.dark .bento-item:hover {
  box-shadow:
    0 8px 24px oklch(0% 0 0 / 0.4),
    0 0 40px oklch(72% 0.2 280 / 0.1);
}