/* =========================================================
   VANESSA INTERIORS — ANIMATIONS & MICRO-INTERACTIONS
   Loaded after responsive.css. Pairs with js/animations.js.
   Everything here is gated by html.anim, which animations.js
   adds only when JavaScript runs and the visitor has not asked
   for reduced motion — without it the site renders fully static.
   Only transform / opacity (and clip-path for large images)
   are animated.
   ========================================================= */

:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);      /* soft editorial ease */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --reveal-distance: 30px;
    --reveal-x: 36px;
    --reveal-duration: .85s;
    --stagger-step: 90ms;
}

/* =========================================================
   1. SCROLL REVEAL SYSTEM
   Classes: .reveal .reveal-left .reveal-right .reveal-scale
            .reveal-fade .stagger-item .img-reveal
   JS adds .is-visible when the element enters the viewport and
   sets --i (position within the batch) for staggered delays.
   ========================================================= */
html.anim .reveal,
html.anim .reveal-left,
html.anim .reveal-right,
html.anim .reveal-scale,
html.anim .reveal-fade,
html.anim .stagger-item {
    opacity: 0;
    transition:
        opacity var(--reveal-duration) var(--ease-out),
        transform var(--reveal-duration) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
html.anim .reveal,
html.anim .stagger-item { transform: translate3d(0, var(--reveal-distance), 0); }
html.anim .reveal-left  { transform: translate3d(calc(var(--reveal-x) * -1), 0, 0); }
html.anim .reveal-right { transform: translate3d(var(--reveal-x), 0, 0); }
html.anim .reveal-scale { transform: translate3d(0, 16px, 0) scale(.97); }

html.anim .reveal.is-visible,
html.anim .reveal-left.is-visible,
html.anim .reveal-right.is-visible,
html.anim .reveal-scale.is-visible,
html.anim .reveal-fade.is-visible,
html.anim .stagger-item.is-visible { opacity: 1; transform: none; }

/* image reveal: soft clip opening + settle from 1.03 */
html.anim .img-reveal {
    clip-path: inset(6% 6% 6% 6% round var(--radius-lg));
    transform: scale(1.03);
    opacity: .001;
    transition:
        clip-path 1.2s var(--ease-out),
        transform 1.4s var(--ease-out),
        opacity .6s ease;
}
html.anim .img-reveal.is-visible {
    clip-path: inset(0 0 0 0 round var(--radius-lg));
    transform: none;
    opacity: 1;
}

/* =========================================================
   2. HERO SEQUENCES (play on load, no scroll needed)
   ========================================================= */
@keyframes heroUp {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroImage {
    from { clip-path: inset(8% 8% 8% 8% round var(--radius-lg)); transform: scale(1.05); opacity: .001; }
    to   { clip-path: inset(0 0 0 0 round var(--radius-lg)); transform: none; opacity: 1; }
}
@keyframes frameIn {
    from { opacity: 0; transform: translate3d(-14px, -14px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes markIn {
    from { opacity: 0; transform: translate3d(0, -10px, 0) rotate(-8deg) scale(.9); }
    to   { opacity: 1; transform: none; }
}

/* text: eyebrow → headline → description → buttons → stats */
html.anim .hero__grid > div:first-child > *,
html.anim .page-hero__grid > div:first-child > *,
html.anim .page-hero .container > div:not(.page-hero__grid) > * {
    animation: heroUp .9s var(--ease-out) backwards;
}
html.anim .hero__grid > div:first-child > :nth-child(1),
html.anim .page-hero__grid > div:first-child > :nth-child(1),
html.anim .page-hero .container > div > :nth-child(1) { animation-delay: .05s; }
html.anim .hero__grid > div:first-child > :nth-child(2),
html.anim .page-hero__grid > div:first-child > :nth-child(2),
html.anim .page-hero .container > div > :nth-child(2) { animation-delay: .15s; }
html.anim .hero__grid > div:first-child > :nth-child(3),
html.anim .page-hero__grid > div:first-child > :nth-child(3),
html.anim .page-hero .container > div > :nth-child(3) { animation-delay: .27s; }
html.anim .hero__grid > div:first-child > :nth-child(4),
html.anim .page-hero__grid > div:first-child > :nth-child(4),
html.anim .page-hero .container > div > :nth-child(4) { animation-delay: .35s; }
html.anim .hero__grid > div:first-child > :nth-child(5) { animation-delay: .42s; }
html.anim .hero__grid > div:first-child > :nth-child(6) { animation-delay: .5s; }
html.anim .hero__grid > div:first-child > :nth-child(7) { animation-delay: .6s; }
html.anim .page-hero .breadcrumb { animation: heroFade .8s ease backwards; }

/* hero artwork: image opens up, yellow frame settles, butterfly lands */
html.anim .hero__art,
html.anim .page-hero__art { opacity: 1; transform: none; }
html.anim .art-frame > img:not(.art-frame__mark) { animation: heroImage 1.3s var(--ease-out) .2s backwards; }
html.anim .art-frame::before { animation: frameIn 1.1s var(--ease-out) .55s backwards; }
html.anim .art-frame__mark { animation: markIn .9s var(--ease-out) 1s backwards; }

/* =========================================================
   3. HEADER — compacts smoothly on scroll (no layout shift:
   only the logo scales; the bar keeps its height)
   ========================================================= */
.site-header { transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease; }
.brand img { transform-origin: left center; transition: transform .45s var(--ease-out); }
.site-header.is-scrolled .brand img { transform: scale(.88); }
@media (min-width: 1081px) {
    .site-header.is-scrolled { background-color: rgba(255, 255, 255, .97); }
}

/* =========================================================
   4. BUTTONS & LINKS
   ========================================================= */
.btn {
    transition:
        background-color .3s ease, color .3s ease, border-color .3s ease,
        transform .35s var(--ease-out), box-shadow .35s ease;
}
.btn:active { transform: scale(.98); transition-duration: .1s; }
.link-arrow .icon { transition: transform .35s var(--ease-out); }

@media (hover: hover) {
    .btn:hover { transform: translateY(-2px); }
    .btn--primary:hover { box-shadow: 0 16px 30px -14px rgba(212, 33, 63, .85); }
    .btn--whatsapp:hover { box-shadow: 0 14px 26px -14px rgba(23, 138, 69, .8); }
    .btn--outline:hover, .btn--dark:hover { box-shadow: 0 14px 26px -16px rgba(34, 28, 30, .6); }
}

/* =========================================================
   5. CARDS — lift, image zoom, icon & CTA movement
   ========================================================= */
.card,
.why-card,
.value-list li,
.blog-card,
.mv-card,
.project-card {
    transition: transform .5s var(--ease-out), box-shadow .5s ease, border-color .4s ease, background-color .4s ease;
}
.service-card__media img,
.cat-card img,
.gallery-item img,
.project-card__media img { transition: transform 1s var(--ease-out); }
.icon-tile { transition: transform .45s var(--ease-out), background-color .3s ease, color .3s ease; }

@media (hover: hover) {
    .card--hover:hover { transform: translateY(-6px); }
    .service-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 24px 44px -22px rgba(34, 28, 30, .35); }
    .service-card:hover .service-card__media img { transform: scale(1.05); }
    .card--hover:hover .icon-tile,
    .why-card:hover .icon-tile,
    .card:hover > .icon-tile { transform: translateY(-3px); }
    .why-card:hover,
    .value-list li:hover,
    .blog-card:hover,
    .mv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .blog-card:hover .link-arrow .icon { transform: translateX(4px); }
    .service-mini:hover .icon-tile { transform: translateY(-2px) rotate(-4deg); }
}

/* =========================================================
   6. PORTFOLIO / CATEGORY IMAGES — zoom + soft overlay
   ========================================================= */
.cat-card { transition: transform .5s var(--ease-out), box-shadow .5s ease; }
.cat-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
    aspect-ratio: 4 / 3; pointer-events: none;
    background: linear-gradient(180deg, rgba(28, 22, 24, 0) 45%, rgba(28, 22, 24, .28) 100%);
    opacity: 0; transition: opacity .6s ease;
}
.project-card__media { overflow: hidden; }
@media (hover: hover) {
    .cat-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -22px rgba(34, 28, 30, .35); }
    .cat-card:hover img { transform: scale(1.03); }
    .cat-card:hover::before { opacity: 1; }
    .cat-card:hover .link-arrow .icon { transform: translateX(4px); }
    .project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .project-card:hover .project-card__media img { transform: scale(1.03); }
}

/* =========================================================
   7. GALLERY — hover overlay & lightbox open/close
   ========================================================= */
.gallery-item { transition: transform .5s var(--ease-out), box-shadow .5s ease; }
.gallery-item__btn { position: relative; }
.gallery-item__btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 34px no-repeat,
        linear-gradient(180deg, rgba(28, 22, 24, .05), rgba(28, 22, 24, .38));
    opacity: 0; transition: opacity .5s ease;
}
@media (hover: hover) {
    .gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .gallery-item__btn:hover img { transform: scale(1.04); }
    .gallery-item__btn:hover::after { opacity: 1; }
}
.gallery-grid.is-filtering .gallery-item { animation: heroUp .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }

@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbFigIn { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lbOut { from { opacity: 1; } to { opacity: 0; } }
.lightbox:not([hidden]) { animation: lbIn .3s ease backwards; }
.lightbox:not([hidden]) .lightbox__figure { animation: lbFigIn .45s var(--ease-out) .05s backwards; }
.lightbox.is-closing { animation: lbOut .22s ease both; }
.lightbox__figure img { transition: opacity .25s ease; }
.lightbox__nav, .lightbox__close { transition: background-color .25s ease, transform .3s var(--ease-out); }
@media (hover: hover) {
    .lightbox__nav:hover, .lightbox__close:hover { transform: scale(1.08); }
}

/* =========================================================
   8. WHATSAPP FLOATING BUTTON
   Pulses gently three times after load, then rests.
   ========================================================= */
.float-wa { transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.float-wa::after { animation: waPulse 2.6s var(--ease-out) 1.5s 3 backwards; }
@keyframes waIn { from { opacity: 0; transform: translateY(16px) scale(.85); } to { opacity: 1; transform: none; } }
html.anim .float-wa { animation: waIn .7s var(--ease-out) .9s backwards; }
@media (hover: hover) {
    .float-wa:hover { transform: scale(1.08); box-shadow: 0 18px 36px -12px rgba(18, 140, 75, .75); }
}
.mobile-bar a, .mobile-bar button { transition: transform .2s ease, background-color .2s ease; }
.mobile-bar a:active, .mobile-bar button:active { transform: scale(.96); }

/* =========================================================
   9. COST ESTIMATOR (UI only — calculation untouched)
   ========================================================= */
.type-card label { transition: border-color .3s ease, background-color .3s ease, box-shadow .35s ease, transform .4s var(--ease-out); }
.type-card .icon-tile { transition: background-color .3s ease, color .3s ease, transform .45s var(--ease-out); }
.type-card input:checked + label .icon-tile { transform: scale(1.06); }
@keyframes checkPop {
    0% { opacity: 0; transform: scale(.4); }
    70% { opacity: 1; transform: scale(1.12); }
    100% { transform: scale(1); }
}
.type-card input:checked + label::after { animation: checkPop .38s var(--ease-out) backwards; }
.opt label { transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .3s var(--ease-out); }
.opt label::before { transition: border-width .3s var(--ease-out), border-color .3s ease; }
.opt input:checked + label { transform: translateY(-1px); }
.est-error:not(:empty) { animation: heroUp .35s var(--ease-out) backwards; }
.estimate-result.is-shown { animation: resultIn .6s var(--ease-out) backwards; }
.estimate-result.is-shown dl > div { animation: heroUp .55s var(--ease-out) backwards; }
.estimate-result.is-shown dl > div:nth-child(2) { animation-delay: .05s; }
.estimate-result.is-shown dl > div:nth-child(3) { animation-delay: .1s; }
.estimate-result.is-shown dl > div:nth-child(4) { animation-delay: .15s; }
.estimate-result.is-shown dl > div:nth-child(5) { animation-delay: .2s; }

/* =========================================================
   10. POPUP (size & content unchanged)
   Open: overlay fades, dialog rises from scale .96.
   Close: quicker fade with a slight scale down.
   ========================================================= */
.lead-modal__backdrop { transition: opacity .2s ease; }
.lead-modal__dialog {
    transform: translateY(10px) scale(.96);
    transition: opacity .2s ease, transform .2s ease;
}
.lead-modal.is-open .lead-modal__backdrop { transition-duration: .3s; }
.lead-modal.is-open .lead-modal__dialog {
    transform: none;
    transition: opacity .3s ease, transform .38s var(--ease-out);
}
.lead-modal__close { transition: background-color .25s ease, transform .35s var(--ease-out); }
@media (hover: hover) { .lead-modal__close:hover { transform: rotate(90deg); } }
.lead-modal__success:not([hidden]) { animation: heroUp .45s var(--ease-out) backwards; }
.lead-modal__success:not([hidden]) .success-mark { animation: checkPop .5s var(--ease-out) .1s backwards; }

/* =========================================================
   11. FAQ ACCORDION — smooth height handled in JS;
   the plus icon turns into an ✕ as it opens.
   ========================================================= */
.faq summary { transition: color .25s ease; }
.faq summary::after { transition: transform .4s var(--ease-out), background-color .3s ease; }
.faq details.is-closing summary::after { transform: none; background-color: transparent; }
.faq__answer { will-change: auto; }

/* =========================================================
   12. CTA BANDS — gentle drift of the background glows
   ========================================================= */
@keyframes glowDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-28px, 18px, 0); }
}
html.anim .cta-band::before { animation: glowDrift 12s var(--ease-in-out) infinite alternate; }
html.anim .cta-band::after  { animation: glowDrift 15s var(--ease-in-out) infinite alternate-reverse; }
html.anim .estimate-result::before,
html.anim .promo-card::before { animation: glowDrift 14s var(--ease-in-out) infinite alternate; }

