/**
 * Kratevia Landing Page Styles
 * A contemplative, modern landing experience
 */

/* ============================================
   LANDING PAGE BASE
   ============================================ */

.landing-page {
  --landing-bg: var(--neutral-925);
  --landing-surface: var(--neutral-850);
  background: var(--landing-bg);
  color: var(--neutral-100);
  overflow-x: hidden;
}

/* Ambient Background */
.landing-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  animation: float 20s ease-in-out infinite;
}

.orb-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -100px;
  background: radial-gradient(circle, var(--accent-500) 0%, transparent 70%);
  animation-delay: 0s;
}

.orb-2 {
  width: 500px;
  height: 500px;
  bottom: -150px;
  left: -100px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  animation-delay: -7s;
}

.orb-3 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  opacity: 0.3;
  animation-delay: -14s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -30px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(20px, 10px) scale(1.02); }
}

.ambient-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* ============================================
   LANDING HEADER
   ============================================ */

.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  padding: var(--space-4) 0;
  transition: all var(--transition-base);
}

.landing-header.scrolled {
  background: rgba(18, 18, 20, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--neutral-50);
}

/* Landing logo - Uses unified .ks-logo from logo.css */

.landing-logo .logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.landing-nav-actions .ks-locale-pill {
  flex-shrink: 0;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-16);
  z-index: 1;
}

.hero-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hero-content {
  max-width: 600px;
}

.hero-eyebrow {
  display: inline-block;
  color: var(--accent-400);
  margin-bottom: var(--space-4);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-semibold);
  line-height: 1.1;
  color: var(--neutral-50);
  margin-bottom: var(--space-6);
}

.hero-accent {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: var(--text-lg);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--neutral-500);
}

.trust-icon {
  font-size: var(--text-base);
}

/* Hero Visual / Mockup */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-mockup {
  perspective: 1000px;
}

.mockup-frame {
  background: var(--neutral-850);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  transform: rotateY(-5deg) rotateX(5deg);
  transition: transform var(--transition-slow);
}

.mockup-frame:hover {
  transform: rotateY(0) rotateX(0);
}

.mockup-header {
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-800);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mockup-dots {
  display: flex;
  gap: var(--space-2);
}

.mockup-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neutral-600);
}

.mockup-dots span:nth-child(1) { background: #ef4444; }
.mockup-dots span:nth-child(2) { background: #fbbf24; }
.mockup-dots span:nth-child(3) { background: #22c55e; }

.mockup-content {
  padding: var(--space-5);
}

.mockup-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mockup-month {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--neutral-100);
  text-align: center;
}

.mockup-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
}

.mockup-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--neutral-400);
  background: var(--neutral-800);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mockup-day.completed {
  background: var(--accent-500);
  color: var(--neutral-900);
  font-weight: var(--font-semibold);
}

.mockup-day.partial {
  background: linear-gradient(135deg, var(--accent-500) 50%, var(--neutral-700) 50%);
  color: var(--neutral-900);
}

.mockup-habits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.mockup-habit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--neutral-800);
  border-radius: var(--radius-lg);
}

.habit-emoji {
  font-size: var(--text-lg);
}

.habit-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--neutral-200);
}

.habit-streak {
  font-size: var(--text-xs);
  color: var(--accent-400);
  font-weight: var(--font-medium);
}

/* ============================================
   METHOD SECTION
   ============================================ */

.method-section {
  position: relative;
  padding: var(--space-24) 0;
  z-index: 1;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-16);
}

.section-header .text-overline {
  color: var(--accent-400);
  margin-bottom: var(--space-4);
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-semibold);
  color: var(--neutral-50);
  margin-bottom: var(--space-6);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.method-card {
  padding: var(--space-8);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-2xl);
  transition: all var(--transition-base);
}

.method-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.method-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-5);
  color: var(--accent-400);
}

.method-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--neutral-100);
  margin-bottom: var(--space-3);
}

.method-description {
  font-size: var(--text-base);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.features-section {
  position: relative;
  padding: var(--space-24) 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.feature-card {
  padding: var(--space-6);
  background: var(--neutral-850);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: all var(--transition-base);
}

.feature-card:hover {
  border-color: var(--accent-600);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.1);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.feature-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--neutral-100);
  margin-bottom: var(--space-2);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
}

/* ============================================
   PHILOSOPHY SECTION
   ============================================ */

.philosophy-section {
  position: relative;
  padding: var(--space-24) 0;
  z-index: 1;
}

.philosophy-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.philosophy-quote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--font-medium);
  font-style: italic;
  color: var(--neutral-100);
  margin-bottom: var(--space-6);
  position: relative;
}

.philosophy-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: -30px;
  font-size: 6rem;
  color: var(--accent-500);
  opacity: 0.2;
  font-style: normal;
}

.philosophy-quote cite {
  display: block;
  font-size: var(--text-base);
  font-style: normal;
  color: var(--accent-400);
  margin-top: var(--space-4);
}

.philosophy-text {
  font-size: var(--text-lg);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
  position: relative;
  padding: var(--space-24) 0;
  z-index: 1;
}

.cta-card {
  position: relative;
  padding: var(--space-16) var(--space-12);
  background: linear-gradient(135deg, var(--neutral-850), var(--neutral-900));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-3xl);
  text-align: center;
  overflow: hidden;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-semibold);
  color: var(--neutral-50);
  margin-bottom: var(--space-4);
}

.cta-description {
  font-size: var(--text-lg);
  color: var(--neutral-400);
  max-width: 500px;
  margin: 0 auto var(--space-8);
}

.cta-actions .btn-primary {
  box-shadow: var(--glow-accent-strong);
}

.cta-decoration {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.decoration-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent-500);
  opacity: 0.1;
  animation: pulse-ring 4s ease-out infinite;
}

