/* ============================================
   Ogy Spasov Photography — NOCTURNE
   Cinematic, dark, neon. Light as the subject.
   Type: Cinzel (display) / Space Grotesk (UI)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Space+Grotesk:wght@300;400;500&display=swap');

:root{
  --void:   #06060b;
  --panel:  #0b0b14;
  --ink:    #ece9f7;
  --dim:    #8d88ab;
  --faint:  #575270;

  --neon:   #35e8ff;
  --neon-2: #c96bff;
  --neon-rgb: 53, 232, 255;

  --hair:   rgba(236,233,247,0.10);
  --hair-2: rgba(236,233,247,0.22);

  --display: 'Cinzel', 'Times New Roman', serif;
  --ui: 'Space Grotesk', -apple-system, sans-serif;

  --edge: clamp(20px, 5vw, 84px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* per-page neon signature */
body[data-room="portraits"]{ --neon:#ff5ecb; --neon-2:#8b5cff; --neon-rgb:255,94,203; }
body[data-room="real-estate"]{ --neon:#35e8ff; --neon-2:#5b8cff; --neon-rgb:53,232,255; }
body[data-room="sports"]{ --neon:#b8ff3d; --neon-2:#35e8ff; --neon-rgb:184,255,61; }
body[data-room="documentary"]{ --neon:#ffd166; --neon-2:#ff7a45; --neon-rgb:255,209,102; }
body[data-room="contact"]{ --neon:#a78bff; --neon-2:#35e8ff; --neon-rgb:167,139,255; }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ---- drifting aurora behind everything ---- */
body::before{
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 26%, rgba(var(--neon-rgb),0.26) 0%, transparent 62%),
    radial-gradient(34% 40% at 82% 68%, rgba(201,107,255,0.20) 0%, transparent 64%),
    radial-gradient(30% 34% at 52% 96%, rgba(var(--neon-rgb),0.14) 0%, transparent 62%);
  filter: blur(46px);
  opacity: 0.85;
  animation: drift 26s ease-in-out infinite alternate;
  transition: background 1.2s var(--ease);
}
@keyframes drift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* ---- scanlines + vignette ---- */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px),
    radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(0,0,0,0.72) 100%);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
::selection{ background: var(--neon); color: var(--void); }

/* ---- neon type utility ---- */
.neon{
  color: #fff;
  text-shadow:
    0 0 4px rgba(255,255,255,0.75),
    0 0 12px rgba(var(--neon-rgb),0.85),
    0 0 34px rgba(var(--neon-rgb),0.55),
    0 0 74px rgba(var(--neon-rgb),0.3);
}
.neon-soft{
  color: var(--ink);
  text-shadow: 0 0 16px rgba(var(--neon-rgb),0.45);
}
/* the tube warming up, then a faint idle pulse */
.flicker{ animation: ignite 1.5s steps(1,end) 1 both, hum 5.5s ease-in-out 1.5s infinite; }
@keyframes ignite{
  0%,10%   { opacity: 0.1; }
  12%      { opacity: 0.85; }
  14%      { opacity: 0.15; }
  18%      { opacity: 0.9; }
  22%      { opacity: 0.25; }
  26%,100% { opacity: 1; }
}
@keyframes hum{
  0%,100%{ filter: brightness(1); }
  47%    { filter: brightness(1.06); }
  52%    { filter: brightness(0.94); }
}

.label{
  font-family: var(--ui);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--dim);
}

/* ---------- header ---------- */
header.site{
  position: relative;
  z-index: 20;
  padding: 26px var(--edge) 22px;
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(6px);
}
.head-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.brand{
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand small{
  display: block;
  font-family: var(--ui);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: 0.4em;
  color: var(--faint);
  margin-top: 4px;
  text-shadow: none;
}

.head-right{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

nav.primary{ display: flex; flex-wrap: wrap; gap: 6px 26px; }
nav.primary a{
  position: relative;
  font-size: 11.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--dim);
  padding: 5px 0;
  white-space: nowrap;
  transition: color .45s var(--ease), text-shadow .45s var(--ease);
}
nav.primary a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--neon);
  box-shadow: 0 0 9px rgba(var(--neon-rgb),0.9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
nav.primary a:hover,
nav.primary a.active{
  color: #fff;
  text-shadow: 0 0 12px rgba(var(--neon-rgb),0.75);
}
nav.primary a:hover::after,
nav.primary a.active::after{ transform: scaleX(1); }

/* ---------- neon language toggle ---------- */
.lang-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  padding: 4px;
  cursor: pointer;
  font-family: var(--ui);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.lang-toggle:hover{
  border-color: rgba(var(--neon-rgb),0.6);
  box-shadow: 0 0 18px rgba(var(--neon-rgb),0.28);
}
.lang-toggle span{
  position: relative;
  z-index: 2;
  padding: 5px 13px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .45s var(--ease), text-shadow .45s var(--ease);
}
.lang-toggle .pill{
  position: absolute;
  top: 4px; bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: rgba(var(--neon-rgb),0.16);
  border: 1px solid rgba(var(--neon-rgb),0.55);
  box-shadow: 0 0 16px rgba(var(--neon-rgb),0.45), inset 0 0 12px rgba(var(--neon-rgb),0.2);
  transition: transform .5s var(--ease);
  z-index: 1;
}
.lang-toggle[data-active="bg"] .pill{ transform: translateX(100%); }
.lang-toggle[data-active="en"] .l-en,
.lang-toggle[data-active="bg"] .l-bg{
  color: #fff;
  text-shadow: 0 0 12px rgba(var(--neon-rgb),0.9);
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  z-index: 2;
  padding: clamp(80px, 16vh, 170px) var(--edge) clamp(56px, 10vh, 110px);
  max-width: 1340px;
  margin: 0 auto;
}
.hero .eyebrow{ margin: 0 0 30px; }
.hero h1{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 4.3rem);
  line-height: 1.16;
  letter-spacing: 0.02em;
  max-width: 17ch;
  margin: 0 0 32px;
}
.hero .lede{
  max-width: 50ch;
  font-size: 16.5px;
  color: var(--dim);
  margin: 0 0 42px;
}

/* ---------- neon button ---------- */
.beam{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px;
  border: 1px solid rgba(var(--neon-rgb),0.5);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #fff;
  background: rgba(var(--neon-rgb),0.06);
  box-shadow: 0 0 20px rgba(var(--neon-rgb),0.22), inset 0 0 18px rgba(var(--neon-rgb),0.08);
  overflow: hidden;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease), transform .4s var(--ease);
}
.beam:hover{
  border-color: rgba(var(--neon-rgb),0.95);
  box-shadow: 0 0 34px rgba(var(--neon-rgb),0.5), inset 0 0 26px rgba(var(--neon-rgb),0.16);
  transform: translateY(-2px);
}
.beam::before{
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  transition: left .85s var(--ease);
}
.beam:hover::before{ left: 120%; }
.beam .arrow{ transition: transform .5s var(--ease); }
.beam:hover .arrow{ transform: translateX(6px); }

