/* Tojumi Health Marketing — Shared Styles */

/* Base typography */
body { font-family: 'DM Sans', sans-serif; color: #203643; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }

/* Scroll reveal animations */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.35s; }
.reveal-delay-5 { transition-delay: 0.4s; }

/* Hero image slow zoom */
@keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
.hero-img { animation: slowZoom 20s ease-in-out infinite alternate; }

/* Floating badge */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-badge { animation: float 4s ease-in-out infinite; }
.float-badge-delay { animation: float 4s ease-in-out 1s infinite; }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s; padding-top: 0; padding-bottom: 0; }
.faq-item.open .faq-answer { max-height: 200px; padding-top: 0.5rem; padding-bottom: 1rem; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s; }

/* Card hover lift */
.card-lift { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(32, 54, 67, 0.15); }

/* Step connector line */
.step-connector { position: relative; }
.step-connector::after {
  content: ''; position: absolute; top: 28px; left: calc(50% + 32px); width: calc(100% - 32px); height: 2px;
  background: linear-gradient(90deg, #C4956A, #EFD5B4); display: none;
}
@media (min-width: 1024px) { .step-connector::after { display: block; } }

/* Grain texture overlay */
.grain::before {
  content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Navigation scroll state */
.nav-scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 1px 3px rgba(32,54,67,0.08); }
.nav-scrolled .logo-light { display: none; }
.nav-scrolled .logo-dark { display: block; }
.nav-link { color: rgba(255,255,255,0.9); transition: color 0.3s; }
.nav-link:hover { color: #EFD5B4; }
.nav-scrolled .nav-link { color: rgba(32, 54, 67, 0.7); }
.nav-scrolled .nav-link:hover { color: #C4956A; }
.nav-cta { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: white; transition: all 0.3s; }
.nav-cta:hover { background: rgba(255,255,255,0.22); }
.nav-scrolled .nav-cta { background: #203643; border-color: transparent; color: white; }
.nav-scrolled .nav-cta:hover { background: rgba(32, 54, 67, 0.85); }
.nav-hamburger { color: white; transition: color 0.3s; }
.nav-scrolled .nav-hamburger { color: #203643; }

/* 404 page animations */
@keyframes floatNum { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.float-num { animation: floatNum 3s ease-in-out infinite; }
@keyframes pulseRing { 0% { transform: scale(0.8); opacity: 0.4; } 100% { transform: scale(1.4); opacity: 0; } }
.pulse-ring { animation: pulseRing 2s ease-out infinite; }