/* Leško — naslovna (odabir programa) */
html,body{height:100%}
body.landing{overflow:hidden}
.page{display:flex;flex-direction:column;height:100vh;height:100dvh}
.page .top,.page .bottom{transition:opacity .6s var(--ease), transform .8s var(--ease)}

.choices{flex:1;display:flex;gap:var(--gap);padding:0 var(--gap);min-height:0}
.choice{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:6px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);isolation:isolate;background:#24384b;color:#fff;
  transition:flex-grow 1s var(--ease), opacity .7s var(--ease), border-radius 1s var(--ease);
  outline:none;will-change:flex-grow;
}
.media{
  position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;
  filter:grayscale(.85) brightness(.9);transform:scale(1.04);
  transition:filter 1s var(--ease), transform 1.6s var(--ease-out);
}
.choice::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(var(--navy-rgb),.94) 0%, rgba(var(--navy-rgb),.55) 45%, rgba(var(--navy-rgb),.12) 100%);
  transition:opacity 1s var(--ease);
}
.choice::after{
  content:"";position:absolute;inset:0;z-index:3;background:var(--stone);
  opacity:0;pointer-events:none;transition:opacity .55s var(--ease);
}
.index{
  position:absolute;top:var(--pad);left:var(--pad);
  font-size:13px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.75);
  display:flex;align-items:center;gap:12px;
}
.index i{display:block;width:28px;height:2px;background:var(--accent);transition:width .8s var(--ease)}
.body{width:min(560px,100%)}
.choice .eyebrow{color:var(--accent);margin-bottom:10px}
.choice .eyebrow::before{display:none}
.title{
  margin:0;font-weight:800;font-stretch:72%;line-height:.88;letter-spacing:-.01em;
  font-size:clamp(42px,5.6vw,108px);text-transform:uppercase;white-space:nowrap;
}
.title small{display:block;font-size:.5em;font-weight:700;opacity:.85;margin-top:.12em}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:20px 0 0;padding:0;list-style:none;font-size:15px;color:rgba(255,255,255,.82)}
.meta li{display:flex;align-items:center;gap:8px}
.meta li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}
.meta strong{color:#fff;font-weight:600}
.cta{position:relative;display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-size:15px;font-weight:600;letter-spacing:.02em;padding:14px 0}
.cta::before{content:"";position:absolute;left:0;top:0;height:2px;width:220px;background:var(--accent);transform-origin:left;transition:transform .9s var(--ease)}
.cta svg{width:22px;height:22px;transition:transform .7s var(--ease)}
.choice .index,.choice .body{transition:opacity .6s var(--ease), transform .9s var(--ease)}

@media (hover:hover) and (pointer:fine){
  .choices:hover .choice{flex-grow:.88}
  .choices:hover .choice:hover{flex-grow:1.12}
  .choice:hover .media{filter:grayscale(0) brightness(1);transform:scale(1)}
  .choice:hover .cta::before{transform:scaleX(1.35)}
  .choice:hover .cta svg{transform:translateX(8px)}
  .choice:hover .index i{width:48px}
}
.choice:focus-visible .media{filter:grayscale(0) brightness(1)}
.choice:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}

