:root {
    --bg: #ececec;
    --text: #111;
    --accent: #ff3300;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'Roboto Mono', monospace; overflow: hidden; height: 100vh; }

.nav { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem; display: flex; justify-content: space-between; z-index: 100; mix-blend-mode: difference; color: white; }
.logo { font-family: 'Anton', sans-serif; font-size: 2rem; letter-spacing: 2px; }

.slider { width: 100%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; }
.slide { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; perspective: 1000px; }

.bg-text { position: absolute; font-family: 'Anton', sans-serif; font-size: 30vw; color: white; -webkit-text-stroke: 2px #ddd; z-index: 1; user-select: none; pointer-events: none; transition: transform 0.1s; }
.shoe { width: 60%; max-width: 600px; z-index: 10; transform: rotate(-25deg); filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.5)); transition: transform 0.1s; cursor: pointer; }

.info { position: absolute; bottom: 10%; right: 10%; text-align: right; z-index: 20; }
.info h2 { font-family: 'Anton', sans-serif; font-size: 4rem; text-transform: uppercase; line-height: 1; }
.info p { font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; color: var(--accent); }
.add-to-cart { background: var(--text); color: white; border: none; padding: 1rem 2rem; font-family: 'Roboto Mono', monospace; font-size: 1.2rem; cursor: pointer; transition: 0.3s; }
.add-to-cart:hover { background: var(--accent); transform: scale(1.05) skewX(-10deg); }

/* cart shake */
@keyframes cart-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
.shake-cart { animation: cart-shake 0.3s; color: var(--accent); }