/* Explain: CSS file for site-wide animations and motion effects. */
/* ===== Professional site-wide motion ===== */

/* Scroll-reveal: hidden until it enters the viewport, then animates in.
   Uses `animation` (not transition) so existing hover transitions stay intact. */
.reveal {
    opacity: 0;
}
.reveal.is-visible {
    opacity: 1;
    animation: revealRise .8s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: var(--reveal-delay, 0s);
}
.reveal-zoom.is-visible {
    animation-name: revealZoom;
}
.reveal-soft.is-visible {
    animation-name: revealSoft;
}

@keyframes revealRise {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: none; }
}
@keyframes revealZoom {
    from { opacity: 0; transform: translateY(24px) scale(.95); }
    to   { opacity: 1; transform: none; }
}
@keyframes revealSoft {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Icon & card hover polish */
.service-icon,
.value-icon,
.info-item-icon,
.branch-flag {
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.service-card:hover .service-icon,
.value-card:hover .value-icon {
    background: var(--accent-color);
    color: #0b2137;
    transform: translateY(-3px) scale(1.06);
}
.branch-card:hover .branch-flag {
    transform: scale(1.12);
}
.why-item:hover .why-item-icon {
    transform: translateY(-3px);
}

/* Soft image zoom on hover */
.why-media img,
.study-media img {
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.why-media:hover img,
.study-media:hover img {
    transform: scale(1.05);
}

/* Button sheen on hover */
.btn-gold,
.btn-navy {
    position: relative;
    overflow: hidden;
}
.btn-gold::after,
.btn-navy::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .65s ease;
}
.btn-gold:hover::after,
.btn-navy:hover::after {
    transform: translateX(130%);
}

/* Floating back-to-top control */
.site-to-top {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 5.25rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(200, 162, 74, .55);
    background: var(--primary-color);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 16px 34px -14px rgba(11, 33, 55, .65);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease;
}
.site-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.site-to-top:hover {
    background: var(--accent-color);
    color: #0b2137;
}

/* Floating WhatsApp contact button */
.site-whatsapp {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.15rem;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    box-shadow: 0 16px 34px -14px rgba(37, 211, 102, .85);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.site-whatsapp i {
    font-size: 1.4rem;
    line-height: 1;
    animation: waWobble 3.4s ease-in-out infinite;
}
.site-whatsapp-badge {
    position: absolute;
    top: -.6rem;
    inset-inline-end: -.6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: .35rem;
    border-radius: 999px;
    border: 2px solid var(--background-color);
    background: #e11d2e;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .78rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 18px -8px rgba(225, 29, 46, .95);
    animation: waBadgePulse 2s ease-in-out infinite;
}
@keyframes waBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); }
}
.site-whatsapp:hover {
    background: #1ebe5b;
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 20px 40px -14px rgba(37, 211, 102, .95);
}
.site-whatsapp::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(37, 211, 102, .7);
    pointer-events: none;
    animation: waHalo 2.6s ease-out infinite;
}
.site-whatsapp:hover::before {
    border-color: rgba(37, 211, 102, .95);
}
@keyframes waHalo {
    0%   { transform: scale(1); opacity: .9; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}
@keyframes waWobble {
    0%, 68%, 100% { transform: rotate(0deg); }
    76%           { transform: rotate(-14deg); }
    84%           { transform: rotate(12deg); }
    92%           { transform: rotate(-6deg); }
}
@media (max-width: 480px) {
    .site-whatsapp {
        inset-inline-end: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        width: 3.25rem;
        height: 3.25rem;
        padding: 0;
        gap: 0;
        justify-content: center;
        align-items: center;
    }
    .site-whatsapp span {
        display: none;
    }
    .site-whatsapp i {
        font-size: 1.55rem;
    }
    .site-whatsapp-badge {
        top: -.35rem;
        inset-inline-end: -.35rem;
        min-width: 1.4rem;
        height: 1.4rem;
        padding-inline: .3rem;
        font-size: .72rem;
    }
    .site-to-top {
        inset-inline-end: 1rem;
        bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
        width: 2.75rem;
        height: 2.75rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-whatsapp {
        transition: none;
        animation: none;
    }
    .site-whatsapp::before {
        display: none;
    }
    .site-whatsapp i {
        animation: none;
    }
    .site-whatsapp-badge {
        animation: none;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible {
        opacity: 1;
        animation: none !important;
        transform: none !important;
    }
    .btn-gold::after,
    .btn-navy::after {
        display: none;
    }
    .site-to-top {
        transition: none;
    }
}