:root{
  --bg: #0a0a0a;
  --text: #f1f1ef;
  --muted: #9a9a9a;
  --muted2:#7f7f7f;
  --line: rgba(255,255,255,.12);
  --gold: #b89b63;
  --max: 1260px;
}

#bgParticles{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35; /* subtle */
}


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* subtle vignette like the screenshot */
  background:
    radial-gradient(1100px 650px at 55% 45%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 520px at 70% 60%, rgba(0,0,0,.55), transparent 65%),
    var(--bg);


}

.wrap{
  width:min(var(--max), calc(100% - 120px));
  margin:0 auto;
}

@media (max-width: 900px){
  .wrap{ width: min(var(--max), calc(100% - 48px)); }
}



.logo img{
  width: 100px;
  display: block;
  transform: scale(1);
  transition: transform 860ms cubic-bezier(.2,.8,.2,1),
              filter 860ms ease;
}

.logo:hover img{
  transform: scale(1.10);
  filter: brightness(1.10);
}



/* Top bar */
.top{
 padding: 22px 0 14px;

position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

 

  background: rgba(10,10,10,.60);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);


  transition: padding 220ms cubic-bezier(.2,.8,.2,1),
              background 220ms cubic-bezier(.2,.8,.2,1),
              border-color 220ms cubic-bezier(.2,.8,.2,1);

}



.top.is-scrolled{
  padding: 14px 0 10px;
  background: rgba(10,10,10,.78);
  border-bottom-color: rgba(255,255,255,.12);
}




.top__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.logo{
  font-family: "DM Serif Display", serif;
  font-size: 28px;
  letter-spacing:.02em;
}

.nav{
  display:flex;
  gap: 40px;
  align-items:center;
  padding-top: 18px;

}
.nav a{
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .08em;
  text-decoration:none;
  transition: color .2s ease;

}
.nav a:hover{ color: var(--text); }

@media (max-width: 720px){
  .nav{ gap:18px; }
}

/* Hero area */
.hero{
  position:relative;
  padding: 72px 0 90px;
}
.hero__inner{
  position:relative;
  padding-top: 34px;
  min-height: 640px; /* gives the big airy feel */
}

/* the long thin line */
.rule{
  height:1px;
  width: 68%;
  margin-left: 0;
  background: var(--line);
  opacity: .7;
  margin-bottom: 26px;
}

/* kicker */
.kicker{
  margin:0 0 18px;
  color: #8f99a4;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* big title */
.title{
  margin: 0;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  
  line-height: .99;

  /* scale similar to screenshot */
  font-size: clamp(54px, 7.1vw, 112px);
}
.title__line{ display:block; }
.title__gold{
  color: var(--gold);
  font-style: italic;

}

/* lead paragraph */
.lead{
  margin: 26px 0 0;
  color: var(--muted2);
  font-size: 16px;
  line-height: 1.85;
  max-width: 520px;
}

.xp{
  position:absolute;
  right: 40px;
  bottom: 88px;
  display:flex;
  align-items:flex-start;
  gap: 36px;
  color: var(--gold);
}

.xp__item{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.xp__num{
  font-family: "DM Serif Display", serif;
  font-size: 42px;
  line-height:.9;
}

.xp__text{
  font-size: 11px;
  letter-spacing:.14em;
  line-height:1.25;
  text-transform: uppercase;
  margin-top:6px;
  color: rgba(184,155,99,.9);
}

@media (max-width: 900px){
  .rule{ width: 100%; }
  .xp{
    position: static;
    margin-top: 34px;
  }
}



/* ---------- Motion / Reveal (clean + subtle) ---------- */
:root{
  --ease: cubic-bezier(.2,.8,.2,1);
}

.reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 900ms var(--ease),
    transform 900ms var(--ease),
    filter 900ms var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Title reveal – slightly different feel (clean “emerge”) */
[data-reveal="title"]{
  transform: translateY(18px);
  filter: blur(10px);
}
[data-reveal="title"].is-visible{
  transform: translateY(0);
  filter: blur(0);
}

/* Thin line wipe */
[data-reveal="line"]{
  transform: none;
  filter: none;
  opacity: 1; /* line should still be present */
  position: relative;
  overflow: hidden;
}
[data-reveal="line"]::after{
  content:"";
  position:absolute;
  inset:-1px 0 -1px 0;
  background: var(--bg);
  transform: translateX(0);
}
[data-reveal="line"].is-visible::after{
  transform: translateX(102%);
  transition: transform 900ms var(--ease);
}

/* Gentle floating on hero (very slight) */
@keyframes softFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Give the stats a tiny breathing motion (optional but nice) */
.xp.is-visible{
  animation: softFloat 6s var(--ease) 900ms infinite;
}


/* ===== Responsive stats (.xp) ===== */
.xp{
  /* Desktop default: stays in one line if there's room */
  position: absolute;                 /* keep if you want bottom-right overlay on desktop */
  right: 40px;
  bottom: 88px;

  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2.2vw, 34px);

  max-width: min(720px, 52vw);        /* prevents overflow on smaller desktops */
  flex-wrap: nowrap;                  /* keep 1 row on desktop */
}

.xp__item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  white-space: nowrap;                /* keeps each stat together */
  min-width: max-content;
}

