/* Chris Tzoannou , street photography portfolio.
   Sen typeface, dark editorial theme, uppercase letter-spaced display
   headings, vertical masonry grid with a WebGL flow hover effect. */

:root{
  --ink:#e7e6e4;             /* light ink on dark */
  --bg:#070708;              /* almost black, not fully */
  --muted:#74747a;
  --hairline:#1c1d22;
  --gap:16px;                /* grid spacing (regularSpacing) */
  --pad:clamp(24px, 8vw, 168px);   /* generous side space */
  --nav-fs:0.9375rem;        /* 15px nav */
  --nav-ls:0.04em;
}

/* cinematic film grain, subtle fixed overlay */
body::before{
  content:""; position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  z-index:40; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:grain .55s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-2%)} 60%{transform:translate(-2%,3%)}
  80%{transform:translate(3%,-1%)} 100%{transform:translate(0,0)}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Sen', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(20px,2.6vw,38px) var(--pad);
  background:rgba(7,7,8,.72);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
}
.wordmark{
  font-size:0.9375rem;          /* 15px */
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav{display:flex; gap:clamp(22px,2.6vw,40px)}
.nav a{
  font-size:var(--nav-fs);
  letter-spacing:var(--nav-ls);
  color:var(--ink);
  position:relative;
  padding:2px 0;
  transition:opacity .3s ease;
}
.nav a.is-active{opacity:.45}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--ink); transition:width .35s ease;
}
.nav a:hover::after{width:100%}

/* ---------- portfolio grid (vertical masonry) ---------- */
main{padding:clamp(18px,3vw,40px) var(--pad) 0}
.grid{
  display:flex;
  align-items:flex-start;
  gap:var(--gap);
}
.grid-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}
/* fallback before JS runs: simple column flow so nothing is invisible */
.grid:not(.masonry-ready){display:block; column-count:3; column-gap:var(--gap)}
.grid:not(.masonry-ready) .tile{break-inside:avoid; margin-bottom:var(--gap)}

.tile{
  margin:0;            /* reset <figure> default 1em 40px margin */
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.tile img{
  width:100%; height:auto;
  transition:transform .9s cubic-bezier(.2,0,0,1), filter .5s ease;
}
.tile:hover img{transform:scale(1.03)}
/* when the WebGL hover effect is active, drop the CSS zoom so they don't
   conflict (the zoom was flashing during the canvas fade-out on leave) */
.flow-on .tile img{transition:none}
.flow-on .tile:hover img{transform:none}
.tile .cap{
  position:absolute; left:14px; bottom:12px; z-index:3;
  font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
  color:#fff; opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  pointer-events:none;
}
.tile::after{   /* subtle darken on hover so caption reads */
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 42%);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
/* the WebGL hover canvas sits above the photo, below caption/gradient */
.tile .flow-canvas{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .55s ease}
.tile:hover .cap{opacity:1; transform:none}
.tile:hover::after{opacity:1}

/* ---------- editorial pages (about / contact) ---------- */
.page{
  max-width:760px; margin:0 auto;
  padding:clamp(40px,7vw,90px) var(--pad) 0;
}
.page-wide{max-width:1080px}
.display-h{
  font-size:clamp(1.8rem,1rem + 2.4vw,3rem);
  font-weight:400; letter-spacing:0.04em; line-height:1.21em;
  text-transform:uppercase; margin:0 0 .8em;
}
.about-grid{
  display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,5vw,64px);
  align-items:start;
}
@media(max-width:720px){.about-grid{grid-template-columns:1fr}}
.about-grid p{margin:0 0 1.15em; color:var(--ink)}
.about-portrait{width:100%; height:auto}
.lede{font-size:1.0625rem}

.contact-block{margin-top:8px}
.contact-block .label{
  font-size:0.75rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); margin:28px 0 6px;
}
.contact-email{
  font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);
  letter-spacing:-0.01em;
}
.contact-email:hover{opacity:.6; transition:opacity .3s}

