/* Motion. Everything starts visible; the "pu-js" class (added by motion.js) hides
   items until they scroll in, so without JavaScript nothing stays hidden. */

.pu-js .pu-reveal { opacity: 0; transform: translateY(46px); transition: opacity 0.9s var(--pu-ease), transform 1s var(--pu-ease); transition-delay: var(--d, 0s); }
.pu-js .pu-reveal.is-in { opacity: 1; transform: none; }

/* Pages fade out when a link to another page is followed. */
.pu-js body.pu-leaving { opacity: 0; transition: opacity 0.22s ease; }

/* Headline: each word rises out of its own mask. */
.pu-js .pu-split .pu-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pu-js .pu-split .pu-w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--pu-ease); transition-delay: var(--d, 0s); }
.pu-js .pu-split.is-in .pu-w > span { transform: none; }

/* Highlight marker sweeps in behind its word after the headline lands. */
.pu-js .pu-hl::before { transform: scaleX(0); transition: transform 0.8s var(--pu-ease-in-out) 0.75s; }
.pu-js .is-in .pu-hl::before, .pu-js .pu-hl.is-in::before { transform: scaleX(1); }

/* Floating photos: bob gently; JS adds a mouse parallax offset on top. */
.pu-float > * { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform 0.6s var(--pu-ease); }
/* The hero animates on load with CSS alone, so it never waits for scripts. */
.pu-hero__title .elementor-heading-title, h1.elementor-heading-title, .pu-archive-head h1, .entry-header h1, .pu-project-head h1, .pu-404 h1 { animation: pu-rise 0.8s var(--pu-ease) 0.05s both; }
.pu-hero .pu-hl::before { transform: none; animation: pu-sweep 0.7s var(--pu-ease-in-out) 0.55s both; }
.pu-float { animation: pu-pop 0.8s var(--pu-ease) 0.35s both, pu-bob 7s ease-in-out 1.2s infinite; }
.pu-float--r { animation-delay: 0.5s, -2.3s; }
@keyframes pu-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pu-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pu-pop { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
@keyframes pu-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* Cards and grids come in one after another. */
.pu-js .pu-stagger > * { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--pu-ease), transform 0.9s var(--pu-ease); }
.pu-js .pu-stagger.is-in > * { opacity: 1; transform: none; }
.pu-js .pu-stagger.is-in > *:nth-child(2) { transition-delay: 0.1s; }
.pu-js .pu-stagger.is-in > *:nth-child(3) { transition-delay: 0.2s; }
.pu-js .pu-stagger.is-in > *:nth-child(4) { transition-delay: 0.3s; }
.pu-js .pu-stagger.is-in > *:nth-child(5) { transition-delay: 0.4s; }
.pu-js .pu-stagger.is-in > *:nth-child(6) { transition-delay: 0.5s; }
.pu-js .pu-stagger.is-in > *:nth-child(n+7) { transition-delay: 0.6s; }

/* Section heads: the divider draws from left to right. */
.pu-js .pu-head { border-bottom-color: transparent; background: linear-gradient(var(--pu-line), var(--pu-line)) left bottom / 0% 1px no-repeat; transition: background-size 1.2s var(--pu-ease-in-out); }
.pu-js .pu-head.is-in { background-size: 100% 1px; }
.pu-js .pu-panel .pu-head { background-image: linear-gradient(var(--pu-panel-line), var(--pu-panel-line)); }

/* Footer wordmark rises letter by letter. */
.pu-js .pu-footer__word .pu-w > span { transition-duration: 1.2s; }

/* Giant numbers and the logo wall. */
.pu-js .pu-logos li { opacity: 0; transform: scale(0.85); transition: opacity 0.6s, transform 0.7s var(--pu-ease), color 0.3s; transition-delay: var(--d, 0s); }
.pu-js .pu-logos.is-in li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.pu-js .pu-reveal, .pu-js .pu-stagger > *, .pu-js .pu-float, .pu-js .pu-logos li { opacity: 1; transform: none; scale: 1; }
	.pu-js .pu-split .pu-w > span { transform: none; }
	.pu-js .pu-hl::before { transform: none; }
	.pu-js body.pu-leaving { opacity: 1; }
	.pu-js .pu-head { border-bottom-color: var(--pu-line); background: none; }
	.pu-reel__media img { transform: none !important; }
}

