/* ============================================================
   UJET SPOMIN — eleganca & animacije
   Cormorant Garamond / Montserrat / Great Vibes
   ============================================================ */

h1, h2, h3, .display { font-weight: 500; letter-spacing: 0.01em; }
body { font-weight: 300; }
.hero h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); font-weight: 400; }
.section-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.hero h1 em, .cta-band em { font-family: var(--font-script); font-style: normal; font-size: 1.12em; letter-spacing: 0.02em; }
.about-sign { font-family: var(--font-script); font-size: 2.1rem; }
.hero-sub, .section-head p { letter-spacing: 0.02em; }
.btn { font-weight: 500; }
.logo-text { font-weight: 600; }

/* -------- napredek drsenja -------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 120;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold), #e6cfa9, var(--gold));
  pointer-events: none;
}

/* -------- gumbi: sijaj + preblisk -------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); transition: left 0.6s var(--ease); pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { left: 130%; }
.btn:hover, .btn:focus-visible {
  box-shadow: 0 0 0 1px rgba(176, 141, 87, 0.4), 0 8px 30px rgba(176, 141, 87, 0.45), 0 0 46px rgba(214, 178, 125, 0.35);
}
.btn-gold:hover, .btn-gold:focus-visible {
  box-shadow: 0 0 0 1px rgba(230, 207, 169, 0.5), 0 10px 34px rgba(176, 141, 87, 0.55), 0 0 60px rgba(230, 207, 169, 0.4);
}
.btn:active { transform: translateY(0) scale(0.985); }

/* -------- glava / navigacija -------- */
.logo svg { transition: transform 0.6s var(--ease); }
.logo:hover svg { transform: rotate(-12deg) scale(1.06); }
.nav-links a { transition: color 0.25s, transform 0.3s var(--ease); }
.nav-links a:hover { transform: translateY(-1px); }

/* -------- hero: dihajoče ozadje + mehki vstop -------- */
@keyframes heroDrift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.045) translate(-0.6%, 0.5%); }
  66% { transform: scale(1.03) translate(0.5%, -0.4%); }
}
.hero-bg { animation: heroDrift 26s ease-in-out infinite; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(34px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.hero-kicker { animation: riseIn 1.1s var(--ease) 0.15s both; }
.hero h1 { animation: riseIn 1.2s var(--ease) 0.35s both; }
.hero-sub { animation: riseIn 1.2s var(--ease) 0.6s both; }
.hero-ctas { animation: riseIn 1.2s var(--ease) 0.85s both; }
@keyframes shimmer { to { background-position: 200% center; } }
.hero h1 em {
  background: linear-gradient(90deg, #e6cfa9 0%, #fff3dd 25%, #d9b989 50%, #e6cfa9 75%, #fff3dd 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes lineGrow { from { transform: scaleX(0); } }
.hero-kicker::before, .hero-kicker::after { transform-origin: center; animation: lineGrow 1.4s var(--ease) 0.5s both; }
.hero-bokeh { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; }

/* -------- kartice storitev: zlati sij pod kazalcem -------- */
.service-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(176, 141, 87, 0.13), transparent 65%);
  opacity: 0; transition: opacity 0.4s;
}
.service-card:hover::after { opacity: 1; }
.service-card:hover { box-shadow: var(--shadow-lift), 0 0 34px rgba(176, 141, 87, 0.18); }
.service-card h3 { transition: color 0.3s; }
.service-card:hover h3 { color: var(--gold-deep); }

/* -------- galerija: notranji zlati okvir -------- */
.masonry-item::before {
  content: ''; position: absolute; inset: 12px; border: 1px solid rgba(230, 207, 169, 0.85);
  border-radius: 2px; opacity: 0; transform: scale(1.05); transition: all 0.5s var(--ease);
  z-index: 2; pointer-events: none;
}
.masonry-item:hover::before { opacity: 1; transform: scale(1); }
.masonry-item { transition: box-shadow 0.4s var(--ease); }
.masonry-item:hover { box-shadow: 0 18px 50px rgba(43, 38, 34, 0.3), 0 0 30px rgba(176, 141, 87, 0.2); }
.filter-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(176, 141, 87, 0.25); }
.filter-btn.active { box-shadow: 0 6px 20px rgba(43, 38, 34, 0.3); }

/* -------- potek: pulz obroča -------- */
.process-step .circle::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid var(--gold); opacity: 0; transform: scale(0.85); transition: all 0.5s var(--ease);
}
.process-step:hover .circle::after { opacity: 0.6; transform: scale(1); }
.process-step h3 { transition: transform 0.4s var(--ease); }
.process-step:hover h3 { transform: translateY(-2px); }

