/* ==========================================================================
 BoldVibe Studio | Premium motion & interactive hovers
 ========================================================================== */

:root {
 --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 --shadow-glow: 0 0 40px rgba(255, 77, 0, 0.35);
 --shadow-lift: 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* ── Scroll reveal ── */
.reveal {
 opacity: 0;
 transform: translateY(40px);
 transition:
 opacity 0.9s var(--ease-out-expo),
 transform 0.9s var(--ease-out-expo);
}

.reveal.visible {
 opacity: 1;
 transform: translateY(0);
}

/* GSAP drives opacity/transform via inline styles */
html.js-gsap .reveal,
html.js-gsap .reveal-stagger > * {
 transition: none;
}

.reveal-stagger > * {
 opacity: 0;
 transform: translateY(28px);
 transition:
 opacity 0.75s var(--ease-out-expo),
 transform 0.75s var(--ease-out-expo);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }

.reveal-stagger.visible > * {
 opacity: 1;
 transform: translateY(0);
}

/* ── GSAP split headings (line mask) ── */
.gsap-split-heading {
 overflow: hidden;
}

.gsap-split-heading .split-line {
 display: block;
 overflow: hidden;
 line-height: inherit;
}

.gsap-split-heading .split-line-inner {
 display: block;
}

body:not(.gsap-ready) .hero-enter .hero-enter-item:not(.gsap-split-heading) {
 opacity: 0;
}

body.gsap-ready .hero-enter .hero-enter-item {
 opacity: 1;
 transform: none;
}

.hero-bg-text {
 animation: hero-bg-drift 18s ease-in-out infinite alternate;
}

@keyframes hero-bg-drift {
 from { transform: translate(-50%, -50%) scale(1); }
 to { transform: translate(-48%, -52%) scale(1.03); }
}

/* ── Nav ── */
.site-nav {
 transition:
 background 0.4s var(--ease-out-quart),
 padding 0.4s var(--ease-out-quart),
 box-shadow 0.4s var(--ease-out-quart);
}

.site-nav.is-scrolled {
 padding-block: 20px;
 background: rgba(10, 10, 10, 0.92);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1100px) {
 .site-nav.is-scrolled {
 padding-block: 20px;
 }
}

.nav-logo {
 transition: transform 0.35s var(--ease-out-expo), opacity 0.25s ease;
}

.nav-logo:hover {
 transform: scale(1.02);
 opacity: 0.92;
}

.nav-links a {
 position: relative;
}

.nav-links a::after {
 display: none;
}

/* ── Buttons with arrow ── */
.btn-primary,
.btn-ghost {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 overflow: hidden;
 isolation: isolate;
 transition:
 background 0.35s var(--ease-out-quart),
 border-color 0.35s var(--ease-out-quart),
 color 0.35s ease,
 transform 0.4s var(--ease-spring),
 box-shadow 0.4s var(--ease-out-quart);
}

.btn-primary::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
 transform: translateX(-120%);
 transition: transform 0.6s var(--ease-out-expo);
 z-index: 0;
}

.btn-primary:hover::before {
 transform: translateX(120%);
}

.btn-primary::after,
.btn-ghost::after {
 content: '';
 flex-shrink: 0;
 width: 18px;
 height: 18px;
 background: currentColor;
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
 mask-size: contain;
 mask-repeat: no-repeat;
 mask-position: center;
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
 -webkit-mask-size: contain;
 transition: transform 0.4s var(--ease-spring);
 position: relative;
 z-index: 1;
}

.btn-primary span,
.btn-ghost span {
 position: relative;
 z-index: 1;
}

body:not(.gsap-ready) .btn-primary:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow-glow);
}

.btn-primary:hover::after,
.btn-ghost:hover::after {
 transform: translateX(5px);
}

/* Keep header CTA compact, no arrow / lift effects */
.site-nav .nav-cta::before,
.site-nav .nav-cta::after {
 content: none !important;
 display: none !important;
}

