body { margin: 0; font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { text-decoration: none; }
img { max-width: 100%; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kineticIn { from { opacity: 0; transform: translateY(46px) rotate(-1.1deg); } to { opacity: 1; transform: none; } }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes swipeRow { 0%, 97.5% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }

#cursor-dot { position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #FE713B; mix-blend-mode: hard-light; pointer-events: none; z-index: 9998; transform: translate(-200px,-200px); transition: transform 0.22s cubic-bezier(.2,.8,.2,1); will-change: transform; }
@media (pointer: coarse) { #cursor-dot { display: none; } }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.menu-panel { position: fixed; top: clamp(12px,2vw,24px); right: clamp(12px,2vw,24px); width: fit-content; max-width: 90vw; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 24px; padding: clamp(20px,3vw,32px); padding-left: calc(clamp(20px,3vw,32px) + 60px); box-shadow: 0 30px 70px rgba(36,31,28,0.22); z-index: 60; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.menu-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

#loader { position: fixed; inset: 0; background: #241F1C; color: #FEF5E6; z-index: 9999; transition: transform 0.7s cubic-bezier(.65,0,.35,1), visibility 0.7s; transform: translateY(0); visibility: visible; }
#loader.is-loaded { transform: translateY(-100%); visibility: hidden; pointer-events: none; }

.toggle-panel { display: none; }
.toggle-panel.is-open { display: block; }

@media (max-width: 720px) {
  .work-grid { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .work-grid > a { flex: 0 0 82%; scroll-snap-align: start; }
}

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

@media (max-width: 640px) {
  .menu-panel { left: 12px; right: 12px; width: auto; max-width: none; padding-left: clamp(20px,3vw,32px); }
}