/* -------- zakaj: ikone zaživijo -------- */
.why-item svg { transition: transform 0.45s var(--ease), color 0.3s; }
.why-item:hover svg { transform: scale(1.18) rotate(-6deg); color: var(--gold-deep); }
.why-item:hover { box-shadow: var(--shadow-lift), 0 0 26px rgba(176, 141, 87, 0.14); border-color: rgba(176, 141, 87, 0.4); }

/* -------- mnenja / FAQ -------- */
.testi-dot { transition: transform 0.3s var(--ease), background 0.3s; }
.testi-dot:hover { transform: scale(1.5); }
.faq-q { position: relative; }
.faq-q::after {
  content: ''; position: absolute; left: 4px; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 0.45s var(--ease);
}
.faq-item:hover .faq-q::after { width: 60px; }

/* -------- koledar & termini -------- */
.cal-day { transition: all 0.25s var(--ease); }
.cal-day:not([disabled]):hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(176, 141, 87, 0.3); background: var(--bg-alt); }
.cal-nav { transition: all 0.3s var(--ease); }
.cal-nav:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(176, 141, 87, 0.25); }
.slot-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(176, 141, 87, 0.3); border-color: var(--gold); }
.slot-btn.selected { box-shadow: 0 6px 20px rgba(176, 141, 87, 0.45); }

/* -------- polja obrazcev: nežen sijaj -------- */
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(176, 141, 87, 0.5); }
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15), 0 0 22px rgba(176, 141, 87, 0.15);
}
.field label { transition: color 0.25s; }
.field:focus-within label { color: var(--gold-deep); }

/* -------- kontakt / noga / statistika -------- */
.contact-list li { transition: transform 0.35s var(--ease); }
.contact-list li:hover { transform: translateX(6px); }
@keyframes iconPop { 50% { transform: scale(1.25); } }
.contact-list li:hover svg { animation: iconPop 0.5s var(--ease); }
.socials a:hover { box-shadow: 0 8px 24px rgba(176, 141, 87, 0.4); }
.footer-grid nav a { position: relative; width: fit-content; transition: color 0.25s, transform 0.3s var(--ease); }
.footer-grid nav a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gold); transition: width 0.35s var(--ease);
}
.footer-grid nav a:hover { transform: translateX(3px); }
.footer-grid nav a:hover::after { width: 100%; }
.stat { transition: transform 0.35s var(--ease); cursor: default; }
.stat:hover { transform: translateY(-4px); }
.stat b { transition: color 0.3s; }
.stat:hover b { color: var(--gold-deep); }

/* -------- lightbox gumbi -------- */
.lb-btn { transition: background 0.25s, transform 0.3s var(--ease), box-shadow 0.3s; }
.lb-btn:hover { transform: scale(1.1); box-shadow: 0 0 24px rgba(176, 141, 87, 0.45); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.1); }

/* -------- prevzem / instagram -------- */
.photo-cell { transition: box-shadow 0.35s var(--ease); }
.photo-cell:hover { box-shadow: 0 14px 40px rgba(43, 38, 34, 0.28), 0 0 26px rgba(176, 141, 87, 0.18); }
.ig-strip a { transition: transform 0.4s var(--ease); }
.ig-strip a:hover { transform: translateY(-4px); }

/* -------- kazalec-sled (zlati sij) -------- */
.cursor-glow {
  position: fixed; width: 340px; height: 340px; border-radius: 50%;
  pointer-events: none; z-index: 90; opacity: 0;
  background: radial-gradient(circle, rgba(203, 166, 113, 0.10) 0%, transparent 65%);
  transform: translate(-50%, -50%); transition: opacity 0.6s;
  mix-blend-mode: plus-lighter;
}
@media (hover: none), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

/* reduce-motion: umiri neskončne animacije */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero h1 em { animation: none !important; }
  .hero-kicker, .hero h1, .hero-sub, .hero-ctas { animation: none !important; opacity: 1; }
  .hero-kicker::before, .hero-kicker::after { animation: none !important; }
}


/* ============================================================
   SPOMIN — rokopisna tipografija, uvodni pozdrav, listanje albuma
   ============================================================ */