.xp__num{
  font-family: "DM Serif Display", serif;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: .9;
}

.xp__text{
  font-size: clamp(9px, .95vw, 11px);
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
  margin-top: 6px;
  color: rgba(184,155,99,.9);         /* your gold tone */
}

/* --------- Tablet: stop absolute overlay + allow wrapping --------- */
@media (max-width: 980px){
  .xp{
    position: static;                 /* IMPORTANT: prevents overlap/jank */
    right: auto;
    bottom: auto;
    margin-top: 28px;

    max-width: 100%;
    flex-wrap: wrap;                  /* wraps if needed */
    row-gap: 14px;
    justify-content: flex-start;
  }
}

/* --------- Small phones: stack one per row --------- */
@media (max-width: 520px){
  .xp{
    gap: 12px;
  }
  .xp__item{
    width: 100%;
  }
}




/* Micro-hover on nav links */
.nav a{
  position: relative;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:1px;
  background: rgba(255,255,255,.18);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease);
}
.nav a:hover::after{
  transform: scaleX(1);
}

/* Make the gold name slightly “glow” on hover (very subtle) */
.title__gold{
  text-shadow: 0 0 0 rgba(184,155,99,0);
  transition: text-shadow 400ms var(--ease), transform 400ms var(--ease);
}
.title__gold:hover{
  text-shadow: 0 0 22px rgba(184,155,99,.12);
  transform: translateY(-1px);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .xp.is-visible{ animation: none !important; }
}

#parallaxRoot{
  transition: transform 220ms var(--ease);
  will-change: transform;
}






/* ---- Line-by-line reveal for paragraphs ---- */
.reveal-lines{
  margin: 0 0 18px 0;
}

/* wrapper pre každý riadok */
.reveal-lines .rl-line{
  display:block;
  overflow:hidden; /* skryje posun riadku pri animácii */
}

/* samotný text riadku */
.reveal-lines .rl-inner{
  display:inline-block;
  transform: translateY(115%);
  opacity: 0;
  filter: blur(8px);
  transition:
    transform 850ms var(--ease),
    opacity 850ms var(--ease),
    filter 850ms var(--ease);
  transition-delay: calc(var(--ld, 0ms) + var(--d, 0ms));
  will-change: transform, opacity, filter;
}

/* keď je element viditeľný */
.reveal-lines.is-visible .rl-inner{
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-lines .rl-inner{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }
}









/* ===== About section (match screenshot) ===== */
.aboutSec{
  padding: 96px 0;
}

.aboutSec .wrap{
  position: relative;
}

/* long thin rules (top shorter, bottom full) */
.aboutSec__rule{
  height: 1px;
  background: rgba(255,255,255,.10);
  opacity: .75;
}

.aboutSec__rule--top{
  width: 64%;
  margin: 0 auto 84px; /* centered, big breathing space */
}

.aboutSec__rule--bottom{
  width: 100%;
  margin: 84px 0 0;
}

/* main layout */
.aboutSec__grid{
  display: grid;
  grid-template-columns: 260px 1fr; /* left rail + content */
  gap: 88px;                       /* big empty space like screenshot */
  align-items: start;
}

/* left rail */
.aboutSec__rail{
  position: relative;
  padding-left: 22px;
  min-height: 320px;
}

.aboutSec__label{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(143,153,164,.85);
  margin: 0 0 14px 0;
}

/* thin vertical line */
.aboutSec__railLine{
  width: 1px;
  height: 248px;
  background: rgba(255,255,255,.14);
  margin-left: 6px;
}

/* big faint O */
.aboutSec__drop{
  position: absolute;
  left: 8px;
  top: 58px;

  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-size: 210px;
  line-height: .88;

  color: rgba(184,155,99,.18); /* subtle gold like screenshot */
  pointer-events: none;
}

/* columns */
.aboutSec__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 86px; /* generous gap */
  padding-top: 42px; /* pushes text down like screenshot */
}

.aboutSec__col p{
  margin: 0 0 22px 0;
  color: rgba(244,244,242,.70);
  font-size: 14px;
  line-height: 1.95;
  max-width: 58ch;
}

/* ===== Responsive (keeps the look) ===== */
@media (max-width: 1200px){
  .aboutSec__grid{ grid-template-columns: 230px 1fr; gap: 64px; }
  .aboutSec__cols{ gap: 56px; }
}

