/* Çerçevetüs – portfolio: galerij, Places, About, kopregel */
@keyframes cv-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cv-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes cv-bar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.scroller {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.scroller::-webkit-scrollbar { display: none; }
.page { transform: scale(1); filter: blur(0); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform 1.4s var(--ease-inout), filter 1.2s ease; will-change: transform; }
.page.dim { transform: scale(1.12); filter: blur(10px); }

/* intro */
.intro { position: relative; height: 100svh; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; animation: cv-fade 1.6s var(--ease-out) both; overflow: hidden; }
.intro > * { position: relative; z-index: 1; }
.intro-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 2.2s ease, transform 12s var(--ease-out); filter: saturate(.85) brightness(.62); }
.intro-bg.on { opacity: 1; transform: scale(1); }
.intro-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(13,12,11,.35) 0%, rgba(13,12,11,.7) 100%), linear-gradient(to bottom, rgba(13,12,11,.55), rgba(13,12,11,.2) 40%, rgba(13,12,11,.85) 100%); }
.intro-logo { filter: drop-shadow(0 4px 24px rgba(0,0,0,.6)); }
.intro-logo { width: min(560px, 70vw); }
.intro-sub { margin: 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--n500); }
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--n500); }
.scroll-line { display: inline-block; width: 1px; height: 40px; background: var(--n700); animation: cv-nudge 2.4s ease-in-out infinite; }

/* galerij */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 8px; grid-auto-flow: dense; gap: 4px; padding: 0 4px 4px; }
.shot.large { grid-column: span 2; }
.shot.full { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .shot.large { grid-column: 1 / -1; }
}
.shot {
  margin: 0; position: relative; overflow: hidden; background: var(--surface);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23f0eae0' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9c-2-4-7-6-9-3s1 8 5 9c-4 1-6 5-3 7s6-2 7-5'/%3E%3Cpath d='M14 9c2-4 7-6 9-3s-1 8-5 9c4 1 6 5 3 7s-6-2-7-5'/%3E%3Cpath d='M14 8v10'/%3E%3Cpath d='M12 6l-2-3M16 6l2-3'/%3E%3C/g%3E%3C/svg%3E") 14 14, pointer;
}
.shot img {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none;
  transform: scale(1); filter: brightness(.9) saturate(.85);
  transition: transform 1.6s var(--ease-out), filter 1.1s ease, opacity .8s ease; will-change: transform;
  opacity: 0;
}
.shot img.loaded { opacity: 1; }
.shot.on img { transform: scale(1.05); filter: brightness(1.04) saturate(1.05); }
.no-zoom .shot.on img { transform: none; }
.veil { position: absolute; inset: 0; background: rgba(13,12,11,.08); transition: background 1s ease; }
.shot.on .veil { background: rgba(13,12,11,0); }
.corner { position: absolute; width: 18px; height: 18px; opacity: 0; pointer-events: none; transition: opacity .6s ease, transform 1s var(--ease-out); border: 0 solid var(--ink); }
.corner.tl { left: 14px; top: 14px; border-left-width: 1px; border-top-width: 1px; border-top-left-radius: 5px; transform: translate(-8px,-8px); }
.corner.tr { right: 14px; top: 14px; border-right-width: 1px; border-top-width: 1px; border-top-right-radius: 5px; transform: translate(8px,-8px); }
.corner.bl { left: 14px; bottom: 14px; border-left-width: 1px; border-bottom-width: 1px; border-bottom-left-radius: 5px; transform: translate(-8px,8px); }
.corner.br { right: 14px; bottom: 14px; border-right-width: 1px; border-bottom-width: 1px; border-bottom-right-radius: 5px; transform: translate(8px,8px); }
.shot.on .corner { opacity: 1; transform: none; }
.cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px clamp(16px,5%,28px) clamp(16px,5%,26px);
  background: linear-gradient(to top, rgba(13,12,11,.8), rgba(13,12,11,0));
  display: flex; flex-direction: column; gap: 10px; color: var(--ink); pointer-events: none; margin: 0;
}
.cap-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--n400); opacity: 0; transform: translateY(10px); transition: opacity .6s ease .05s, transform .9s var(--ease-out) .05s; }
.cap-title { display: flex; flex-wrap: wrap; gap: 0 .32em; font-size: clamp(15px,4vw,22px); line-height: 1.2; font-weight: 300; letter-spacing: -.005em; text-wrap: pretty; }
.cap-title span { display: inline-block; opacity: 0; transform: translateY(110%); transition: opacity .5s ease var(--d), transform .8s var(--ease-out) var(--d); }
.cap-note { font-size: 12px; letter-spacing: .04em; color: var(--n400); font-style: italic; opacity: 0; transform: translateY(10px); transition: opacity .7s ease .35s, transform .9s var(--ease-out) .35s; }
.shot.on .cap-meta, .shot.on .cap-note, .shot.on .cap-title span { opacity: 1; transform: none; }
.no-captions .cap { display: none; }
.empty { padding: 20vh 24px; text-align: center; color: var(--n500); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }

