/* =============================================
   FlatApp Landing - Animations
   Scroll reveals, keyframes, transitions
   ============================================= */

/* ---- Hero Gradient Animation ---- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Float Animation (mockups) ---- */
@keyframes float {
  0%, 100% { transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(0); }
  50%      { transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(-12px); }
}

@keyframes floatSimple {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---- Pulse for CTA ---- */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 130, 90, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(253, 130, 90, 0); }
}

/* ---- Decorative blob drift ---- */
@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -20px) scale(1.05); }
  66%      { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-25px, 25px) scale(0.95); }
  66%      { transform: translate(20px, -15px) scale(1.05); }
}

/* ---- SVG Line Draw ---- */
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ---- Counter digits ---- */
@keyframes countSlide {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- Scroll Reveal Base States ---- */
/* Only hide elements when JS is confirmed running (progressive enhancement) */
html.js-ready [data-reveal] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.js-ready [data-reveal="fade-up"] {
  transform: translateY(40px);
}

html.js-ready [data-reveal="fade-down"] {
  transform: translateY(-40px);
}

html.js-ready [data-reveal="fade-left"] {
  transform: translateX(-50px);
}

html.js-ready [data-reveal="fade-right"] {
  transform: translateX(50px);
}

html.js-ready [data-reveal="scale"] {
  transform: scale(0.9);
}

html.js-ready [data-reveal="zoom-in"] {
  transform: scale(0.8);
}

/* ---- Revealed States ---- */
html.js-ready [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ---- Stagger delays ---- */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* ---- SVG draw revealed ---- */
html.js-ready [data-reveal="draw"].revealed .step-line {
  animation: drawLine 1.2s ease-out forwards;
}

/* ---- Hero specific ---- */
.hero-mockup {
  animation: float 6s ease-in-out infinite;
}

.hero .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
}

.hero .blob-1 {
  width: 400px; height: 400px;
  background: var(--primary-light);
  top: -100px; right: -100px;
  animation: blobDrift1 12s ease-in-out infinite;
}

.hero .blob-2 {
  width: 300px; height: 300px;
  background: var(--primary-dark);
  bottom: -50px; left: -80px;
  animation: blobDrift2 10s ease-in-out infinite;
}

.hero .blob-3 {
  width: 200px; height: 200px;
  background: #fff;
  top: 50%; left: 10%;
  opacity: 0.1;
  animation: blobDrift1 8s ease-in-out infinite;
}

/* ---- Button hover / active ---- */
.btn {
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  animation: pulse 3s ease-in-out infinite;
}

.btn-primary:hover {
  animation: none;
  box-shadow: var(--shadow-lg);
}

/* ---- Card hover ---- */
.card-hover {
  transition: transform 0.3s, box-shadow 0.3s;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ---- Nav link underline slide ---- */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

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

/* ---- Theme transition ---- */
body, .nav-bar, .section, .card-hover, .mockup-frame {
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}