/* ============================================================
   Aljaž Uršej — editorial portfolio
   Bodoni Moda (display) · Crimson Text (prose) · Reem Kufi (labels)
   Light, airy, gallery-magazine aesthetic.
   ============================================================ */
:root{
  --paper:   #f7f6f2;
  --paper-2: #efede7;
  --white:   #fdfdfb;
  --ink:     #2e2c26;
  --ink-soft:#7c7a6f;
  --gold:    #b1a06b;
  --gold-deep:#96854f;
  --line:    rgba(46,44,38,.14);
  --dark:    #1d1814;
  --display: "Bodoni Moda", "Didot", serif;
  --prose:   "Crimson Text", Georgia, serif;
  --label:   "Reem Kufi", "Futura", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; overflow-x:clip }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--prose);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--gold); color:#fff }

/* ---------- shared type ---------- */
.kicker{
  font-family:var(--label);
  font-size:11px; font-weight:500;
  letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:26px;
}
.kicker--center{ text-align:center }
.kicker--light{ color:#d8cdb2 }
.display{
  --ls:.14em;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(40px,6vw,84px);
  line-height:1.12;
  letter-spacing:var(--ls);
  text-transform:uppercase;
  text-wrap:balance;
}

/* ---------- scroll reveal ---------- */
.sr{
  opacity:0; transform:translateY(36px);
  transition:opacity 1s ease, transform 1.15s cubic-bezier(.22,.8,.3,1);
}
.sr.sr-in{ opacity:1; transform:none }
.sr-track{
  --ls:.14em;
  opacity:0; transform:translateY(26px);
  letter-spacing:calc(var(--ls) + .13em);
  transition:opacity 1.2s ease, transform 1.25s cubic-bezier(.22,.8,.3,1),
             letter-spacing 1.7s cubic-bezier(.22,.8,.3,1);
}
.sr-track.sr-in{ opacity:1; transform:none; letter-spacing:var(--ls) }
.display--center{ text-align:center }
.display--light{ color:var(--paper) }
.prose{
  max-width:560px;
  margin-top:30px;
  text-align:justify;
  color:#4c4a42;
}
.prose--light{ color:rgba(247,246,242,.85) }
.prose--center{ text-align:center; margin-left:auto; margin-right:auto }

.margin-note{
  position:absolute; top:110px; left:clamp(20px,4.5vw,70px);
  font-family:var(--label); font-size:10px; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase;
  color:#b9b7ab; line-height:2.2;
}
.margin-note--light{ color:rgba(247,246,242,.45) }

/* line-button */
.btn-line{
  display:inline-flex; align-items:center; gap:0;
  margin-top:40px;
  background:none; border:0; cursor:pointer;
  font-family:var(--label); font-size:11px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--ink);
}
.btn-line__rule{
  width:72px; height:1px; background:currentColor; opacity:.55;
  transition:width .45s cubic-bezier(.22,.8,.3,1);
}
.btn-line__label{
  background:var(--paper-2);
  padding:13px 22px 11px 26px;
  transition:background .35s, color .35s, letter-spacing .45s;
}
.btn-line:hover .btn-line__rule{ width:110px }
.btn-line:hover .btn-line__label{ background:var(--ink); color:var(--paper); letter-spacing:.5em }
.btn-line--light{ color:var(--paper) }
.btn-line--light .btn-line__label{ background:rgba(247,246,242,.12); backdrop-filter:blur(3px) }
.btn-line--light:hover .btn-line__label{ background:var(--paper); color:var(--ink) }

