/* ============================================================================
 *  animacii.css - ФИНИ ДВИЖЕЊА
 * ============================================================================
 *
 *  ШТО Е ОВА:
 *    Посебен слој што се вчитува ПО site.css. Ништо не е препишувано во
 *    извезениот изглед, само се додава движење. Ако овој фајл се избрише,
 *    сајтот изгледа сосема исто, само без движење.
 *
 *  ПРАВИЛА ШТО СЕ ПОЧИТУВААТ ОВДЕ:
 *    1. НИШТО НЕ ГО МЕНУВА РАСПОРЕДОТ. Само opacity, transform и сенка.
 *       Значи ниту еден елемент не се поместува од своето место.
 *    2. Ако уредот побарал без движење, сè е мирно и веднаш видливо.
 *    3. Движењата се БАВНИ. 0,9 до 1,2 секунди. Брзото движење изгледа
 *       ефтино, бавното изгледа скапо.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. ПОЧИТ КОН ПОСТАВКАТА НА УРЕДОТ
 *
 *    Ова е и заштита: ако некој не сака движење, ништо не се движи и
 *    ништо не останува скриено. Сите елементи се веднаш видливи.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html { scroll-behavior: auto; }

    /* Слоевите што постојат само за убавина се исклучуваат. */
    .cc-platno, #ccTraka { display: none !important; }

    /* И ништо не останува невидливо. */
    .fade-in, .cc-rise {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------------
 * 2. МЕКО ЛИСТАЊЕ
 * ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* Хедерот е висок 88 пиксели. Без ова, линкот кон секција би ја ставил
   секцијата под хедерот. */
@media (min-width: 1024px) { html { scroll-padding-top: 104px; } }

/* ---------------------------------------------------------------------------
 * 3. СЛОЈОТ СО ЗЛАТНИ ИСКРИ НА НАСЛОВНАТА
 *
 *    Го прави JavaScript и го става веднаш по позадинската слика, а под
 *    текстот. Значи не допира ништо, само стои меѓу нив.
 * ------------------------------------------------------------------------- */
.cc-platno {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 4. КАРТИЧКА НА ПРОИЗВОД
 *
 *    Сликата полека расте, позадината се осветлува, нотите се креваат,
 *    а картичката во каталогот се крева и добива сенка.
 *    Сето ова е transform и сенка. Распоредот не се менува.
 * ------------------------------------------------------------------------- */
.product-card .product-image {
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.product-card:hover .product-image { transform: scale(1.055); }

.product-card .product-overlay {
    transition: background-color 1.2s cubic-bezier(.22, .61, .36, 1);
}
.product-card:hover .product-overlay { background-color: rgba(44, 36, 32, .08); }

.product-card .product-scent-notes {
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.product-card:hover .product-scent-notes { transform: translateY(-7px); }

/* Само картичката во каталогот има бела позадина. Домашната е покуса и
   останува рамна, како во оригиналот. */
.product-card.bg-white {
    transition: transform .9s cubic-bezier(.22, .61, .36, 1),
                box-shadow .9s cubic-bezier(.22, .61, .36, 1);
}
.product-card.bg-white:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 62px -36px rgba(44, 36, 32, .48);
}

/* ---------------------------------------------------------------------------
 * 5. ЗЛАТНИТЕ КОПЧИНА
 *
 *    Светол премин што поминува преку копчето кога ќе го погледнеш со
 *    глувчето. Преминот е внатре во копчето, значи не излегува надвор и
 *    не го менува распоредот.
 * ------------------------------------------------------------------------- */
a[class*="bg-[#C4A777]"],
button[class*="bg-[#C4A777]"] {
    position: relative;
}

a[class*="bg-[#C4A777]"]::after,
button[class*="bg-[#C4A777]"]::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg,
                transparent 36%,
                rgba(255, 255, 255, .5) 50%,
                transparent 64%);
    background-size: 260% 100%;
    background-position: 135% 0;
    transition: background-position 1s cubic-bezier(.22, .61, .36, 1);
}

a[class*="bg-[#C4A777]"]:hover::after,
button[class*="bg-[#C4A777]"]:hover::after {
    background-position: -35% 0;
}

a[class*="bg-[#C4A777]"]:hover,
button[class*="bg-[#C4A777]"]:hover {
    box-shadow: 0 16px 38px -14px rgba(196, 167, 119, .72);
}

/* ---------------------------------------------------------------------------
 * 6. МЕНИТО
 *
 *    Златна цртичка што се црта од лево кон десно. Активната страница
 *    останува подвлечена и во злато, за да се знае каде си.
 * ------------------------------------------------------------------------- */
.hdr-nav .nav-link { position: relative; }

.hdr-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: currentColor;
    opacity: .9;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.hdr-nav .nav-link:hover::after,
.hdr-nav .nav-link.active::after { transform: scaleX(1); }

.hdr-nav .nav-link.active { color: #C4A777; }

/* Контактот е копче со рамка. Цртичка под него би изгледала расипано. */
.hdr-nav .nav-link[class*="px-3"]::after { display: none; }

/* ---------------------------------------------------------------------------
 * 7. ПОЈАВУВАЊЕ НА НАСЛОВИТЕ ПРИ СКРОЛ
 *
 *    Класата ја става JavaScript. Ако JavaScript не работи, класата ја
 *    нема, значи насловот е видлив како и досега. Ништо не се губи.
 * ------------------------------------------------------------------------- */
.cc-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s cubic-bezier(.22, .61, .36, 1),
                transform 1s cubic-bezier(.22, .61, .36, 1);
}

.cc-rise.cc-viden {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------------
 * 8. ПРОЗОРЕЦОТ СО ДЕТАЛИ
 * ------------------------------------------------------------------------- */
#ccModal { animation: ccZavesa .4s ease both; }

@keyframes ccZavesa {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#ccModalBox { animation: ccKutija .62s cubic-bezier(.22, .61, .36, 1) both; }

@keyframes ccKutija {
    from { opacity: 0; transform: translateY(28px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
 * 9. ЗЛАТНАТА ЛИНИЈА ГОРЕ, ДОДЕКА СЕ ОДИ НА ДРУГА СТРАНА
 * ------------------------------------------------------------------------- */
#ccTraka {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 200;
    pointer-events: none;
    background: linear-gradient(90deg,
                rgba(196, 167, 119, 0),
                #C4A777 42%,
                #F5F0E8 58%,
                rgba(196, 167, 119, 0));
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}

#ccTraka.cc-odi {
    transform: scaleX(1);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 10. КОПЧЕТО ЗА ВРАЌАЊЕ НАГОРЕ
 *     Го прави site.js. Овде само му се дава меко движење.
 * ------------------------------------------------------------------------- */
.back-to-top, #backToTop {
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}