.decoration-ring:nth-child(1) {
  width: 300px;
  height: 300px;
  animation-delay: 0s;
}

.decoration-ring:nth-child(2) {
  width: 500px;
  height: 500px;
  animation-delay: 1s;
}

.decoration-ring:nth-child(3) {
  width: 700px;
  height: 700px;
  animation-delay: 2s;
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.3; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* ============================================
   FOOTER
   ============================================ */

.landing-footer {
  position: relative;
  padding: var(--space-16) 0 var(--space-8);
  background: var(--neutral-950);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-brand {
  max-width: 300px;
}

/* Footer logo - Uses unified .ks-logo from logo.css */
.footer-brand .ks-logo {
  margin-bottom: var(--space-4);
}

.footer-tagline {
  color: var(--neutral-500);
  font-size: var(--text-sm);
}

.footer-links {
  display: flex;
  gap: var(--space-16);
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-column h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--neutral-300);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.footer-column a {
  color: var(--neutral-500);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--accent-400);
}

.footer-bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.footer-bottom p {
  color: var(--neutral-600);
  font-size: var(--text-sm);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .hero-section .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-content {
    max-width: 100%;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-trust {
    justify-content: center;
  }
  
  .hero-visual {
    order: -1;
  }
  
  .mockup-frame {
    transform: none;
    max-width: 350px;
  }
  
  .method-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* MOBILE FIX: Mantieni visibile il pulsante Login su mobile
     Il pulsante "Accedi" deve essere sempre accessibile */
  .landing-nav-actions .btn-ghost {
    display: inline-flex;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }
  
  /* Ridimensiona leggermente anche il CTA primario su mobile */
  .landing-nav-actions .btn-primary {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
  }
  
  /* Stack verticale dei pulsanti su schermi molto piccoli */
  .landing-nav-actions {
    gap: var(--space-2);
  }

  .landing-nav-actions .ks-locale-pill__item {
    min-width: 50px;
    padding: 0 var(--space-1-5);
  }
  
  .hero-section {
    min-height: auto;
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-12);
  }
  
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  
  .hero-visual {
    display: none;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-brand {
    max-width: 100%;
  }
  
  .footer-links {
    justify-content: center;
  }
  
  .cta-card {
    padding: var(--space-10) var(--space-6);
  }
  
  .philosophy-quote::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .section-header {
    margin-bottom: var(--space-10);
  }
  
  .method-section,
  .features-section,
  .philosophy-section,
  .cta-section {
    padding: var(--space-16) 0;
  }
}

/* ============================================
   FIREFOX FALLBACK - Prevent background pixelation
   ============================================ */

/* Firefox fallback: evita blur/backdrop che crea banding/pixelation */
@-moz-document url-prefix() {
  /* Disabilita TUTTI i filtri problematici */
  .ambient-orb,
  .orb-1,
  .orb-2,
  .orb-3 {
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* Header scrolled - rimuovi backdrop-filter */
  .landing-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(18, 18, 20, 0.95) !important;
  }

  /* Disabilita transform animations che possono causare pixelazione */
  .ambient-orb {
    animation: none !important;
  }

  /* Rimuovi background-attachment fixed */
  .landing-page,
  .landing-ambient,
  .hero-section {
    background-attachment: scroll !important;
  }

  /* Sostituzione completa dello sfondo con gradienti puliti */
  .landing-page {
    background: 
      radial-gradient(900px 600px at 15% 20%, rgba(245,176,39,0.15), transparent 60%),
      radial-gradient(900px 600px at 80% 30%, rgba(99,102,241,0.12), transparent 55%),
      radial-gradient(1000px 700px at 60% 85%, rgba(16,185,129,0.08), transparent 60%),
      linear-gradient(180deg, #0b0c0f 0%, #0b0c0f 100%) !important;
  }

  /* Disabilita l'ambient noise che può causare problemi */
  .ambient-noise {
    display: none !important;
  }

  /* Assicurati che non ci siano pseudo-elementi con filtri */
  .landing-page::before,
  .landing-page::after,
  .landing-ambient::before,
  .landing-ambient::after,
  .hero-section::before,
  .hero-section::after {
    display: none !important;
  }
}

/* ============================================
   FIREFOX FALLBACK ALTERNATIVO - Metodo universale
   ============================================ */

/* Fallback universale per tutti i browser che hanno problemi con i filtri */
@supports not (-webkit-backdrop-filter: blur(1px)) {
  .ambient-orb,
  .orb-1,
  .orb-2,
  .orb-3 {
    filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
  }

  .landing-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(18, 18, 20, 0.95) !important;
  }

  .ambient-noise {
    display: none !important;
  }

  .landing-page {
    background: 
      radial-gradient(900px 600px at 15% 20%, rgba(245,176,39,0.15), transparent 60%),
      radial-gradient(900px 600px at 80% 30%, rgba(99,102,241,0.12), transparent 55%),
      radial-gradient(1000px 700px at 60% 85%, rgba(16,185,129,0.08), transparent 60%),
      linear-gradient(180deg, #0b0c0f 0%, #0b0c0f 100%) !important;
  }
}

/* ============================================
   FIREFOX SPECIFIC FIX - Disabilita completamente gli effetti problematici
   ============================================ */

/* Fix specifico per Firefox usando @supports */
@supports (display: -moz-box) {
  .ambient-orb {
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }

  .orb-1, .orb-2, .orb-3 {
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }

  .landing-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .ambient-noise {
    display: none !important;
  }

  /* Forza background pulito */
  .landing-page {
    background: #0b0c0f !important;
  }

  /* Disabilita completamente l'ambient container che causa problemi */
  .landing-ambient {
    display: none !important;
  }
}