/* =====================================================================================================
   Southern Wholesale - Round 14: smoke-shop motion.

   Kept from Round 13: the "dizzy" look (pages come into focus from a blurry, swaying state, titles start as a double
   image, the screen edges darken briefly after the homepage splash, the page blurs and sways away when you leave),
   the smoke puff when you tap, the vape ring on the big button, the smoke-bank edge under the main banner, and the
   pop-open popups.
   New in Round 14: a background show behind the page content, drifting across the home banner (assets/js/motion.js builds it): wispy smoke all the time, and
   now and then embers with fire flares, a flame, or flat and folded dollars flying across.
   Removed: the kratom pill mark, the pack opening, the burning-dollar banner change, and all bubbles / round clouds.
   This file only ADDS motion on top of style.css (linked after it in includes/layout.php). Remove the link and the
   script tag and the site looks exactly as in Round 10. Everything stops for visitors set to "reduce motion".
   ===================================================================================================== */

:root{
  --ember:#ff7a1a; --ember-hot:#ffd23f; --leaf:#2f9e5a; --leaf-lt:#a6e596; --smoke:#8a94b8; --lilac:#7b3cf0; --mint:#3fe3b0;
  --spring:cubic-bezier(.34,1.56,.64,1);        /* overshoots a little, then settles - the "elastic" feel */
  --swoosh:cubic-bezier(.2,.9,.25,1);
}

/* ---------------------------------------------------------------- tap = a puff of smoke (added by motion.js) ---- */
.has-ripple{overflow:hidden;isolation:isolate}      /* motion.js also sets position:relative, but only on elements that are not already positioned */
.ripple{position:absolute;z-index:0;pointer-events:none;left:var(--x);top:var(--y);width:0;height:0}
.ripple i{
  position:absolute;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;
  background:radial-gradient(circle at 42% 40%,rgba(118,128,168,.62) 0,rgba(118,128,168,.34) 38%,rgba(118,128,168,0) 70%);
  opacity:0;transform:scale(.2);animation:puffUp .95s var(--swoosh) var(--pd,0s) forwards;
}
.ripple i:nth-child(1){--px:-.3;--py:-.16;--sc:1.1}
.ripple i:nth-child(2){--px:.32;--py:-.3;--sc:1.25;--pd:.07s}
.ripple i:nth-child(3){--px:-.04;--py:-.5;--sc:1;--pd:.15s}
.brand-tabs .tab-group-all .ripple i,.btn-primary .ripple i{background:radial-gradient(circle at 42% 40%,rgba(255,255,255,.75) 0,rgba(255,255,255,.34) 38%,rgba(255,255,255,0) 68%)}
@keyframes puffUp{
  0%{opacity:0;transform:translate(0,0) scale(.2)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--d) * var(--px,0)),calc(var(--d) * var(--py,-.4))) scale(var(--sc,1.2))}
}

/* ---------------------------------------------------------------- buttons & pills: press squash, spring back ---- */
.btn{transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .5s var(--spring)}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:scale(.95,.9);transition-duration:.08s}
.btn-plain:hover{transform:none}
.btn:disabled:hover,.btn:disabled:active{transform:none}
.icon-btn{transition:background .15s,transform .45s var(--spring)}
.icon-btn:hover{transform:scale(1.12)}
.icon-btn:active{transform:scale(.88);transition-duration:.08s}
.brand-tabs .tab-group{transition:transform .5s var(--spring),box-shadow .2s,background .15s}
.brand-tabs .tab-group:hover{transform:scale(1.07,.96)}
.brand-tabs .tab-group:active{transform:scale(.94,.9);transition-duration:.08s}
.tab-add{transition:background .15s,border-color .15s,transform .45s var(--spring),box-shadow .15s}
.tab-add:hover{transform:scale(1.05)}
.chip:hover{transform:scale(1.05)}

/* the big homepage button stretches into a pill on hover - and blows a vape ring */
main.home .home-actions .btn-lg{position:relative;transition:background .15s,color .15s,border-color .15s,box-shadow .2s,transform .55s var(--spring),border-radius .5s var(--spring)}
main.home .home-actions .btn-lg:hover{border-radius:999px;transform:scale(1.04,.97)}
main.home .home-actions .btn-lg:active{transform:scale(.95,.88)}
main.home .home-actions .btn-lg::after{
  content:"";position:absolute;left:50%;top:-2px;width:78px;height:26px;margin-left:-39px;border-radius:50%;pointer-events:none;
  border:4px solid rgba(110,120,168,.7);filter:blur(1.2px);opacity:0;transform:translateY(0) scale(.3,.26);
}
main.home .home-actions .btn-lg:hover::after,main.home .home-actions .btn-lg:focus-visible::after{animation:ringUp 1.8s ease-out}
@keyframes ringUp{
  0%{opacity:0;transform:translateY(6px) scale(.3,.26)}
  14%{opacity:.85}
  100%{opacity:0;transform:translateY(-68px) scale(1.55,1.05)}
}

