/* ============================================================
   ZARPLACE — ANIMATIONS CSS
   ============================================================ */

/* ── FADE ANIMATIONS ── */
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown{ from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft{ from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* ── SCALE ANIMATIONS ── */
@keyframes scaleIn    { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes scaleInBig { from{opacity:0;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }
@keyframes bounceIn   { 0%{transform:scale(0.3);opacity:0} 50%{transform:scale(1.05)} 70%{transform:scale(0.9)} 100%{transform:scale(1);opacity:1} }

/* ── SLIDE ANIMATIONS ── */
@keyframes slideInRight { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes slideOutRight{ from{transform:translateX(0)} to{transform:translateX(100%)} }
@keyframes slideInUp    { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes slideInLeft  { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* ── ROTATION ── */
@keyframes spin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes shake  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ── HERO TEXT REVEAL ── */
.hero-word { display:inline-block; overflow:hidden; }
.hero-word span { display:inline-block; transform:translateY(100%); opacity:0; }
.hero-word span.is-revealed { animation:slideInWord 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes slideInWord { to{transform:translateY(0);opacity:1} }

/* ── SVG STROKE DRAW ── */
.svg-draw path, .svg-draw text, .svg-draw polyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: svg-draw 1.5s ease forwards;
}
@keyframes svg-draw { to{stroke-dashoffset:0} }

/* ── CURTAIN WIPE (page transition) ── */
.page-transition-curtain { position:fixed; inset:0; background:var(--color-primary); z-index:calc(var(--z-loader) - 1); transform:scaleY(0); transform-origin:bottom; pointer-events:none; }
.page-transition-curtain.is-entering { animation:curtain-in 0.45s cubic-bezier(0.76,0,0.24,1) forwards; }
.page-transition-curtain.is-leaving  { animation:curtain-out 0.45s cubic-bezier(0.76,0,0.24,1) 0.45s forwards; }
@keyframes curtain-in  { from{transform:scaleY(0);transform-origin:bottom} to{transform:scaleY(1);transform-origin:bottom} }
@keyframes curtain-out { from{transform:scaleY(1);transform-origin:top}    to{transform:scaleY(0);transform-origin:top} }

/* ── PRODUCT CARD ANIMATIONS ── */
.product-card { will-change:transform; }
.product-card__image-wrap { overflow:hidden; position:relative; }
.product-card__img-primary,
.product-card__img-secondary { transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.4s ease; }
.product-card:hover .product-card__img-primary   { transform:scale(1.06); }
.product-card__img-secondary { position:absolute; inset:0; opacity:0; }
.product-card:hover .product-card__img-secondary { opacity:1; }

/* Add to Cart slide-up */
.product-card__actions { transform:translateY(100%); opacity:0; transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s ease; }
.product-card:hover .product-card__actions { transform:translateY(0); opacity:1; }

/* Quick View */
.product-card__quick-view { opacity:0; transition:opacity var(--transition-base); }
.product-card:hover .product-card__quick-view { opacity:1; }

/* ── HEADER SCROLL ── */
.site-header { transition:height var(--transition-base),backdrop-filter var(--transition-base),box-shadow var(--transition-base),background var(--transition-base); }
.site-header.is-scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.08); backdrop-filter:blur(12px); background:rgba(250,250,248,0.92); }
.site-header.is-scrolled .header-logo img { height:44px; }

/* ── PARALLAX ── */
.parallax-hero { transform:translateY(0); will-change:transform; }

/* ── MAGNETIC BUTTON ── */
.btn-magnetic { transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }

/* ── HEART ICON ── */
.wishlist-btn { transition:transform var(--transition-spring); }
.wishlist-btn.is-active { color:var(--color-primary); }
.wishlist-btn.just-added { animation:heart-pop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes heart-pop { 0%{transform:scale(1)} 50%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* ── CART COUNT BOUNCE ── */
.zarplace-cart-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; background:var(--color-primary); color:#fff; border-radius:999px; font-size:0.6875rem; font-weight:700; transition:transform var(--transition-spring); }
.zarplace-cart-count.bounce { animation:cart-bounce 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes cart-bounce { 0%{transform:scale(1)} 40%{transform:scale(1.6)} 100%{transform:scale(1)} }

/* ── COUNTDOWN FLIP ── */
.countdown-block { perspective:300px; }
.countdown-digit { display:inline-flex; flex-direction:column; align-items:center; min-width:72px; }
.countdown-number { font-family:var(--font-display); font-size:3rem; font-weight:900; color:var(--color-primary); line-height:1; position:relative; }
.countdown-number.flip { animation:digit-flip 0.4s ease; }
@keyframes digit-flip { 0%{transform:rotateX(0)} 50%{transform:rotateX(-90deg)} 51%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }
.countdown-label { font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-text-muted); margin-top:0.25rem; }
.countdown-sep   { font-family:var(--font-display); font-size:2.5rem; font-weight:900; color:var(--color-primary); padding:0 0.25rem; padding-bottom:0.75rem; }

/* ── SCROLL REVEAL (GSAP targets) ── */
[data-reveal] { opacity:0; transform:translateY(40px); }
[data-reveal="left"]  { transform:translateX(-40px); }
[data-reveal="right"] { transform:translateX(40px); }
[data-reveal="scale"] { transform:scale(0.9); }

/* ── HERO SCROLL INDICATOR ── */
.scroll-indicator { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.scroll-indicator__mouse { width:24px; height:38px; border:2px solid rgba(255,255,255,0.6); border-radius:999px; display:flex; justify-content:center; padding-top:6px; }
.scroll-indicator__dot   { width:4px; height:8px; background:#fff; border-radius:999px; animation:scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(10px);opacity:0} }
.scroll-indicator__text  { color:rgba(255,255,255,0.7); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; }

/* ── SHIMMER on hover ── */
.btn-shimmer { position:relative; overflow:hidden; }
.btn-shimmer::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); transform:skewX(-20deg); transition:left 0.5s ease; }
.btn-shimmer:hover::after { left:150%; }

/* ── IMAGE LIGHTBOX ── */
#zarplace-lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--transition-base); }
#zarplace-lightbox.is-open { opacity:1; pointer-events:all; }
.lightbox__img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:0.25rem; transform:scale(0.9); transition:transform var(--transition-spring); }
#zarplace-lightbox.is-open .lightbox__img { transform:scale(1); }
.lightbox__close { position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px; background:rgba(255,255,255,0.15); border:none; border-radius:50%; color:#fff; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--transition-fast); }
.lightbox__close:hover { background:rgba(255,255,255,0.25); }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.15); border:none; border-radius:50%; width:48px; height:48px; color:#fff; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--transition-fast); }
.lightbox__nav:hover { background:rgba(255,255,255,0.3); }
.lightbox__prev { left:1.5rem; }
.lightbox__next { right:1.5rem; }

/* ── QUICK VIEW MODAL ── */
#quick-view-modal { position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:1rem; pointer-events:none; }
#quick-view-modal.is-open { pointer-events:all; }
.quick-view__card { background:#fff; border-radius:1rem; width:100%; max-width:900px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-xl); display:grid; grid-template-columns:1fr 1fr; position:relative; transform:scale(0.9); opacity:0; transition:transform var(--transition-spring),opacity var(--transition-base); }
@media(max-width:768px){ .quick-view__card{ grid-template-columns:1fr; max-height:100%; border-radius:1rem 1rem 0 0; align-self:flex-end; } }
#quick-view-modal.is-open .quick-view__card { transform:scale(1); opacity:1; }
.quick-view__gallery  { padding:1.5rem; }
.quick-view__info     { padding:2rem; border-left:1px solid #f0f0f0; display:flex; flex-direction:column; gap:1rem; }
.quick-view__close    { position:absolute; top:1rem; right:1rem; width:36px; height:36px; background:var(--color-bg-dark); border:none; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; z-index:1; transition:background var(--transition-fast); }
.quick-view__close:hover { background:var(--color-bg-darker); }
.quick-view__main-img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:0.5rem; margin-bottom:0.75rem; cursor:pointer; }
.quick-view__thumbs   { display:flex; gap:0.5rem; }
.quick-view__thumb    { width:64px; height:64px; object-fit:cover; border-radius:0.25rem; cursor:pointer; border:2px solid transparent; transition:border-color var(--transition-fast); flex-shrink:0; }
.quick-view__thumb.is-active { border-color:var(--color-gold); }

/* ── STICKY ADD TO CART BAR ── */
#sticky-add-to-cart { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e5e7eb; padding:1rem 1.5rem; z-index:var(--z-sticky); display:flex; align-items:center; gap:1rem; transform:translateY(100%); transition:transform var(--transition-spring); box-shadow:0 -4px 20px rgba(0,0,0,0.1); }
#sticky-add-to-cart.is-visible { transform:translateY(0); }
.sticky-cart__img  { width:52px; height:52px; object-fit:cover; border-radius:0.375rem; flex-shrink:0; }
.sticky-cart__info { flex:1; min-width:0; }
.sticky-cart__name { font-weight:600; font-size:0.9375rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cart__price{ font-family:var(--font-accent); color:var(--color-primary); font-size:1.125rem; }

/* ── THUMBNAIL ACTIVE ── */
.product-thumb { width:80px; height:80px; object-fit:cover; border-radius:0.25rem; cursor:pointer; border:2px solid transparent; transition:border-color var(--transition-fast),transform var(--transition-fast); flex-shrink:0; }
.product-thumb.is-active { border-color:var(--color-gold); }
.product-thumb:hover { transform:scale(1.05); }
.thumbnails-track { display:flex; gap:0.75rem; overflow-x:auto; padding-bottom:0.5rem; scroll-snap-type:x mandatory; }
.thumbnails-track::-webkit-scrollbar { height:4px; }
.thumbnails-track::-webkit-scrollbar-track { background:#f0f0f0; }
.thumbnails-track::-webkit-scrollbar-thumb { background:var(--color-gold); border-radius:999px; }

/* ── MOBILE MENU DRAWER ── */
.mobile-menu { position:fixed; top:0; left:0; bottom:0; width:300px; background:#fff; z-index:var(--z-modal); transform:translateX(-100%); transition:transform var(--transition-spring); box-shadow:var(--shadow-xl); overflow-y:auto; }
.mobile-menu.is-open { transform:translateX(0); }
.mobile-menu__header { padding:1.5rem; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; }
.mobile-menu__close  { width:36px; height:36px; background:none; border:none; font-size:1.25rem; cursor:pointer; }
.mobile-menu__nav    { padding:1rem 0; }
.mobile-menu__link   { display:block; padding:0.875rem 1.5rem; font-size:1rem; font-weight:500; color:var(--color-text); border-bottom:1px solid #f9f9f9; transition:color var(--transition-fast),background var(--transition-fast); }
.mobile-menu__link:hover { color:var(--color-primary); background:var(--color-bg-dark); }

/* ── CART DRAWER ── */
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:420px; background:#fff; z-index:var(--z-modal); transform:translateX(100%); transition:transform var(--transition-spring); box-shadow:var(--shadow-xl); display:flex; flex-direction:column; }
.cart-drawer.is-open { transform:translateX(0); }
@media(max-width:480px){ .cart-drawer{ width:100%; } }
.cart-drawer__header { padding:1.5rem; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; }
.cart-drawer__title  { font-family:var(--font-display); font-size:1.25rem; font-weight:700; }
.cart-drawer__close  { width:36px; height:36px; background:none; border:none; font-size:1.25rem; cursor:pointer; border-radius:50%; transition:background var(--transition-fast); }
.cart-drawer__close:hover { background:var(--color-bg-dark); }
.cart-drawer__body   { flex:1; overflow-y:auto; padding:1rem 1.5rem; }
.cart-drawer__footer { padding:1.5rem; border-top:1px solid #f0f0f0; }
.cart-drawer__shipping-bar { margin-bottom:1.5rem; }
.shipping-bar__track { height:6px; background:#e5e7eb; border-radius:999px; overflow:hidden; margin:0.5rem 0; }
.shipping-bar__fill  { height:100%; background:linear-gradient(90deg,var(--color-primary),var(--color-gold)); border-radius:999px; transition:width 0.4s ease; }
.shipping-bar__text  { font-size:0.8125rem; color:var(--color-text-muted); }

/* Cart Item */
.cart-item { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid #f5f5f5; }
.cart-item__img  { width:72px; height:90px; object-fit:cover; border-radius:0.375rem; flex-shrink:0; }
.cart-item__info { flex:1; min-width:0; }
.cart-item__name { font-weight:600; font-size:0.9375rem; margin-bottom:0.25rem; }
.cart-item__price{ font-family:var(--font-accent); color:var(--color-primary); font-size:1rem; }
.cart-item__qty  { display:flex; align-items:center; gap:0.5rem; margin-top:0.5rem; }
.cart-item__remove { color:var(--color-text-muted); font-size:0.8125rem; cursor:pointer; background:none; border:none; padding:0; transition:color var(--transition-fast); }
.cart-item__remove:hover { color:var(--color-error); }
.cart-empty { text-align:center; padding:3rem 1rem; }
.cart-empty__icon { font-size:3rem; margin-bottom:1rem; }