/* =========================================================
   13. FOOTER — underline links, lift icons
   ========================================================= */
.footer-links a,
.footer-bottom a,
.footer-contact a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: color .25s ease, background-size .35s var(--ease-out);
}
.footer-social a { transition: background-color .3s ease, border-color .3s ease, transform .35s var(--ease-out); }
@media (hover: hover) {
    .footer-links a:hover,
    .footer-bottom a:hover,
    .footer-contact a:hover { background-size: 100% 1px; }
    .footer-social a:hover { transform: translateY(-3px); }
}

/* small shared motions */
.chip { transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .3s var(--ease-out); }
.chip:active { transform: scale(.97); }
.link-list a { transition: border-color .3s ease, color .3s ease, transform .35s var(--ease-out); }
@media (hover: hover) { .link-list a:hover { transform: translateY(-2px); } }

/* =========================================================
   14. MOBILE & TABLET — shorter distances, quicker timing
   ========================================================= */
@media (max-width: 960px) {
    :root { --reveal-x: 0px; }  /* side slides become simple fade-ups */
    html.anim .reveal-left, html.anim .reveal-right { transform: translate3d(0, var(--reveal-distance), 0); }
}
@media (max-width: 720px) {
    :root {
        --reveal-distance: 16px;
        --reveal-duration: .6s;
        --stagger-step: 60ms;
    }
    html.anim .img-reveal { clip-path: inset(3% 3% 3% 3% round var(--radius-lg)); transform: scale(1.02); }
    html.anim .hero__grid > div:first-child > *,
    html.anim .page-hero__grid > div:first-child > *,
    html.anim .page-hero .container > div:not(.page-hero__grid) > * { animation-duration: .65s; }
}

/* =========================================================
   15. REDUCED MOTION — everything shows instantly
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html.anim .reveal, html.anim .reveal-left, html.anim .reveal-right,
    html.anim .reveal-scale, html.anim .reveal-fade, html.anim .stagger-item,
    html.anim .img-reveal { opacity: 1; transform: none; clip-path: none; }
}