/* ============ HERO ============ */
.hero{
  position:relative; height:100svh; overflow:hidden;
  background:var(--dark);
}
.hero__video{ position:absolute; inset:0 }
.hero__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.72) saturate(.9);
}
.hero__video iframe{
  position:absolute; top:50%; left:50%;
  width:max(100vw, 177.78svh); height:max(100svh, 56.25vw);
  transform:translate(-50%,-50%);
  pointer-events:none; border:0;
}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 50% 50%, rgba(20,16,12,.18) 0%, rgba(20,16,12,.55) 100%);
}
.hero__logo{
  position:absolute; top:42px; left:50%; transform:translateX(-50%);
  height:120px; width:auto; z-index:3;
  opacity:0; animation:fadeDown 1.4s ease .3s forwards;
}
@keyframes fadeDown{ from{ opacity:0; transform:translate(-50%,-14px) } to{ opacity:1; transform:translate(-50%,0) } }
.hero__corner{
  position:absolute; z-index:3;
  font-family:var(--label); font-size:10px; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase; line-height:2.3;
  color:rgba(247,246,242,.75);
  opacity:0; animation:fadeIn 1.6s ease 1s forwards;
}
.hero__corner--tl{ top:46px; left:clamp(22px,4.5vw,70px) }
.hero__corner--bl{ bottom:46px; left:clamp(22px,4.5vw,70px) }
@keyframes fadeIn{ to{ opacity:1 } }
.hero__center{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--paper); padding:0 18px;
}
.hero__title{
  --hls:.22em;
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,5.4vw,76px);
  letter-spacing:var(--hls); text-transform:uppercase; line-height:1.25;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
  opacity:0; animation:riseSoft 1.5s cubic-bezier(.22,.8,.3,1) .95s forwards;
}
@keyframes riseSoft{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* izmenjujoči se naslov: My kind of world <-> Beyond the ordinary */
.hero__title--swap{ display:grid; justify-items:center }
.hero__phrase{
  grid-area:1/1;
  animation:phraseSwap 14s ease-in-out infinite;
}
/* brez animacij (reduced motion, varcevanje) mora ostati viden samo prvi napis */
.hero__phrase--b{ opacity:0; animation-name:phraseSwapB }
/* brez var() v keyframih — Safari/iOS jih sicer ignorira */
@keyframes phraseSwap{
  0%, 38%   { opacity:1; filter:blur(0) }
  46%, 88%  { opacity:0; filter:blur(6px) }
  96%, 100% { opacity:1; filter:blur(0) }
}
@keyframes phraseSwapB{
  0%, 38%   { opacity:0; filter:blur(6px) }
  46%, 88%  { opacity:1; filter:blur(0) }
  96%, 100% { opacity:0; filter:blur(6px) }
}
.hero__scrollhint{
  position:absolute; bottom:42px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--label); font-size:9.5px; letter-spacing:.5em; text-transform:uppercase;
  color:rgba(247,246,242,.55);
  padding-bottom:26px;
  opacity:0; animation:fadeIn 1.6s ease 1.6s forwards;
  transition:color .3s;
}
.hero__scrollhint::after{
  content:""; position:absolute; bottom:0; left:50%;
  width:1px; height:20px; background:rgba(247,246,242,.55);
  animation:dripp 2s ease-in-out infinite;
}
@keyframes dripp{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }
.hero__scrollhint:hover{ color:var(--paper) }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:30px;
  padding:0 clamp(20px,4.5vw,70px);
  height:84px;
  background:rgba(247,246,242,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transform:translateY(-101%);
  transition:transform .55s cubic-bezier(.22,.8,.3,1);
}
.nav.is-visible{ transform:none }
.nav__logo img{
  height:54px; width:auto;
  filter:invert(.83) sepia(.08);   /* white logo -> ink on paper */
}
.nav__links{
  display:flex; gap:clamp(18px,3vw,44px);
  margin:0 auto;
}
.nav__links a{
  font-family:var(--label); font-size:10.5px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--ink-soft);
  padding:8px 0; position:relative; transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:50%; bottom:2px; height:1px; width:0;
  background:var(--gold-deep); transition:width .35s ease, left .35s ease;
}
.nav__links a:hover{ color:var(--ink) }
.nav__links a:hover::after{ width:100%; left:0 }
.nav__book{
  font-family:var(--label); font-size:10.5px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:12px 22px 10px;
  transition:background .35s, color .35s;
  white-space:nowrap;
}
.nav__book:hover{ background:var(--ink); color:var(--paper) }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; z-index:70 }
.nav__burger span{
  display:block; width:24px; height:1.5px; background:var(--ink); margin:6px 0;
  transition:transform .3s, opacity .3s;
}

