/**
 * BIOMEDIS Ireland - Kinetic Interaction Mechanics
 * Hardware Accelerated Micro-Animations
 */

@import url("variables.css");

/* =========================================================================
   STRUCTURAL TIMING VARIABLES & BASE LAYER
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
    [data-animation-group] {
        will-change: transform, opacity;
    }
}

/* =========================================================================
   KEYFRAME ARCHITECTURE
   ========================================================================= */
@keyframes premiumFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes microBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.15);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(25, 135, 84, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

/* =========================================================================
   ANIMATION CLASS TRIPPERS
   ========================================================================= */

/* --- Step 1: Premium Mobile Hamburger Transition --- */
.custom-hamburger {
    border: none;
    padding: 0.5rem;
    background: transparent;
}

.custom-hamburger:focus {
    box-shadow: none;
}

.hamburger-box {
    width: 24px;
    height: 18px;
    display: inline-block;
    position: relative;
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--clr-primary-dark);
    position: absolute;
    transition: var(--transition-fast);
}

.modern-navbar.state-transparent .hamburger-inner,
.modern-navbar.state-transparent .hamburger-inner::before,
.modern-navbar.state-transparent .hamburger-inner::after {
    background-color: var(--clr-white);
}

.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-inner::before { content: ""; top: -6px; }
.hamburger-inner::after { content: ""; bottom: -6px; }

/* Expanded Structural Hamburger State */
.custom-hamburger[aria-expanded="true"] .hamburger-inner {
    background-color: transparent !important;
}

.custom-hamburger[aria-expanded="true"] .hamburger-inner::before {
    transform: translateY(6px) rotate(45deg);
    background-color: var(--clr-primary-dark) !important;
}

.custom-hamburger[aria-expanded="true"] .hamburger-inner::after {
    transform: translateY(-6px) rotate(-45deg);
    background-color: var(--clr-primary-dark) !important;
}

/* --- Step 2: Hero Section Subtle Reveal --- */
[data-animation-group="hero"] > * {
    animation: premiumFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[data-animation-group="hero"] .badge { animation-delay: 0.1s; }
[data-animation-group="hero"] h1    { animation-delay: 0.25s; }
[data-animation-group="hero"] p     { animation-delay: 0.4s; }
[data-animation-group="hero"] .hero-actions { animation-delay: 0.55s; }

/* Ambient Scroll Trigger Indicator Loop */
.scroll-trigger-bounce {
    display: inline-block;
    animation: microBounce 2s infinite ease-in-out;
}

/* --- Step 3 & 8: Card Micro-Interactions --- */
.dynamic-action-btn {
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.dynamic-action-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--clr-primary-dark);
    transition: var(--transition-smooth);
    z-index: -1;
}

.premium-product-card:hover .dynamic-action-btn {
    color: var(--clr-white) !important;
    border-color: var(--clr-primary-dark) !important;
}

.premium-product-card:hover .dynamic-action-btn::after {
    height: 100%;
}

/* Values Interactive Glow Effect */
.card-interactive-glow {
    transition: var(--transition-smooth);
}

.card-interactive-glow:hover {
    transform: translateY(-5px);
    background-color: var(--clr-white) !important;
    box-shadow: var(--shadow-premium-md);
    animation: glowPulse 2s infinite ease-in-out;
}