/* ================================================================
   DORVE.ID — Production Enhancement Layer v2
   Micro-interactions, UX polish, and performance upgrades
   Adds to existing dorve.css without overriding structure
   ================================================================ */

/* ── Page Entry Animation ─────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@keyframes slideRight { from { transform:translateX(-8px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

.animate-fadein    { animation: fadeIn  .5s ease both; }
.animate-fadeup    { animation: fadeUp  .5s ease both; }
.animate-scalein   { animation: scaleIn .4s ease both; }
.animate-delay-1   { animation-delay: .08s; }
.animate-delay-2   { animation-delay: .16s; }
.animate-delay-3   { animation-delay: .24s; }
.animate-delay-4   { animation-delay: .32s; }
.animate-delay-5   { animation-delay: .40s; }

/* Scroll-reveal */
.reveal { opacity:0; transform:translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Product Card Upgrades ────────────────────────────────────── */
.product-card {
    position: relative;
    will-change: transform;
}

/* Quick-view button on hover */
.product-card__quick-view {
    position: absolute;
    bottom: 56px;
    left: 12px; right: 12px;
    background: rgba(26,26,26,.92);
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
    cursor: pointer;
}
.product-card:hover .product-card__quick-view {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Wishlist heart button */
.product-card__wish {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    background: rgba(255,255,255,.92);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
    cursor: pointer;
    border: none;
    backdrop-filter: blur(4px);
    z-index: 2;
}
.product-card:hover .product-card__wish { opacity:1; transform:scale(1); }
.product-card__wish:hover { background:#fff; transform:scale(1.08) !important; }
.product-card__wish svg { width:15px; height:15px; stroke:#1a1a1a; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition: fill .2s ease, stroke .2s ease; }
.product-card__wish.active svg { fill:#e53e3e; stroke:#e53e3e; }

/* Image zoom smoother */
.product-card__img {
    transition: transform .6s cubic-bezier(.4,0,.2,1) !important;
}
.product-card:hover .product-card__img { transform: scale(1.06) !important; }

/* Discount badge pulse */
.badge--sale { animation: none; }
.product-card:hover .badge--sale { animation: pulse .6s ease; }

/* ── Navbar Scroll Effect ─────────────────────────────────────── */
.site-header {
    transition: box-shadow .3s ease, background .3s ease !important;
}
.site-header.scrolled {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,.07) !important;
}

/* Nav link hover underline */
.nav-links a {
    position: relative;
    overflow: hidden;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 14px; right: 14px;
    height: 1.5px;
    background: var(--charcoal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* ── Button Upgrade ───────────────────────────────────────────── */
.btn {
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .2s ease;
    pointer-events: none;
}
.btn:hover::after { background: rgba(255,255,255,.08); }
.btn:active { transform: scale(.98) !important; }

/* Loading state */
.btn.loading {
    pointer-events: none;
    opacity: .75;
}
.btn.loading::before {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: rgba(255,255,255,.9);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Add to cart success flash */
@keyframes cartFlash { 0%{background:var(--charcoal)} 50%{background:#1a7a3a} 100%{background:var(--charcoal)} }
.btn--added { animation: cartFlash .6s ease; }

/* ── Cart Count Bounce ────────────────────────────────────────── */
@keyframes cartBounce {
    0%  { transform: scale(1); }
    30% { transform: scale(1.5); }
    60% { transform: scale(.9); }
    100%{ transform: scale(1); }
}
.nav-cart-count.bump { animation: cartBounce .4s cubic-bezier(.36,.07,.19,.97); }

/* ── Toast Notification ───────────────────────────────────────── */
.dorve-toast-wrap {
    position: fixed;
    bottom: 24px; right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}
.dorve-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--charcoal);
    color: #fff;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) both;
    pointer-events: auto;
    min-width: 240px;
    max-width: 340px;
}
.dorve-toast.leaving { animation: toastOut .25s ease both; }
.dorve-toast--success { background: #1a7a3a; }
.dorve-toast--error   { background: #c0392b; }
.dorve-toast--info    { background: var(--charcoal); }
.dorve-toast svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; flex-shrink:0; }
@keyframes toastIn  { from { opacity:0; transform:translateX(20px) scale(.95); } to   { opacity:1; transform:translateX(0) scale(1); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); } to   { opacity:0; transform:translateX(20px); } }

/* ── Form Input Focus Upgrade ─────────────────────────────────── */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--charcoal) !important;
    box-shadow: 0 0 0 3px rgba(26,26,26,.08) !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.form-input, .form-select, .form-textarea {
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* ── Sticky Add to Cart (Mobile) ──────────────────────────────── */
.sticky-atc {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 12px 16px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--border-light);
    backdrop-filter: blur(12px);
    z-index: 900;
    gap: 10px;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    animation: slideUp .3s ease;
}
.sticky-atc.visible { display: flex; }
.sticky-atc-price { font-size: 18px; font-weight: 600; color: var(--black); flex: 1; }
.sticky-atc-price del { font-size: 13px; font-weight: 400; color: var(--taupe); display: block; }
.sticky-atc .btn { flex: 1; max-width: 200px; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

/* ── Image Lazy Load Fade ─────────────────────────────────────── */
img.lazy { opacity: 0; transition: opacity .4s ease; }
img.lazy.loaded { opacity: 1; }

/* ── Product Detail Gallery Zoom ─────────────────────────────── */
.gallery-main {
    cursor: zoom-in;
    overflow: hidden;
}
.gallery-main.zoomed { cursor: zoom-out; }
.gallery-main.zoomed img { transform: scale(1.8); cursor: zoom-out; }

/* ── Filter Active Indicator ─────────────────────────────────── */
.filter-option input:checked + span,
.filter-option.active {
    color: var(--charcoal);
    font-weight: 500;
}
.filter-badge {
    display: none;
    position: absolute;
    top: -6px; right: -6px;
    background: var(--charcoal);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px; height: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.filter-badge.show { display: flex; }

/* ── Back to Top ──────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 88px; right: 20px;
    width: 42px; height: 42px;
    background: var(--charcoal);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    cursor: pointer;
    z-index: 800;
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.back-to-top.show { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--black); }
.back-to-top svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Order Tracking Progress ──────────────────────────────────── */
.order-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 28px;
}
.order-timeline::before {
    content: '';
    position: absolute;
    top: 12px; bottom: 12px; left: 10px;
    width: 2px;
    background: var(--border-light);
}
.timeline-item {
    position: relative;
    padding: 0 0 24px 16px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute;
    left: -20px; top: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px var(--border);
}
.timeline-item.done .timeline-dot {
    background: var(--charcoal);
    box-shadow: 0 0 0 2px rgba(26,26,26,.2);
}
.timeline-item.current .timeline-dot {
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,150,110,.25);
    animation: pulse .8s ease infinite;
}
.timeline-label { font-size: 14px; font-weight: 500; color: var(--stone); }
.timeline-item.done .timeline-label,
.timeline-item.current .timeline-label { color: var(--charcoal); }
.timeline-date { font-size: 12px; color: var(--taupe); margin-top: 2px; }

/* ── Member Dashboard Stats ───────────────────────────────────── */
.member-stat-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.member-stat-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0;
    transition: opacity .25s ease;
}
.member-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.member-stat-card:hover::after { opacity: 1; }
.member-stat-num { font-family: var(--font-serif); font-size: 28px; font-weight: 500; }
.member-stat-label { font-size: 12px; color: var(--stone); margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }

/* ── Page Loading Bar ─────────────────────────────────────────── */
.progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--gold), var(--charcoal));
    z-index: 99999;
    transition: width .3s ease;
    border-radius: 0 2px 2px 0;
}

/* ── Floating Overlay (cart preview, etc.) ────────────────────── */
.overlay-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    backdrop-filter: blur(2px);
}
.overlay-backdrop.show { opacity: 1; pointer-events: auto; }

/* ── Tooltip ──────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--charcoal);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    transform: translateX(-50%) translateY(4px);
}
[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Section Fade-in on Scroll ────────────────────────────────── */
.section, section { contain: layout style; }

/* ── Responsive fixes ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .dorve-toast-wrap { bottom: 80px; right: 12px; left: 12px; }
    .dorve-toast { min-width: unset; max-width: 100%; }
    .back-to-top { bottom: 80px; right: 12px; }
    .sticky-atc { padding: 10px 12px; }
}

@media (max-width: 480px) {
    .product-card__wish { opacity: 1; transform: scale(1); }
    .product-card__quick-view { display: none; }
}