/* ============ INTRO ============ */
.intro{
  position:relative;
  padding:clamp(110px,16vh,190px) clamp(22px,7vw,120px);
  display:flex; justify-content:center;
}
.intro__rule{
  position:absolute; top:0; left:50%;
  width:1px; height:clamp(70px,11vh,130px);
  background:var(--line);
}
.intro__body{ max-width:640px }

/* ============ WORK ============ */
.work{
  background:var(--white);
  padding:clamp(90px,13vh,150px) clamp(20px,4.5vw,70px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.work__head{ text-align:center; margin-bottom:54px }
.work__head .kicker{ text-align:center }

.filters{
  display:flex; justify-content:center; gap:clamp(14px,3vw,40px);
  flex-wrap:wrap; margin-bottom:60px;
}
.filter{
  background:none; border:0; cursor:pointer;
  font-family:var(--label); font-size:11px; font-weight:500;
  letter-spacing:.45em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:10px 4px; position:relative;
  transition:color .3s;
}
.filter::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold-deep);
  transform:scaleX(0); transition:transform .35s ease;
}
.filter:hover{ color:var(--ink) }
.filter.is-active{ color:var(--ink) }
.filter.is-active::after{ transform:none }

/* editorial masonry with plate-style captions */
.grid{
  columns:3 320px;
  column-gap:clamp(22px,3vw,44px);
  max-width:1480px; margin:0 auto;
}
.card{
  display:block; width:100%;
  margin-bottom:clamp(40px,5vh,64px);
  break-inside:avoid;
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  opacity:0; transform:translateY(30px);
}
.card.in{ transition:opacity .9s ease, transform .9s cubic-bezier(.22,.8,.3,1); opacity:1; transform:none }
.card.hide{ display:none }
.card__frame{
  position:relative; display:block; overflow:hidden;
  background:var(--paper-2);
}
.card__frame img{
  width:100%;
  filter:saturate(.92);
  transition:transform 1.1s cubic-bezier(.19,.7,.26,1), filter .6s;
}
.card:hover .card__frame img{ transform:scale(1.045); filter:saturate(1.02) }
.card__frame::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(46,44,38,.08);
  pointer-events:none;
}
.card__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(253,253,251,.85);
  background:rgba(29,24,20,.32); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition:background .4s, transform .4s;
}
.card__play::after{
  content:""; margin-left:4px;
  border-left:13px solid var(--white);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.card:hover .card__play{ background:rgba(29,24,20,.6); transform:translate(-50%,-50%) scale(1.07) }
.card__count{
  position:absolute; bottom:12px; right:14px;
  font-family:var(--label); font-size:9px; letter-spacing:.3em;
  color:var(--white); text-transform:uppercase;
  background:rgba(29,24,20,.42); backdrop-filter:blur(3px);
  padding:5px 10px 4px;
}
.card__caption{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:16px 2px 0;
}
.card__cat{
  font-family:var(--label); font-size:9px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold-deep);
}
.card__title{
  font-family:var(--display); font-weight:400;
  font-size:17px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); margin-top:7px; line-height:1.5;
  position:relative;
}
.card__title::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:0; height:1px; background:var(--gold);
  transition:width .5s cubic-bezier(.22,.8,.3,1);
}
.card:hover .card__title::after{ width:100% }

.work__more{ text-align:center; margin-top:26px }
.work__more .btn-line{ margin-top:0 }

