/* ==========================================================================
   Peplogy Motion Kit — scroll reveals, hover effects and UI transitions
   Pair with peplogy-motion.js. All effects respect prefers-reduced-motion.
   ========================================================================== */
:root{
  --pm-ease: cubic-bezier(.22,1,.36,1);      /* soft "expo out" used everywhere */
  --pm-navy:#0B2A5B; --pm-blue:#1668C7; --pm-sky:#4DA3F5; --pm-ink:#0B1F3F;
}

/* 1. Marquee ticker (top trust bar) ------------------------------------- */
.pm-marquee{overflow:hidden;white-space:nowrap}
.pm-marquee__track{display:inline-flex;gap:48px;padding-right:48px;animation:pm-marquee 38s linear infinite}
.pm-marquee:hover .pm-marquee__track{animation-play-state:paused}
@keyframes pm-marquee{to{transform:translateX(-50%)}}

/* 2. Sticky header that tightens on scroll ------------------------------- */
.pm-header{position:sticky;top:0;z-index:50;transition:box-shadow .3s var(--pm-ease),background-color .3s,padding .3s var(--pm-ease)}
.pm-header.is-scrolled{box-shadow:0 8px 28px rgba(11,42,91,.12);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px)}

/* 3. Fade-up reveal (sections, cards, stats) ----------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--pm-ease),transform .8s var(--pm-ease);transition-delay:var(--pm-delay,0ms)}
[data-reveal="sm"]{transform:translateY(14px)}
[data-reveal].is-in{opacity:1;transform:none}

/* 4. Word-by-word blur heading reveal ------------------------------------ */
.pm-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;margin-right:.26em}
.pm-word>span{display:inline-block;will-change:transform;opacity:0;filter:blur(5px);transform:translateY(112%);
  transition:transform .9s var(--pm-ease),opacity .9s var(--pm-ease),filter .9s var(--pm-ease);transition-delay:calc(var(--i)*65ms)}
.is-in .pm-word>span{opacity:1;filter:blur(0);transform:none}

/* 5. Buttons ------------------------------------------------------------- */
.pm-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--pm-ease),box-shadow .25s var(--pm-ease),background-color .25s}
.pm-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);transform:translateX(-120%);transition:transform .7s var(--pm-ease)}
.pm-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,104,199,.28)}
.pm-btn:hover::before{transform:translateX(120%)}
.pm-btn:active{transform:translateY(0) scale(.98)}
.pm-btn .pm-arrow{display:inline-block;transition:transform .25s var(--pm-ease)}
.pm-btn:hover .pm-arrow{transform:translateX(4px)}

/* 6. Product card: lift + 3D tilt + glare + add-to-cart -------------------- */
.pm-card{transition:transform .35s var(--pm-ease),box-shadow .35s var(--pm-ease),border-color .35s}
.pm-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(11,42,91,.16);border-color:#A9CFF5}
.pm-tilt{perspective:750px}
.pm-tilt__inner{position:relative;transform-style:preserve-3d;transition:transform .5s var(--pm-ease)}
.pm-tilt__glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38),transparent 62%)}
.pm-tilt:hover .pm-tilt__glare{opacity:1}
.pm-card__img{transition:transform .5s var(--pm-ease)}
.pm-card:hover .pm-card__img{transform:scale(1.04)}
.pm-atc{transition:background-color .25s,letter-spacing .25s var(--pm-ease)}
.pm-atc:hover{background:var(--pm-blue)!important;letter-spacing:.02em}
.pm-atc.is-added{animation:pm-pop .45s var(--pm-ease)}
@keyframes pm-pop{40%{transform:scale(1.04)}}

/* 7. Tiles, links, COA rows ---------------------------------------------- */
.pm-tile{transition:transform .3s var(--pm-ease),box-shadow .3s,border-color .3s}
.pm-tile:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(11,42,91,.12);border-color:var(--pm-sky)}
.pm-tile .pm-go{display:inline-block;transition:transform .25s var(--pm-ease)}
.pm-tile:hover .pm-go{transform:translateX(5px)}
.pm-doc{transition:background-color .2s,border-color .2s,transform .2s var(--pm-ease)}
.pm-doc:hover{background:#E3F0FD!important;border-color:var(--pm-sky)!important;transform:translateX(3px)}
.pm-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--pm-ease);text-decoration:none}
.pm-link:hover{background-size:100% 1.5px}

/* 8. Ambient glow behind the featured product ---------------------------- */
.pm-glow{position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(40% 50% at 30% 50%,rgba(77,163,245,.35),transparent 70%),radial-gradient(35% 45% at 75% 40%,rgba(22,104,199,.30),transparent 70%);
  animation:pm-drift 14s ease-in-out infinite alternate;filter:blur(20px)}
@keyframes pm-drift{to{transform:translate3d(6%,-4%,0) rotate(8deg) scale(1.08)}}
.pm-float{animation:pm-float 6s ease-in-out infinite}
@keyframes pm-float{50%{transform:translateY(-12px)}}

/* 9. Parallax band -------------------------------------------------------- */
.pm-parallax{position:relative;overflow:hidden}
.pm-parallax__bg{position:absolute;inset:-18% 0;will-change:transform}

/* 10. Pulsing status dot, scroll cue -------------------------------------- */
.pm-dot{width:8px;height:8px;border-radius:50%;background:var(--pm-sky);box-shadow:0 0 0 0 rgba(77,163,245,.7);animation:pm-pulse 2s infinite}
@keyframes pm-pulse{70%{box-shadow:0 0 0 10px rgba(77,163,245,0)}100%{box-shadow:0 0 0 0 rgba(77,163,245,0)}}
.pm-scrollcue{width:26px;height:42px;border:2px solid rgba(255,255,255,.6);border-radius:14px;position:relative}
.pm-scrollcue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:pm-cue 1.8s var(--pm-ease) infinite}
@keyframes pm-cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* 11. FAQ accordion (native <details>) ------------------------------------ */
.pm-faq summary{cursor:pointer;list-style:none}
.pm-faq summary::-webkit-details-marker{display:none}
.pm-faq .pm-faq__icon{transition:transform .3s var(--pm-ease)}
.pm-faq[open] .pm-faq__icon{transform:rotate(45deg)}
.pm-faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--pm-ease)}
.pm-faq[open] .pm-faq__body{grid-template-rows:1fr}
.pm-faq__body>*{overflow:hidden}

/* 12. Drawers (cart, mobile menu) ----------------------------------------- */
.pm-overlay{position:fixed;inset:0;background:rgba(11,31,63,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s;z-index:90}
.pm-drawer{position:fixed;top:0;bottom:0;right:0;width:min(420px,92vw);background:#fff;z-index:91;transform:translateX(104%);transition:transform .45s var(--pm-ease);box-shadow:-20px 0 50px rgba(11,31,63,.2)}
.pm-drawer--left{right:auto;left:0;transform:translateX(-104%)}
.is-open>.pm-overlay{opacity:1;pointer-events:auto}
.is-open>.pm-drawer{transform:none}

/* Keyboard focus ---------------------------------------------------------- */
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--pm-sky);outline-offset:2px}

/* Reduced motion: show everything, move nothing --------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],.pm-word>span{opacity:1!important;transform:none!important;filter:none!important}
}