/* ============================================================
   BuddhaAgro — Custom Stylesheet
   Extracted from index.html + Enhancement styles
   ============================================================ */

/* ─── Material Symbols Override ─── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Scroll Reveal Animations ─── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }

/* ─── Sticky Nav Shadow on Scroll ─── */
.nav-scrolled {
    box-shadow: 0 2px 24px rgba(0, 52, 43, 0.09);
}

/* ─── Mobile Menu Drawer ─── */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.open {
    max-height: 480px;
}

/* ─── Hamburger Icon Rotation ─── */
#hamburger-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}
#mobile-menu-btn.open #hamburger-icon {
    transform: rotate(90deg);
}

/* ─── Lifecycle: Track line + animated fill ─── */
.lifecycle-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(0, 52, 43, 0.10);
    transform: translateY(-50%);
    display: none;
    overflow: hidden;
}
@media (min-width: 768px) {
    .lifecycle-track { display: block; }
}
.lifecycle-line-fill {
    height: 100%;
    width: 0;
    background-color: #004d40;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.lifecycle-line-fill.animated {
    width: 100%;
}

/* ─── Lifecycle Step Cards ─── */
.lifecycle-step {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.lifecycle-step.animated {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Bar Chart Animation ─── */
.chart-bar {
    height: 0 !important;
    transition: height 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chart-bar.animated {
    height: var(--bar-h) !important;
}

/* ─── Form Field Error State ─── */
.field-error {
    border-color: #ba1a1a !important;
    background-color: #fff8f7 !important;
}
.field-error-msg {
    color: #ba1a1a;
    font-size: 11px;
    margin-top: 4px;
    display: none;
    font-weight: 500;
}
.field-error-msg.visible {
    display: block;
}

/* ─── Form Success State ─── */
#form-success {
    display: none;
    text-align: center;
    padding: 48px 24px;
}
#form-success.visible {
    display: block;
    animation: fadeInUp 0.5s ease forwards;
}
.success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #afefdd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: popIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

/* ─── Keyframes ─── */
@keyframes popIn {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}