/* =====================================================
   UMKOM v2 — Enhancement Layer
   Layers on top of style.css
   ===================================================== */

/* ----- Scroll progress bar ----- */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:3px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--gold));
  z-index:150;
  transition:width .1s linear;
  box-shadow:0 0 12px rgba(184,61,39,.4);
}

/* ----- Custom cursor (desktop only) ----- */
@media (hover:hover) and (pointer:fine){
  .cursor-dot{
    position:fixed;
    top:0;left:0;
    width:8px;height:8px;
    background:var(--accent);
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%);
    transition:transform .15s var(--ease-out),width .2s,height .2s,opacity .2s;
    mix-blend-mode:difference;
  }
  .cursor-ring{
    position:fixed;
    top:0;left:0;
    width:40px;height:40px;
    border:1.5px solid var(--accent);
    border-radius:50%;
    pointer-events:none;
    z-index:9998;
    transform:translate(-50%,-50%);
    transition:transform .25s var(--ease-out),width .3s,height .3s,border-color .2s;
    opacity:.6;
  }
  .cursor-hover .cursor-dot{width:0;height:0;opacity:0}
  .cursor-hover .cursor-ring{
    width:64px;height:64px;
    border-color:var(--gold);
    background:rgba(201,155,74,.1);
    border-width:1px;
  }
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button{cursor:none}
}

/* ----- Animated hero canvas ----- */
.hero-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* ----- Magnetic hover on buttons ----- */
.btn{
  will-change:transform;
  transition:all .25s var(--ease),transform .2s var(--ease-out);
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2) 0%,transparent 40%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.btn:hover::after{opacity:1}

/* ----- Hero title - more dramatic ----- */
.hero-title{
  position:relative;
}
.hero-title .line span{
  position:relative;
  display:inline-block;
}
.hero-title em{
  position:relative;
  display:inline-block;
}
.hero-title em::after{
  content:"";
  position:absolute;
  left:-4%;right:-4%;
  bottom:6%;
  height:22%;
  background:rgba(184,61,39,.15);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left;
  animation:highlight 1.2s 1.4s var(--ease-out) forwards;
}
@keyframes highlight{
  to{transform:scaleX(1)}
}

/* ----- Hero visual enhancement - floating math particles ----- */
.hero-orbit{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-orbit-item{
  position:absolute;
  font-family:var(--font-display);
  font-style:italic;
  color:rgba(184,61,39,.4);
  font-weight:300;
  user-select:none;
  animation:float-orbit 20s linear infinite;
}
.hero-orbit-item:nth-child(1){top:15%;left:-5%;font-size:40px;animation-delay:0s;animation-duration:15s}
.hero-orbit-item:nth-child(2){top:60%;left:-8%;font-size:32px;animation-delay:-4s;animation-duration:18s;color:rgba(201,155,74,.5)}
.hero-orbit-item:nth-child(3){bottom:10%;right:-5%;font-size:48px;animation-delay:-8s;animation-duration:22s;color:rgba(31,56,52,.4)}
.hero-orbit-item:nth-child(4){top:30%;right:-8%;font-size:28px;animation-delay:-12s;animation-duration:17s}
@keyframes float-orbit{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(30px,-20px) rotate(90deg)}
  50%{transform:translate(0,-40px) rotate(180deg)}
  75%{transform:translate(-30px,-20px) rotate(270deg)}
  100%{transform:translate(0,0) rotate(360deg)}
}

