/* ==========================================================================
   Motion — extra animations shared by julyjagoron.org and shop.julyjagoron.org.
   Everything here switches off for visitors who ask for reduced motion.
   ========================================================================== */

/* ---------- Icons ---------- */
.ic, .social svg { transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes ic-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes ic-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes ic-drive { 0% { transform: translateX(0); } 40% { transform: translateX(6px); } 60% { transform: translateX(6px); } 100% { transform: translateX(0); } }
@keyframes ic-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes ic-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes ic-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-shackle { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-3px); } 90% { transform: translateY(0); } }

/* Icons draw themselves the first time they come into view */
.trust-item .ic path, .trust-item .ic rect, .trust-item .ic circle,
.pd-perks .ic path, .pd-perks .ic rect, .pd-perks .ic circle { stroke-dasharray: 80; stroke-dashoffset: 0; }
.trust-item.in .ic path, .trust-item.in .ic rect, .trust-item.in .ic circle { animation: ic-draw 1.1s ease-out both; }

/* Each icon has its own little personality on hover */
.trust-item { transition: transform .25s, background .25s; }
.trust-item:hover { transform: translateY(-3px); }
.trust-item:hover .ic { animation: ic-wiggle .7s ease-in-out; }
.trust-item:nth-child(1):hover .ic, .pd-perks li:hover .ic:first-child { animation: ic-drive .8s ease-in-out infinite; }
.trust-item:nth-child(2):hover .ic { animation: ic-flip .8s ease-in-out; }
.trust-item:nth-child(3):hover .ic { animation: ic-shackle .6s ease-in-out infinite; }
.trust-item:nth-child(4) .ic { animation: ic-beat 2.4s ease-in-out 1.5s infinite; transform-origin: center; }
.cart-btn:hover .ic { animation: ic-wiggle .6s ease-in-out; transform-origin: 50% 20%; }
.hsearch:focus-within .ic, .msearch:focus-within .ic { transform: rotate(90deg) scale(1.1); }
.hsearch button:hover .ic { transform: scale(1.2) rotate(-12deg); }
.btn .ic { transition: transform .3s; }
.btn:hover .ic { transform: translateY(-2px) rotate(-8deg) scale(1.1); }
.dl-list .btn:hover .ic, .pd-kind .dl .ic { animation: ic-bob 1s ease-in-out infinite; }
.cline-rm:hover .ic { animation: ic-wiggle .5s; }
.qty button:active .ic { transform: scale(.7); }
.stock-line .ok .ic { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) .3s both; }
.cart-empty-ic .ic { animation: ic-bob 2.2s ease-in-out infinite; }
.box-title .ic, .courier-line .ic { animation: ic-bob 2.6s ease-in-out infinite; }
.coupon-on .ic { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.social a:hover svg { transform: rotate(-12deg) scale(1.15); }
.social a:nth-child(2):hover svg { transform: rotate(12deg) scale(1.15); }
.social a:nth-child(3):hover svg { transform: scale(1.2); }

/* ---------- Header & navigation ---------- */
.ann { overflow: hidden; }
.ann .wrap { animation: ann-in .8s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes ann-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
.nav li a { position: relative; }
.nav li a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px; background: var(--red); transition: left .25s, right .25s; }
.nav li a:hover::after { left: 10px; right: 10px; }
.nav li a[aria-current]::after { display: none; }
.cart-n:not(.zero) { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) .6s both; }
.lang a { transition: background .2s, color .2s; }

/* ---------- Buttons ---------- */
.btn:not(.btn-ghost):not(.btn-white):not(.btn-outline-white) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn-ghost):not(.btn-white):not(.btn-outline-white)::before {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s;
}
.btn:not(.btn-ghost):not(.btn-white):not(.btn-outline-white):hover::before { left: 125%; }
.btn-block { animation: none; }
.hero .actions .btn:first-child { animation: cta-pulse 2.8s ease-in-out 2s infinite; }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(237, 27, 37, .35); } 50% { box-shadow: 0 0 0 12px rgba(237, 27, 37, 0); } }

