/* Ç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 { 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; }
.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 { columns: 3 300px; column-gap: 4px; padding: 0 4px 4px; }
.shot {
  margin: 0 0 4px; break-inside: avoid; 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; }

/* 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%); }

/* 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: center; 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; }
.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(16px,3.5vw,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; }
.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 (prefers-reduced-motion: reduce) {
  .intro, .scroll-line, .sound span { animation: none; }
  .page, .shot img, .places, .places-inner, .about, .portrait { transition-duration: .01s; }
}