/* ---------- Extra motion ---------- */

/* Crossed tapes: two marquee bands, tilted, running in opposite directions. */
.pu-tapes { position: relative; padding-block: clamp(40px, 6vw, 80px); overflow: hidden; }
.pu-tape { overflow: hidden; padding-block: clamp(14px, 1.6vw, 22px); margin-inline: -4vw; }
.pu-tape--a { background: var(--pu-a1); color: var(--pu-on-a1); rotate: -2.5deg; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.pu-tape--b { background: var(--pu-panel); color: var(--pu-on-panel); rotate: 2deg; margin-top: clamp(-34px, -2.4vw, -18px); }
.pu-tape__track { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); width: max-content; will-change: transform; }
.pu-tape__track span { font-family: var(--pu-display); font-weight: 700; font-size: clamp(26px, 4vw, 60px); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.pu-tape__track .is-outline { color: transparent; -webkit-text-stroke: 1.5px currentColor; }
.pu-tape--a .is-outline { -webkit-text-stroke-color: var(--pu-on-a1); }
.pu-tape--b .is-outline { -webkit-text-stroke-color: var(--pu-on-panel); }
.pu-tape__track i { font-style: normal; font-size: clamp(18px, 2.4vw, 34px); line-height: 1; animation: pu-spin 6s linear infinite; }
.pu-tape--a i { color: var(--pu-a2); }
.pu-tape--b i { color: var(--pu-a1); }

/* Photos open like a curtain lifting from the bottom, then settle from a slight zoom. */
.pu-js .aku-project-card__media, .pu-js .aku-post-card__media, .pu-js .pu-card__img img, .pu-js .elementor .pu-photo img { clip-path: inset(100% 0 0 0 round var(--pu-radius)); transition: clip-path 1.1s var(--pu-ease-in-out); }
.pu-js .aku-project-card__media.is-in, .pu-js .aku-post-card__media.is-in, .pu-js .pu-card__img img.is-in, .pu-js .elementor .pu-photo img.is-in { clip-path: inset(0 0 0 0 round var(--pu-radius)); }
.pu-js .aku-project-card__media img, .pu-js .aku-post-card__media img { scale: 1.18; transition: scale 1.4s var(--pu-ease), transform 0.9s var(--pu-ease); }
.pu-js .aku-project-card__media.is-in img, .pu-js .aku-post-card__media.is-in img { scale: 1; }

/* Project cards lean toward the mouse. */
.aku-project-card__media { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--pu-ease), clip-path 1.1s var(--pu-ease-in-out); }

/* Menu links: letters roll up one after another on hover. */
.pu-roll { display: inline-flex; overflow: hidden; height: 1.25em; line-height: 1.25; vertical-align: top; }
.pu-roll > span { display: inline-block; position: relative; transition: transform 0.5s var(--pu-ease); transition-delay: calc(var(--i) * 18ms); }
.pu-roll > span::after { content: attr(data-l); position: absolute; left: 0; top: 100%; }
a:hover > .pu-roll > span, a:focus-visible > .pu-roll > span { transform: translateY(-100%); }

/* Reading progress along the top edge. */
.pu-progress { position: fixed; left: 0; top: 0; z-index: 120; height: 3px; width: 100%; background: var(--pu-a2); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.admin-bar .pu-progress { top: 32px; }

/* Showreel drifts slower than the page (parallax). */
.pu-reel__media img { translate: 0 var(--py, 0); }

/* Cursor with a word: View on projects, Drag on the row, Play on the reel. */
.pu-cursor { display: grid; place-items: center; }
.pu-cursor__label { font: 600 12px/1 var(--pu-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pu-on-a1); opacity: 0; transition: opacity 0.2s; }
.pu-cursor.has-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--pu-a1); mix-blend-mode: normal; opacity: 1; }
.pu-cursor.has-label .pu-cursor__label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.pu-js .aku-project-card__media, .pu-js .aku-post-card__media, .pu-js .pu-card__img img, .pu-js .elementor .pu-photo img { clip-path: none; }
	.pu-js .aku-project-card__media img, .pu-js .aku-post-card__media img { scale: 1; }
	.pu-progress { display: none; }
}