/* Transparent portfolio compositions over a diagonal paper/blueprint hero. */
.hero{position:relative;isolation:isolate;background:#f5f2eb url('assets/04-exercise-book.webp') center/1000px;color:var(--navy)}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:#003366 url('assets/hero-angular-painted-grid-fine.png') center/650px;clip-path:polygon(55% 0,100% 0,100% 100%,33% 100%)}
.hero .eyebrow{color:var(--teal)}
.hero h1{color:var(--navy);position:relative;z-index:2;font-size:clamp(48px,5vw,76px)}
.hero h1 span{color:#bd414b}
.hero-feature{grid-template-columns:38% 62%;gap:0;min-height:470px;align-items:center}
.hero .showreel-feature{padding:0;margin:0 -56px 0 -60px;transform:none;border:0;background:transparent;box-shadow:none;isolation:auto}
.hero-slideshow{position:relative;isolation:isolate;aspect-ratio:16/9;background:transparent;overflow:visible}
.hero-slideshow .hero-art{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;max-height:none;background:transparent;animation:none;transform:none}
.hero-slideshow .slide-outgoing{position:absolute;inset:0;pointer-events:none;z-index:1;animation:portfolio-fadeout 2.2s ease-out both}
.hero-slideshow .hero-art:not(.slide-outgoing){position:relative;z-index:2}
.hero-bottom{max-width:440px;padding-right:20px}
.hero .original-tagline{position:relative;z-index:2}
.hero-slideshow .slide-prev,.hero-slideshow .slide-next{z-index:5;bottom:0;color:rgba(170,170,170,.7)}
.hero-slideshow .slide-prev{left:15%}.hero-slideshow .slide-next{right:20px}
.slide-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes portfolio-fadeout{to{opacity:0}}
@media(max-width:1100px) and (min-width:901px){.hero-feature{min-height:340px}.hero h1{font-size:50px}.hero .showreel-feature{margin-left:-35px}.hero-bottom{max-width:380px;font-size:16px}}
@media(max-width:900px){.hero::before{clip-path:polygon(100% 18%,100% 100%,0 100%,0 58%)}.hero-feature{grid-template-columns:1fr;min-height:0;gap:18px}.hero .showreel-feature{margin:0 -20px}.hero h1{font-size:clamp(43px,10vw,62px)}.hero-bottom{max-width:none;color:#f5f2eb;padding:0}.hero .original-tagline{color:#f5f2eb}.hero-slideshow .slide-prev{left:8px}.hero-slideshow .slide-next{right:8px}}
@media(prefers-reduced-motion:reduce){.hero-slideshow .hero-art,.hero-slideshow .slide-outgoing,.hero-slideshow[class*="transition-"] .hero-art{animation:none!important;transition:none!important}}

.hero-bottom{background:#f5f2ebf0;color:var(--navy);padding:14px 18px}
.hero-inner>.eyebrow{display:inline-block;background:#f5f2ebed;padding:5px 8px}
.hero .original-tagline{background:#f5f2ebed;color:var(--navy);padding:10px 14px}

@media(min-width:1101px){.hero .showreel-feature{margin-left:-190px;margin-right:-56px}}


/* Full blueprint backdrop: transparent artwork sits directly on the blue paper. */
.hero{background:#003366 url('assets/hero-angular-painted-grid-fine.png') center/480px 480px repeat;color:#f5f2eb}
.hero::before{display:none;content:none}
.hero h1{color:#f5f2eb}
.hero h1 span{color:#ff6666}
.hero-inner>.eyebrow{background:transparent;color:#f5f2eb;padding:0}
.hero .hero-bottom{background:transparent;color:#f5f2eb;padding:0;max-width:440px}
.hero .original-tagline{background:transparent;color:#f5f2eb;padding:13px 0}
.hero .showreel-feature,.hero .hero-slideshow{border:0;outline:0;box-shadow:none;background:transparent}
.hero .showreel-feature::before,.hero .showreel-feature::after{content:none;display:none}
@media(max-width:900px){.hero .hero-bottom{max-width:none}}
/* Let the introduction use the page width and keep the hero compact. */
.hero .hero-bottom{width:100%;max-width:none;margin-top:12px;line-height:1.55}
.hero .hero-bottom p{max-width:none}
.hero .original-tagline{margin-top:12px;padding-block:8px}
.hero{padding-bottom:28px}
.hero-feature{min-height:0}
/* Both layers share one moving wipe edge; artwork stays stationary. */
.hero-slideshow .slide-outgoing{animation:none;opacity:1}
.hero-slideshow.wipe-right .hero-art:not(.slide-outgoing){animation:reveal-right 600ms ease-in-out both}
.hero-slideshow.wipe-right .slide-outgoing{animation:erase-right 600ms ease-in-out both}
.hero-slideshow.wipe-left .hero-art:not(.slide-outgoing){animation:reveal-left 600ms ease-in-out both}
.hero-slideshow.wipe-left .slide-outgoing{animation:erase-left 600ms ease-in-out both}
.hero-slideshow.wipe-down .hero-art:not(.slide-outgoing){animation:reveal-down 600ms ease-in-out both}
.hero-slideshow.wipe-down .slide-outgoing{animation:erase-down 600ms ease-in-out both}
.hero-slideshow.wipe-up .hero-art:not(.slide-outgoing){animation:reveal-up 600ms ease-in-out both}
.hero-slideshow.wipe-up .slide-outgoing{animation:erase-up 600ms ease-in-out both}
@keyframes reveal-right{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes erase-right{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes reveal-left{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes erase-left{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@keyframes reveal-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes erase-down{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
@keyframes reveal-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes erase-up{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}

/* Keep the hero introduction to roughly two-thirds of the desktop width. */
@media(min-width:901px){.hero .hero-bottom{width:67%;max-width:none}}


/* Balance the transparent artwork beside the heading, away from the right edge. */
@media(min-width:901px){.hero .showreel-feature{position:relative;left:clamp(-100px,-6vw,-54px)}}

/* Mid-height controls and a short digital disturbance before each wipe. */
.hero-slideshow .slide-prev,.hero-slideshow .slide-next{top:50%;bottom:auto;transform:translateY(-50%)}
.hero-slideshow.pre-glitch .hero-art{animation:signal-glitch 480ms steps(1,end) both}
.hero-slideshow::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(125,230,255,.22) 3px 4px,rgba(0,12,35,.25) 4px 5px);mask-image:radial-gradient(ellipse at 60% 50%,#000 15%,transparent 70%)}
.hero-slideshow.pre-glitch::after{animation:signal-lines 480ms steps(1,end) both}
@keyframes signal-glitch{
 0%,100%{filter:none}
 12%,44%{filter:drop-shadow(-4px 0 rgba(255,45,95,.9)) drop-shadow(4px 0 rgba(0,235,255,.85)) blur(.35px)}
 26%,65%{filter:none}
 72%,85%{filter:drop-shadow(3px 0 rgba(255,45,95,.8)) drop-shadow(-3px 0 rgba(0,235,255,.8)) blur(.7px)}
}
@keyframes signal-lines{0%,100%{opacity:0}12%,44%{opacity:.65;background-position:0 3px}26%,65%{opacity:.15}72%,85%{opacity:.5;background-position:0 -4px}}
@media(prefers-reduced-motion:reduce){.hero-slideshow.pre-glitch .hero-art{filter:none!important}.hero-slideshow::after{display:none}}

/* Large exercise-book panel, matching the 4:3 hero mockup. */
.hero-feature{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:28px;align-items:center}
.hero .showreel-feature{margin:0;padding:0;left:auto;transform:none;min-width:0;width:100%}
.hero .hero-slideshow{aspect-ratio:4/3;overflow:hidden;background:#f5f2eb url('assets/04-exercise-book.webp') top left/100% auto repeat-y;border-radius:0}
.hero-slideshow .hero-art,.hero-slideshow .hero-art:not(.slide-outgoing){position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center}
.hero-slideshow .slide-prev{left:8px}
.hero-slideshow .slide-next{right:8px}
@media(max-width:900px){.hero-feature{grid-template-columns:1fr;gap:22px}.hero .showreel-feature{margin:0;left:auto}}

/* Smaller, full-bleed editorial format with no paper backdrop. */
.hero .showreel-feature{width:92%;justify-self:start}
.hero .hero-slideshow{background:#061a2c;aspect-ratio:4/3}
.hero-slideshow .hero-art{object-fit:cover}
@media(max-width:900px){.hero .showreel-feature{width:100%}}

/* Compact 5:3 image window, white surround and crisp graphic fills. */
.hero .showreel-feature{width:86%}
.hero .hero-slideshow{aspect-ratio:5/3;border:8px solid #fff;background:#003366;box-sizing:content-box;width:calc(100% - 16px)}
@media(max-width:900px){.hero .showreel-feature{width:94%}}

/* Give the framed slideshow more presence and wrap the introduction at mid-page. */
@media(min-width:901px){
 .hero .showreel-feature{width:98%;justify-self:end}
 .hero .hero-bottom{width:46%;max-width:none;padding-right:0}
}
/* Mental Image signal breakup: actual artwork sampled as pixels and scan tears. */
.hero-slideshow .hero-art{transform-origin:50% 50%;will-change:transform}
.hero-slideshow .signal-artifacts{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0;image-rendering:pixelated}
.hero-slideshow.pre-glitch .signal-artifacts{opacity:1}
.hero-slideshow.pre-glitch .hero-art{animation:mi-registration 900ms steps(1,end) both}
.hero-slideshow.pre-glitch::after{animation:mi-screen-lines 900ms steps(1,end) both;mask-image:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00336666 3px 4px,#25b6be44 4px 5px)}
@keyframes mi-registration{
 0%,28%,64%,100%{filter:none}
 8%,19%{filter:drop-shadow(-9px 0 #ff6666aa) drop-shadow(9px 0 #24b8bd99) contrast(1.08)}
 41%,52%{filter:drop-shadow(12px 1px #ff6666aa) drop-shadow(-8px -1px #24b8bdaa)}
 77%,88%{filter:drop-shadow(-6px 2px #ff6666aa) drop-shadow(10px -2px #24b8bdaa) contrast(1.06)}
}
@keyframes mi-screen-lines{
 0%,28%,64%,100%{opacity:0}
 8%,19%{opacity:.6;background-position:0 7px}
 41%,52%{opacity:.45;background-position:0 -11px}
 77%,88%{opacity:.7;background-position:0 4px}
}
@media(prefers-reduced-motion:reduce){
 .hero-slideshow .signal-artifacts,.hero-slideshow::after{display:none!important}
 .hero-slideshow .hero-art{will-change:auto;transform:none!important;filter:none!important}
}

/* The same signal disturbance runs before, through and beyond the wipe. */
.hero-slideshow.signal-active .signal-artifacts{opacity:var(--signal-strength,1)}
.hero-slideshow.signal-active::after{animation:mi-screen-lines 900ms steps(1,end) infinite;mask-image:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00336666 3px 4px,#25b6be44 4px 5px);filter:opacity(var(--signal-strength,1))}

/* Automatic disturbance totals 1 second; manual navigation crossfades in 250 ms. */
.hero-slideshow.manual-fade .hero-art:not(.slide-outgoing){animation:mi-manual-fade 250ms ease-in-out both}
.hero-slideshow.manual-fade .slide-outgoing{animation:none;opacity:1}
@keyframes mi-manual-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-slideshow.manual-fade .hero-art{animation:none!important}}
/* Fill the framed viewport for both incoming and outgoing slides. */
.hero .hero-slideshow .hero-art,
.hero .hero-slideshow .hero-art:not(.slide-outgoing){object-fit:cover;object-position:center;width:100%;height:100%;max-width:none}