/* ErikaAp Boutique — camada de animações premium (opacity/transform, 60fps) */

/* ============ Reveal on scroll ============ */
[data-reveal]{opacity:0;will-change:opacity,transform;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1)}
[data-reveal="up"]{transform:translateY(32px)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.96)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ============ Hero ============ */
.hero__bg{position:absolute;inset:-12% 0;will-change:transform;overflow:hidden} /* camada de parallax (JS) */
.hero__bgimg{position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;animation:kenburns 18s ease-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero__inner>*{opacity:0;transform:translateY(26px);animation:heroIn .9s cubic-bezier(.22,.61,.36,1) forwards}
.hero__inner>.hero__mark{animation-delay:.05s}
.hero__inner>.hero__kicker{animation-delay:.15s}
.hero__inner>.hero__title{animation:none;opacity:1;transform:none} /* título anima letra a letra */
.hero__inner>.hero__sub{animation-delay:.5s}
.hero__inner>.btn{animation-delay:.7s}
@keyframes heroIn{to{opacity:1;transform:none}}
.hero__title .ltr{display:inline-block;opacity:0;transform:translateY(.5em);
  animation:ltrIn .6s cubic-bezier(.22,.61,.36,1) forwards}
.hero__title .word{display:inline-block;white-space:nowrap}
@keyframes ltrIn{to{opacity:1;transform:none}}

/* ============ Header (topbar) ============ */
.topbar{position:sticky;top:0;z-index:60;background:var(--cream);transition:background .4s ease, box-shadow .4s ease}
.topbar .hd{transition:padding .35s ease}
body.scrolled .topbar{background:var(--cream);box-shadow:0 6px 24px rgba(120,80,95,.09)}
body.scrolled .hd{padding-top:.55rem;padding-bottom:.55rem}
/* Home: header transparente sobre o hero, sólido ao rolar */
body.home .topbar{position:fixed;left:0;right:0;background:transparent}
body.home .topbar .promo{background:transparent}
body.home .hd{border-bottom-color:transparent}
body.home.scrolled .topbar{background:var(--cream);box-shadow:0 6px 24px rgba(120,80,95,.09)}
body.home.scrolled .hd{border-bottom-color:var(--line)}
body.home.hero-dark:not(.scrolled) .hd,
body.home.hero-dark:not(.scrolled) .promo{color:#fff}
body.home.hero-dark:not(.scrolled) .hd__ic,
body.home.hero-dark:not(.scrolled) .hd__menu,
body.home.hero-dark:not(.scrolled) .hd__logo{color:#fff}
body.home .hero{min-height:100vh}

/* ============ Cards de produto ============ */
.card__wrap{position:relative;overflow:hidden;border-radius:var(--radius);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease}
.card__img{position:relative;display:block;aspect-ratio:3/4;background:var(--nude)}
.card__img-a,.card__img-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .6s ease, transform .8s cubic-bezier(.22,.61,.36,1)}
.card__img-b{opacity:0}
.card__wrap:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(120,80,95,.16)}
.card__wrap:hover .card__img-a{opacity:0}
.card__wrap:hover .card__img-b{opacity:1}
.card__wrap:hover .card__img-a,
.card__wrap:hover .card__img-b{transform:scale(1.04)}
.card__wrap:not(:has(.card__img-b)):hover .card__img-a{opacity:1} /* sem 2ª foto: mantém */

.card__badges{position:absolute;top:.8rem;left:.8rem;z-index:3;display:flex;gap:.4rem}
.badge-pill{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .7rem;border-radius:2px;color:#fff;
  opacity:0;transform:translateY(-6px);animation:badgeIn .5s ease .3s forwards}
.badge-promo{background:var(--ink)}
.badge-novo{background:var(--rosa-500)}
@keyframes badgeIn{to{opacity:1;transform:none}}

.card__fav{position:absolute;top:.7rem;right:.7rem;z-index:3;width:34px;height:34px;border:0;border-radius:999px;
  background:rgba(255,255,255,.9);color:var(--plum);display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:translateY(-6px) scale(.9);transition:.3s;backdrop-filter:blur(3px)}
.card__wrap:hover .card__fav{opacity:1;transform:none}
.card__fav:hover{color:var(--rosa-500)}
.card__fav.is-fav{opacity:1;transform:none;color:#fff;background:var(--rosa-500)}
.card__fav.is-fav svg{fill:currentColor}
.card__fav.pop{animation:favPop .35s ease}
@keyframes favPop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}

.card__actions{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.8rem;
  transform:translateY(120%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.card__wrap:hover .card__actions{transform:none}
.card__buy{display:block;text-align:center;background:var(--ink);color:#fff;padding:.7rem;border-radius:var(--radius);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;transition:background .3s}
.card__buy:hover{background:var(--rosa-500)}
@media (hover:none){ /* touch: sempre visível, sem depender de hover */
  .card__actions{position:static;transform:none;padding:.7rem 0 0}
  .card__fav{opacity:1;transform:none}
}

/* ============ Botões (ripple + escala) ============ */
.btn{position:relative;overflow:hidden;transition:background .3s ease,border-color .3s ease,transform .15s ease,box-shadow .3s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);
  pointer-events:none;animation:ripple .6s ease-out}
.btn--light .ripple,.btn--ghost .ripple{background:rgba(160,86,122,.25)}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}

/* ============ Skeleton loading ============ */
.skeleton-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.skel{border-radius:var(--radius);overflow:hidden}
.skel__img{aspect-ratio:3/4;background:linear-gradient(100deg,var(--nude) 30%,#f8f0ec 50%,var(--nude) 70%);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skel__line{height:12px;margin:.7rem auto 0;width:60%;border-radius:6px;
  background:linear-gradient(100deg,var(--nude) 30%,#f8f0ec 50%,var(--nude) 70%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skel__line--sm{width:35%}
@keyframes shimmer{to{background-position:-200% 0}}
@media (max-width:900px){.skeleton-grid{grid-template-columns:repeat(2,1fr)}}

/* grade em transição (crossfade do filtro) */
.grid.is-loading{opacity:.35;transition:opacity .25s ease}
.grid .card{animation:cardIn .5s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ Lazy images ============ */
img.lazy{opacity:0;transition:opacity .6s ease}
img.lazy.loaded,img.lazy[data-nofade]{opacity:1}
.card__img-b.lazy.loaded{opacity:0} /* a segunda foto só aparece no hover */

/* ============ Microinterações ============ */
.link-underline{position:relative}
.link-underline::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}

.field input,.filters input,.filters select,.searchbar input,.checkout-form input{transition:border-color .3s ease, box-shadow .3s ease}
.field input:focus,.filters input:focus,.filters select:focus,.searchbar input:focus{
  outline:none;border-color:var(--rosa-400);box-shadow:0 0 0 3px rgba(221,139,172,.15)}

/* checkbox moderno */
.check input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid var(--rosa-300);
  border-radius:5px;position:relative;cursor:pointer;transition:.25s;flex:0 0 auto;background:#fff}
.check input[type=checkbox]:checked{background:var(--rosa-500);border-color:var(--rosa-500)}
.check input[type=checkbox]:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* select personalizado (seta) */
.filters select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1567a' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;padding-right:2rem}

/* toasts */
.toast-host{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.toast{background:var(--ink);color:#fff;padding:.85rem 1.4rem;border-radius:999px;font-size:.85rem;letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease;display:flex;gap:.5rem;align-items:center}
.toast.show{opacity:1;transform:none}
.toast .brand__mark{font-size:1rem}

/* loader premium */
.loader{width:34px;height:34px;border-radius:50%;border:2px solid var(--rosa-200);border-top-color:var(--rosa-500);
  animation:spin .8s linear infinite;margin:2rem auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Drawer do carrinho ============ */
.cart-drawer-bg{position:fixed;inset:0;background:rgba(60,47,54,.4);opacity:0;visibility:hidden;transition:.35s;z-index:90}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:380px;max-width:90vw;background:var(--cream);z-index:100;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;box-shadow:var(--shadow)}
body.cart-open .cart-drawer{transform:none}
body.cart-open .cart-drawer-bg{opacity:1;visibility:visible}
.cart-drawer__top{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cart-drawer__top button{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
.cart-drawer__body{flex:1;overflow:auto;padding:1rem 1.4rem}
.mc__items{display:flex;flex-direction:column;gap:1rem}
.mc__row{display:grid;grid-template-columns:60px 1fr;gap:.8rem;align-items:center}
.mc__row img{width:60px;height:76px;object-fit:cover;border-radius:3px}
.mc__info{display:flex;flex-direction:column;gap:.15rem}
.mc__name{font-family:var(--serif);font-size:1.05rem}
.mc__meta{font-size:.78rem;color:var(--muted)}
.mc__price{color:var(--rosa-700)}
.mc__foot{padding:1.2rem 1.4rem;border-top:1px solid var(--line)}
.mc__line{display:flex;justify-content:space-between;color:var(--muted);margin:.35rem 0}
.mc__total{display:flex;justify-content:space-between;font-size:1.15rem;margin:.6rem 0 1rem;padding-top:.6rem;border-top:1px solid var(--line)}
.mc__empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
.mc__empty .brand__mark{font-size:2rem;display:block;margin-bottom:1rem}

/* contador com bounce */
.hd__count.bounce{animation:countBounce .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes countBounce{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

/* produto voando até a sacola */
.fly-img{position:fixed;z-index:130;border-radius:6px;object-fit:cover;pointer-events:none;
  transition:transform .8s cubic-bezier(.5,-0.2,.3,1), opacity .8s ease, width .8s ease, height .8s ease}

/* ============ Lightbox ============ */
.lightbox{position:fixed;inset:0;background:rgba(40,30,36,.92);z-index:140;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s ease;padding:2rem}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:90vw;max-height:88vh;border-radius:4px;transform:scale(.94);transition:transform .4s cubic-bezier(.22,.61,.36,1);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox.open img{transform:scale(1)}
.lightbox__close{position:absolute;top:1.2rem;right:1.6rem;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}
.gallery__main{cursor:zoom-in}

/* ============ Rodapé reveal já coberto por data-reveal ============ */

/* ============ Respeito a prefers-reduced-motion ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .hero__bg{animation:none}
  .hero__title .ltr,.hero__inner>*{opacity:1 !important;transform:none !important;animation:none !important}
}