/*
 * 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.
 */

/* Pre-launch Landing Page Styles */
@keyframes float-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-float-in {
  animation: float-in 0.6s ease-out forwards;
}

.animate-float-in-delay-1 {
  animation: float-in 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

.animate-float-in-delay-2 {
  animation: float-in 0.6s ease-out 0.4s forwards;
  opacity: 0;
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* Enhanced hover effects for value props */
.value-prop-card:hover {
  transform: translateY(-8px);
  transition: all 0.3s ease;
}

.value-prop-icon {
  transition: all 0.3s ease;
}

.value-prop-card:hover .value-prop-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Before/After comparison enhancements */
.before-after-card {
  position: relative;
  overflow: hidden;
}

.before-after-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(45deg, transparent, rgba(139, 92, 246, 0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: exclude;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

/* Form enhancements */
.form-field {
  position: relative;
}

.form-field input:focus {
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.form-field input:valid {
  border-color: #10b981;
}

/* Button hover effects */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

/* Stimulus controller animations */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes shake-error {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake-error {
  animation: shake-error 0.5s ease-in-out;
}

/* Teaser page animations */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Overlay fade-in */
.overlay-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* YearFlow Calendar Branding Overrides */
.yearflow-container {
  --yf-primary: #7c3aed;
  --yf-primary-light: #8b5cf6;
  --yf-primary-dark: #6d28d9;
  --yf-accent: #a78bfa;

  /* Responsive container settings */
  width: 100%;
  position: relative;
}

/* Ensure the calendar content doesn't break layout */
.yearflow-container > * {
  max-width: 100%;
}

/* Override legend item hover states */
.yearflow-container [class*="legend"] button:hover {
  border-color: #7c3aed;
}

/* Fix legend text overflow - ensure labels don't get cut off */
.yearflow-container aside li span,
.yearflow-container aside li input[type="text"] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Ensure legend items have enough space */
.yearflow-container aside {
  min-width: 320px;
}

/* Ensure calendar header matches app style */
.yearflow-container [class*="header"] {
  font-weight: 600;
}

/* Active/selected states use violet */
.yearflow-container [class*="selected"],
.yearflow-container [class*="active"] {
  --yf-selection-color: #7c3aed;
}

/* Smooth transitions */
.yearflow-container * {
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Mobile-specific styles */
@media (max-width: 640px) {
  .yearflow-container {
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  /* Make calendar grid more compact on mobile */
  .yearflow-container [class*="calendar"],
  .yearflow-container [class*="grid"] {
    font-size: 0.875rem;
  }

  /* Ensure month names are readable */
  .yearflow-container [class*="month"] {
    font-size: 0.75rem;
  }
}

/* Tablet and up */
@media (min-width: 641px) and (max-width: 1024px) {
  .yearflow-container {
    padding: 1rem;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .yearflow-container {
    padding: 1.5rem;
  }
}

/* Additional responsive class styles */
.yearflow-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Ensure calendar table/grid is scrollable on mobile */
.yearflow-responsive table,
.yearflow-responsive [role="grid"] {
  min-width: 640px;
}

@media (min-width: 768px) {
  .yearflow-responsive table,
  .yearflow-responsive [role="grid"] {
    min-width: auto;
  }
}

/* ==========================================================================
   Variable Autocomplete Component
   Used in email template forms for variable suggestions and syntax highlighting
   ========================================================================== */

/* Container with layered textarea and highlight overlay */
.variable-editor-container {
  position: relative;
  width: 100%;
}

/* The visible textarea - transparent background to show highlight layer */
.variable-editor-input {
  position: relative;
  z-index: 2;
  background: transparent;
  caret-color: #1f2937;
  resize: vertical;
}

/* Highlight layer positioned behind the textarea */
.variable-editor-highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  padding: 0.5rem 0.75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  color: transparent;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
}

/* Variable pills - base styles
   Pills sit in the highlight layer BEHIND the textarea.
   Text must be transparent so it doesn't conflict with textarea text above.
   Only backgrounds and borders are visible through the transparent textarea. */
.variable-pill {
  display: inline;
  padding: 0.0625rem 0;
  margin: 0 -2px 0 0;
  border-radius: 0.1875rem;
  font-size: inherit;
  line-height: inherit;
  color: transparent !important; /* Text invisible - textarea text shows above */
  box-sizing: border-box;
}

/* Valid variable - blue pill background */
.variable-pill-valid {
  background-color: #dbeafe;
  box-shadow: inset 0 0 0 1px #93c5fd;
}

/* Typing state - neutral gray (shown while autocomplete is active) */
.variable-pill-typing {
  background-color: #f3f4f6;
  box-shadow: inset 0 0 0 1px #d1d5db;
}

/* Unknown variable - red error (only shown after blur) */
.variable-pill-unknown {
  background-color: #fee2e2;
  box-shadow: inset 0 0 0 1px #fca5a5;
  text-decoration: underline wavy #dc2626;
  text-underline-offset: 2px;
}

/* Unclosed brace - orange warning (only shown after blur) */
.variable-pill-error {
  background-color: #fef3c7;
  box-shadow: inset 0 0 0 1px #fcd34d;
  text-decoration: underline wavy #f59e0b;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Autocomplete Dropdown Menu
   ========================================================================== */

.variable-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 0.25rem;
  min-width: 280px;
  max-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 0.25rem;
}

.variable-autocomplete-menu {
  min-width: 280px;
  max-width: 400px;
  max-height: 320px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  padding: 0.25rem;
  list-style: none;
  margin: 0;
}

.variable-autocomplete-category {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.variable-autocomplete-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 150ms;
}

.variable-autocomplete-item:hover,
.variable-autocomplete-item:focus,
.variable-autocomplete-item[aria-selected="true"],
.variable-autocomplete-item-selected {
  background-color: #f3f4f6;
  outline: none;
}

.variable-autocomplete-item:focus,
.variable-autocomplete-item-selected {
  background-color: #e0e7ff;
}

.variable-autocomplete-item-name {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  color: #1f2937;
}

.variable-autocomplete-item-desc {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.125rem;
}

.variable-autocomplete-empty {
  padding: 0.75rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* ==========================================================================
   Error List
   ========================================================================== */

.variable-error-list {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
}

.variable-error-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.375rem;
  font-size: 0.75rem;
}

.variable-error-item + .variable-error-item {
  border-top: 1px solid #fecaca;
  margin-top: 0.25rem;
  padding-top: 0.625rem;
}

.variable-error-icon {
  flex-shrink: 0;
  color: #dc2626;
}

.variable-error-unclosed .variable-error-icon {
  color: #d97706;
}

.variable-error-message {
  color: #991b1b;
}

.variable-error-unclosed .variable-error-message {
  color: #92400e;
}

/* Mirror element for cursor position calculation (CSP-safe) */
.variable-autocomplete-mirror {
  position: absolute;
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* ==========================================================================
   text-expander-element styles
   ========================================================================== */

text-expander {
  display: block;
  width: 100%;
}

text-expander[open] .variable-autocomplete-menu {
  display: block;
}

/* Position the menu under the caret */
text-expander > .suggester-container {
  position: absolute;
  z-index: 100;
}

/* ==========================================================================
   Usage Progress Bars (CSP-compliant)
   Uses CSS custom properties for dynamic widths without inline styles
   ========================================================================== */

.usage-progress-bar {
  width: var(--progress-width, 0%);
  max-width: 100%;
  transition: width 300ms ease-in-out;
}

/* ==========================================================================
   Homepage Hero Styles (moved from inline to avoid CSP issues)
   ========================================================================== */

.gradient-mesh {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
  position: relative;
  overflow: hidden;
}

.gradient-mesh::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
  animation: meshFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes meshFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(10px, 10px) rotate(1deg); }
}

.feature-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(124, 58, 237, 0.12);
}

.signal-wave {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Signature font class */
.signature-font {
  font-family: 'Allura', cursive;
}