/* site.css · Neo-Brutalist (Red + Light Gray)
   Shared across index.html and work/*.html
   Requires: Space Grotesk, Inter, JetBrains Mono */

:root{
  --bg:#F0F0F0;
  --bg2:#E5E5E5;
  --surface:#FFFFFF;
  --surface2:#F8F8F8;
  --line:#000000;
  --line2:#000000;
  --text:#0A0A0A;
  --muted:#383838;
  --dim:#666666;
  --acc:#FF385C;
  --acc2:#E02447;
  --acc-dim:rgba(255, 56, 92, 0.12);
  --glow:none;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1200px;
  --bw:3px;
  --hard-shadow:5px 5px 0px #000000;
  --hard-shadow-lg:8px 8px 0px #000000;
  --hard-shadow-sm:3px 3px 0px #000000;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#FFFFFF}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.mono{font-family:'JetBrains Mono',monospace}
.acc{color:var(--acc)}

/* ---- NAV ---- */
#nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:var(--bg);
  border-bottom:var(--bw) solid #000000;
  transition:background .2s,box-shadow .2s;
}
#nav.scrolled{
  background:rgba(240,240,240,0.96);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 0px rgba(0,0,0,0.08);
}
#nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;
  letter-spacing:.02em;
  color:#000000;
}
.logo .mk{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:none;
}
.logo .mk svg{
  width:100%;
  height:100%;
  overflow:visible;
  display:block;
}

/* MR monogram progressive draw */
.logo .mk .chip,
.logo .mk .edges line,
.logo .mk .trace{
  stroke-dasharray:260;
  stroke-dashoffset:260;
  transition:stroke-dashoffset .9s var(--ease);
}
.logo .mk .nodes circle,
.logo .mk .active circle,
.logo .mk .pin{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  transform:scale(.2);
  transition:opacity .4s ease,transform .42s var(--ease);
}
.logo .mk .tip{opacity:0}
.logo .mk.noanim .chip,
.logo .mk.noanim .edges line,
.logo .mk.noanim .trace,
.logo .mk.noanim .nodes circle,
.logo .mk.noanim .active circle,
.logo .mk.noanim .pin{
  transition:none!important;
}
.logo .mk.play .chip{stroke-dashoffset:0;transition-duration:1.5s}
.logo .mk.play .edges line{stroke-dashoffset:0;transition-duration:.4s}
.logo .mk.play .edges line:nth-child(1){transition-delay:.12s}
.logo .mk.play .edges line:nth-child(2){transition-delay:.30s}
.logo .mk.play .edges line:nth-child(3){transition-delay:.48s}
.logo .mk.play .edges line:nth-child(4){transition-delay:.66s}
.logo .mk.play .edges line:nth-child(5){transition-delay:.90s}
.logo .mk.play .edges line:nth-child(6){transition-delay:1.06s}
.logo .mk.play .edges line:nth-child(7){transition-delay:1.22s}
.logo .mk.play .edges line:nth-child(8){transition-delay:1.38s}
.logo .mk.play .trace{stroke-dashoffset:0;transition-delay:1.62s;transition-duration:.45s}
.logo .mk.play .nodes circle,
.logo .mk.play .active circle,
.logo .mk.play .pin{
  opacity:1;
  transform:scale(1);
}
.logo .mk.play .nodes circle:nth-child(1){transition-delay:.55s}
.logo .mk.play .nodes circle:nth-child(2){transition-delay:.30s}
.logo .mk.play .nodes circle:nth-child(3){transition-delay:1.05s}
.logo .mk.play .nodes circle:nth-child(4){transition-delay:1.20s}
.logo .mk.play .nodes circle:nth-child(5){transition-delay:1.35s}
.logo .mk.play .active circle:nth-child(1){transition-delay:.62s}
.logo .mk.play .active circle:nth-child(2){transition-delay:.42s}
.logo .mk.play .active circle:nth-child(3){transition-delay:1.55s}
.logo .mk.play .pin{transition-delay:2.0s}

