/* Full-screen film, a continuous fade to black, then seamless project covers. */
body:has(.page-portfolio) { background: #000; }
body:has(.page-portfolio) .fractal-backdrop,
body:has(.page-portfolio)::before,
body:has(.page-portfolio)::after { display: none; }
body:has(.page-portfolio) #main { padding-top: 0; }
body:has(.page-portfolio) .site-footer { background: #000; }
#main .page-portfolio { background: #000; }
.portfolio-film { position: relative; height: 100svh; min-height: 420px; overflow: hidden; background: #000; isolation: isolate; }
.portfolio-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-film-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0003, transparent 24%, transparent 55%, #0005 75%, #000d 91%, #000 100%); }
#main .portfolio-film .detail-back { top: 70px; left: clamp(20px,3vw,52px); }
.portfolio-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portfolio-scroll { position: absolute; z-index: 2; bottom: 42px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: 14px; color: #fff; text-decoration: none; font: 400 10px/1.4 'DM Sans',sans-serif; letter-spacing: .18em; text-shadow: 0 1px 8px #000; opacity: .8; transition: opacity .25s; }
.portfolio-scroll:hover { opacity: 1; }
.portfolio-scroll svg { width: 18px; height: 32px; animation: portfolio-scroll-cue 2.8s ease-in-out infinite; }
.portfolio-playback { position: absolute; z-index: 2; right: clamp(20px,3vw,52px); bottom: 42px; width: 36px; height: 36px; border: 1px solid #ffffff45; border-radius: 50%; background: #0004; color: #fff; font-size: 13px; }
#main .page-portfolio .portfolio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; width: 100%; max-width: none; margin: 0; padding: 56px 0 100px; background: #000; scroll-margin-top: 47px; }
/* Start each row at the right; on mobile the same order flows top to bottom. */
#main .page-portfolio .portfolio-grid { direction: rtl; }
.portfolio-project { direction: ltr; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; background: #111; border: 0; }
.portfolio-project img { display: block; position: absolute; inset: -4%; max-width: none; width: 108%; height: 108%; object-fit: cover; filter: saturate(.48) brightness(.62) contrast(1.08); transform: translate3d(var(--mx,0px),var(--my,0px),0) scale(1.02); transition: filter .45s,transform .22s ease-out; }
.portfolio-project-shade,.portfolio-project-edge,.portfolio-project-light { position: absolute; inset: 0; pointer-events: none; }
.portfolio-project-shade { background: linear-gradient(180deg,#00000008,#00000012 46%,#00000058); transition: opacity .45s; }
.portfolio-project-edge { background: linear-gradient(90deg,rgba(245,237,221,.14),rgba(245,237,221,.025) 14%,transparent 30%,transparent 78%,rgba(0,0,0,.45)); }
.portfolio-project-light { opacity: .3; mix-blend-mode: screen; background: linear-gradient(110deg,transparent 10%,rgba(230,213,181,.055) 28%,rgba(255,245,224,.2) 48%,rgba(242,222,184,.065) 61%,transparent 84%),radial-gradient(ellipse 100% 70% at var(--pointer-x,50%) var(--pointer-y,45%),rgba(231,212,178,.17),transparent 78%); transition: opacity .45s; }
.portfolio-project-name { position: absolute; z-index: 2; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0 .22em; padding: clamp(20px,3vw,48px); margin: 0; color: #fff; font: 400 clamp(22px,2.2vw,40px)/1.15 'Cal Sans','DM Sans',sans-serif; text-align: center; text-transform: uppercase; pointer-events: none; }
.portfolio-project-name::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at center,#0008,transparent 85%); opacity: 0; transition: opacity .45s; }
.portfolio-name-mask { display: inline-block; padding-block: .08em; }
.portfolio-name-mask > span { display: inline-block; opacity: 0; filter: blur(10px); transition: filter .7s ease-out,opacity .7s ease-out; text-shadow: 0 2px 18px #0009; }
.portfolio-project:focus-visible .portfolio-name-mask > span { opacity: 1; filter: blur(0); }
.portfolio-project:focus-visible .portfolio-project-name::before { opacity: 1; }
.portfolio-project:focus-visible { outline: 2px solid #e5d2b3; outline-offset: -2px; }
.portfolio-project:focus-visible img { filter: saturate(.92) brightness(.95) contrast(1.04); }
.portfolio-project:focus-visible .portfolio-project-light { opacity: 1; }
@media (hover:hover) and (pointer:fine) {
  .portfolio-project:hover .portfolio-name-mask > span { opacity: 1; filter: blur(0); }
  .portfolio-project:hover .portfolio-project-name::before { opacity: 1; }
  .portfolio-project:hover img { filter: saturate(.92) brightness(.95) contrast(1.04); }
  .portfolio-project:hover .portfolio-project-light { opacity: 1; }
  .portfolio-project:hover .portfolio-project-shade { opacity: .45; }
  .portfolio-grid:has(.portfolio-project:hover) .portfolio-project:not(:hover) img { filter: saturate(.35) brightness(.4) contrast(1.08); }
}
@media (max-width:1000px) { #main .page-portfolio .portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  #main .page-portfolio .portfolio-grid { grid-template-columns: 1fr; gap: 0; padding: 36px 0 60px; scroll-margin-top: 40px; }
  #main .portfolio-film .detail-back { top: 58px; left: 16px; }
  .portfolio-project img { filter: saturate(.85) brightness(.85) contrast(1.04); }
  .portfolio-scroll,.portfolio-playback { bottom: 34px; }
}
@media (hover:none) {
  .portfolio-project-name { align-content: end; font-size: 22px; }
  .portfolio-project-name::before { opacity: 1; background: linear-gradient(transparent 45%,#0009); }
  .portfolio-name-mask > span { opacity: 1; filter: none; }
}
@keyframes portfolio-scroll-cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion:reduce) {
  .portfolio-scroll svg { animation: none; }
  .portfolio-project img,.portfolio-project-light,.portfolio-project-shade,.portfolio-name-mask > span,.portfolio-project-name::before { transition: none; }
}

/* The gallery is in the browser's top layer; only its photos scroll. */
.project-gallery { position: fixed; inset: auto; margin: 0; padding: 0; max-width: none; max-height: none; overflow: hidden; border: 1px solid #ffffff40; border-radius: 16px; background: #08090a; color: #fff; box-sizing: border-box; box-shadow: 0 35px 100px #000c,0 8px 30px #0009; }
.project-gallery::backdrop { background: #0007; backdrop-filter: grayscale(1) blur(7px); -webkit-backdrop-filter: grayscale(1) blur(7px); }
.project-gallery-scroll { width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #ffffff50 #141414; outline: none; }
.project-gallery-scroll img { display: block; width: 100%; height: auto; max-width: none; margin: 0; padding: 0; border: 0; background: #111; }
.project-gallery-back { position: absolute; z-index: 3; top: max(16px,env(safe-area-inset-top)); left: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 100px; min-height: 44px; padding: 8px 16px; border: 1px solid #ffffff70; border-radius: 999px; color: #fff; background: #080a0dc9; box-shadow: 0 4px 24px #0007,inset 0 1px #ffffff26; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font: 500 11px/1 'DM Sans',sans-serif; letter-spacing: .06em; cursor: pointer; }
.project-gallery-back > span:first-child { font-size: 23px; }
.project-gallery-back:hover { background: #22272ded; }
.project-gallery-back:focus-visible,.project-gallery-scroll:focus-visible { outline: 2px solid #e5d2b3; outline-offset: -3px; }
.project-gallery-transition { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .22s; }
.project-gallery.is-transitioning .project-gallery-transition { opacity: 1; }
.project-gallery.is-transitioning .project-gallery-scroll { visibility: hidden; }
body.project-gallery-open { overflow: hidden; }
body.project-gallery-open .aiva-cursor { display: none; }
body.project-gallery-open,body.project-gallery-open * { cursor: auto !important; }
body.project-gallery-open .project-gallery-back { cursor: pointer !important; }
@media (prefers-reduced-motion:reduce) { .project-gallery-transition { transition: none; } }