/* ============ WEDDINGS ============ */
.weddings{
  position:relative;
  padding:clamp(130px,20vh,220px) clamp(22px,7vw,120px);
  background:url("https://aljazursej.si/wp-content/uploads/2023/02/AU100182.jpg") center 30%/cover no-repeat fixed;
}
.weddings__veil{
  position:absolute; inset:0;
  background:linear-gradient(rgba(26,20,16,.72), rgba(26,20,16,.78));
}
.weddings__inner{ position:relative; max-width:720px; margin:0 auto; text-align:center }
.weddings__inner .kicker{ margin-bottom:30px }
.weddings__inner .prose{ margin-left:auto; margin-right:auto; text-align:center }
.weddings__actions{
  display:flex; justify-content:center; gap:clamp(20px,4vw,54px); flex-wrap:wrap;
}
.margin-note--light{ z-index:1 }

/* ============ REFERENCES ============ */
.refs{
  padding:clamp(90px,13vh,150px) clamp(20px,4.5vw,70px);
  text-align:center;
}
.refs__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  max-width:1200px; margin:56px auto 0;
}
.refs__grid figure{
  background:var(--white); padding:30px 24px;
  display:flex; align-items:center; justify-content:center;
  min-height:120px;
  filter:grayscale(1); opacity:.62;
  transition:filter .45s, opacity .45s;
}
.refs__grid figure:hover{ filter:none; opacity:1 }
.refs__grid img{ max-height:56px; width:auto; max-width:100% }

