/* =========================================================
   DHARMA LIFE SCIENCE — MOTION DESIGN SYSTEM
   animations.css
   ========================================================= */

/* ----------------------------------------------------------
   1. CORE KEYFRAME LIBRARY
   ---------------------------------------------------------- */

@keyframes dls-fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dls-fadeDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dls-fadeLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes dls-fadeRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes dls-scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes dls-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
@keyframes dls-floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-8px) rotate(1deg); }
    66%       { transform: translateY(4px) rotate(-1deg); }
}
@keyframes dls-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes dls-gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes dls-pulse-ring {
    0%   { transform: scale(1); opacity: 0.6; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes dls-morphBg {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
@keyframes dls-headerScroll {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes dls-ripple {
    0%   { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}
@keyframes dls-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes dls-countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dls-gradientText {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ----------------------------------------------------------
   2. SCROLL-REVEAL — base state & active state
   ---------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.reveal-left  { transform: translateX(-44px); }
.reveal.reveal-right { transform: translateX(44px); }
.reveal.reveal-scale { transform: scale(0.9); }
.reveal.revealed {
    opacity: 1;
    transform: none;
}

/* Stagger delays */
.reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.54s; }

/* ----------------------------------------------------------
   3. HERO ENTRANCE ANIMATIONS
   ---------------------------------------------------------- */

.hero-content {
    animation: dls-fadeLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.hero-graphic {
    animation: dls-fadeRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.hero-content .badge {
    animation: dls-fadeDown 0.6s ease 0.05s both;
}
.hero-content h1 {
    animation: dls-fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.hero-content > p {
    animation: dls-fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
.hero-cta {
    animation: dls-fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}

/* Hero image float */
.hero-image-style {
    animation: dls-floatSlow 7s ease-in-out infinite;
}

/* Morphing glow blob */
.hero-svg-bg {
    animation: dls-morphBg 10s ease-in-out infinite;
    background: radial-gradient(circle, rgba(0, 119, 182, 0.1) 0%, transparent 70%) 50%, transparent 70%);
}

/* ----------------------------------------------------------
   4. HEADER
   ---------------------------------------------------------- */

header {
    animation: dls-headerScroll 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
header.scrolled {
    box-shadow: 0 4px 24px rgba(11, 19, 43, 0.12);
}

/* Nav underline slide */
.nav-item a {
    position: relative;
}
.nav-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: #0077b6;
    border-radius: 2px;
    transition: left 0.3s ease, right 0.3s ease;
}
.nav-item a:hover::after,
.nav-item.active a::after {
    left: 8px;
    right: 8px;
}

/* Logo entrance */
.logo-icon {
    animation: dls-scaleIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s both;
}

/* Logo hover shimmer */
.logo-text:hover {
    color: var(--secondary);
    transition: color 0.25s ease;
}

/* ----------------------------------------------------------
   5. SECTION HEADERS — animated underline
   ---------------------------------------------------------- */

.section-header h2 {
    position: relative;
    display: inline-block;
}
.section-header h2::after {
    content: '';
    display: block;
    height: 4px;
    width: 0;
    background: #0077b6;
    border-radius: 4px;
    margin: 0.5rem auto 0 auto;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-header.animated h2::after {
    width: 60px;
}

/* ----------------------------------------------------------
   6. FEATURE CARDS
   ---------------------------------------------------------- */

.feature-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}
.feature-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.feature-card:hover::after  { left: 160%; }
.feature-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 24px 40px -8px rgba(0, 119, 182, 0.18);
    border-color: rgba(0, 119, 182,0.35);
}
.feature-icon {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}
.feature-card:hover .feature-icon {
    transform: rotate(10deg) scale(1.15);
    background-color: rgba(0, 119, 182, 0.18);
}

/* ----------------------------------------------------------
   7. PRODUCT CARDS & 3D INTERACTIVE SHEEN
   ---------------------------------------------------------- */

.product-card, .feature-card, .contact-card, .procedure-step-card {
    transition: transform 0.1s ease-out, box-shadow 0.3s ease !important;
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1200px;
}

/* Dynamic 3D Sheen Reflection Overlay */
.product-card .card-3d-glare,
.feature-card .card-3d-glare,
.contact-card .card-3d-glare,
.hero-graphic .card-3d-glare {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    mix-blend-mode: overlay;
}

.dark-theme .product-card .card-3d-glare,
.dark-theme .feature-card .card-3d-glare,
.dark-theme .contact-card .card-3d-glare {
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 180, 216, 0.3) 0%, rgba(0, 119, 182, 0) 70%);
}

.product-card:hover .card-3d-glare,
.feature-card:hover .card-3d-glare,
.contact-card:hover .card-3d-glare {
    opacity: 1;
}

/* 3D Depth Inner Layering */
.product-card .product-card-img,
.feature-card .feature-icon,
.contact-card-icon {
    transform: translateZ(25px);
    transition: transform 0.2s ease;
}

.product-card .product-badge,
.badge {
    transform: translateZ(35px);
}

.product-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background: #0077b6;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.product-card:hover::before { transform: scaleX(1); }
.product-card:hover {
    box-shadow: 0 24px 48px -10px rgba(0, 119, 182, 0.25) !important;
}

/* ----------------------------------------------------------
   8. BUTTONS — ripple + lift
   ---------------------------------------------------------- */

.btn {
    position: relative;
    overflow: hidden;
}
.btn .ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    transform: scale(0);
    animation: dls-ripple 0.6s linear;
    pointer-events: none;
}
.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 28px rgba(0, 119, 182,0.45) !important;
}
.btn-secondary:hover {
    transform: translateY(-2px);
}

/* ----------------------------------------------------------
   9. PROCESS STEPS
   ---------------------------------------------------------- */

.process-step {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(0, 119, 182,0.15);
}
.process-step-number {
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, color 0.3s ease;
}
.process-step:hover .process-step-number {
    transform: scale(1.2) rotate(-5deg);
    background: #0077b6;
    color: white;
}

/* ----------------------------------------------------------
   10. CONTACT CARDS
   ---------------------------------------------------------- */

.contact-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -6px rgba(0, 119, 182,0.18) !important;
    border-color: rgba(0, 119, 182,0.3) !important;
}
.contact-card-icon {
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background-color 0.3s ease;
}
.contact-card:hover .contact-card-icon {
    transform: scale(1.15) rotate(5deg);
    background-color: rgba(0, 119, 182,0.15);
}

/* ----------------------------------------------------------
   11. TRUST BANNER — animated gradient
   ---------------------------------------------------------- */

.trust-banner p {
    color: var(--primary);
}

/* ----------------------------------------------------------
   12. HERO CARD — float + tilt
   ---------------------------------------------------------- */

.hero-card {
    animation: dls-scaleIn 0.8s cubic-bezier(0.22,1,0.36,1) 0.35s both;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.hero-card:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    box-shadow: 0 28px 48px -12px rgba(0, 119, 182,0.2);
}

/* ----------------------------------------------------------
   13. SCROLL PROGRESS BAR
   ---------------------------------------------------------- */

#dls-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: #0077b6;
    z-index: 9999;
    transition: width 0.08s linear;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

/* ----------------------------------------------------------
   14. FOOTER LINKS
   ---------------------------------------------------------- */

footer a {
    transition: color 0.25s ease, padding-left 0.25s ease;
    display: inline-block;
}
footer a:hover {
    color: var(--secondary) !important;
    padding-left: 4px;
}

/* ----------------------------------------------------------
   15. ABOUT IMAGES — zoom tilt on hover
   ---------------------------------------------------------- */

.about-hero-visual img {
    transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.about-hero-visual:hover img {
    transform: scale(1.04) rotate(-0.5deg);
}

/* ----------------------------------------------------------
   16. COMPONENT THUMBNAILS
   ---------------------------------------------------------- */

.component-thumbnail {
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1) !important;
    overflow: hidden;
}
.component-thumbnail:hover {
    transform: scale(1.08) !important;
}

/* ----------------------------------------------------------
   17. CHATBOT FAB
   ---------------------------------------------------------- */

#chatbotFab {
    animation: dls-scaleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.2s both;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
#chatbotFab:hover {
    transform: scale(1.12) translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(239,68,68,0.4) !important;
}

/* ----------------------------------------------------------
   18. THEME TOGGLE SPIN
   ---------------------------------------------------------- */

#themeToggleBtn:active svg {
    animation: dls-spin 0.4s linear;
}