/* ulaz */
.page .top,.page .bottom{animation:lfade 1s var(--ease-out) both}
.choice{animation:reveal 1.2s var(--ease-out) both}
.choice:nth-child(2){animation-delay:.12s}
.choice .media{animation:settle 2.2s var(--ease-out) both}
.choice .index{animation:rise 1s var(--ease-out) .45s both}
.choice .body{animation:rise 1.1s var(--ease-out) .55s both}
.choice:nth-child(2) .index{animation-delay:.6s}
.choice:nth-child(2) .body{animation-delay:.7s}
@keyframes lfade{from{opacity:0}}
@keyframes reveal{from{opacity:0;clip-path:inset(12% 0 0 0 round 6px)}to{opacity:1;clip-path:inset(0 0 0 0 round 6px)}}
@keyframes settle{from{transform:scale(1.15)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}

/* izlaz (3 faze) */
.leaving .choices{gap:0;padding:0;transition:gap 1s var(--ease), padding 1s var(--ease)}
.leaving .top{opacity:0;transform:translateY(-12px)}
.leaving .bottom{opacity:0;transform:translateY(12px)}
.page.leaving .choices .choice{flex-grow:.0001;opacity:0}
.page.leaving .choices .choice.chosen{flex-grow:1;opacity:1;border-radius:0}
.page.leaving .choices .choice.chosen .media{filter:grayscale(0) brightness(1);transform:scale(1.08);transition:filter 1s var(--ease), transform 2.4s var(--ease-out)}
.leaving .choice.chosen::before{opacity:.55}
.leaving .choice.chosen .index{opacity:0;transition-delay:.15s}
.leaving .choice.chosen .body{opacity:0;transform:translateY(-24px);transition-delay:.25s}
.leaving .choice.chosen::after{opacity:1;transition-delay:1s}

@media (max-width:820px), (orientation:portrait) and (max-width:1024px){
  .choices{flex-direction:column}
  .title{font-size:clamp(40px,12vw,84px)}
  .meta{margin-top:12px;font-size:14px}
  .cta{margin-top:16px;padding:10px 0}
  .cta::before{width:180px}
}
@media (max-height:560px) and (max-width:820px){ .meta{display:none} }

/* ---------- Uvod: animacija logotipa ---------- */
.intro{position:fixed;inset:0;z-index:50;background:var(--stone);display:grid;place-items:center;cursor:pointer;animation:i-out .55s var(--ease) 1.95s forwards}
.intro-logo{position:relative;width:min(78vw,560px);aspect-ratio:630/148}
.intro-logo img,.i-ring{position:absolute;display:block}
.i-drop{left:0;top:0;width:23.4921%;height:66.2162%;transform-origin:50% 100%;animation:i-drop 1s both}
.i-rip{left:0;top:54.0541%;width:23.4921%;height:45.9459%;transform-origin:50% 50%;animation:i-rip .5s ease-out .55s both}
.i-ring{left:2.2222%;top:63.5135%;width:19.0476%;height:27.027%;box-sizing:border-box;border:2px solid #3fa9e0;border-radius:50%;opacity:0;animation:i-ring .9s ease-out .55s both}
.i-ring2{animation-delay:.8s}
.i-let{top:0;height:100%;animation:i-pop .55s cubic-bezier(.3,1.4,.5,1) calc(.75s + var(--d) * .08s) both,i-hide .2s ease 1.62s forwards}
/* kad slova "iskoče", zamjenjuje ih cijeli natpis (čišći obrub) */
.i-wm{left:25.5556%;top:0;width:74.4444%;height:100%;opacity:0;animation:i-show .2s ease 1.62s forwards}
@keyframes i-hide{to{opacity:0}}
@keyframes i-show{to{opacity:1}}
@keyframes i-drop{
  0%{transform:translateY(-55vh);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  8%{opacity:1}
  55%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  65%{transform:translateY(1%) scale(1.12,.84)}
  82%{transform:scale(.97,1.04)}
  100%{transform:none;opacity:1}
}
@keyframes i-rip{0%{transform:scale(.25);opacity:0}50%{transform:scale(1.12,1.25);opacity:1}100%{transform:none;opacity:1}}
@keyframes i-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3.4,2.6);opacity:0}}
@keyframes i-pop{0%{transform:translateY(30%) scale(.3);opacity:0}60%{transform:translateY(-5%) scale(1.08);opacity:1}100%{transform:none;opacity:1}}
@keyframes i-out{to{opacity:0;visibility:hidden}}
/* dok traje uvod, ulazne animacije naslovnice čekaju */
.intro-on .page,.intro-on .page *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.intro{display:none}}