/* Modern look + scroll/hover animations. Loaded after style.css. Behaviour: assets/js/animations.js */

/* ---------- Navbar: glass effect, animated underline, soft dropdown ---------- */
.navbar.bg-white { background-color: rgba(255, 255, 255, .84) !important; -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); transition: box-shadow .3s ease; }
.navbar.is-scrolled { box-shadow: 0 10px 30px rgba(16, 42, 67, .08); }
@media (min-width: 992px) {
	.navbar .nav-link { background: linear-gradient(90deg, var(--blue), var(--cyan)) no-repeat .5rem calc(100% - .45rem) / 0px 2px; transition: background-size .3s ease, color .15s ease; }
	.navbar .nav-link:hover, .navbar .nav-link.active { background-size: calc(100% - 1rem) 2px; }
}
.dropdown-menu { animation: dd-in .22s ease both; }
@keyframes dd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Scroll progress bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 1060; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--mint)); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }

/* ---------- Buttons ---------- */
.btn { transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn-primary { background-image: linear-gradient(135deg, #1769e0 0%, #1288d6 100%); border-color: transparent; box-shadow: 0 6px 16px rgba(23, 105, 224, .28); }
.btn-primary:hover, .btn-primary:focus { background-image: linear-gradient(135deg, #1054b6 0%, #0f7bbf 100%); border-color: transparent; box-shadow: 0 12px 26px rgba(23, 105, 224, .38); }
.btn-primary:hover, .btn-outline-primary:hover, .btn-light-cta:hover, .btn-outline-success:hover { transform: translateY(-3px); }
.btn-outline-primary:hover { box-shadow: 0 10px 22px rgba(23, 105, 224, .22); }
.btn:active { transform: translateY(0) scale(.98); }

/* ---------- Hero: entrance animation, drifting blobs, floating glass card ---------- */
.hero { background: radial-gradient(circle at 1px 1px, rgba(23, 105, 224, .09) 1px, transparent 0) 0 0 / 30px 30px, linear-gradient(120deg, #eef7ff 0%, #fff 58%, #effcfc 100%); }
.hero:before { content: ''; position: absolute; width: 440px; height: 440px; left: -150px; bottom: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(23, 105, 224, .16), transparent 70%); animation: blob-a 14s ease-in-out infinite alternate; }
.hero:after { animation: blob-b 16s ease-in-out infinite alternate; }
@keyframes blob-a { to { transform: translate(60px, -40px) scale(1.12); } }
@keyframes blob-b { to { transform: translate(-50px, 40px) scale(1.1); } }
.hero .eyebrow, .hero h1, .hero p.lead, .hero .col-lg-7 > .d-flex { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero .eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .18s; }
.hero p.lead { animation-delay: .34s; }
.hero .col-lg-7 > .d-flex { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-card { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, .95); animation: card-in .9s .3s cubic-bezier(.2, .7, .2, 1) both, card-float 7s 1.3s ease-in-out infinite; }
@keyframes card-in { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-card .check-list li { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.hero-card .check-list li:nth-child(1) { animation-delay: .75s; }
.hero-card .check-list li:nth-child(2) { animation-delay: .87s; }
.hero-card .check-list li:nth-child(3) { animation-delay: .99s; }
.hero-card .check-list li:nth-child(4) { animation-delay: 1.11s; }
.hero-card .check-list li:nth-child(5) { animation-delay: 1.23s; }
.page-hero .container > * { animation: rise .75s cubic-bezier(.2, .7, .2, 1) both; }
.page-hero .container > *:nth-child(2) { animation-delay: .12s; }
.page-hero .container > *:nth-child(3) { animation-delay: .24s; }

/* ---------- Section headings ---------- */
.eyebrow { display: inline-block; padding: .38rem .9rem; background: rgba(23, 105, 224, .08); border-radius: 999px; }
.hero .eyebrow { background: rgba(23, 105, 224, .1); }
.text-center > .section-title:after { content: ''; display: block; width: 56px; height: 4px; margin: .9rem auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.section-soft { background: linear-gradient(180deg, #f4f8fc 0%, #eaf2fa 100%); }
.stats-strip { background: linear-gradient(120deg, #0b2038 0%, var(--navy) 55%, #12406b 100%); }
.stats-strip i { display: inline-block; transition: transform .3s ease; }
.stats-strip .row > div:hover i { transform: translateY(-4px) scale(1.18); }

/* ---------- Cards ---------- */
.service-card, .feature-card, .blog-card, .price-card, .quote-card, .info-card { border-color: rgba(23, 105, 224, .08); box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 12px 32px rgba(23, 65, 107, .06); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.service-card:hover, .feature-card:hover, .blog-card:hover, .price-card:hover, .quote-card:hover { transform: translateY(-8px); border-color: rgba(23, 105, 224, .28); box-shadow: 0 26px 50px rgba(23, 65, 107, .16); }
.service-card, .blog-card { position: relative; overflow: hidden; }
.service-card:before, .blog-card:before { content: ''; position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 3px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.service-card:hover:before, .blog-card:hover:before { transform: scaleX(1); }
.service-card img, .blog-card img, .placeholder-image { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.service-card:hover img, .blog-card:hover img, .service-card:hover .placeholder-image, .blog-card:hover .placeholder-image { transform: scale(1.07); }
.service-card .icon-box, .feature-card .icon-box { transition: transform .35s ease, background .35s ease, color .35s ease; }
.service-card:hover .icon-box, .feature-card:hover .icon-box { color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); transform: rotate(-8deg) scale(1.1); }
.quote-card { position: relative; overflow: hidden; }
.quote-card:before { content: '\201C'; position: absolute; top: -.05em; right: 1rem; color: rgba(23, 105, 224, .08); font: 800 6rem/1 'Plus Jakarta Sans', sans-serif; pointer-events: none; }
.step-no { box-shadow: 0 0 0 0 rgba(25, 184, 197, .45); transition: transform .3s ease; }
.col-lg-3:hover > .text-center > .step-no { transform: scale(1.12); animation: step-pulse 1.2s ease-out infinite; }
@keyframes step-pulse { to { box-shadow: 0 0 0 16px rgba(25, 184, 197, 0); } }
.chip { transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.chip:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(23, 105, 224, .22); }
.accordion-item { transition: box-shadow .3s ease; }
.accordion-item:hover { box-shadow: 0 8px 22px rgba(23, 65, 107, .08); }
.img-fluid.rounded-4 { transition: transform .6s ease, box-shadow .6s ease; }
.img-fluid.rounded-4:hover { transform: scale(1.015); box-shadow: 0 22px 44px rgba(23, 65, 107, .16); }

/* ---------- Call-to-action band ---------- */
.cta { position: relative; overflow: hidden; background: linear-gradient(115deg, #1769e0, #0c9fac, #1769e0); background-size: 220% 220%; animation: cta-shift 12s ease infinite; }
.cta:before, .cta:after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.cta:before { width: 260px; height: 260px; left: -80px; top: -110px; }
.cta:after { width: 200px; height: 200px; right: -60px; bottom: -90px; }
.cta > * { position: relative; z-index: 1; }
@keyframes cta-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Footer + floating buttons ---------- */
.footer-links a { transition: color .15s ease, transform .2s ease; }
.footer-links a:hover { transform: translateX(5px); }
.social-links a { transition: transform .25s ease, background-color .2s ease, border-color .2s ease; }
.social-links a:hover { transform: translateY(-4px) rotate(-6deg); }
.footer-contact .fc-icon { transition: transform .25s ease, background-color .2s ease; }
.footer-contact li:hover .fc-icon { transform: scale(1.12); background: rgba(143, 243, 210, .18); }
.float-wa { position: relative; }
.float-wa:before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #25d366; opacity: .5; animation: ring 2.4s ease-out infinite; }
@keyframes ring { to { transform: scale(1.7); opacity: 0; } }
.float-btn { transition: transform .2s ease; }

/* ---------- Scroll reveal (classes are added by animations.js; nothing is hidden without JS) ---------- */
.rv.rv-up, .rv.rv-zoom, .rv.rv-pop { opacity: 0; will-change: opacity, transform; transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--rv-delay, 0ms), transform .75s cubic-bezier(.2, .7, .2, 1) var(--rv-delay, 0ms); }
.rv.rv-up { transform: translateY(34px); }
.rv.rv-zoom { transform: translateY(18px) scale(.94); }
.rv.rv-pop { transform: scale(.6); }
.rv.rv-in { opacity: 1; transform: none; }

@media (max-width: 575px) { .rv.rv-up { transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
	.hero:before, .hero:after, .hero-card, .cta, .float-wa:before, .step-no { animation: none !important; }
	.hero .eyebrow, .hero h1, .hero p.lead, .hero .col-lg-7 > .d-flex, .hero-card .check-list li, .page-hero .container > * { animation: none !important; opacity: 1 !important; transform: none !important; }
	.rv.rv-up, .rv.rv-zoom, .rv.rv-pop { opacity: 1 !important; transform: none !important; transition: none !important; }
	.service-card:hover, .feature-card:hover, .blog-card:hover, .price-card:hover, .quote-card:hover, .btn:hover, .chip:hover { transform: none; }
}