/* ─────────────────────────────────────────────────────────────
   FCM — temna elegantna tišina
   Skupni slog za slovensko (index.html) in angleško (en.html) stran.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:        #050506;
  --ink-2:      #0a0a0c;
  --gold:       #c9a44c;
  --gold-lit:   #ecd9a6;
  --gold-deep:  #8a6f2c;
  --ash:        #7d7973;
  --ash-lit:    #a8a29a;

  --hair:       rgba(201,164,76,.22);
  --hair-soft:  rgba(201,164,76,.10);

  --f-display:  "Cinzel", "Trajan Pro", Georgia, serif;
  --f-serif:    "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-meta:     "Jost", "Avenir Next", "Helvetica Neue", sans-serif;

  --ease:       cubic-bezier(.22,.61,.36,1);
  --gutter:     clamp(1.5rem, 6vw, 7rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--ash-lit);
  font-family:var(--f-meta);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:rgba(201,164,76,.24); color:var(--gold-lit); }

/* ── atmosfera ─────────────────────────────────────────────── */

/* zrno */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9;
  opacity:.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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:drift 7s steps(6) infinite;
}
@keyframes drift{
  0%{transform:translate(0,0)}      20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)}  60%{transform:translate(-1%,-1%)}
  80%{transform:translate(2%,1%)}   100%{transform:translate(0,0)}
}

/* vinjeta */
.vignette{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%, transparent 30%, rgba(0,0,0,.55) 78%, #000 100%);
}

/* dih zlate svetlobe za imenom */
.aura{
  position:absolute; left:50%; top:38%;
  width:min(120vw,1100px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:0;
  background:radial-gradient(circle,
    rgba(201,164,76,.115) 0%,
    rgba(201,164,76,.045) 26%,
    rgba(138,111,44,.018) 46%,
    transparent 66%);
  animation:breathe 13s var(--ease) infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.62; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.09); }
}

/* svetloba, ki sledi kazalcu */
.halo{
  position:fixed; z-index:1; pointer-events:none;
  width:46rem; aspect-ratio:1; left:0; top:0;
  transform:translate3d(calc(var(--mx,50vw) - 23rem), calc(var(--my,50vh) - 23rem), 0);
  background:radial-gradient(circle, rgba(201,164,76,.055) 0%, transparent 62%);
  opacity:0; transition:opacity 1.2s var(--ease);
}
body.pointer-fine .halo{ opacity:1; }

/* ── postavitev ───────────────────────────────────────────── */

.wrap{ position:relative; z-index:2; }

/* ── preklop jezika ───────────────────────────────────────── */