/* One Frame, One Day – homepage interlude */
.frame-day { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(80px,14vh,140px) clamp(18px,4vw,40px) clamp(60px,10vh,100px); text-align: center; }
.fd-kicker { letter-spacing: .32em; color: var(--accent-400); font-size: 10px; }
.fd-sub { margin: 0 0 18px; font-family: 'Cormorant', Georgia, serif; font-style: italic; font-size: clamp(22px, 3.4vw, 30px); color: var(--n400); }
.fd-open { display: block; max-width: min(560px, 100%); border-radius: 2px; overflow: hidden; background: var(--surface); cursor: zoom-in; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.fd-open img { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; opacity: 0; transition: opacity 1.2s ease, transform 1.6s var(--ease-out); transform: scale(1.015); }
.fd-open img.ok { opacity: 1; transform: none; }
.fd-open:hover img { transform: scale(1.01); }
.fd-date { margin-top: 10px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); }
.fd-more { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--n700); }
@font-face { font-family: 'Cormorant'; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/cormorant-latin-300-italic.woff2") format('woff2'); }
@font-face { font-family: 'Cormorant'; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/cormorant-latin-300-normal.woff2") format('woff2'); }

/* One Frame, One Day – the presentation */
.fd-view { position: fixed; inset: 0; z-index: 40; background: var(--bg); opacity: 0; transition: opacity .45s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fd-view.show { opacity: 1; }
.fd-close { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: clamp(12px,3vw,26px); width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--ink); background: rgba(13,12,11,.55); z-index: 2; }
.fd-stage { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: calc(64px + env(safe-area-inset-top)) clamp(18px,5vw,56px) calc(40px + env(safe-area-inset-bottom)); text-align: center; }
.fd-stage > * { opacity: 0; transform: translateY(8px); transition: opacity .6s ease var(--d, 0s), transform .8s var(--ease-out) var(--d, 0s); }
.fd-view.show .fd-stage > * { opacity: 1; transform: none; }
.fd-stage > :nth-child(1) { --d: .15s; } .fd-stage > :nth-child(2) { --d: .25s; } .fd-stage > :nth-child(4) { --d: .45s; } .fd-stage > :nth-child(5) { --d: .55s; } .fd-stage > :nth-child(6) { --d: .7s; }
.fd-vdate { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
.fd-vimg { display: block; max-width: 100%; max-height: min(68svh, 900px); width: auto; height: auto; margin: 10px 0 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transition: opacity .5s ease; }
.fd-view.show .fd-vimg { transition: opacity .5s ease; }
.fd-vtitle { margin: 6px 0 0; font-family: 'Cormorant', Georgia, serif; font-weight: 300; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; color: var(--ink); }
.fd-vtitle:empty { display: none; }
.fd-vnote { margin: 0; font-family: 'Cormorant', Georgia, serif; font-style: italic; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: var(--n400); max-width: 50ch; text-wrap: pretty; }
.fd-vnote:empty { display: none; }
.fd-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.fd-share { padding: 0 18px; min-height: 40px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--n400); border: 1px solid var(--n900); border-radius: 999px; }
.fd-share:hover { color: var(--ink); border-color: var(--n700); }
.fd-tomorrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--n700); }
.fd-ghost { position: fixed; z-index: 41; background-size: cover; background-position: center; pointer-events: none; opacity: 0; transform-origin: top left; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .fd-stage > *, .fd-view, .fd-open img { transition: none; } .fd-ghost { display: none; } }

/* footer */
.foot { min-height: 44vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 60px clamp(18px,4vw,40px); text-align: center; }
.foot-logo { height: 18px; opacity: .6; }
.foot p { margin: 0; max-width: 52ch; font-size: 12px; line-height: 1.7; color: var(--n700); text-wrap: pretty; }

/* Places-overlay */
.places { position: fixed; inset: 0; z-index: 20; background: var(--bg); clip-path: circle(0% at var(--ox,50%) var(--oy,50%)); pointer-events: none; transition: clip-path 1.5s var(--ease-inout); }
.places.open { clip-path: circle(150% at var(--ox,50%) var(--oy,50%)); pointer-events: auto; }
.places-inner { position: absolute; inset: 0; transform: scale(1.9); opacity: 0; transform-origin: var(--ox,50%) var(--oy,50%); transition: transform 1.8s var(--ease-out), opacity .9s ease .2s; }
.places.open .places-inner { transform: none; opacity: 1; }
.places-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.places-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--ox,50%) var(--oy,50%), rgba(246,160,107,.35), rgba(13,12,11,0) 45%); transition: background 1.2s ease; }
.places.open .places-glow { background: radial-gradient(circle at var(--ox,50%) var(--oy,50%), rgba(246,160,107,0), rgba(13,12,11,0) 45%); }