/* -------- bolj pisana tipografija s pravim kontrastom -------- */
.logo-text {
  font-family: var(--font-script); font-size: 27px; letter-spacing: 1px;
  text-transform: none; font-weight: 400; color: var(--ink); line-height: 1;
}
.logo-text small { font-family: var(--font-body); letter-spacing: 4px; margin-top: 5px; }
.kicker, .hero-kicker {
  font-family: var(--font-script); text-transform: none; font-size: 1.45rem;
  letter-spacing: 1.5px; color: var(--gold-deep);
}
.hero-kicker { color: #e6cfa9; }
h2 .script, .section-head h2 em.script {
  font-family: var(--font-script); font-style: normal; font-size: 1.18em;
  color: var(--gold-deep); letter-spacing: 0.02em;
}
.nav-links a { font-family: var(--font-display); font-size: 16px; letter-spacing: 1.2px; text-transform: none; font-weight: 500; }
.btn { font-family: var(--font-display); font-size: 17px; letter-spacing: 1.5px; text-transform: none; font-weight: 600; }
.btn-sm { font-size: 15px; }
.filter-btn { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; text-transform: none; }
.faq-q { font-family: var(--font-display); font-size: 1.25rem; }
.footer-grid h4 { font-family: var(--font-script); font-size: 1.3rem; letter-spacing: 1px; text-transform: none; color: var(--gold-deep); }
.testi cite { font-family: var(--font-display); text-transform: none; letter-spacing: 1px; font-size: 15px; }

/* -------- uvodni pozdrav (nalaganje strani) -------- */
.intro-veil {
  position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(150deg, #241d17 0%, #17120e 100%);
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.intro-veil.done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-veil .iv-script {
  font-family: var(--font-script); font-size: clamp(2.6rem, 7vw, 4.6rem); color: #e6cfa9;
  animation: ivIn 1.4s var(--ease) both;
}
.intro-veil .iv-sub {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 7px; text-transform: uppercase;
  color: rgba(230, 207, 169, 0.65); animation: ivIn 1.4s var(--ease) 0.3s both;
}
.intro-veil .iv-line {
  width: 0; height: 1px; background: var(--gold); margin-top: 18px;
  animation: ivLine 1.2s var(--ease) 0.5s both;
}
@keyframes ivIn { from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(8px); } }
@keyframes ivLine { to { width: 140px; } }

/* -------- filmsko zrno + vinjeta: občutek starega albuma -------- */
.memory-grain {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 80; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1.5%); }
  50% { transform: translate(1.5%, -2%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0, 0); }
}
.memory-vignette {
  position: fixed; inset: 0; z-index: 79; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(23, 17, 12, 0.16) 100%);
}

/* -------- listanje po spominu: smerni vstopi sekcij -------- */
html.js .rv-left { opacity: 0; transform: translateX(-56px) rotate(-1deg); transition: all 1s var(--ease); }
html.js .rv-right { opacity: 0; transform: translateX(56px) rotate(1deg); transition: all 1s var(--ease); }
html.js .rv-zoom { opacity: 0; transform: scale(0.92); transition: all 1s var(--ease); }
html.js .rv-left.in, html.js .rv-right.in, html.js .rv-zoom.in { opacity: 1; transform: none; }
html.js .section-head.reveal h2 { letter-spacing: 0.14em; transition: letter-spacing 1.3s var(--ease); }
html.js .section-head.reveal.in h2 { letter-spacing: 0.01em; }

/* fotografije kot polaroidi — nežen zasuk, ob hoverju poravnava */
.masonry-item { transition: transform 0.45s var(--ease), box-shadow 0.4s var(--ease), border-color 0.35s; }
.masonry-item:hover { transform: translateY(-8px) scale(1.01); }
.masonry-item.is-featured { transform: translateY(-16px) scale(1.035); }
.masonry-item.is-featured:hover { transform: translateY(-22px) scale(1.045); }
.masonry-item img { will-change: transform; }

/* parallax sloji (JS nastavlja --py) */
.pl { transform: translateY(calc(var(--py, 0) * 1px)); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .intro-veil { display: none; }
  .memory-grain { animation: none; }
  html.js .rv-left, html.js .rv-right, html.js .rv-zoom { opacity: 1; transform: none; }
}

/* kombinacija parallax + polaroid zasuk (transform se ne sme prepisati) */

/* kontrast hero naslova na svetlih fotografijah */
.hero h1, .hero-sub, .hero-kicker { text-shadow: 0 2px 26px rgba(15, 11, 8, 0.55), 0 1px 4px rgba(15, 11, 8, 0.35); }

/* ============================================================
   MOBILNI POPRAVKI PREKRIVANJA
   Na ozkih zaslonih je galerija enostolpčna — »featured« kartice
   se ne smejo dvigniti/povečati (sicer štrlijo iz mreže in se
   prekrivajo). Parallax sloji (--py) prav tako mirujejo, da se
   naslovi in fotografije ne prekrivajo pri drsenju.
   ============================================================ */
@media (max-width: 760px) {
  .memory-grain, .memory-vignette { display: none; }
  .masonry-item,
  .masonry-item:hover,
  .masonry-item.is-featured,
  .masonry-item.is-featured:hover { transform: none; }
  .pl { transform: none !important; }
}