@media (max-width: 980px){
  .aboutSec__rule--top{ width: 100%; margin-bottom: 60px; }
  .aboutSec__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .aboutSec__rail{
    padding-left: 0;
    min-height: auto;
  }
  .aboutSec__railLine{
    height: 1px;
    width: 150px;
    margin: 10px 0 0 0;
  }
  .aboutSec__drop{
    position: static;
    font-size: 120px;
    margin-top: 12px;
  }
  .aboutSec__cols{
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 10px;
  }
}

@media (max-width: 520px){
  .aboutSec{ padding: 80px 0; }
  .aboutSec__drop{ font-size: 96px; }
  .aboutSec__col p{ font-size: 13.5px; }
}



 












/* ===== Featured work section ===== */
.work{
  padding: 96px 0;
}

.work__eyebrow{
  margin: 0 0 26px;
  color: rgba(143,153,164,.85);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Grid like screenshot */
.workGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 28px;
}

.workCard{
  display: block;
  text-decoration: none;
  color: inherit;
}

.workCard__media{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  aspect-ratio: 4 / 3;
}

.workCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 450ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  display: block;
}

.workCard__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transition: opacity .25s ease;
}

.workCard__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

/* hover state */
.workCard:hover .workCard__img{
  opacity:0;
}

.workCard:hover .workCard__video{
  opacity:1;
}



/* Meta row under image */
.workCard__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}

.workCard__title{
  margin: 0 0 4px 0;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: rgba(244,244,242,.92);
  transition: color 260ms cubic-bezier(.2,.8,.2,1);
}

.workCard__cat{
  margin: 0;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(143,153,164,.90);
  transition: color 260ms cubic-bezier(.2,.8,.2,1);
}

.workCard__year{
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(143,153,164,.85);
  white-space: nowrap;
}

/* Hover interactions: subtle zoom + gold text */
.workCard:hover .workCard__media img{
  transform: scale(1.045);
}

.workCard:hover .workCard__title,
.workCard:hover .workCard__cat{
  color: var(--gold);
}

/* Focus (keyboard) */
.workCard:focus-visible{
  outline: 2px solid rgba(184,155,99,.35);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 1100px){
  .workGrid{ gap: 22px; }
}
@media (max-width: 980px){
  .work{ padding: 80px 0; }
  .workGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .workGrid{ grid-template-columns: 1fr; gap: 20px; }
  .workCard__media{ aspect-ratio: 16 / 10; }
}




 







:root{
  --gold: #b89b63; /* keep consistent with your design */
}

/* ===== Contact section (match screenshot) ===== */
.contactSec{
  padding: 110px 0 40px;
}

.contactSec__rule{
  height: 1px;
  background: rgba(255,255,255,.10);
  opacity: .75;
}

.contactSec__rule--top{
  width: 78%;
  margin: 0 auto 70px;
}

.contactSec__inner{
  padding: 0 0 120px; /* gives that large empty space below CTA */
}

.contactSec__eyebrow{
  margin: 0 0 36px;
  color: rgba(143,153,164,.85);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.contactSec__title{
  margin: 0 0 34px;
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  color: rgba(244,244,242,.96);
  letter-spacing: -0.02em;
  line-height: .92;
  font-size: clamp(46px, 5.8vw, 98px);
}

.contactSec__gold{
  color: var(--gold);
  font-style: italic;
}

.contactSec__actions{
  display: flex;
  align-items: center;
  gap: 26px;
}

.contactBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 26px;
  border: 1px solid rgba(244,244,242,.55);
  background: transparent;
  color: rgba(244,244,242,.90);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: border-color .25s ease, color .25s ease, transform .2s ease, background .25s ease;
}

.contactBtn__arrow{
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}

.contactBtn:hover{
  border-color: rgba(184,155,99,.75);
  color: var(--gold);
  transform: translateY(-1px);
  background: rgba(184,155,99,.06);
}

.contactSec__mail{
  color: rgba(143,153,164,.95);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .02em;
  transition: color .25s ease;
}

.contactSec__mail:hover{
  color: rgba(244,244,242,.92);
}

.contactSec__rule--bottom{
  width: 100%;
  margin: 0;
}

/* Footer line under bottom rule */
.contactFoot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0 0;
  color: rgba(143,153,164,.85);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contactFoot__right{
  text-transform: none;
  letter-spacing: .02em;
}

/* Responsive */
@media (max-width: 980px){
  .contactSec{ padding: 90px 0 34px; }
  .contactSec__rule--top{ width: 100%; margin-bottom: 54px; }
  .contactSec__inner{ padding-bottom: 72px; }
}

@media (max-width: 640px){
  .contactSec__actions{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .contactFoot{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}



.gallery{
  padding: 0px 0;
}

.galleryGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
 justify-items: center;
}

/* A4 landscape ratio */
.galleryGrid img{
  width: 100%;
  aspect-ratio: 297 / 210;
  object-fit: cover;

  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);

  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
 justify-items: center;
}

/* subtle hover zoom (optional) */
.galleryGrid img:hover{
  transform: scale(1.02);

}