.navlinks{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.8vw,34px);
}
.navlinks a{
  font-family:'Space Grotesk',sans-serif;
  font-size:.88rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#000000;
  border-bottom:3px solid transparent;
  padding:4px 0;
  transition:color .2s,border-color .2s;
}
.navlinks a:hover{
  color:var(--acc);
  border-color:var(--acc);
}
.navlinks a.cta{
  background:var(--acc);
  color:#FFFFFF;
  border:var(--bw) solid #000000;
  box-shadow:var(--hard-shadow-sm);
  border-radius:4px;
  padding:8px 18px;
  transition:transform .15s,box-shadow .15s;
}
.navlinks a.cta:hover{
  transform:translate(-2px,-2px);
  box-shadow:var(--hard-shadow);
  color:#FFFFFF;
  border-color:#000000;
}
@media(max-width:640px){.navlinks a.hide-sm{display:none}}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:14px 28px;
  border-radius:4px;
  border:var(--bw) solid #000000;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .2s,color .2s;
  cursor:pointer;
  text-decoration:none;
}
.btn.primary{
  background:var(--acc);
  color:#FFFFFF;
  box-shadow:var(--hard-shadow);
}
.btn.primary:hover{
  transform:translate(-2px,-2px);
  box-shadow:var(--hard-shadow-lg);
  color:#FFFFFF;
}
.btn.ghost{
  background:#FFFFFF;
  color:#000000;
  box-shadow:var(--hard-shadow);
}
.btn.ghost:hover{
  background:#000000;
  color:#FFFFFF;
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0px var(--acc);
}
.btn.mag{
  will-change:transform;
}

/* ---- BEFORE / AFTER SLIDER ---- */
.ba-slider{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:4px;
  overflow:hidden;
  border:var(--bw) solid #000000;
  box-shadow:var(--hard-shadow);
  background:#000000;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  cursor:ew-resize;
}
.ba-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  display:block;
}
.ba-after-wrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  clip-path:inset(0 0 0 calc(var(--pos, 50%)));
  pointer-events:none;
}
.ba-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos, 50%);
  width:0;
  pointer-events:none;
  z-index:10;
  transform:translateX(-50%);
}
.ba-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  background:#000000;
  box-shadow:0 0 0 1px rgba(255,255,255,0.7);
  transform:translateX(-50%);
}
.ba-button{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--acc);
  border:2.5px solid #000000;
  box-shadow:var(--hard-shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#FFFFFF;
  gap:2px;
}
.ba-button svg{width:12px;height:12px;stroke:#FFFFFF}
.ba-badge{
  position:absolute;
  top:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.12em;
  padding:4px 10px;
  border-radius:3px;
  z-index:5;
  pointer-events:none;
  border:2px solid #000000;
}
.ba-badge-before{
  left:12px;
  color:#000000;
  background:#FFFFFF;
  box-shadow:2px 2px 0px #000000;
}
.ba-badge-after{
  right:12px;
  color:#FFFFFF;
  background:var(--acc);
  box-shadow:2px 2px 0px #000000;
}

/* ---- TOAST NOTIFICATION ---- */
#toast{
  position:fixed;
  bottom:28px;
  right:28px;
  background:#FFFFFF;
  border:var(--bw) solid #000000;
  box-shadow:var(--hard-shadow-lg);
  color:#000000;
  padding:14px 24px;
  border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:.85rem;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:100;
  opacity:0;
  transform:translateY(16px) scale(.95);
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
#toast svg{color:var(--acc);flex-shrink:0}
#toast.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
@media(max-width:640px){#toast{bottom:20px;right:20px;left:20px;justify-content:center;font-size:.76rem}}

/* ---- FOOTER ---- */
footer{
  border-top:var(--bw) solid #000000;
  background:#FFFFFF;
  padding:42px 0;
}
footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
footer .mono{color:#444444;font-weight:700;font-size:.84rem}
footer a{
  color:#000000;
  font-family:'Space Grotesk',sans-serif;
  font-weight:800;
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:2px solid transparent;
  transition:.2s;
}
footer a:hover{
  color:var(--acc);
  border-color:var(--acc);
}

/* ---- scroll progress ---- */
#progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  background:var(--acc);
  z-index:60;
  transition:width .1s linear;
}
#glow{display:none}

/* reveal */
.rv{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}