/* ----------------------------------------------------------
   19. MOBILE NAV SLIDE
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    .nav-menu.open {
        animation: dls-fadeDown 0.35s cubic-bezier(0.22,1,0.36,1) both;
    }
}

/* ----------------------------------------------------------
   20. REDUCE-MOTION ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}



/* =========================================================
   3D TILT, GLASSMORPHISM & TRENDING MOTION ENHANCEMENTS
   ========================================================= */

@keyframes dls-viewEntrance {
    from { opacity: 0; transform: perspective(1000px) translateY(24px) scale(0.985); }
    to   { opacity: 1; transform: perspective(1000px) translateY(0) scale(1); }
}

@keyframes dls-3dPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 119, 182, 0.4); }
    50%       { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(0, 119, 182, 0); }
}

.view-section.active {
    animation: dls-viewEntrance 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.feature-card, .product-card, .contact-card, .procedure-step-card, .hero-graphic {
    perspective: 1200px !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
}

.feature-card, .product-card, .contact-card {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 12px 32px -6px rgba(11, 19, 43, 0.06), 0 0 0 1px rgba(0, 119, 182, 0.06) !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.feature-card:hover, .product-card:hover, .contact-card:hover {
    border-color: rgba(0, 119, 182, 0.45) !important;
    box-shadow: 0 28px 56px -12px rgba(0, 119, 182, 0.24), 0 0 0 1px rgba(0, 119, 182, 0.25) !important;
}

.feature-icon, .contact-card-icon {
    box-shadow: 0 8px 20px rgba(0, 119, 182, 0.15) !important;
}

.badge {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.2);
}