/* ============ CONTACT ============ */
.contact{
  position:relative;
  background:var(--paper-2);
  padding:clamp(110px,15vh,180px) clamp(22px,7vw,120px) clamp(90px,12vh,140px);
  border-top:1px solid var(--line);
}
.contact__rule{
  position:absolute; top:0; left:50%;
  width:1px; height:clamp(60px,9vh,110px); background:var(--line);
}
.contact__cols{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(50px,7vw,110px);
  max-width:1020px; margin:64px auto 0;
}
.contact__list{ list-style:none }
.contact__list li{
  display:flex; flex-direction:column; gap:3px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.contact__list li:first-child{ border-top:1px solid var(--line) }
.contact__label{
  font-family:var(--label); font-size:9.5px; font-weight:500;
  letter-spacing:.45em; text-transform:uppercase; color:var(--gold-deep);
}
.contact__list a{
  font-family:var(--display); font-size:21px; letter-spacing:.06em;
  transition:color .3s;
}
.contact__list a:hover{ color:var(--gold-deep) }
.contact__social{ display:flex; gap:26px }
.contact__form{ display:flex; flex-direction:column; gap:22px }
.contact__form label{
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--label); font-size:9.5px; font-weight:500;
  letter-spacing:.45em; text-transform:uppercase; color:var(--ink-soft);
}
.contact__form input, .contact__form textarea{
  background:transparent;
  border:0; border-bottom:1px solid rgba(46,44,38,.3);
  font-family:var(--prose); font-size:18px; color:var(--ink);
  padding:8px 2px 10px;
  transition:border-color .3s; resize:vertical;
}
.contact__form input:focus, .contact__form textarea:focus{
  outline:none; border-bottom-color:var(--gold-deep);
}
.contact__form .btn-line{ margin-top:14px; align-self:flex-start }
.contact__form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.contact__form{ position:relative }
.contact__formnote{ font-size:14.5px; font-style:italic; color:var(--ink-soft); min-height:1.4em }
.contact__formnote.is-ok{ color:#5d7a4e }
.contact__formnote.is-err{ color:#a05545 }

/* ============ FOOTER ============ */
.footer{
  background:var(--dark);
  text-align:center;
  padding:64px 22px 46px;
}
.footer__logo{ height:88px; width:auto; margin:0 auto 18px; opacity:.9 }
.footer__tag{
  font-family:var(--display); font-style:italic; font-size:15px;
  letter-spacing:.18em; color:rgba(247,246,242,.55);
  text-transform:lowercase;
}
.footer__copy{
  margin-top:20px;
  font-family:var(--label); font-size:9.5px; letter-spacing:.4em;
  text-transform:uppercase; color:rgba(247,246,242,.35);
}

/* ============ LIGHTBOX ============ */
.lb[hidden]{ display:none }
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(22,18,14,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:lbIn .35s ease;
}
@keyframes lbIn{ from{ opacity:0 } }
.lb__stage{
  max-width:min(90vw,1400px); max-height:78vh;
  display:flex; align-items:center; justify-content:center;
}
.lb__stage img{
  max-width:90vw; max-height:78vh; object-fit:contain;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  animation:lbImg .4s cubic-bezier(.22,.8,.3,1);
}
@keyframes lbImg{ from{ opacity:0; transform:scale(.97) } }
.lb__stage iframe{
  width:min(90vw,1200px); height:min(50.6vw,675px); border:0;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.lb__caption{
  margin-top:22px; text-align:center;
  font-family:var(--label); font-size:10px; letter-spacing:.45em; text-transform:uppercase;
  color:rgba(247,246,242,.5);
}
.lb__caption b{
  display:block; margin-bottom:6px;
  font-family:var(--display); font-weight:400; font-size:19px;
  letter-spacing:.18em; color:var(--paper);
}
.lb__close{
  position:absolute; top:20px; right:30px;
  background:none; border:0; color:var(--paper); font-size:40px; line-height:1;
  font-weight:300; cursor:pointer; opacity:.65;
  transition:opacity .3s, transform .3s; z-index:2;
}
.lb__close:hover{ opacity:1; transform:rotate(90deg) }
.lb__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:1px solid rgba(247,246,242,.25); color:var(--paper);
  font-size:30px; font-weight:300; width:56px; height:56px; border-radius:50%;
  cursor:pointer; transition:all .3s; z-index:2;
  display:flex; align-items:center; justify-content:center; padding-bottom:4px;
}
.lb__arrow:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.lb__arrow--prev{ left:26px } .lb__arrow--next{ right:26px }

/* ============ MOBILE ============ */
@media (max-width: 900px){
  .margin-note{ display:none }
  .hero__logo{ height:84px; top:30px }
  .hero__corner--tl{ display:none }
  .hero__corner--bl{ bottom:30px; line-height:2 }
  .hero__scrollhint{ display:none }
  .hero__title{ --hls:.16em; font-size:clamp(24px,7.4vw,34px) }

  .nav{ height:70px }
  .nav__logo img{ height:42px }
  .nav__links{
    /* .nav's backdrop-filter makes it the containing block, so size explicitly */
    position:fixed; top:0; left:0; width:100%; height:100svh; z-index:65;
    flex-direction:column; align-items:center; justify-content:center; gap:38px;
    background:rgba(247,246,242,.98); backdrop-filter:blur(10px);
    opacity:0; visibility:hidden; transform:scale(1.04);
    transition:opacity .4s ease, transform .5s cubic-bezier(.22,.8,.3,1), visibility 0s .4s;
  }
  .nav__links.open{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
  .nav__links a{ font-size:13px }
  .nav__book{ display:none }
  .nav__burger{ display:block; margin-left:auto }
  body.menu-open .nav__burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg) }
  body.menu-open .nav__burger span:nth-child(2){ opacity:0 }
  body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg) }

  .display{ --ls:.1em; font-size:clamp(24px,7.2vw,38px) }
  .prose{ text-align:left }
  .grid{ columns:2 150px; column-gap:14px }
  .card{ margin-bottom:30px }
  .card__caption{ padding-top:10px }
  .card__title{ font-size:13px; letter-spacing:.08em }
  .card__cat{ font-size:8px }
  .card__play{ width:46px; height:46px }
  .weddings{ background-attachment:scroll }
  .contact__cols{ grid-template-columns:1fr; gap:60px }
  .lb__arrow{ width:44px; height:44px; font-size:24px }
  .lb__arrow--prev{ left:10px } .lb__arrow--next{ right:10px }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .hero__phrase{ animation:none!important }
  html{ scroll-behavior:auto }
}