.lang{
  position:fixed; z-index:10;
  top:clamp(1.1rem,3vh,2rem);
  right:clamp(1.1rem,4vw,2.8rem);
  display:flex; align-items:center; gap:.6rem;
  font-size:.58rem; font-weight:300;
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:0;
  animation:surface 1.6s var(--ease) 3.4s forwards;
}
.lang a{
  color:#5f594f; text-decoration:none;
  padding:.2rem;
  transition:color .5s var(--ease);
}
.lang a:hover,
.lang a:focus-visible{ color:var(--gold-lit); }
.lang a[aria-current="page"]{ color:var(--gold); }
.lang a:focus-visible{ outline:1px solid var(--hair); outline-offset:.35rem; }
.lang i{ color:#332f2b; font-style:normal; }

/* ── uvod ─────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:clamp(5rem,14vh,9rem) var(--gutter) clamp(4rem,10vh,7rem);
  text-align:center;
}

/* ── znak: šivankino uho z zlato nitjo ────────────────────── */

.emblem{
  width:clamp(3.5rem,8.6vw,5.3rem);
  height:auto;
  display:block;
  margin:0 0 clamp(1.9rem,5vh,2.8rem);
  overflow:visible;
  filter:drop-shadow(0 0 22px rgba(201,164,76,.24));
}
.emblem .eye{
  fill:none;
  stroke:var(--gold);
  stroke-width:2.1;
  stroke-linecap:round;
}
.emblem .thread-in{
  stroke:url(#threadFade);
  stroke-width:2.1;
  stroke-linecap:round;
}
.emblem .knot{ fill:var(--gold-lit); }

.eyebrow{
  font-size:clamp(.56rem,1.5vw,.68rem);
  font-weight:300;
  letter-spacing:.62em;
  text-indent:.62em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 clamp(2.2rem,6vh,3.4rem);
}

.mark{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(3.6rem,17vw,9.5rem);
  line-height:1;
  margin:0;
  display:flex; justify-content:center; flex-wrap:nowrap;
  letter-spacing:.2em;
  text-indent:.2em;
  color:var(--gold);
}
/* preliv nosi vsaka črka zase — animacijski filter na otroku
   sicer ustvari nov stacking context in odreže ozadje starša */
.mark span{
  display:inline-block;
  background:linear-gradient(178deg,
    var(--gold-lit) 0%,
    var(--gold) 34%,
    #9e7f36 62%,
    var(--gold) 88%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 38px rgba(201,164,76,.28);
}

.mark-sub{
  font-family:var(--f-meta);
  font-weight:200;
  font-size:clamp(.6rem,1.7vw,.74rem);
  letter-spacing:.5em;
  text-indent:.5em;
  text-transform:uppercase;
  color:var(--ash);
  margin:clamp(1.1rem,3vh,1.6rem) 0 0;
}

/* zlata nit */
.thread{
  width:min(72vw,30rem);
  height:1px;
  margin:clamp(2.6rem,7vh,4rem) 0;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  transform:scaleX(0);
  opacity:.8;
}

.creed{
  font-family:var(--f-serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.32rem,3.5vw,2.45rem);
  line-height:1.42;
  letter-spacing:.005em;
  color:#cdc6bb;
  max-width:26ch;
  margin:0;
  text-wrap:balance;
}
.creed em{
  font-style:italic;
  color:var(--gold-lit);
  font-weight:400;
}

.cue{
  position:absolute;
  bottom:clamp(1.8rem,5vh,3rem); left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  font-size:.54rem; letter-spacing:.44em; text-indent:.44em;
  text-transform:uppercase; color:#4d4740;
}
.cue::after{
  content:""; width:1px; height:3rem;
  background:linear-gradient(180deg, var(--hair), transparent);
  animation:sink 3.4s var(--ease) infinite;
}
@keyframes sink{
  0%,100%{ transform:scaleY(.45); transform-origin:top; opacity:.45; }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1; }
}

/* ── podatki o družbi ─────────────────────────────────────── */

.summary{
  padding:clamp(6rem,18vh,12rem) var(--gutter);
  max-width:74rem; margin-inline:auto;
}

.facts-title{
  font-family:var(--f-meta);
  font-size:.56rem; font-weight:300;
  letter-spacing:.46em; text-indent:.46em;
  text-transform:uppercase;
  color:var(--gold-deep);
  text-align:center;
  margin:0 0 clamp(2.6rem,7vh,4rem);
}

/* gap:0 — da se robovi celic zlijejo v neprekinjeno lasnico */
.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  max-width:58rem;
  margin:0 auto;
  border-bottom:1px solid var(--hair-soft);
}

.fact{
  text-align:center;
  padding:clamp(1.5rem,4vh,2.3rem) clamp(.5rem,1.5vw,1.2rem);
  border-top:1px solid var(--hair-soft);
}
.fact--wide{ grid-column:1 / -1; }

.fact-label{
  display:block;
  font-size:.55rem; font-weight:300;
  letter-spacing:.38em; text-indent:.38em;
  text-transform:uppercase;
  color:var(--ash);
  margin-bottom:.9rem;
}
.fact-value{
  display:block; margin:0;
  font-family:var(--f-serif);
  font-weight:300;
  font-size:clamp(1rem,2.1vw,1.32rem);
  line-height:1.4;
  color:#d6cfc4;
  text-wrap:pretty;
}
.fact--wide .fact-value{
  font-size:clamp(1.25rem,3vw,2rem);
}

/* ── zaključna misel (v nogi) ─────────────────────────────── */

.whisper{
  margin:0;
  max-width:30ch;
  font-family:var(--f-serif);
  font-weight:300;
  font-size:clamp(1.05rem,2.2vw,1.38rem);
  line-height:1.6;
  color:#8d877e;
  text-wrap:balance;
}
.whisper::before{
  content:""; display:block;
  width:2.6rem; height:1px; margin:0 0 clamp(1.6rem,4vh,2.3rem);
  background:var(--hair);
}

/* ── noga ─────────────────────────────────────────────────── */

.foot{
  border-top:1px solid var(--hair-soft);
  padding:clamp(3.4rem,9vh,5.5rem) var(--gutter) clamp(2.4rem,6vh,3.5rem);
  background:linear-gradient(180deg, transparent, rgba(201,164,76,.014));
}

.foot-grid{
  max-width:74rem; margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:clamp(2.2rem,5vw,4rem);
}

.foot h2{
  font-family:var(--f-meta);
  font-size:.56rem; font-weight:300;
  letter-spacing:.46em; text-indent:.46em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.7rem;
}

/* zaščiten elektronski naslov — brez JS ga sploh ni */
.mail{ display:none; }
.js .mail{
  display:inline-block;
  font-family:var(--f-serif);
  font-size:clamp(1.18rem,2.6vw,1.6rem);
  font-weight:400;
  letter-spacing:.02em;
  color:var(--gold-lit);
  text-decoration:none;
  position:relative;
  padding-bottom:.28rem;
  word-break:break-all;
}
.mail::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.mail:hover::after,
.mail:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.mail:focus-visible{ outline:1px solid var(--hair); outline-offset:.6rem; }

.mail-note{
  display:block;
  font-size:.6rem; letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase; color:#5f594f;
  margin-top:1.4rem;
  max-width:24rem; line-height:2.1;
}
noscript .mail-fallback{
  font-family:var(--f-serif);
  font-size:1.3rem; color:var(--gold-lit);
}

.colophon{
  max-width:74rem; margin:clamp(3rem,8vh,4.5rem) auto 0;
  padding-top:1.8rem;
  border-top:1px solid var(--hair-soft);
  display:flex; flex-wrap:wrap; gap:.7rem 2rem;
  justify-content:center;
  font-size:.585rem;
  letter-spacing:.28em; text-indent:.28em;
  text-transform:uppercase;
  color:#575149;
}

/* ── razkritja ────────────────────────────────────────────── */

.rise{
  opacity:0;
  transform:translateY(1.5rem);
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.rise.seen{ opacity:1; transform:none; }

/* uvodna koreografija */
.hero .eyebrow,
.hero .mark span,
.hero .mark-sub,
.hero .creed,
.hero .cue{
  opacity:0;
  animation:surface 1.9s var(--ease) forwards;
}
.hero .eyebrow{ animation-delay:1.05s; }
.hero .mark span{ animation:letter 2.1s var(--ease) forwards; }
.hero .mark span:nth-child(1){ animation-delay:1.42s }
.hero .mark span:nth-child(2){ animation-delay:1.56s }
.hero .mark span:nth-child(3){ animation-delay:1.70s }
.hero .mark-sub{ animation-delay:2.02s; }
.hero .thread{ animation:draw 2.4s var(--ease) 2.25s forwards; }
.hero .creed{ animation-delay:2.75s; }
.hero .cue{ animation-delay:3.8s; }

/* znak se nariše prvi — uho, nato nit skoznjo, nato vozel */
.hero .emblem .eye{
  stroke-dasharray:132; stroke-dashoffset:132;
  animation:ink 2.1s var(--ease) .3s forwards;
}
.hero .emblem .thread-in{
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:ink 1.5s var(--ease) 1.25s forwards;
}
.hero .emblem .knot{
  opacity:0;
  animation:surface 1.4s var(--ease) 2.2s forwards;
}
@keyframes ink{ to{ stroke-dashoffset:0; } }

@keyframes surface{
  from{ opacity:0; transform:translateY(1.1rem); filter:blur(6px); }
  to  { opacity:1; transform:none;               filter:blur(0); }
}
@keyframes letter{
  from{ opacity:0; transform:translateY(.5em) scale(.94); filter:blur(11px); }
  to  { opacity:1; transform:none;                        filter:blur(0); }
}
@keyframes draw{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}

/* ── manjši zasloni ───────────────────────────────────────── */

@media (max-width:48rem){
  .facts{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:34rem){
  .mark{ letter-spacing:.16em; text-indent:.16em; }
  .facts{ grid-template-columns:1fr; }
  .colophon{ flex-direction:column; }
}

/* ── mirovanje ────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain, .aura, .cue::after{ animation:none; }
  .halo{ display:none; }
  .lang{ animation:none; opacity:1; }
  .hero .eyebrow, .hero .mark span, .hero .mark-sub,
  .hero .creed, .hero .cue{ animation:none; opacity:1; filter:none; transform:none; }
  .hero .thread{ animation:none; transform:scaleX(1); }
  .hero .emblem .eye,
  .hero .emblem .thread-in{ animation:none; stroke-dashoffset:0; }
  .hero .emblem .knot{ animation:none; opacity:1; }
  .rise{ opacity:1; transform:none; transition:none; }
}