/* ---------- footer ---------- */
.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  padding:clamp(48px,8vw,96px) var(--pad) clamp(28px,4vw,40px);
  font-size:0.8125rem; letter-spacing:0.06em; color:var(--muted);
}
.site-footer a{color:var(--muted); transition:color .3s}
.site-footer a:hover{color:var(--ink)}
.site-footer .socials{display:flex; gap:22px}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(18,18,18,.96);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity .35s ease;
}
.lb.open{display:flex; opacity:1}
.lb img{max-width:92vw; max-height:88vh; width:auto; height:auto; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb .lb-cap{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  color:#cfcfcf; font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase;
}
.lb button{
  position:absolute; background:none; border:0; color:#fff; cursor:pointer;
  font-size:30px; line-height:1; padding:16px; opacity:.7; transition:opacity .25s;
  font-family:inherit;
}
.lb button:hover{opacity:1}
.lb .lb-close{top:14px; right:18px; font-size:26px}
.lb .lb-prev{left:8px; top:50%; transform:translateY(-50%)}
.lb .lb-next{right:8px; top:50%; transform:translateY(-50%)}
@media(max-width:640px){.lb .lb-prev,.lb .lb-next{font-size:22px}}

/* ---------- intro loader ---------- */
#loader{
  position:fixed; inset:0; z-index:60;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease, transform .9s cubic-bezier(.4,0,0,1), visibility .9s;
}
#loader::after{   /* same cinematic grain as the page */
  content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:grain .55s steps(3) infinite;
}
#loader.done{opacity:0; transform:translateY(-1.5%); visibility:hidden; pointer-events:none}
.cz-seen #loader{display:none}        /* skip on later same-session navigations */

.loader-inner{position:relative; z-index:1; text-align:center; padding:0 24px}
.loader-name{
  font-size:clamp(1.05rem, 3.4vw, 1.9rem);
  font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:#fff;
  /* subtle projector flicker once the letters have settled */
  animation:filmFlicker 4.6s linear 1.7s infinite;
}
/* decode/scramble: each slot rolls random chars then locks to the right one */
.loader-name .lsp{display:inline-block; width:.34em}
.loader-name .l{
  display:inline-block; min-width:.64em; text-align:center;
  color:rgba(255,255,255,.5);          /* dim while scrambling */
  transition:color .28s ease, text-shadow .28s ease;
}
.loader-name .l.set{
  color:#fff;                          /* brighten on lock-in */
  text-shadow:0 0 10px rgba(255,255,255,.25);
}
@keyframes filmFlicker{
  0%,100%{opacity:1} 3%{opacity:.74} 5%{opacity:1} 8%{opacity:.9} 10%{opacity:1}
  48%{opacity:1} 50%{opacity:.8} 52%{opacity:1} 70%{opacity:.93} 72%{opacity:1}
}
.loader-bar{
  width:min(220px, 46vw); height:1px; margin:28px auto 0;
  background:rgba(255,255,255,.14); overflow:hidden;
  opacity:0; animation:fadeUp .6s ease .5s both;
}
.loader-bar-fill{display:block; height:100%; width:0; background:#fff}
.loader-pct{
  margin-top:15px; font-size:.7rem; letter-spacing:.28em; color:var(--muted);
  opacity:0; animation:fadeUp .6s ease .5s both;
}
@keyframes fadeUp{0%{opacity:0; transform:translateY(6px)} 100%{opacity:1; transform:none}}

/* ---------- responsive ---------- */
/* pre-JS fallback column-count tracks the JS masonry breakpoints */
@media(max-width:900px){ .grid:not(.masonry-ready){column-count:2} }
@media(max-width:520px){ .grid:not(.masonry-ready){column-count:1} }

/* tablet: ease the side space in a little */
@media(max-width:760px){
  :root{ --pad:clamp(18px,4.5vw,44px); }
}

/* phone: compact one-row header (wordmark + nav fit), bigger photos */
@media(max-width:600px){
  :root{ --pad:18px; --nav-fs:0.78rem; --nav-ls:0.03em; }
  .site-header{ padding:15px var(--pad); gap:12px; }
  .wordmark{ font-size:0.8rem; letter-spacing:0.13em; }
  .nav{ gap:15px; flex:0 0 auto; }
  .display-h{ letter-spacing:0.03em; }
}

/* small phone: shrink a touch more so nothing wraps */
@media(max-width:380px){
  :root{ --nav-fs:0.72rem; }
  .wordmark{ font-size:0.72rem; letter-spacing:0.09em; }
  .nav{ gap:11px; }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .loader-name,.loader-bar,.loader-pct{animation:none; opacity:1}
  .loader-name .l{animation:none; transform:none; opacity:1}
  #loader::after{animation:none}
}