/* CHICKA-D SOP — motion, glow & haptics layer. Loaded after the base styles. */
@media (prefers-reduced-motion:no-preference){
/* ---------- home: living background ---------- */
.home-screen{overflow:hidden;isolation:isolate}
.home-screen::before{animation:vignette 9s ease-in-out infinite alternate}
@keyframes vignette{from{opacity:1}to{opacity:.86}}
.home-bg-drift{position:absolute;inset:-6%;background:url("../assets/brand/home-background.jpg") center/cover no-repeat;animation:drift 38s ease-in-out infinite alternate;will-change:transform;z-index:-1}
@keyframes drift{from{transform:translate3d(-1.5%,-1%,0) scale(1.04)}to{transform:translate3d(1.5%,1.2%,0) scale(1.09)}}
.glow{position:absolute;left:50%;top:50%;width:min(120vw,900px);aspect-ratio:1;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(204,23,23,.34) 0%,rgba(204,23,23,.14) 32%,rgba(204,23,23,0) 62%);filter:blur(28px);animation:breathe 5.5s ease-in-out infinite;mix-blend-mode:screen}
.glow.g2{width:min(70vw,520px);background:radial-gradient(circle,rgba(230,48,48,.28) 0%,rgba(230,48,48,0) 60%);animation:breathe 7.5s ease-in-out -2.5s infinite;filter:blur(40px)}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.75}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
.ember{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#E63030;box-shadow:0 0 10px 2px rgba(230,48,48,.7);opacity:0;animation:rise var(--d,12s) linear var(--delay,0s) infinite;pointer-events:none}
@keyframes rise{0%{transform:translate(0,0) scale(.6);opacity:0}8%{opacity:.9}60%{opacity:.5}100%{transform:translate(var(--x,20px),-105vh) scale(1.1);opacity:0}}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
/* ---------- home: staged entrance ---------- */
.home-in>*{opacity:0;animation:rise-in .8s cubic-bezier(.2,.8,.2,1) forwards}
.home-in>*:nth-child(1){animation-delay:.1s}.home-in>*:nth-child(2){animation-delay:.25s}.home-in>*:nth-child(3){animation-delay:.4s}.home-in>*:nth-child(4){animation-delay:.6s}.home-in>*:nth-child(5){animation-delay:.75s}
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero .accent{display:inline-block;background:linear-gradient(90deg,#E63030 0%,#ff7a5c 45%,#E63030 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.divider .rule{transform-origin:center;animation:rule-grow 1.1s cubic-bezier(.2,.8,.2,1) .7s both}
@keyframes rule-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.divider img{animation:glove-pop .7s cubic-bezier(.3,1.5,.5,1) 1.1s both}
@keyframes glove-pop{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
/* ---------- the CHICKA-D button ---------- */
.client{position:relative;overflow:hidden;box-shadow:0 0 0 0 rgba(204,23,23,.6),0 18px 50px -18px rgba(204,23,23,.9);animation:pulse-ring 3s ease-out 1.6s infinite;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(204,23,23,.55),0 18px 50px -18px rgba(204,23,23,.9)}70%{box-shadow:0 0 0 22px rgba(204,23,23,0),0 18px 50px -18px rgba(204,23,23,.9)}100%{box-shadow:0 0 0 0 rgba(204,23,23,0),0 18px 50px -18px rgba(204,23,23,.9)}}
.client::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out 2.2s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
.client:hover{transform:translateY(-3px) scale(1.01)}
.client:active{transform:translateY(1px) scale(.985);transition-duration:.06s}
.client-n{position:relative;text-shadow:0 2px 0 rgba(0,0,0,.18)}
/* ---------- ripple + press (all buttons) ---------- */
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .65s ease-out forwards;pointer-events:none}
.scard .rip,.nextbar .rip{background:rgba(204,23,23,.18)}
.nextbar .rip{background:rgba(255,255,255,.18)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.pressable{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.pressable:active{transform:scale(.985)}
/* ---------- screen transitions ---------- */
.screen-enter{animation:screen-in .5s cubic-bezier(.2,.8,.2,1)}
@keyframes screen-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.chrome{animation:chrome-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes chrome-in{from{transform:translateY(-100%)}to{transform:none}}
/* ---------- system grid ---------- */
.flow-node{position:relative;padding:4px 8px;border-radius:4px;animation:node-lit .5s ease both;animation-delay:calc(.25s + var(--i,0)*.12s)}
@keyframes node-lit{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.flow-node::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--color-red);transform:scaleX(0);transform-origin:left;animation:node-underline .4s ease both;animation-delay:calc(.45s + var(--i,0)*.12s)}
@keyframes node-underline{to{transform:scaleX(1)}}
.flow-arrow{animation:arrow-in .4s ease both;animation-delay:calc(.4s + var(--i,0)*.12s)}
@keyframes arrow-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.scard{opacity:0;animation:card-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--i,0)*.08s);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
@keyframes card-in{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.scard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(26,26,26,.5)}
.scard .seq{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.scard:hover .seq{transform:scale(1.12)}
.scard-cta{transition:letter-spacing .2s}
.scard:hover .scard-cta{letter-spacing:.14em}
/* ---------- SOP steps: reveal on scroll ---------- */
.sop-head>*{animation:screen-in .55s cubic-bezier(.2,.8,.2,1) backwards}
.sop-head>*:nth-child(2){animation-delay:.12s}
.step{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.step.in{opacity:1;transform:none}
.step.in .step-n{animation:num-pop .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes num-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.step.active{border-color:var(--color-red);box-shadow:0 0 0 1px var(--color-red),0 18px 40px -26px rgba(204,23,23,.6)}
.shot{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s}
.shot img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shot:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,0,0,.5)}
.shot:hover img{transform:scale(1.06)}
.rail-list a{transition:color .2s,border-color .2s,padding-left .2s}
.rail-list a.on{color:var(--color-red);border-left-color:var(--color-red);padding-left:16px}
.rail-list a.on span{color:var(--color-red)}
.readbar{position:fixed;left:0;top:0;height:3px;background:var(--color-red);z-index:60;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .1s linear;box-shadow:0 0 12px rgba(204,23,23,.8)}
.nextbar{transition:transform .2s,box-shadow .2s}
.nextbar:hover{transform:translateY(-2px);box-shadow:0 20px 40px -22px rgba(0,0,0,.6)}
.nextbar-n{transition:letter-spacing .25s}
.nextbar:hover .nextbar-n{letter-spacing:.03em}
/* ---------- video modal ---------- */
.modal-bg{animation:fade .25s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{animation:modal-in .45s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes modal-in{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.zoom{animation:modal-in .35s cubic-bezier(.2,.9,.3,1.1) both}
.pbtn{transition:transform .15s,background .15s,box-shadow .2s}
.pbtn:hover{transform:scale(1.06)}.pbtn:active{transform:scale(.94)}
.pbtn.playing{box-shadow:0 0 0 6px rgba(204,23,23,.18);animation:pulse-play 1.6s ease-in-out infinite}
@keyframes pulse-play{50%{box-shadow:0 0 0 12px rgba(204,23,23,.06)}}
.fill{transition:width .2s linear;position:relative}
.fill::after{content:"";position:absolute;right:-1px;top:-4px;width:16px;height:16px;border-radius:50%;background:var(--color-red);box-shadow:0 0 10px rgba(204,23,23,.9);opacity:0;transition:opacity .2s}
.track:hover .fill::after{opacity:1}
.tval{transition:color .3s,transform .3s}
.tbox.down.urgent .tval{color:#ff6b6b;animation:tick .5s ease-in-out infinite alternate}
@keyframes tick{from{transform:scale(1)}to{transform:scale(1.06)}}
.tbox.down.done .tval{color:#7CFF9B}
/* ---------- language toggle ---------- */
.lang-set{position:relative;transition:border-color .3s}
.lang{transition:color .25s,background .3s}
.lang.on{animation:lang-pop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes lang-pop{from{transform:scale(.92)}to{transform:none}}
.lang-swap{animation:lang-fade .45s ease both}
@keyframes lang-fade{from{opacity:.2;filter:blur(3px)}to{opacity:1;filter:none}}
}
/* mobile-first touch polish (always) */
@media(max-width:640px){
.client{min-height:150px}
.lang{padding:13px 26px;font-size:16px}
.scard{padding:20px}
.step{padding:18px;grid-template-columns:42px minmax(0,1fr);gap:12px}
.step-n{font-size:32px}
.timers{width:100%}
.tbox{flex:1}
}