/* ---------- sections ---------- */
section{ position: relative; z-index: 2; padding: clamp(48px, 8vh, 92px) var(--edge); }
.inner{ max-width: 1340px; margin: 0 auto; }
.rule{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-2), transparent);
  margin: 0;
}

h2.title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  max-width: 22ch;
  margin: 0 0 28px;
}

.prose{ max-width: 58ch; color: var(--dim); font-size: 16.5px; }
.prose p{ margin: 0 0 18px; }
.prose strong{ color: #fff; font-weight: 400; text-shadow: 0 0 14px rgba(var(--neon-rgb),0.5); }

/* ---------- index rows ---------- */
.index-list{ margin-top: 50px; border-top: 1px solid var(--hair); }
.index-row{
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.index-row::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--neon-rgb),0.13), transparent 70%);
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.index-row::after{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--neon);
  box-shadow: 0 0 16px rgba(var(--neon-rgb),0.9);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .55s var(--ease);
}
a.index-row:hover::before{ opacity: 1; }
a.index-row:hover::after{ transform: scaleY(1); }
.index-row > *{ position: relative; z-index: 1; }
.index-row .num{
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--faint);
  transition: color .5s var(--ease), text-shadow .5s var(--ease);
}
.index-row .name{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  letter-spacing: 0.06em;
  transition: transform .6s var(--ease), color .5s var(--ease), text-shadow .5s var(--ease);
}
.index-row .desc{
  font-size: 13px;
  color: var(--dim);
  text-align: right;
  max-width: 32ch;
}
a.index-row:hover .num{ color: var(--neon); text-shadow: 0 0 12px rgba(var(--neon-rgb),0.9); }
a.index-row:hover .name{
  transform: translateX(16px);
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.6), 0 0 26px rgba(var(--neon-rgb),0.8);
}