/* Archive-overlay */
.archive-ov { position: fixed; inset: 0; z-index: 20; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.archive-ov.open { opacity: 1; pointer-events: auto; }
.archive-inner { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .7s ease .15s, transform .9s var(--ease-out) .15s; }
.archive-ov.open .archive-inner { opacity: 1; transform: none; }
.archive-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }

/* Darkroom-overlay: het licht gaat uit, rood licht komt op */
.darkroom { position: fixed; inset: 0; z-index: 20; background: #070606; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.darkroom.open { opacity: 1; pointer-events: auto; }
.darkroom-inner { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease .25s; }
.darkroom.open .darkroom-inner { opacity: 1; }
.darkroom-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #070606; }

/* Exhibition-overlay: het licht gaat uit, de zaal gaat open */
.exhibit { position: fixed; inset: 0; z-index: 20; background: #0a0908; opacity: 0; pointer-events: none; transition: opacity 1.1s ease; }
.exhibit.open { opacity: 1; pointer-events: auto; }
.exhibit-inner { position: absolute; inset: 0; transform: scale(1.04); opacity: 0; transition: transform 2s var(--ease-out), opacity 1.2s ease .3s; }
.exhibit.open .exhibit-inner { transform: none; opacity: 1; }
.exhibit-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0a0908; }

/* About-overlay */
.about { position: fixed; inset: 0; z-index: 20; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .7s ease; display: flex; align-items: flex-start; justify-content: center; padding: calc(84px + env(safe-area-inset-top)) clamp(18px,4vw,40px) calc(60px + env(safe-area-inset-bottom)); overflow: auto; -webkit-overflow-scrolling: touch; }
.about.open { opacity: 1; pointer-events: auto; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px,5vw,64px); max-width: 980px; width: 100%; align-items: center; margin: auto; }
.portrait-frame { position: relative; width: 100%; max-width: min(100%, 56vh, 420px); aspect-ratio: 4/5; justify-self: center; padding: 22px; }
.portrait-frame .corner { width: 30px; height: 30px; border-color: var(--n500); transition: transform 1.6s var(--ease-out) .2s, opacity .8s ease .2s; }
.portrait-frame .corner.tl { left: 0; top: 0; border-top-left-radius: 8px; transform: translate(-40px,-40px); }
.portrait-frame .corner.tr { right: 0; top: 0; border-top-right-radius: 8px; transform: translate(40px,-40px); }
.portrait-frame .corner.bl { left: 0; bottom: 0; border-bottom-left-radius: 8px; transform: translate(-40px,40px); }
.portrait-frame .corner.br { right: 0; bottom: 0; border-bottom-right-radius: 8px; transform: translate(40px,40px); }
.about.open .portrait-frame .corner { opacity: 1; transform: none; }
.focus-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid var(--accent-400); border-radius: 50%; opacity: 0; transform: scale(2.4); transition: opacity .5s ease .9s, transform 1.2s var(--ease-out) .9s; pointer-events: none; }
.about.open .focus-dot { opacity: 1; transform: scale(1); }
.portrait { width: 100%; height: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); filter: blur(18px) brightness(.6); transform: scale(1.12); transition: filter 2.2s var(--ease-out) .4s, transform 2.4s var(--ease-out); }
.portrait img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.about.open .portrait { filter: none; transform: none; }
.scan { position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-400), transparent); opacity: 1; transform: translateY(0); transition: transform 2.2s var(--ease-inout) .3s, opacity .6s ease .3s; pointer-events: none; }
.about.open .scan { opacity: 0; transform: translateY(calc(56vh - 44px)); }
.about-text { display: flex; flex-direction: column; gap: 26px; }
.about-text .accent { color: var(--accent-400); letter-spacing: .26em; }
.about-name { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: clamp(30px,6vw,56px); line-height: 1.05; color: var(--ink); display: flex; flex-wrap: wrap; gap: 0 .28em; }
.about-name span { display: inline-block; }
.about-body { margin: 0; font-size: 16px; line-height: 1.75; color: var(--n400); max-width: 40ch; text-wrap: pretty; }
.about-tags { display: flex; gap: 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--n500); }
.about-link { align-self: flex-start; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--n700); padding-bottom: 6px; }
.about-copy { font-size: 11px; line-height: 1.6; color: var(--n700); max-width: 40ch; }
.about .a1, .about .a2, .about .a3, .about .a4, .about .a5, .about .a6 { opacity: 0; transform: translateY(22px); transition: opacity .8s ease var(--d), transform 1.1s var(--ease-out) var(--d); }
.about .a7 { opacity: 0; transition: opacity .8s ease 1.7s; }
.about .a1 { --d: .6s; } .about .a2 { --d: .7s; } .about .a3 { --d: .84s; } .about .a4 { --d: 1.1s; } .about .a5 { --d: 1.3s; } .about .a6 { --d: 1.5s; }
.about.open .a1, .about.open .a2, .about.open .a3, .about.open .a4, .about.open .a5, .about.open .a6, .about.open .a7 { opacity: 1; transform: none; }

