﻿/* V4.2: local graphic cuts, counter-moving type, then exhibit assembly.
   Original content remains ordinary visible DOM without this enhancement. */
body.portfolio-document:not([data-page="home"]) .ex-entry-running {
  --ex-entry-ease:cubic-bezier(.16,.82,.22,1);
  --ex-entry-paper:#eeeeed;
  --ex-entry-title-x:-76px;
  --ex-entry-title-y:12px;
  --ex-entry-title-skew:-5deg;
  --ex-entry-title-cut:inset(0 100% 0 0);
  --ex-entry-display-x:65px;
  --ex-entry-display-y:48px;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-host { position:relative; }
/* Three shutters cover only the local hero, never navigation or controls. */
body.portfolio-document:not([data-page="home"]) .ex-entry-shutters {
  position:absolute;inset:0 -2px;z-index:12;display:flex;gap:0;overflow:hidden;pointer-events:none;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-shutters>i {
  position:relative;flex:1 0 34%;margin-left:-1%;height:100%;background:var(--ex-entry-paper);
  transform-origin:50% 0;animation:ex-entry-shutter-away 650ms cubic-bezier(.65,0,.22,1) both;pointer-events:none;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-shutters>i:nth-child(2) { animation-delay:65ms; }
body.portfolio-document:not([data-page="home"]) .ex-entry-shutters>i:nth-child(3) { animation-delay:125ms; }
body.portfolio-document:not([data-page="home"]) .ex-entry-shutters>i::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:#121212;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-shutters>i:nth-child(2)::after { background:#ffff00; }
body.portfolio-document:not([data-page="home"]) .ex-entry-shutters>i:nth-child(3)::after { background:#00fdfd; }
/* A short graphic punctuation begins the arrival, not a progress indicator. */
body.portfolio-document:not([data-page="home"]) .ex-entry-cue {
  position:absolute;top:13px;left:0;z-index:13;display:flex;width:clamp(140px,26%,310px);height:29px;gap:4px;pointer-events:none;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-cue>i {
  display:block;flex:5;background:#ffff00;transform-origin:0 50%;animation:ex-entry-colour-cut 850ms cubic-bezier(.55,.02,.2,1) both;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-cue>i:nth-child(2) { flex:2;background:#00fdfd;animation-delay:45ms; }
body.portfolio-document:not([data-page="home"]) .ex-entry-cue>i:nth-child(3) { flex:.8;background:#ff00fd;animation-delay:90ms; }
body.portfolio-document:not([data-page="home"]) .ex-entry-cue>b {
  display:grid;place-items:center;width:29px;background:#121212;color:#fafafa;font:900 25px/1 Arial,sans-serif;
  animation:ex-entry-mark-cut 860ms var(--ex-entry-ease) both;
}
/* Opposing type movements form the title before the small labels arrive. */
body.portfolio-document:not([data-page="home"]) .ex-entry-title {
  transform-origin:0 100%;animation:ex-entry-title-assemble 1070ms var(--ex-entry-ease) 100ms both;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-display {
  transform-origin:100% 100%;animation:ex-entry-display-assemble 1120ms var(--ex-entry-ease) 190ms both;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-display>span {
  animation:ex-entry-counter-line 1060ms var(--ex-entry-ease) 270ms both;
}
body.portfolio-document:not([data-page="home"]) .xp-heading-word.ex-entry-display>span { display:inline-block; }
body.portfolio-document:not([data-page="home"]) .ex-entry-info {
  animation:ex-entry-information 540ms var(--ex-entry-ease) var(--ex-entry-delay,570ms) both;
}
/* Permanent rotations are composed last, keeping the final pose unchanged. */
body.portfolio-document:not([data-page="home"]) .ex-entry-plane {
  transform-origin:var(--ex-entry-origin,50% 50%);backface-visibility:hidden;
  animation:ex-entry-plane-assemble 1020ms var(--ex-entry-ease) var(--ex-entry-delay,150ms) both;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-plane:is(:hover,:focus-within) { animation:none; }
/* Family-specific choreography, with less perspective on the reading page. */
body.portfolio-document:not([data-page="home"]) .ex-entry-work {
  --ex-entry-title-x:-55px;--ex-entry-title-y:30px;--ex-entry-title-skew:-3deg;--ex-entry-display-x:80px;--ex-entry-display-y:-30px;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-work .ex-entry-display { transform-origin:100% 50%; }
body.portfolio-document:not([data-page="home"]) .ex-entry-work .ex-entry-plane {
  --ex-entry-plane-x:0px!important;--ex-entry-plane-y:64px!important;--ex-entry-plane-turn:-8deg!important;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-article {
  --ex-entry-paper:#fafafa;--ex-entry-title-x:-52px;--ex-entry-title-y:18px;--ex-entry-title-skew:-2deg;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-article .ex-entry-cue { top:0;left:34px;height:17px;width:155px; }
body.portfolio-document:not([data-page="home"]) .ex-entry-article .ex-entry-shutters>i { animation-duration:570ms; }
body.portfolio-document:not([data-page="home"]) .ex-entry-article .ex-entry-plane {
  --ex-entry-plane-x:42px!important;--ex-entry-plane-turn:-9deg!important;--ex-entry-plane-y:15px!important;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-notes { --ex-entry-display-x:-60px;--ex-entry-display-y:66px; }
body.portfolio-document:not([data-page="home"]) .ex-entry-music {
  --ex-entry-title-x:60px;--ex-entry-title-cut:inset(0 0 0 100%);--ex-entry-title-skew:4deg;--ex-entry-display-x:-78px;--ex-entry-display-y:50px;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-music .ex-entry-cue { top:7px; }
body.portfolio-document:not([data-page="home"]) .ex-entry-about {
  --ex-entry-title-x:85px;--ex-entry-title-cut:inset(0 0 0 100%);--ex-entry-title-skew:5deg;--ex-entry-display-x:-58px;--ex-entry-display-y:56px;
}
body.portfolio-document:not([data-page="home"]) .ex-entry-about .ex-entry-shutters>i:nth-child(2) { transform-origin:50% 100%; }
body.portfolio-document:not([data-page="home"]) .ex-entry-pending { --ex-entry-title-x:-90px;--ex-entry-display-x:75px; }
@keyframes ex-entry-shutter-away {
  0%,10% { transform:translateY(0) scaleY(1); }
  100% { transform:translateY(-8px) scaleY(0); }
}
@keyframes ex-entry-colour-cut {
  0% { transform:scaleX(0); }
  27%,42% { transform:scaleX(1); }
  100% { transform:translateX(90px) scaleX(0); }
}
@keyframes ex-entry-mark-cut {
  0% { opacity:0;transform:translateX(-50px) rotate(-18deg); }
  28%,42% { opacity:1;transform:translateX(0) rotate(0); }
  100% { opacity:0;transform:translateX(54px) rotate(0); }
}
@keyframes ex-entry-title-assemble {
  0% { clip-path:var(--ex-entry-title-cut);opacity:1;transform:translate(var(--ex-entry-title-x),var(--ex-entry-title-y)) skewX(var(--ex-entry-title-skew)); }
  62% { clip-path:inset(0 0 0 0); }
  100% { clip-path:inset(0 0 0 0);opacity:1;transform:translate(0,0) skewX(0); }
}
@keyframes ex-entry-display-assemble {
  0% { clip-path:inset(0 0 100% 0);transform:translate(var(--ex-entry-display-x),var(--ex-entry-display-y)) scale(.95); }
  67% { clip-path:inset(0 0 0 0); }
  100% { clip-path:inset(0 0 0 0);transform:translate(0,0) scale(1); }
}
@keyframes ex-entry-counter-line {
  0% { translate:-90px 24px; }
  100% { translate:0 0; }
}
@keyframes ex-entry-plane-assemble {
  0% { opacity:0;transform:perspective(1000px) translate3d(var(--ex-entry-plane-x),var(--ex-entry-plane-y),-65px) rotateY(var(--ex-entry-plane-turn)) rotateX(9deg) scale(.88) var(--ex-entry-rest); }
  25% { opacity:1; }
  100% { opacity:1;transform:perspective(1000px) translate3d(0,0,0) rotateY(0deg) rotateX(0deg) scale(1) var(--ex-entry-rest); }
}
@keyframes ex-entry-information {
  0% { clip-path:inset(0 0 100% 0);opacity:.25;translate:0 19px; }
  65% { clip-path:inset(0 0 0 0);opacity:1; }
  100% { clip-path:inset(0 0 0 0);opacity:1;translate:0 0; }
}
/* Wait for a committed new frame after the router has restored its position. */
body.portfolio-document:not([data-page="home"]) .ex-entry-running:not(.ex-entry-started) :is(.ex-entry-title,.ex-entry-display,.ex-entry-display>span,.ex-entry-plane,.ex-entry-info,.ex-entry-shutters>i,.ex-entry-cue>*) { animation-play-state:paused; }
/* Cancelling restores native poses; no content depends on animationend. */
body.portfolio-document.v3-paused .ex-entry-running :is(.ex-entry-title,.ex-entry-display,.ex-entry-display>span,.ex-entry-plane,.ex-entry-info) { animation:none!important; }
body.portfolio-document.v3-paused :is(.ex-entry-shutters,.ex-entry-cue) { display:none; }
@media(prefers-reduced-motion:reduce) {
  body.portfolio-document:not([data-page="home"]) .ex-entry-running :is(.ex-entry-title,.ex-entry-display,.ex-entry-display>span,.ex-entry-plane,.ex-entry-info) { animation:none!important; }
  body.portfolio-document:not([data-page="home"]) :is(.ex-entry-shutters,.ex-entry-cue) { display:none; }
}

/* Below the opening, nothing is prepared until the page has mounted. Each
   observed block waits outside the viewing field and is revealed only once. */
body.portfolio-document:not([data-page="home"]) .ex-scroll-pending { opacity:0; }
body.portfolio-document:not([data-page="home"]) .ex-scroll-playing { opacity:1; }
body.portfolio-document:not([data-page="home"]) .ex-scroll-card.ex-scroll-playing .xp-work-stage {
  transform-origin:50% 90%;
  animation:ex-scroll-exhibit 880ms cubic-bezier(.18,.78,.23,1) var(--ex-scroll-delay,0ms) both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-card.ex-scroll-playing .portfolio-tile-image {
  transform-origin:50% 90%;
  animation:ex-scroll-picture 950ms cubic-bezier(.16,.82,.22,1) calc(var(--ex-scroll-delay,0ms) + 70ms) both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-card.ex-scroll-playing .xp-work-caption {
  animation:ex-scroll-caption 760ms cubic-bezier(.16,.82,.22,1) calc(var(--ex-scroll-delay,0ms) + 260ms) both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-card.ex-scroll-playing .xp-work-number {
  animation:ex-scroll-number 760ms cubic-bezier(.16,.82,.22,1) calc(var(--ex-scroll-delay,0ms) + 130ms) both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-card.ex-scroll-playing:is(:hover,:focus-within) .portfolio-tile-image { animation:none; }
body.portfolio-document:not([data-page="home"]) .ex-scroll-heading.ex-scroll-playing {
  animation:ex-scroll-heading 850ms cubic-bezier(.18,.78,.23,1) both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-heading.ex-scroll-playing>p {
  animation:ex-scroll-caption 650ms cubic-bezier(.16,.82,.22,1) 240ms both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-panel.ex-scroll-playing {
  animation:ex-scroll-panel 980ms cubic-bezier(.16,.82,.22,1) both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-image.ex-scroll-playing {
  transform-origin:50% 85%;
  animation:ex-scroll-large-image 1050ms cubic-bezier(.16,.82,.22,1) both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-image.ex-scroll-playing figcaption {
  animation:ex-scroll-caption 660ms cubic-bezier(.16,.82,.22,1) 290ms both;
}
body.portfolio-document:not([data-page="home"]) .ex-scroll-reading.ex-scroll-playing {
  animation:ex-scroll-reading 730ms cubic-bezier(.16,.82,.22,1) both;
}
@keyframes ex-scroll-exhibit {
  0% { opacity:0;clip-path:inset(0 0 100% 0);translate:var(--ex-scroll-x,64px) 28px; }
  60% { opacity:1;clip-path:inset(0 0 0 0); }
  100% { opacity:1;clip-path:inset(-30px -30px -30px -30px);translate:0 0; }
}
@keyframes ex-scroll-picture {
  0% { opacity:.3;transform:perspective(1200px) translate3d(calc(var(--ex-scroll-x,64px) * .45),30px,-35px) rotateY(var(--ex-scroll-turn,7deg)) rotateX(5deg) scale(.94); }
  60% { opacity:1; }
  100% { opacity:1;transform:perspective(1200px) translate3d(0,0,0) rotateY(0) rotateX(0) scale(1); }
}
@keyframes ex-scroll-caption {
  0% { opacity:0;clip-path:inset(0 0 100% 0);translate:0 26px; }
  65% { opacity:1;clip-path:inset(0 0 0 0); }
  100% { opacity:1;clip-path:inset(0 0 0 0);translate:0 0; }
}
@keyframes ex-scroll-number {
  0% { opacity:0;translate:-18px -25px;rotate:-16deg; }
  100% { opacity:1;translate:0 0;rotate:0deg; }
}
@keyframes ex-scroll-heading {
  0% { clip-path:inset(0 100% 0 0);translate:-45px 10px; }
  65% { clip-path:inset(0 0 0 0); }
  100% { clip-path:inset(0 0 0 0);translate:0 0; }
}
@keyframes ex-scroll-panel {
  0% { opacity:.25;clip-path:inset(0 0 38% 0);translate:var(--ex-scroll-x,64px) 28px; }
  65% { opacity:1;clip-path:inset(-15px -15px -15px -15px); }
  100% { opacity:1;clip-path:inset(-15px -15px -15px -15px);translate:0 0; }
}
@keyframes ex-scroll-large-image {
  0% { opacity:.15;clip-path:inset(0 0 30% 0);translate:var(--ex-scroll-x,64px) 42px;scale:.97; }
  70% { opacity:1;clip-path:inset(-15px -15px -15px -15px); }
  100% { opacity:1;clip-path:inset(-15px -15px -15px -15px);translate:0 0;scale:1; }
}
@keyframes ex-scroll-reading {
  0% { opacity:.35;clip-path:inset(0 0 45% 0);translate:0 22px; }
  70% { opacity:1;clip-path:inset(-8px -8px -8px -8px); }
  100% { opacity:1;clip-path:inset(-8px -8px -8px -8px);translate:0 0; }
}
/* Paused/reduced pages remain readable even before the JS change callback. */
body.portfolio-document.v3-paused :is(.ex-scroll-pending,.ex-scroll-playing) { opacity:1;animation:none!important; }
body.portfolio-document.v3-paused .ex-scroll-playing * { animation:none!important; }
@media(prefers-reduced-motion:reduce) {
  body.portfolio-document:not([data-page="home"]) :is(.ex-scroll-pending,.ex-scroll-playing) { opacity:1;animation:none!important; }
  body.portfolio-document:not([data-page="home"]) .ex-scroll-playing * { animation:none!important; }
}
