/*
 Theme Name:   Tickle Smart Recliner Child
 Theme URI:    https://ticklesmart.com
 Description:  Child theme of Hello Elementor for Tickle Smart Recliner Solutions. Adds the light B2B design system, scroll-driven touch panel animation, and feature showcase styling.
 Author:       Tickle Smart Team
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  tickle-smart-child
*/

:root {
  --tsr-primary: #2563EB;
  --tsr-text-navy: #0F172A;
  --tsr-bg-1: #F8FAFC;
  --tsr-bg-2: #EEF4FF;
  --tsr-bg-white: #FFFFFF;
  --tsr-accent-teal: #14B8A6;
  --tsr-font-heading: 'Poppins', sans-serif;
  --tsr-font-heading-alt: 'Manrope', sans-serif;
  --tsr-font-body: 'Inter', sans-serif;
}

body {
  background-color: var(--tsr-bg-1);
  color: var(--tsr-text-navy);
  font-family: var(--tsr-font-body);
}

h1, h2, h3, h4 {
  font-family: var(--tsr-font-heading);
  font-weight: 600;
  color: var(--tsr-text-navy);
}

/* ---------- Hero ---------- */
.hero-section {
  position: relative;
  background: linear-gradient(180deg, var(--tsr-bg-white) 0%, var(--tsr-bg-2) 100%);
  overflow: hidden;
}

.hero-section .recliner-image {
  transition: opacity 0.3s ease;
  will-change: opacity;
}

.hero-section .touch-panel {
  position: relative;
  transform-origin: center right;
  will-change: transform;
  filter: drop-shadow(0 20px 40px rgba(15, 23, 42, 0.15));
}

.cta-primary {
  background-color: var(--tsr-primary);
  color: #fff;
  border-radius: 8px;
  padding: 14px 28px;
  font-weight: 600;
  border: none;
}

.cta-secondary {
  background: transparent;
  color: var(--tsr-primary);
  border: 1.5px solid var(--tsr-primary);
  border-radius: 8px;
  padding: 14px 28px;
  font-weight: 600;
}

/* ---------- Feature Showcase ---------- */
.feature-showcase-section {
  background-color: var(--tsr-bg-white);
  padding: 100px 0;
}

.feature-card {
  background: var(--tsr-bg-1);
  border-radius: 12px;
  padding: 28px;
  opacity: 0;
  transform: translateY(30px);
}

.feature-card .feature-icon {
  color: var(--tsr-accent-teal);
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--tsr-bg-2);
  color: var(--tsr-primary);
}

/* ---------- Trust Section ---------- */
.trust-section {
  background-color: var(--tsr-bg-2);
  padding: 80px 0;
  text-align: center;
}

.trust-section .trust-icon {
  color: var(--tsr-text-navy);
  opacity: 0.7;
}

/* ---------- Final CTA ---------- */
.final-cta-section {
  background: linear-gradient(180deg, var(--tsr-bg-white) 0%, var(--tsr-bg-2) 100%);
  padding: 100px 0;
  text-align: center;
}

.final-cta-section .touch-panel-floating {
  animation: tsr-float 4s ease-in-out infinite;
}

@keyframes tsr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------- Mobile ---------- */
@media (max-width: 1024px) {
  .hero-section .touch-panel {
    max-width: 80%;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .final-cta-section .touch-panel-floating {
    animation: none;
  }
}