/* ---------------------------------------------------------------- dizzy "head rush" entrances ---- */
/* Each block comes into focus from blurry and swaying, overshoots, settles. (Table rows skip the blur - not every browser
   blurs table rows - and the long lists skip it too, so a long page never has to blur in one go.) */
@keyframes popIn{from{opacity:0;transform:scale(.4)}}
@keyframes swipeIn{from{opacity:0;transform:translateX(40px) rotate(1.2deg)}60%{opacity:1;transform:translateX(-6px) rotate(-.4deg)}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px) scale(.97)}60%{opacity:1;transform:translateY(-4px)}}
@keyframes swipeWoozy{
  from{opacity:0;filter:blur(7px);transform:translateX(34px) rotate(1.4deg)}
  45%{opacity:1;filter:blur(3px);transform:translateX(-9px) rotate(-.8deg)}
  75%{filter:blur(1px);transform:translateX(3px) rotate(.25deg)}
}
@keyframes riseWoozy{
  from{opacity:0;filter:blur(8px);transform:translateY(24px) rotate(-1deg) scale(.97)}
  50%{opacity:1;filter:blur(3px);transform:translateY(-5px) rotate(.6deg)}
  78%{filter:blur(1px);transform:translateY(1px) rotate(-.2deg)}
}
@keyframes dropWoozy{
  from{opacity:0;filter:blur(7px);transform:translateY(-18px) rotate(.8deg) scale(.96)}
  55%{opacity:1;filter:blur(2px);transform:translateY(3px) rotate(-.4deg)}
}
/* double vision: a heading starts as two offset copies that slide back together */
@keyframes doubleVision{
  from{text-shadow:-8px 0 rgba(255,84,112,.38),8px 0 rgba(51,71,255,.38)}
  55%{text-shadow:3px 0 rgba(255,84,112,.22),-3px 0 rgba(51,71,255,.22)}
  to{text-shadow:0 0 rgba(0,0,0,0)}
}
.page-head h1,.modal-box h2{animation:doubleVision 1.1s var(--swoosh) .12s backwards}

/* brand pills pop in one after another */
.brand-tabs .tab-group,.brand-tabs .tab-add{animation:popIn .6s var(--spring) backwards;animation-delay:calc(var(--i,0) * 70ms + .1s)}
.brand-tabs>*:nth-child(2){--i:1}.brand-tabs>*:nth-child(3){--i:2}.brand-tabs>*:nth-child(4){--i:3}.brand-tabs>*:nth-child(5){--i:4}
.brand-tabs>*:nth-child(6){--i:5}.brand-tabs>*:nth-child(7){--i:6}.brand-tabs>*:nth-child(n+8){--i:7}

/* list rows sway in from the right, a little after each other (only the first dozen are staggered) */
.plist3-row,.table tbody tr{animation:swipeIn .6s var(--swoosh) backwards;animation-delay:calc(var(--i,0) * 45ms + .25s)}
.plist3-row:nth-child(2),.table tbody tr:nth-child(1){--i:1}
.plist3-row:nth-child(3),.table tbody tr:nth-child(2){--i:2}
.plist3-row:nth-child(4),.table tbody tr:nth-child(3){--i:3}
.plist3-row:nth-child(5),.table tbody tr:nth-child(4){--i:4}
.plist3-row:nth-child(6),.table tbody tr:nth-child(5){--i:5}
.plist3-row:nth-child(7),.table tbody tr:nth-child(6){--i:6}
.plist3-row:nth-child(8),.table tbody tr:nth-child(7){--i:7}
.plist3-row:nth-child(9),.table tbody tr:nth-child(8){--i:8}
.plist3-row:nth-child(10),.table tbody tr:nth-child(9){--i:9}
.plist3-row:nth-child(11),.table tbody tr:nth-child(10){--i:10}
.plist3-row:nth-child(n+12),.table tbody tr:nth-child(n+11){--i:11}

/* cards rise up out of the haze */
.panel,.pay-row,.empty{animation:riseWoozy .75s var(--swoosh) backwards;animation-delay:.12s}
.product-list,.table-wrap{animation:riseIn .65s var(--swoosh) backwards;animation-delay:.12s}
.pay-row:nth-child(2){animation-delay:.2s}.pay-row:nth-child(3){animation-delay:.28s}.pay-row:nth-child(4){animation-delay:.36s}
.pay-row:nth-child(5){animation-delay:.44s}.pay-row:nth-child(n+6){animation-delay:.5s}
.catalog-notice{animation:dropWoozy .75s var(--spring) backwards;animation-delay:.05s}
.page-head,.toolbar{animation:swipeWoozy .65s var(--swoosh) backwards}

