/* =========================================================
   MOBILEHUB — LIGHTWEIGHT ANIMATION SYSTEM
   PART 1
   Core reveal + hover animations
   ========================================================= */

/* =========================
   SMOOTH SCROLL
   ========================= */

html {
    scroll-behavior: smooth;
}


/* =========================
   REVEAL ANIMATION
   Used with .reveal
   ========================= */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
    will-change: opacity, transform;
}

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


/* =========================
   HERO ENTRANCE
   ========================= */

.hero-content {
    animation: heroContentIn 0.7s ease-out both;
}

.hero-visual {
    animation: heroVisualIn 0.75s ease-out 0.08s both;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroVisualIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================
   BUTTON INTERACTION
   ========================= */

.btn,
.availability-btn,
.mini-enquiry {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.btn:hover,
.availability-btn:hover,
.mini-enquiry:hover {
    transform: translateY(-2px);
}

.btn:active,
.availability-btn:active,
.mini-enquiry:active {
    transform: translateY(0);
}


/* =========================
   NAVIGATION LINKS
   ========================= */

.nav-links a {
    position: relative;
    transition: color 0.2s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* =========================
   LOGO
   ========================= */

.logo-icon {
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.logo:hover .logo-icon {
    transform: rotate(-4deg);
}


/* =========================
   CATEGORY ITEMS
   ========================= */

.category-item {
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.category-item:hover {
    transform: translateY(-3px);
}


/* =========================
   PRODUCT CARDS
   ========================= */

.product-feature {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

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

.product-image img {
    transition:
        transform 0.45s ease;
}

.product-feature:hover .product-image img {
    transform: scale(1.025);
}


/* =========================
   ACCESSORY CARDS
   ========================= */

.accessory-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.accessory-card:hover {
    transform: translateY(-5px);
}

.accessory-image {
    overflow: hidden;
}

.accessory-image img {
    transition: transform 0.4s ease;
}

.accessory-card:hover .accessory-image img {
    transform: scale(1.035);
}


/* =========================
   APPROACH / ABOUT CARDS
   ========================= */

.approach-card,
.about-product-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.approach-card:hover,
.about-product-card:hover {
    transform: translateY(-4px);
}


/* =========================
   CONTACT METHOD CARDS
   ========================= */

.contact-method {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.contact-method:hover {
    transform: translateY(-3px);
}

.method-arrow {
    transition: transform 0.2s ease;
}

.contact-method:hover .method-arrow {
    transform: translate(2px, -2px);
}


/* =========================
   TEXT LINKS
   ========================= */

.text-link {
    transition:
        color 0.2s ease,
        gap 0.2s ease;
}

.text-link i {
    transition: transform 0.2s ease;
}

.text-link:hover i {
    transform: translateX(4px);
}






















































/* =========================================================
   MOBILEHUB — ANIMATION SYSTEM
   PART 2
   Lightweight ambient + interaction animations
   ========================================================= */

/* =========================
   FLOATING CHIPS
   ========================= */

.floating-chip {
    animation: chipFloat 4s ease-in-out infinite;
    will-change: transform;
}

.chip-two {
    animation-delay: 1.2s;
}

@keyframes chipFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


/* =========================
   HERO IMAGE
   ========================= */

.hero-device {
    animation: deviceFloat 5s ease-in-out infinite;
    will-change: transform;
}

@keyframes deviceFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


/* =========================
   LOCATION ICON
   ========================= */

.location-icon {
    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.location-inner:hover .location-icon {
    transform: translateY(-2px);
}


/* =========================
   ICON HOVER
   ========================= */

.why-icon,
.approach-icon,
.highlight-icon,
.about-product-icon,
.contact-method-icon {
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}

.why-point:hover .why-icon,
.approach-card:hover .approach-icon,
.about-highlight:hover .highlight-icon,
.about-product-card:hover .about-product-icon,
.contact-method:hover .contact-method-icon {
    transform: translateY(-3px);
}


/* =========================
   STORE BADGE
   ========================= */

.values-badge,
.store-image-badge {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.values-visual:hover .values-badge,
.store-image:hover .store-image-badge {
    transform: translateY(-3px);
}


/* =========================
   IMAGE LABEL
   ========================= */

.image-label {
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.about-intro-image:hover .image-label {
    transform: translateY(-3px);
}


/* =========================
   FOOTER SOCIAL ICONS
   ========================= */

.footer-socials a {
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

.footer-socials a:hover {
    transform: translateY(-3px);
}


/* =========================
   FLOATING ACTION BUTTONS
   ========================= */

.floating-call,
.floating-whatsapp {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.floating-call:hover,
.floating-whatsapp:hover {
    transform: translateY(-3px);
}


/* =========================
   FORM INPUTS
   ========================= */

.form-group input,
.form-group textarea {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
}


/* =========================
   MAP CARD
   ========================= */

.map-card {
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.map-card:hover {
    transform: translateY(-2px);
}


/* =========================
   STORE CTA MARK
   ========================= */

.store-cta-mark i {
    transition: transform 0.25s ease;
}

.store-cta-card:hover .store-cta-mark i {
    transform: translateY(-3px);
}


/* =========================
   ACTIVE PRESS FEEDBACK
   ========================= */

a:active,
button:active {
    transition-duration: 0.08s;
}


/* =========================
   DISABLE ANIMATIONS FOR
   REDUCED-MOTION USERS
   ========================= */

@media (prefers-reduced-motion: reduce) {

    .floating-chip,
    .hero-device {
        animation: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .btn:hover,
    .accessory-card:hover,
    .product-feature:hover,
    .contact-method:hover,
    .approach-card:hover,
    .about-product-card:hover {
        transform: none;
    }
}








































































/* =========================================================
   MOBILEHUB — ANIMATION SYSTEM
   PART 3
   Performance, page-load polish & accessibility
   ========================================================= */

/* =========================
   IMAGE RENDERING
   ========================= */

img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================
   GPU-FRIENDLY TRANSITIONS
   ========================= */

.product-feature,
.accessory-card,
.approach-card,
.about-product-card,
.contact-method,
.btn,
.floating-call,
.floating-whatsapp {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================
   IMAGE LOADING POLISH
   ========================= */

.product-image img,
.accessory-image img,
.hero-device img,
.store-image img,
.about-intro-image img,
.values-image img {
    opacity: 0;
    animation: imageReveal 0.5s ease forwards;
}

@keyframes imageReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================
   FOOTER REVEAL
   ========================= */

.footer {
    animation: footerReveal 0.5s ease both;
}

@keyframes footerReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================
   BUTTON ICON MOTION
   ========================= */

.btn i,
.availability-btn i,
.mini-enquiry i {
    transition: transform 0.2s ease;
}

.btn:hover i {
    transform: translateX(3px);
}

.availability-btn:hover i,
.mini-enquiry:hover i {
    transform: scale(1.08);
}


/* =========================
   WHATSAPP BUTTON
   ========================= */

.floating-whatsapp:hover {
    box-shadow:
        0 8px 25px rgba(37, 211, 102, 0.22);
}


/* =========================
   CALL BUTTON
   ========================= */

.floating-call:hover {
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.16);
}


/* =========================
   FOCUS ACCESSIBILITY
   ========================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* =========================
   NO ANIMATION ON HIDDEN
   MOBILE NAV ELEMENTS
   ========================= */

@media (max-width: 768px) {

    .navbar {
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;
    }

}


/* =========================
   LOW POWER / REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .product-image img,
    .accessory-image img,
    .hero-device img,
    .store-image img,
    .about-intro-image img,
    .values-image img {
        opacity: 1;
    }

    .footer {
        animation: none;
    }
}


/* =========================
   SMALL SCREEN PERFORMANCE
   ========================= */

@media (max-width: 480px) {

    .floating-chip,
    .hero-device {
        animation-duration: 6s;
    }

    .reveal {
        transform: translateY(12px);
        transition-duration: 0.45s;
    }

    .product-feature:hover,
    .accessory-card:hover,
    .approach-card:hover,
    .about-product-card:hover,
    .contact-method:hover {
        transform: none;
    }

    .product-feature:hover .product-image img,
    .accessory-card:hover .accessory-image img {
        transform: none;
    }
}


/* =========================
   PRINT
   ========================= */

@media print {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .floating-call,
    .floating-whatsapp,
    .menu-btn {
        display: none !important;
    }
}