/* ---------- gallery ---------- */
.gallery{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 4vw, 62px) clamp(20px, 3vw, 42px);
  margin-top: 54px;
}
figure.shot{ margin: 0; grid-column: span 6; }
figure.shot.wide{ grid-column: span 7; }
figure.shot.narrow{ grid-column: span 5; }
figure.shot.full{ grid-column: span 12; }
figure.shot.drop{ margin-top: clamp(18px, 6vw, 84px); }

.shot .holder{
  position: relative;
  overflow: hidden;
  background: #05050a;
  border: 1px solid var(--hair);
  transition: border-color .6s var(--ease), box-shadow .7s var(--ease);
}
.shot:hover .holder{
  border-color: rgba(var(--neon-rgb),0.5);
  box-shadow: 0 0 34px rgba(var(--neon-rgb),0.26), 0 0 90px rgba(var(--neon-rgb),0.12);
}
.shot .holder img{
  width: 100%;
  height: auto;
  filter: brightness(0.48) saturate(0.55) contrast(1.1);
  transform: scale(1.001);
  transition: transform 1.6s var(--ease), filter 1.1s var(--ease);
}
.shot:hover .holder img{
  filter: brightness(1) saturate(1.04) contrast(1.02);
  transform: scale(1.055);
}

/* light that follows the cursor across the frame */
.shot .holder .lamp{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease);
  background: radial-gradient(26% 32% at var(--mx,50%) var(--my,50%), rgba(var(--neon-rgb),0.22) 0%, transparent 70%);
  mix-blend-mode: screen;
}
.shot:hover .holder .lamp{ opacity: 1; }

/* sweeping beam on hover */
.shot .holder::after{
  content: "";
  position: absolute;
  top: -20%; left: -70%;
  width: 40%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-16deg);
  pointer-events: none;
  transition: left 1.1s var(--ease);
}
.shot:hover .holder::after{ left: 130%; }

.shot figcaption{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--hair);
  position: relative;
}
.shot figcaption::before{
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--neon);
  box-shadow: 0 0 10px rgba(var(--neon-rgb),0.9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--ease);
}
.shot:hover figcaption::before{ transform: scaleX(1); }

.shot .cap-name{
  font-family: var(--display);
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  transition: color .6s var(--ease), text-shadow .6s var(--ease);
}
.shot:hover .cap-name{
  color: #fff;
  text-shadow: 0 0 18px rgba(var(--neon-rgb),0.8);
}
.shot .cap-num{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--faint);
  transition: color .6s var(--ease), text-shadow .6s var(--ease);
}
.shot:hover .cap-num{ color: var(--neon); text-shadow: 0 0 14px rgba(var(--neon-rgb),0.9); }