/* kopregel */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: calc(clamp(16px,3vw,26px) + env(safe-area-inset-top)) clamp(16px,4vw,40px) clamp(16px,3vw,26px); pointer-events: none; background: linear-gradient(to bottom, rgba(13,12,11,.85), rgba(13,12,11,0)); }
.brand { pointer-events: auto; opacity: 0; transition: opacity .6s ease; }
.brand.show { opacity: 1; }
.brand img { height: 22px; }
.nav { display: flex; gap: clamp(12px,3vw,30px); align-items: center; pointer-events: auto; font-size: clamp(11px,2.8vw,12px); letter-spacing: .18em; text-transform: uppercase; color: var(--n400); }
.nav button { color: var(--n400); transition: color .4s; white-space: nowrap; }
.nav button.active { color: var(--ink); }
#volume { width: 0; opacity: 0; margin: 0; height: 14px; accent-color: var(--accent-400); cursor: pointer; transition: width .5s var(--ease-out), opacity .4s; pointer-events: none; }
#volume.show { width: 64px; opacity: 1; pointer-events: auto; }
.sound { display: flex; align-items: flex-end; gap: 2px; height: 14px; padding: 15px 12px; margin: -15px -12px; box-sizing: content-box; color: var(--n400); transition: color .4s; }
.sound span { display: block; width: 2px; background: currentColor; border-radius: 1px; animation: cv-bar .9s ease-in-out infinite; animation-play-state: paused; }
.sound span:nth-child(1) { height: 10px; } .sound span:nth-child(2) { height: 14px; animation-duration: 1.03s; animation-delay: .17s; }
.sound span:nth-child(3) { height: 8px; animation-duration: 1.16s; animation-delay: .34s; } .sound span:nth-child(4) { height: 12px; animation-duration: 1.29s; animation-delay: .51s; }
.sound.playing { color: var(--accent-400); } .sound.playing span { animation-play-state: running; }

/* onderaan: serie, teller, voortgang */
.chrome { position: fixed; left: clamp(18px,4vw,40px); right: clamp(18px,4vw,40px); bottom: calc(clamp(18px,3vw,26px) + env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.chrome.show { opacity: 1; }
.cur-series { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-400); }
.cur-num { font-size: 13px; letter-spacing: .12em; color: var(--n500); }
.progress { position: fixed; left: clamp(18px,4vw,40px); right: clamp(18px,4vw,40px); bottom: calc(clamp(10px,1.5vw,14px) + env(safe-area-inset-bottom)); z-index: 30; height: 1px; background: var(--n900); }
.progress-bar { height: 100%; width: 0; background: var(--accent); transform-origin: left; border-radius: 1px; }

@media (max-width: 700px) {
  .nav { gap: 11px; font-size: 10px; letter-spacing: .1em; }
  .about { padding: calc(64px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); }
  .about-grid { gap: 16px; grid-template-columns: 1fr; }
  .portrait-frame { max-width: min(44%, 24vh); padding: 12px; justify-self: center; }
  .about-text { align-items: center; text-align: center; }
  .about-name { justify-content: center; }
  .about-tags { justify-content: center; }
  .about-link { align-self: center; }
  .about-body { max-width: 34ch; }
  .portrait-frame .corner { width: 20px; height: 20px; }
  .about-text { gap: 12px; }
  .about-text .accent { font-size: 10px; }
  .about-name { font-size: clamp(26px, 8vw, 34px); }
  .about-body { font-size: 14px; line-height: 1.6; }
  .about-tags { gap: 12px; font-size: 10px; flex-wrap: wrap; }
  .about-link { font-size: 11px; }
  .about-copy { font-size: 10px; }
  .about.open .scan { transform: translateY(calc(24vh - 24px)); }
}
.foot-admin { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--n700); margin-top: 22px; opacity: .4; padding: 8px 12px; }
.foot-admin:hover { color: var(--accent-400); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .intro, .scroll-line, .sound span { animation: none; }
  .page, .shot img, .places, .places-inner, .about, .portrait { transition-duration: .01s; }
}