/* ----- Live animated formula strip ----- */
.formula-strip{
  position:relative;
  overflow:hidden;
  padding:40px 0;
  background:var(--ink);
  color:var(--paper);
  border-top:1px solid rgba(244,239,230,.1);
  border-bottom:1px solid rgba(244,239,230,.1);
}
.formula-track{
  display:flex;
  gap:80px;
  animation:scroll-left 60s linear infinite;
  white-space:nowrap;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(32px,4vw,48px);
  font-weight:300;
  color:rgba(244,239,230,.5);
}
.formula-track span{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:40px;
}
.formula-track span::after{
  content:"◆";
  color:var(--accent);
  font-style:normal;
  font-size:14px;
}
@keyframes scroll-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ----- Stat cards with animated underline ----- */
.stat{
  position:relative;
  transition:transform .4s var(--ease);
}
.stat:hover{transform:translateY(-4px)}
.stat-num{
  position:relative;
}
.stat-num::after{
  content:"";
  position:absolute;
  bottom:-6px;left:50%;
  width:0;height:2px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:width .6s var(--ease);
}
.stats .visible .stat-num::after{
  width:40px;
}

/* ----- Feature cards with 3D tilt ----- */
.feature-card{
  transition:all .4s var(--ease),transform .1s linear;
  will-change:transform;
}
.feature-card .icon-big{
  transition:transform .5s var(--ease),color .3s;
  display:inline-block;
  transform-origin:bottom left;
}
.feature-card:hover .icon-big{
  transform:rotate(-8deg) scale(1.1);
}

/* ----- Activity cards with timeline dot ----- */
.activity-card{
  position:relative;
}
.activity-card::before{
  content:"";
  position:absolute;
  left:-12px;top:44px;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--paper-2);
  opacity:0;
  transform:scale(0);
  transition:opacity .3s,transform .3s var(--ease);
}
.activity-card:hover::before{
  opacity:1;
  transform:scale(1);
}

/* ----- Better leader portraits with gradient ----- */
.leader-portrait{
  position:relative;
  background:linear-gradient(135deg,var(--forest) 0%,var(--forest-2) 100%);
  box-shadow:
    0 10px 30px rgba(31,56,52,.3),
    inset 0 2px 0 rgba(255,255,255,.1);
  transition:transform .5s var(--ease);
}
.leader-portrait::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px dashed var(--accent);
  opacity:0;
  transition:opacity .3s,transform .5s var(--ease);
}
.leader-card:hover .leader-portrait{transform:rotate(-5deg) scale(1.05)}
.leader-card:hover .leader-portrait::after{
  opacity:.5;
  transform:rotate(-90deg);
}

/* ----- Gallery v2 - masonry-like with richer hover ----- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:140px;
  gap:12px;
}
.gallery-item{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:var(--paper-3);
  transition:transform .5s var(--ease);
  grid-column:span 3;
  grid-row:span 2;
}
.gallery-item:nth-child(1){grid-column:span 6;grid-row:span 3}
.gallery-item:nth-child(2){grid-column:span 3;grid-row:span 2}
.gallery-item:nth-child(3){grid-column:span 3;grid-row:span 2}
.gallery-item:nth-child(4){grid-column:span 3;grid-row:span 2}
.gallery-item:nth-child(5){grid-column:span 3;grid-row:span 2}
.gallery-item:nth-child(6){grid-column:span 6;grid-row:span 2}
.gallery-item:nth-child(7){grid-column:span 3;grid-row:span 2}
.gallery-item:nth-child(8){grid-column:span 3;grid-row:span 2}

.gallery-item:hover{transform:scale(1.015);z-index:2;box-shadow:0 20px 60px rgba(15,20,22,.25)}

.gallery-placeholder{
  position:relative;
  transition:transform .8s var(--ease);
}
.gallery-item:hover .gallery-placeholder{
  transform:scale(1.1);
}
.gallery-placeholder::before{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,transparent 0,transparent 20px,rgba(255,255,255,.03) 20px,rgba(255,255,255,.03) 21px);
  opacity:.5;
}
.gallery-placeholder .symbol{
  transition:transform .6s var(--ease),font-size .5s;
  font-size:clamp(60px,10vw,120px)!important;
}
.gallery-item:hover .gallery-placeholder .symbol{
  transform:rotate(-12deg) scale(1.1);
}
.gallery-placeholder .caption{
  font-size:11px!important;
  padding:8px 14px;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(6px);
  border-radius:2px;
  display:inline-block;
  left:16px!important;right:auto!important;bottom:16px!important;
}

/* ----- Gallery filter chips ----- */
.gallery-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.filter-chip{
  padding:10px 20px;
  background:var(--paper-2);
  border:1px solid transparent;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s var(--ease);
  font-weight:500;
}
.filter-chip:hover{background:var(--paper-3)}
.filter-chip.active{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

/* ----- Info card pulse glow (mathema) ----- */
.info-card{
  position:relative;
}
.info-card::after{
  content:"";
  position:absolute;
  top:-1px;left:-1px;right:-1px;bottom:-1px;
  background:linear-gradient(135deg,transparent,rgba(201,155,74,.3),transparent);
  z-index:-1;
  opacity:0;
  transition:opacity .5s;
}
.info-card:hover::after{opacity:1}

.info-row{
  transition:padding-left .3s var(--ease);
}
.info-row:hover{padding-left:8px}
.info-row:hover .key{color:var(--gold-light)}

/* ----- Prijave buttons with sweep effect ----- */
.prijava-btn{
  position:relative;
  overflow:hidden;
}
.prijava-btn::before{
  content:"";
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(201,155,74,.25),transparent);
  transition:left .5s var(--ease);
}
.prijava-btn:hover::before{left:100%}

