/* Folk Heart Designs — ce-animations.css */

/* ── Keyframes ── */
@keyframes ce-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

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

@keyframes ce-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ce-fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ce-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ce-slide-right {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ce-scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes ce-draw-line {
  from { stroke-dashoffset: 500; }
  to { stroke-dashoffset: 0; }
}

@keyframes ce-morph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes ce-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Animation Utility Classes ── */
.ce-animate-fade-up { animation: ce-fade-up 0.8s ease forwards; }
.ce-animate-fade-in { animation: ce-fade-in 0.6s ease forwards; }
.ce-animate-slide-right { animation: ce-slide-right 0.7s ease forwards; }
.ce-animate-scale-in { animation: ce-scale-in 0.6s ease forwards; }

.ce-delay-1 { animation-delay: 0.15s; }
.ce-delay-2 { animation-delay: 0.3s; }
.ce-delay-3 { animation-delay: 0.45s; }
.ce-delay-4 { animation-delay: 0.6s; }
.ce-delay-5 { animation-delay: 0.75s; }

/* ── Hero Decorative Elements ── */
.ce-hero-deco-circle {
  position: absolute;
  border-radius: 50%;
  animation: ce-pulse-soft 6s ease-in-out infinite;
}
.ce-hero-deco-circle-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(196,114,74,0.12) 0%, transparent 70%);
  right: -100px; top: 50%; transform: translateY(-50%);
}
.ce-hero-deco-circle-2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(122,158,126,0.1) 0%, transparent 70%);
  left: 10%; bottom: 10%;
  animation-delay: 2s;
}
.ce-hero-deco-morph {
  position: absolute;
  background: linear-gradient(135deg, rgba(196,114,74,0.08), rgba(212,168,67,0.08));
  animation: ce-morph 10s ease-in-out infinite;
  width: 500px; height: 500px;
  right: 5%; top: 50%; transform: translateY(-50%);
}

/* ── SVG Wavy Dividers ── */
.ce-wave-divider { display: block; width: 100%; overflow: hidden; line-height: 0; }
.ce-wave-divider svg { display: block; width: 100%; }

/* ── Floating Elements ── */
.ce-float { animation: ce-float 5s ease-in-out infinite; }
.ce-float-delayed { animation: ce-float 5s ease-in-out infinite 2s; }

/* ── Gradient Text ── */
.ce-gradient-text {
  background: linear-gradient(135deg, var(--ce-clay), var(--ce-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hover Reveal ── */
.ce-hover-reveal {
  position: relative; overflow: hidden;
}
.ce-hover-reveal-content {
  position: absolute; inset: 0;
  background: rgba(28,28,28,0.85);
  opacity: 0; transition: opacity 0.35s ease;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
  text-align: center;
}
.ce-hover-reveal:hover .ce-hover-reveal-content { opacity: 1; }

/* ── Underline Anim ── */
.ce-underline-anim {
  position: relative; display: inline;
  background-image: linear-gradient(var(--ce-clay), var(--ce-clay));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s ease;
  padding-bottom: 2px;
}
.ce-underline-anim:hover { background-size: 100% 2px; }

/* ── Ticker ── */
.ce-ticker-wrap { overflow: hidden; padding: 16px 0; background: var(--ce-charcoal); }
.ce-ticker-track {
  display: flex; width: max-content;
  animation: ce-ticker 30s linear infinite;
}
.ce-ticker-item {
  white-space: nowrap; padding: 0 48px;
  font-family: var(--ce-font-accent);
  font-size: 0.75rem; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.ce-ticker-item span { color: var(--ce-clay-light); }

/* ── Micro-interactions ── */
.ce-micro-hover {
  transition: transform 0.2s ease;
}
.ce-micro-hover:hover { transform: scale(1.02); }

/* ── Parallax Container ── */
.ce-parallax { will-change: transform; }

/* ── Stagger Children ── */
.ce-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ce-stagger.ce-visible > * { opacity: 1; transform: translateY(0); }
.ce-stagger.ce-visible > *:nth-child(1) { transition-delay: 0.1s; }
.ce-stagger.ce-visible > *:nth-child(2) { transition-delay: 0.2s; }
.ce-stagger.ce-visible > *:nth-child(3) { transition-delay: 0.3s; }
.ce-stagger.ce-visible > *:nth-child(4) { transition-delay: 0.4s; }

/* ── Number Counter ── */
.ce-counter-num {
  font-family: var(--ce-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900; color: var(--ce-clay);
  display: block;
}

/* ── Background patterns ── */
.ce-bg-dots {
  background-image: radial-gradient(circle, rgba(196,114,74,0.15) 1px, transparent 1px);
  background-size: 28px 28px;
}
.ce-bg-lines {
  background-image: repeating-linear-gradient(
    90deg, rgba(196,114,74,0.04) 0px, rgba(196,114,74,0.04) 1px,
    transparent 1px, transparent 40px
  );
}

/* ── Hero abstract visual ── */
.ce-hero-visual {
  position: relative; height: 520px;
}
.ce-hero-img-main {
  position: absolute; top: 0; right: 0;
  width: 90%; height: 440px; object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--ce-shadow-lg);
}
.ce-hero-img-accent {
  position: absolute; bottom: 0; left: 0;
  width: 55%; height: 280px; object-fit: cover;
  border-radius: 4px;
  border: 6px solid var(--ce-warm-white);
  box-shadow: var(--ce-shadow-lg);
  animation: ce-float 6s ease-in-out infinite;
}
.ce-hero-dot-pattern {
  position: absolute; right: 0; bottom: 0;
  width: 120px; height: 120px;
  background-image: radial-gradient(circle, var(--ce-clay) 2px, transparent 2px);
  background-size: 14px 14px; opacity: 0.3;
}