body:not(.gsap-ready) .btn-ghost:hover {
 transform: translateY(-3px);
 border-color: rgba(242, 237, 230, 0.45);
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* ── Text links with arrow ── */
.link-arrow,
.cta-email,
.footer-links a,
.why-cta-banner-link {
 position: relative;
 display: inline-flex;
 align-items: center;
 gap: 10px;
 transition:
 color 0.3s ease,
 opacity 0.3s ease,
 gap 0.4s var(--ease-spring),
 transform 0.4s var(--ease-spring);
}

.footer-links a::after,
.cta-email::after {
 content: '';
 width: 14px;
 height: 14px;
 background: currentColor;
 opacity: 0;
 transform: translateX(-6px);
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
 mask-size: contain;
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
 -webkit-mask-size: contain;
 transition:
 opacity 0.3s ease,
 transform 0.4s var(--ease-spring);
}

.footer-links a:hover::after,
.cta-email:hover::after {
 opacity: 1;
 transform: translateX(0);
}

.footer-links a:hover,
.cta-email:hover {
 gap: 14px;
}

.why-cta-banner-link .bv-icon,
.why-cta-banner-link svg.lucide {
 transition: transform 0.45s var(--ease-spring);
}

.why-cta-banner-link:hover {
 gap: 20px;
 transform: translateX(4px);
}

.why-cta-banner-link:hover .bv-icon,
.why-cta-banner-link:hover svg.lucide {
 transform: translate(6px, -2px);
}

/* ── Cards & panels ── */
.testi-card,
.why-eng-card,
.step {
 transition:
 transform 0.45s var(--ease-out-expo),
 background 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.45s var(--ease-out-expo);
}

.testi-card:hover,
.why-eng-card:hover,
.cap-card:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow-lift);
}

.step:hover {
 transform: translateY(-4px);
}

.why-eng-num {
 transition: color 0.35s ease, transform 0.45s var(--ease-spring);
}

.why-eng-card:hover .why-eng-num {
 transform: scale(1.05);
 color: var(--accent);
}

/* ── Stats pulse on reveal ── */
.stat-num,
.why-stat-num {
 transition: transform 0.5s var(--ease-spring);
}

.stat-num.is-counted,
.why-stat-num.is-counted {
 animation: stat-pop 0.6s var(--ease-spring);
}

@keyframes stat-pop {
 0% { transform: scale(0.92); }
 50% { transform: scale(1.04); }
 100% { transform: scale(1); }
}

/* ── Testimonial / UI buttons ── */
.why-testimonial-btn {
 transition:
 transform 0.35s var(--ease-spring),
 background 0.25s ease,
 border-color 0.25s ease,
 box-shadow 0.35s ease;
}

.why-testimonial-btn:hover {
 transform: scale(1.08);
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.why-testimonial-btn:active {
 transform: scale(0.96);
}

/* ── Compare rows highlight ── */
.why-compare-cell--bold {
 transition: background 0.35s ease;
}

.why-compare-row:hover .why-compare-cell--bold {
 background: #1a1a1a;
}

/* ── Footer logo ── */
.footer-logo {
 transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease;
}

.footer-logo:hover {
 transform: translateX(4px);
 opacity: 0.85;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
 .reveal,
 .reveal-stagger > *,
 .hero-enter .hero-enter-item {
 opacity: 1 !important;
 transform: none !important;
 animation: none !important;
 transition: none !important;
 }

 .hero-bg-text {
 animation: none;
 }

 .btn-primary:hover,
 .btn-ghost:hover,
 .service-card-reveal {
 position: relative;
 inset: auto;
 width: auto;
 height: auto;
 transform: none;
 margin-top: 16px;
 min-height: auto;
 display: flex;
 flex-direction: column;
 row-gap: 18px;
 }

 .service-card-front {
 position: relative;
 inset: auto;
 width: auto;
 height: auto;
 opacity: 1 !important;
 visibility: visible !important;
 pointer-events: auto;
 }

 .service-card {
 min-height: auto;
 cursor: default;
 }

 .testi-card:hover,
 .why-eng-card:hover {
 transform: none;
 }
}