/* ----- Archive items with sliding accent ----- */
.archive-item{
  position:relative;
}
.archive-item::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:0;height:2px;
  background:var(--accent);
  transform:translateY(-50%);
  transition:width .4s var(--ease);
}
.archive-item:hover::before{width:60px}
.archive-item:hover .archive-year{color:var(--accent)}

/* ----- Hero badge - gentler spin ----- */
@keyframes badge-spin{
  from{transform:rotate(10deg)}
  to{transform:rotate(370deg)}
}
.hero-badge{
  animation-duration:24s;
  box-shadow:
    0 16px 40px rgba(184,61,39,.35),
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(0,0,0,.15);
}

/* ----- Hero card rotates on scroll ----- */
.hero-card{
  transform-origin:center;
  will-change:transform;
}

/* ----- Reveal animations - more variants ----- */
.reveal-left{
  opacity:0;
  transform:translateX(-60px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.reveal-left.visible{opacity:1;transform:translateX(0)}

.reveal-right{
  opacity:0;
  transform:translateX(60px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.reveal-right.visible{opacity:1;transform:translateX(0)}

.reveal-scale{
  opacity:0;
  transform:scale(.9);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* ----- Parallax marks ----- */
.hero-bg-marks .mark{
  will-change:transform;
  transition:transform .05s linear;
}

/* ----- Section divider with math symbol ----- */
.divider-math{
  display:flex;
  align-items:center;
  gap:24px;
  margin:80px 0;
  color:var(--muted);
  font-family:var(--font-display);
  font-style:italic;
  font-size:32px;
  opacity:.4;
}
.divider-math::before,.divider-math::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

/* ----- Page load animation ----- */
@keyframes page-fade-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.page-hero,
.hero{
  animation:page-fade-in .8s var(--ease-out);
}

/* ----- Mobile-specific tweaks ----- */
@media (max-width:860px){
  .scroll-progress{height:2px}
  .hero-orbit-item{display:none}
  .gallery-grid{
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:120px;
    gap:8px;
  }
  .gallery-item,
  .gallery-item:nth-child(n){
    grid-column:span 3;
    grid-row:span 2;
  }
  .gallery-item:nth-child(1){grid-column:span 6;grid-row:span 2}
  .gallery-item:nth-child(6){grid-column:span 6;grid-row:span 2}

  .formula-track{animation-duration:40s;font-size:28px;gap:50px}
  .cursor-dot,.cursor-ring{display:none}
}

/* ----- Smooth scroll behavior ----- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

/* ----- Focus states - better a11y ----- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}