@media (max-width: 820px){
  figure.shot, figure.shot.wide, figure.shot.narrow{ grid-column: span 12; }
  figure.shot.drop{ margin-top: 0; }
}

/* ---------- full-bleed plate ---------- */
.plate{
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.plate img{
  width: 100%;
  height: clamp(300px, 60vh, 680px);
  object-fit: cover;
  object-position: center 58%;
  filter: brightness(0.55) saturate(0.6) contrast(1.1);
  transform: scale(1.02);
  transition: transform 2.6s var(--ease), filter 1.6s var(--ease);
}
.plate:hover img{ filter: brightness(0.9) saturate(0.95); transform: scale(1.07); }
.plate::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,6,11,0.55) 0%, transparent 30%, transparent 62%, rgba(6,6,11,0.85) 100%);
}

/* ---------- pull quote ---------- */
.pull{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.9vw, 2rem);
  line-height: 1.45;
  letter-spacing: 0.03em;
  max-width: 24ch;
  margin: clamp(46px, 8vh, 88px) 0;
  padding-left: 30px;
  border-left: 1px solid rgba(var(--neon-rgb),0.55);
  box-shadow: -1px 0 24px -6px rgba(var(--neon-rgb),0.6);
  color: var(--ink);
}

/* ---------- contact ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 7vw, 96px);
  margin-top: 22px;
}
@media (max-width: 880px){ .contact-grid{ grid-template-columns: 1fr; } }

.field{ margin-bottom: 28px; }
.field label{
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--dim);
  margin-bottom: 10px;
}
.field input, .field textarea{
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 300;
  font-size: 16px;
  padding: 13px 15px;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--faint); }
.field input:focus, .field textarea:focus{
  outline: none;
  border-color: rgba(var(--neon-rgb),0.75);
  box-shadow: 0 0 20px rgba(var(--neon-rgb),0.25), inset 0 0 14px rgba(var(--neon-rgb),0.06);
  background: rgba(var(--neon-rgb),0.04);
}
.field textarea{ resize: vertical; min-height: 110px; }

.side-info h3{
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.side-info p{ color: var(--dim); font-size: 15.5px; margin: 0 0 10px; }
.side-info a.mail{
  color: #fff;
  border-bottom: 1px solid rgba(var(--neon-rgb),0.5);
  transition: text-shadow .4s var(--ease), border-color .4s var(--ease);
}
.side-info a.mail:hover{
  text-shadow: 0 0 16px rgba(var(--neon-rgb),0.9);
  border-color: var(--neon);
}

.socials{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.social{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--dim);
  transition: color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), text-shadow .45s var(--ease);
}
.social svg{ width: 14px; height: 14px; }
.social:hover{
  color: #fff;
  border-color: rgba(var(--neon-rgb),0.75);
  box-shadow: 0 0 22px rgba(var(--neon-rgb),0.3);
  text-shadow: 0 0 12px rgba(var(--neon-rgb),0.8);
}

/* ---------- footer ---------- */
footer.site{
  position: relative;
  z-index: 2;
  padding: 44px var(--edge) 56px;
  border-top: 1px solid var(--hair);
  margin-top: clamp(50px, 8vh, 92px);
}
.foot-row{
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 18px;
}
.disclaimer{
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
  max-width: 62ch;
}
.foot-nav{ display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-nav a{
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .4s var(--ease), text-shadow .4s var(--ease);
}
.foot-nav a:hover{ color: #fff; text-shadow: 0 0 12px rgba(var(--neon-rgb),0.8); }

/* ---------- i18n ---------- */
html[data-lang="en"] .lang-bg{ display: none !important; }
html[data-lang="bg"] .lang-en{ display: none !important; }

/* ---------- reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.reveal.in{ opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition-duration: .01ms !important; }
  .reveal{ opacity: 1; transform: none; filter: none; }
  body::before{ animation: none; }
}

/* the language switch is a real link between /  and  /en/ now */
a.lang-toggle{ text-decoration: none; }