/* ---------- Page heads & hero ---------- */
.page-head::after { animation: wm-float 14s ease-in-out infinite alternate; }
@keyframes wm-float { from { transform: translateY(-50%) rotate(-8deg); } to { transform: translateY(-46%) rotate(4deg) scale(1.05); } }
.shop-hero .hero-mark img:not(.hero-custom) { animation: hero-turn 26s linear 1.2s infinite; }
@keyframes hero-turn { from { transform: rotate(-6deg); } to { transform: rotate(354deg); } }

/* ---------- Cards & tiles ---------- */
.pcard .badge { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) .25s both; }
.pcard:hover .badge { animation: ic-wiggle .6s; }
.pcard .price .now { display: inline-block; transition: transform .25s; }
.pcard:hover .price .now { transform: scale(1.08); }
.pcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%); transform: translateX(-100%); transition: transform .8s; pointer-events: none; }
.pcard:hover .pcard-media::after { transform: translateX(100%); }
.cat b { transition: transform .3s; }
.cat:hover b { transform: translateX(6px); }
.card-media img, .event-img, .gallery img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card-media img { transform: scale(1.06); }
.event:hover .event-date { animation: ic-wiggle .6s; }
.event-date { transition: transform .3s; }
.values li { transition: transform .25s, border-color .25s; }
.values li:hover { transform: translateX(6px); border-color: var(--red); }
.values li:hover::before { animation: ic-spin .6s ease-in-out; }
.panel, .order-box, .summary, .co-main, .donate-card { transition: box-shadow .3s, transform .3s; }
.panel:hover { box-shadow: 0 12px 28px rgba(27, 20, 19, .08); }

/* ---------- Choices, steps, forms ---------- */
.chip input:checked + span, .opt input:checked + span { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.method input:checked + span::before { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.step legend span { transition: background .3s, transform .3s; }
.step:focus-within legend span { background: var(--red); transform: scale(1.12); }
.field input, .field textarea, .field select { transition: border-color .2s, box-shadow .2s, transform .2s; }
.field input:focus, .field textarea:focus { transform: translateY(-1px); }
.notice { animation: notice-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.notice.err { animation: notice-in .45s cubic-bezier(.2, .8, .2, 1) both, shake .45s .45s; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.freebar span::after { animation: bar-grow 1.2s cubic-bezier(.2, .8, .2, 1) .3s both; }
@keyframes bar-grow { from { width: 0; } }
[data-total].bump { display: inline-block; animation: pop .4s ease-out; }

/* ---------- Order progress ---------- */
.progress li::before { transform-origin: left; animation: line-grow .6s ease-out both; }
.progress li:nth-child(2)::before { animation-delay: .25s; } .progress li:nth-child(3)::before { animation-delay: .5s; } .progress li:nth-child(4)::before { animation-delay: .75s; }
@keyframes line-grow { from { transform: scaleX(0); } }
.progress li span { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.progress li:nth-child(2) span { animation-delay: .35s; } .progress li:nth-child(3) span { animation-delay: .6s; } .progress li:nth-child(4) span { animation-delay: .85s; }
.progress li.now span { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both, dot-pulse 1.8s ease-out 1s infinite; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(237, 27, 37, .45); } 100% { box-shadow: 0 0 0 14px rgba(237, 27, 37, 0); } }
.timeline li { animation: notice-in .4s ease-out both; }
.timeline li:nth-child(2) { animation-delay: .1s; } .timeline li:nth-child(3) { animation-delay: .2s; } .timeline li:nth-child(4) { animation-delay: .3s; }
.timeline li:first-child::before { animation: dot-pulse 1.8s ease-out infinite; }

/* ---------- Footer ---------- */
.site-footer .footer-links a, .site-footer address a { display: inline-block; transition: transform .2s, color .2s; }
.site-footer .footer-links a:hover { transform: translateX(5px); }
.footer-pay span { transition: transform .25s, border-color .25s, color .25s; }
.footer-pay span:hover { transform: translateY(-3px); border-color: #fff; color: #fff; }
.site-footer .brand img { animation: ic-spin 40s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}