/* the "head rush" - for a moment after the splash, the edges of the screen darken like standing up too fast */
body::after{
  content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,0) 34%,rgba(88,64,140,.3) 100%);
}
body.rush::after{animation:headRush 1.7s ease-out both}
@keyframes headRush{0%{opacity:0;transform:scale(1.12)}22%{opacity:1;transform:scale(1)}55%{opacity:.55;transform:scale(1.04)}100%{opacity:0;transform:scale(1)}}

/* leaving: the page blurs and sways away to the left before the next one comes in (motion.js adds .page-leave) */
main.page.page-leave{animation:pageDizzy .24s ease-in forwards}
@keyframes pageDizzy{to{opacity:0;filter:blur(7px);transform:translateX(-24px) rotate(-1.6deg) scale(1.03)}}

/* ---------------------------------------------------------------- popups grow out of the spot you tapped ---- */
.modal-box{animation:bubbleClip .55s var(--swoosh) backwards,bubbleScale .7s var(--spring) backwards}
@keyframes bubbleClip{
  from{clip-path:circle(0px at var(--ox,50%) var(--oy,30%))}
  to{clip-path:circle(240% at var(--ox,50%) var(--oy,30%))}
}
@keyframes bubbleScale{from{transform:scale(.82);opacity:.1}35%{opacity:1}}
.done-mark{animation:popIn .6s var(--spring) .15s backwards}
.toast.show{animation:toastPop .5s var(--spring)}
@keyframes toastPop{from{transform:translateX(-50%) translateY(24px) scale(.85)}}

/* ---------------------------------------------------------------- the background show (built by motion.js) ---------------------------------------------------------------- */
.fx-layer{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-smoke{opacity:.52}
/* with the home banner the show sits right after it: the banner is under the show, the page content and footer are over it
   (positioned but with no z-index, so popups and the header keep their normal stacking) */
body.fx-over-hero .fx-layer{z-index:0}
body.fx-over-hero main.page,body.fx-over-hero .site-footer{position:relative}
body.fx-over-hero .hero-hero::after,body.fx-over-hero .hero-hero .hero-dots{z-index:auto}

/* smoke-bank edge along the bottom of the main banner: two rows of soft cloud bumps drifting sideways at different speeds */
.hero-hero::after{
  content:"";position:absolute;z-index:3;left:0;right:0;bottom:-1px;height:24px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 24' preserveAspectRatio='none'%3E%3Cpath fill='%23f3f6fa' fill-opacity='.55' d='M0 24 V14 A17 10 0 0 1 34 14 A17 14 0 0 1 68 14 A17 9 0 0 1 102 14 A17 13 0 0 1 136 14 A17 11 0 0 1 170 14 V24Z'/%3E%3C/svg%3E") 0 100%/170px 100% repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%23f3f6fa' d='M0 24 V16 A15 12 0 0 1 30 16 A15 8 0 0 1 60 16 A15 13 0 0 1 90 16 A15 9 0 0 1 120 16 V24Z'/%3E%3C/svg%3E") 0 100%/120px 100% repeat-x;
  animation:smokeBank 16s linear infinite;
}
@keyframes smokeBank{to{background-position:-170px 100%,-120px 100%}}
.hero-hero .hero-dots{bottom:28px;z-index:4}
@media screen, (max-width:760px){.hero-hero::after{height:15px}.hero-hero .hero-dots{bottom:19px}}
.hero-hero:has(.hero-empty)::after{display:none}

/* ---------------------------------------------------------------- loading splash: a faint hypnosis spiral that turns (the dizzy look) ---------------------------------------------------------------- */
.load-spinner{display:none}
.load-spiral{display:block;width:112px;height:112px;overflow:visible;animation:spiralTurn 5s linear infinite}
.load-spiral path{fill:none;stroke:rgba(123,60,240,.4);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes spiralTurn{to{transform:rotate(-360deg)}}

/* ---------------------------------------------------------------- print + reduced motion ---------------------------------------------------------------- */
@media print{.fx-layer,.ripple,.hero-hero::after,body::after{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .fx-layer,.ripple,body::after{display:none!important}
  .hero-hero::after{animation:none}
  .brand-tabs .tab-group,.brand-tabs .tab-add,.plist3-row,.table tbody tr,.panel,.pay-row,.empty,.product-list,.table-wrap,.catalog-notice,
  .page-head,.toolbar,.page-head h1,.modal-box h2,.modal-box,.done-mark,.toast.show,.load-spiral{animation:none!important}
  main.home .home-actions .btn-lg::after{display:none}
}