/* === THE PEPTIDE COVE — WOW LAYER v1 (additive only) === */
/* Every rule is scoped to .pc-* classes injected by wow.js, so nothing
   existing can be altered if this file fails to load. */

/* 1. Scroll progress bar */
#pc-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;pointer-events:none;
  background:linear-gradient(90deg,#00d4aa,#00b4ff);box-shadow:0 0 12px rgba(0,212,170,.55);
  transition:width .08s linear}

/* 2. Skeleton shimmer while products load */
.pc-skel-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;padding:6px 0}
.pc-skel{min-height:330px;border-radius:16px;
  background:linear-gradient(90deg,rgba(255,255,255,.045) 25%,rgba(0,212,170,.10) 37%,rgba(255,255,255,.045) 63%);
  background-size:400% 100%;animation:pc-shimmer 1.4s ease-in-out infinite}
@keyframes pc-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 3. 3D tilt + moving glare on product cards */
.pc-tilt{transform-style:preserve-3d;position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s;will-change:transform}
.pc-tilt.pc-tilting{transition:transform .04s linear}
.pc-tilt .pc-glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--pc-gx,50%) var(--pc-gy,50%),rgba(255,255,255,.15),transparent 55%)}
.pc-tilt:hover .pc-glare{opacity:1}

/* 4. Fly-to-cart + confetti */
.pc-fly{position:fixed;z-index:99998;pointer-events:none;border-radius:50%;
  background:linear-gradient(135deg,#00d4aa,#00b4ff);box-shadow:0 6px 24px rgba(0,212,170,.55);
  transition:left .7s cubic-bezier(.2,.7,.3,1),top .7s cubic-bezier(.2,.7,.3,1),width .7s,height .7s,opacity .7s}
.pc-confetti{position:fixed;width:8px;height:8px;border-radius:2px;z-index:99998;pointer-events:none;
  animation:pc-confetti-fall 1.05s ease-out forwards}
@keyframes pc-confetti-fall{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--pc-dx,0),var(--pc-dy,0)) rotate(var(--pc-rot,180deg))}}
.pc-cart-pulse{animation:pc-pulse .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pc-pulse{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1)}}

/* 5. Command palette (Ctrl/⌘ + K) */
#pc-palette{position:fixed;inset:0;z-index:100000;display:none;align-items:flex-start;justify-content:center;
  padding-top:11vh;background:rgba(6,12,20,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#pc-palette.pc-open{display:flex;animation:pc-fade .16s ease}
@keyframes pc-fade{from{opacity:0}to{opacity:1}}
.pc-pal-box{width:min(620px,92vw);background:#0d1720;border:1px solid rgba(0,212,170,.35);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;animation:pc-pop .2s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pc-pop{from{transform:translateY(-14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.pc-pal-input{width:100%;padding:18px 20px;background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.08);color:#e8f6f2;font-size:1.05rem;outline:none;
  font-family:inherit}
.pc-pal-input::placeholder{color:#5f8079}
.pc-pal-list{max-height:46vh;overflow-y:auto;padding:8px}
.pc-pal-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;cursor:pointer;
  color:#cfe9e3;font-size:.95rem;transition:background .12s}
.pc-pal-item.pc-sel{background:rgba(0,212,170,.16)}
.pc-pal-item small{margin-left:auto;color:#7fa8a0;font-weight:700;white-space:nowrap}
.pc-pal-empty{padding:24px;text-align:center;color:#7fa8a0;font-size:.92rem}
.pc-pal-hint{padding:9px 16px;border-top:1px solid rgba(255,255,255,.06);color:#6f8f89;
  font-size:.74rem;display:flex;gap:16px;flex-wrap:wrap}
.pc-kbd{background:rgba(255,255,255,.09);border-radius:5px;padding:1px 6px;font-size:.72rem;
  font-weight:700;color:#bfe9e0}

/* 6. Animated free-shipping progress */
.pc-ship{margin:4px 0 14px}
.pc-ship-label{display:flex;justify-content:space-between;font-size:.82rem;color:#9fd8cd;margin-bottom:6px}
.pc-ship-track{height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.pc-ship-fill{height:100%;width:0;border-radius:99px;transition:width .55s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,#00d4aa,#00b4ff)}
.pc-ship-fill.pc-done{background:linear-gradient(90deg,#22c55e,#00d4aa)}

/* 7. Shine sweep on primary CTAs */
.pc-shine{position:relative;overflow:hidden}
.pc-shine::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-18deg);transition:left .6s ease}
.pc-shine:hover::after{left:140%}

/* 8. Lazy image fade-in */
img.pc-lazy{opacity:0;transition:opacity .5s ease}
img.pc-lazy.pc-loaded{opacity:1}

/* 9. Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .pc-tilt{transform:none!important;transition:none!important}
  .pc-shine::after,.pc-confetti,.pc-skel{animation:none!important;transition:none!important}
  #pc-progress{transition:none!important}
}