/* ============================================================
PAGE TRANSITION — grid wipe
A 4x16 grid of tiles that each grow from the left edge to cover the
screen, then shrink away to the right to reveal the new page — the
style used by this class of Awwwards/GSAP "block reveal" tutorial.
Reimplemented here in plain CSS + vanilla JS (no GSAP, no build
step) since this site is static HTML with no framework.
TO REMOVE THIS FEATURE ENTIRELY:
1. Delete this file and assets/js/page-transition.js
2. In index.html and case-study.html, delete:
- the tag
- the
...
block right after
- the tag
Nothing else on the site references any of this.
============================================================ */
:root{
--pt-color:var(--ink); /* colour of the wipe — change freely */
--pt-tile:.5s; /* per-tile grow/shrink duration */
--pt-ease:cubic-bezier(.76,0,.24,1);
}
/* Tiles are staggered by column, so at any instant a tile is always a touch
further along than its right-hand neighbour — that gap between "how far
this tile has grown" and "where the next tile's slot starts" is real (not
sub-pixel rounding), and a plain flush edge or a flex-redistributed margin
both leave it exposed as a hairline of the real page. Fixed by giving every
row/tile a fixed extra 10px of size that is *not* redistributable (flex
grow/shrink off) and pulling the next one back with a matching negative
margin, so each tile physically overlaps 10px into its neighbour's slot at
every point of its animation, not just at rest. The overlay box itself is
oversized by the same amount so the last row/column's overlap has room to
fall off-screen instead of showing at the viewport edge. */
.pt-overlay{position:fixed;inset:-10px -10px -10px 0;z-index:999;display:flex;flex-direction:column;pointer-events:none}
.pt-overlay.pt-cover{pointer-events:auto}
.pt-row{flex:0 0 calc(25% + 10px);display:flex;margin-bottom:-10px}
.pt-block{flex:0 0 calc(6.25% + 10px);height:100%;margin-right:-10px;background:var(--pt-color);transform:scaleX(1)}
.pt-overlay.pt-cover .pt-block{
transform-origin:0% 50%;
animation:pt-in var(--pt-tile) var(--pt-ease) backwards;
}
.pt-overlay.pt-reveal .pt-block{
transform-origin:100% 50%;
animation:pt-out var(--pt-tile) var(--pt-ease) both;
}
@keyframes pt-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pt-out{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
.pt-overlay{display:none!important}
}