html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: #F5F3EE;
  color: #0E0E10;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; }
.font-script  { font-family: 'Caveat', cursive; }

.paper {
  background-color: #F5F3EE;
  background-image:
    radial-gradient(rgba(14,14,16,0.035) 1px, transparent 1px),
    radial-gradient(rgba(14,14,16,0.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}
.grain::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.055  0 0 0 0 0.055  0 0 0 0 0.062  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{ transition-delay: 80ms; }
.reveal[data-delay="2"]{ transition-delay: 160ms; }
.reveal[data-delay="3"]{ transition-delay: 240ms; }
.reveal[data-delay="4"]{ transition-delay: 320ms; }
.reveal[data-delay="5"]{ transition-delay: 400ms; }

.swoosh-path { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.2s cubic-bezier(.6,.1,.2,1) .3s; }
.swoosh.is-in .swoosh-path { stroke-dashoffset: 0; }

@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee-track { animation: marquee 38s linear infinite; }

.proc-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.1,.2,1); }
.proc-line.is-in { stroke-dashoffset: 0; }

.cursor-dot {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 999px;
  background: #0E0E10; pointer-events: none; z-index: 90; mix-blend-mode: difference;
  transform: translate(-50%,-50%); transition: width .2s ease, height .2s ease, background .2s;
  will-change: transform;
}
.cursor-dot.hover { width: 38px; height: 38px; background: #A8D94A; mix-blend-mode: normal; }
@media (hover: none) { .cursor-dot { display: none; } }

*:focus-visible { outline: 2px solid #A8D94A; outline-offset: 3px; border-radius: 4px; }

.magnet { display: inline-block; will-change: transform; transition: transform .25s cubic-bezier(.2,.7,.2,1); }

.svc-card { transition: background-color .35s ease, color .35s ease, transform .35s ease, border-color .35s; }
.svc-card:hover { background: #0E0E10; color: #F5F3EE; transform: translateY(-4px); border-color: #0E0E10; }
.svc-card:hover .svc-arrow { color: #A8D94A; transform: translateX(4px); }
.svc-card:hover .svc-icon-ring { border-color: #A8D94A; color: #A8D94A; }
.svc-arrow { transition: transform .3s ease, color .3s ease; }
.svc-icon-ring { transition: border-color .3s, color .3s; }

.work-tile .work-img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.work-tile:hover .work-img { transform: scale(1.04); }
.work-tile .corner-tag { transform: translate(-6px, 6px); opacity: 0; transition: transform .35s, opacity .35s; }
.work-tile:hover .corner-tag { transform: translate(0,0); opacity: 1; }

@keyframes blob {
  0%,100% { border-radius: 58% 42% 52% 48% / 44% 55% 45% 56%; transform: rotate(0deg); }
  33%     { border-radius: 42% 58% 46% 54% / 56% 42% 58% 44%; transform: rotate(8deg); }
  66%     { border-radius: 50% 50% 62% 38% / 40% 60% 40% 60%; transform: rotate(-6deg); }
}
.blob { animation: blob 14s ease-in-out infinite; }

@keyframes float1 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(6deg)} }
@keyframes float2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(10px) rotate(-8deg)} }
@keyframes float3 { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(8px,-10px) rotate(12deg)} }
.float1 { animation: float1 7s ease-in-out infinite; }
.float2 { animation: float2 9s ease-in-out infinite; }
.float3 { animation: float3 11s ease-in-out infinite; }

.tech-cell { transition: border-color .25s, box-shadow .25s, color .25s, background-color .25s; }
.tech-cell:hover { border-color: #A8D94A; color: #0E0E10; box-shadow: 0 0 0 3px rgba(168,217,74,.18), 0 10px 30px -18px rgba(168,217,74,.8); }

.band { background: #0E0E10; color: #F5F3EE; }

h1,h2,h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.overlay { transform: translateY(-100%); transition: transform .5s cubic-bezier(.7,.1,.2,1); }
.overlay.open { transform: translateY(0); }

.dot { transition: width .3s ease, background-color .3s; }

.nav-underline {
  position: absolute; left: 1rem; right: 1rem; bottom: 0.25rem; height: 2px;
  background: #A8D94A; transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.group:hover .nav-underline { transform: scaleX(1); }

@keyframes fadein { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform:none;} }
.q-fade { animation: fadein .5s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .swoosh-path { stroke-dashoffset: 0 !important; }
  .proc-line { stroke-dashoffset: 0 !important; }
}