home: zoom-into-card page transition + loader on desk/about; front-page icon swaps

- Home nav cards (About/Desk/Studio/Work) now zoom the white card up until it
  fills the screen, fade the inner content out, then fade to a dark #222 veil so
  the handoff into the destination's dark loader is seamless, then navigate.
  (front-page.php CSS/veil, js/front-page.js click handler -> v4-front.min.js.)
- Front-page animated icon: About morphs to the bubble, Work morphs to the
  buildings; removed the Contact nav link.
- Page loader (loader.php) added to Desk (inline, like Studio) and About (hooked
  to wp_body_open, which block-rendered pages fire via core).
- Fix: desk.js was fadeOut(100)-ing #loader on load, so the Desk loader flashed
  away instantly — removed it so loader.php's slow fade runs (matching Studio).

inc/tweaks.php

@@ -237,5 +237,14 @@ function dw_redirect_now_to_desk() {
 }
 add_action( 'template_redirect', 'dw_redirect_now_to_desk' );
 
+// Preloader on the block-rendered About page (classic templates — studio, desk —
+// include loader.php inline; block pages fire wp_body_open via core).
+function dw_about_loader() {
+	if ( is_page( 'about' ) ) {
+		get_template_part( 'loader' );
+	}
+}
+add_action( 'wp_body_open', 'dw_about_loader' );
+
 
 ?>

js/desk.js

@@ -1,10 +1,7 @@
 
 jQuery(document).ready(function($) {
-	
-	$(window).bind('load', function() {
-		$('#loader').fadeOut(100);
-	});
-	
+
+	// (loader fade-out is handled by loader.php's own script — slow fade, matching Studio)
 	$(function() {
 	    $("img.alignnone").lazyload();
 	});

js/front-page.js

@@ -51,7 +51,7 @@ $(document).ready(function(){
 		iconmorph.to('mail', {duration:1000, easing:'quad-in-out', rotation:'random'});
 	});
 	$( "a.about-card" ).hover(function() {
-		iconmorph.to('about', {duration:1000, easing:'quad-in-out', rotation:'clock'});
+		iconmorph.to('contact', {duration:1000, easing:'quad-in-out', rotation:'clock'});
 	});
 	$( "a.code-card" ).hover(function() {
 		iconmorph.to('code', {duration:1000, easing:'quad-in-out', rotation:'random'});
@@ -62,7 +62,26 @@ $(document).ready(function(){
 	$( "a.studio-card" ).hover(function() {
 		iconmorph.to('studio', {duration:1000, easing:'quad-in-out', rotation:'clock'});
 	});
-	$( "a.contact-card" ).hover(function() {
-		iconmorph.to('contact', {duration:1000, easing:'quad-in-out', rotation:'random'});
+	$( "a.work-card" ).hover(function() {
+		iconmorph.to('about', {duration:1000, easing:'quad-in-out', rotation:'random'});
+	});
+
+	// Zoom-into-card page transition: clicking a home nav-card scales the white card
+	// up until it fills the screen (fading the inner content), then navigates.
+	$( "a.about-card, a.desk-card, a.studio-card, a.work-card" ).on('click', function (e) {
+		var href = this.getAttribute('href');
+		if (!href) return;
+		e.preventDefault();
+		var $card = $('.container.card');
+		if ($card.hasClass('dw-zoom')) return; // already animating
+		document.documentElement.style.overflow = 'hidden';
+		document.body.style.overflow = 'hidden';
+		document.body.classList.add('dw-zooming'); // fade the dark veil in over the zoom
+		$card.addClass('dw-zoom');
+		var content = document.querySelector('.card .content');
+		var gone = false;
+		function go() { if (gone) return; gone = true; window.location.href = href; }
+		if (content) content.addEventListener('transitionend', go, { once: true });
+		setTimeout(go, 950); // fail-safe if transitionend never fires
 	});
 });

page-desk.php

@@ -4,6 +4,7 @@ Template Name: Desk
 */
 
 get_header(); ?>
+<?php get_template_part( 'loader' ); ?>
 <?php get_template_part( 'underscore' ); ?>
 	<div class="container leader">
 		<div class="row">