/* VierQuad — motion layer. Everything here is decoration: the site works without it. */

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.rv.rv-pop { transform: scale(.86); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Header ---------- */
header img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mark-in { animation: markIn 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes markIn { from { opacity: 0; transform: rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }
header a:hover img { transform: rotate(90deg); }
header nav a { transition: box-shadow .25s ease, color .25s ease, filter .2s ease; }
header nav a:not([aria-current]):not(:last-child):hover { color: #FFFFFF !important; box-shadow: inset 0 -2px 0 #F37021 !important; }

/* ---------- Buttons & links ---------- */
a[style*="background"], button { transition: filter .2s ease, transform .15s ease; }
a[style*="background"]:active, button:active { transform: translateY(1px); }
.arr { display: inline-block; transition: transform .25s ease; }
a:hover .arr, .lift:hover .arr { transform: translateX(5px); }
.arr-back:hover .arr { transform: translateX(-5px); }

/* ---------- Cards ---------- */
.lift { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease !important; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.18); border-color: #F37021 !important; }
.tile { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.tile:hover { transform: translateY(-4px); }

/* ---------- Bars in product illustrations ---------- */
.bar { transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.bars-in .bar { transform: scaleY(1); }

/* ---------- ZAN AI chat ---------- */
.chat-step { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.chat-step.in { opacity: 1; transform: none; }
.typing { display: inline-flex; gap: 5px; padding: 14px 16px; background: #111111; border-left: 3px solid #F37021; align-self: flex-start; }
.typing i { width: 7px; height: 7px; background: #C9CCD2; animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.caret::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #8F949C; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- noQue "order ready" notification ---------- */
.notify { animation: notify .7s cubic-bezier(.2,.7,.2,1) both; position: relative; }
.notify::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 0 0 rgba(243,112,33,.6); animation: ping 1.8s .8s ease-out 2; pointer-events: none; }
@keyframes notify { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes ping { to { box-shadow: 0 0 0 14px rgba(243,112,33,0); } }

/* ---------- Live status dot (ZAN AI header, orders) ---------- */
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .bar, .chat-step { opacity: 1 !important; transform: none !important; }
}