/* izdavaj.mk coming-soon site. Tokens follow DESIGN.md */

@font-face{font-family:'Noto Serif Display';src:url('/assets/fonts/noto-serif-display-cyrillic.woff2') format('woff2');font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Noto Serif Display';src:url('/assets/fonts/noto-serif-display-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  --ink:#17233A; --ink-deep:#0E1626; --ivory:#F6F4EF; --paper:#FDFCFA;
  --signal:#E4572E; --signal-deep:#C8441D; --mist:#A3ABBB; --line-dark:#2A3550;
  --serif:'Noto Serif Display',Georgia,serif; --sans:'Inter',Arial,sans-serif;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:radial-gradient(120% 90% at 70% 40%,#1C2A45 0%,var(--ink) 45%,var(--ink-deep) 100%) fixed,var(--ink-deep);
  color:var(--ivory);font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
a{color:inherit}
.serif{font-family:var(--serif);font-stretch:62.5%;font-weight:400}

#roofs{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* one screen, no scrolling: everything scales with the viewport height too */
.page{position:relative;z-index:1;height:100vh;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,3vh,28px) var(--gutter) 0;max-width:1280px;width:100%;margin:0 auto}
.top img{display:block;height:clamp(20px,3vh,26px);width:auto}
.status{margin:0;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--mist);border:1px solid var(--line-dark);padding:8px 14px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgba(228,87,46,.6);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(228,87,46,.6)}70%{box-shadow:0 0 0 10px rgba(228,87,46,0)}100%{box-shadow:0 0 0 0 rgba(228,87,46,0)}}

/* hero */
.hero{min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:center;gap:clamp(20px,4vw,48px);max-width:1280px;width:100%;margin:0 auto;padding:clamp(8px,2.5vh,32px) var(--gutter)}
.eyebrow{margin:0 0 clamp(8px,1.6vh,16px);font-size:clamp(11px,1.5vh,13px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.title{margin:0;font-size:clamp(56px,min(13.5vw,20vh),210px);line-height:.86;letter-spacing:-.01em}
.title .line{display:block;overflow:hidden;padding-bottom:.06em}
.title .word{display:inline-block}
.title .dot{color:var(--signal);display:inline-block}

/* mark */
.mark-wrap{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:0}
.mark-wrap::before{content:"";position:absolute;left:50%;bottom:-6%;width:150%;height:55%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(228,87,46,.38),rgba(228,87,46,0) 70%);filter:blur(10px);animation:glow 4s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.65}to{opacity:1}}
.mark{position:relative;height:clamp(150px,40vh,400px);width:auto;overflow:visible}
.mark .stem{transform-box:fill-box;transform-origin:50% 100%}
.mark .roof-drop,.mark .roof-float{transform-box:fill-box;transform-origin:50% 50%}

/* category cloud */
.cloud{position:relative;list-style:none;margin:clamp(12px,2.6vh,30px) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.34em .62em;max-width:31em;font-size:clamp(10px,min(1.4vw,2vh),20px)}
.cloud .w{display:inline-block;line-height:1.06;color:var(--ivory);cursor:default;transition:color .35s ease;animation:wordin .8s cubic-bezier(.2,.75,.15,1) both}
.cloud .w.dim{color:#8E97A8}
.cloud .w.on{color:var(--signal)}
.cloud .xl{font-size:4.2em}.cloud .l{font-size:2.9em}.cloud .ml{font-size:2.2em}.cloud .m{font-size:2.35em}.cloud .ms{font-size:1.9em}.cloud .s{font-size:1.6em}.cloud .xs{font-size:1.3em}
@keyframes wordin{from{opacity:0;transform:translateY(.45em)}to{opacity:1;transform:none}}
.cloud .w:nth-child(1){animation-delay:.95s}.cloud .w:nth-child(2){animation-delay:1.03s}.cloud .w:nth-child(3){animation-delay:1.11s}.cloud .w:nth-child(4){animation-delay:1.19s}.cloud .w:nth-child(5){animation-delay:1.27s}.cloud .w:nth-child(6){animation-delay:1.35s}.cloud .w:nth-child(7){animation-delay:1.43s}.cloud .w:nth-child(8){animation-delay:1.51s}.cloud .w:nth-child(9){animation-delay:1.59s}.cloud .w:nth-child(10){animation-delay:1.67s}.cloud .w:nth-child(11){animation-delay:1.75s}.cloud .w:nth-child(12){animation-delay:1.83s}.cloud .w:nth-child(13){animation-delay:1.91s}.cloud .w:nth-child(14){animation-delay:1.99s}.cloud .w:nth-child(15){animation-delay:2.07s}
.cloud .hop{position:absolute;left:0;top:0;width:22px;height:19px;pointer-events:none;opacity:0;animation:fadein .5s ease 2.3s forwards}
.cloud .hop svg{display:block;width:100%;height:100%;fill:var(--signal);filter:drop-shadow(0 4px 10px rgba(228,87,46,.55))}
@keyframes fadein{to{opacity:1}}

/* dock: rounded glass pill, other apps drift by blurred, izdavaj.mk stays in the middle and bounces */
.dock-wrap{display:flex;justify-content:center;padding:0 var(--gutter);animation:dockin .9s cubic-bezier(.2,.7,.2,1) 1.3s both}
@keyframes dockin{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.dock{position:relative;width:min(560px,100%);height:clamp(92px,12vh,104px);border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.dock-track{position:absolute;left:0;top:50%;display:flex;width:max-content;transform:translateY(-50%);animation:dockslide 34.8s linear infinite}
.dock-run{display:flex;align-items:center;gap:18px;padding-right:18px}
@keyframes dockslide{from{transform:translate(0,-50%)}to{transform:translate(-50%,-50%)}}
.app{position:relative;flex:none;width:64px;height:64px;border-radius:15px;overflow:hidden;filter:blur(2.6px) saturate(.75);opacity:.42}
.app i,.app b{position:absolute;display:block}
.a-mail{background:linear-gradient(180deg,#5AA8F5,#2F6FE0)}
.a-mail i{left:13px;top:19px;width:38px;height:27px;border:3px solid #fff;border-radius:3px}
.a-mail i::after{content:"";position:absolute;left:5px;top:-11px;width:22px;height:22px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.a-msg{background:linear-gradient(180deg,#6BE08A,#29B657)}
.a-msg i{left:12px;top:15px;width:40px;height:31px;border-radius:20px;background:#fff}
.a-video{background:linear-gradient(180deg,#6BE08A,#29B657)}
.a-video i{left:12px;top:22px;width:27px;height:21px;border-radius:5px;background:#fff}
.a-video i::after{content:"";position:absolute;left:28px;top:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:12px solid #fff}
.a-set{background:linear-gradient(180deg,#A6ABB5,#6E7480)}
.a-set i{left:13px;top:13px;width:38px;height:38px;border-radius:50%;border:7px dotted #E9EBEF}
.a-cal{background:#fff}
.a-cal .cal-d{left:0;right:0;top:8px;text-align:center;font:600 10px var(--sans);color:var(--signal)}
.a-cal .cal-n{left:0;right:0;top:20px;text-align:center;font:300 30px/1 var(--sans);color:#111}
.a-maps{background:linear-gradient(135deg,#9BD3A6,#7FB6E0)}
.a-maps i{left:-10px;top:28px;width:90px;height:8px;background:#fff;transform:rotate(-30deg)}
.a-photo{background:#fff}
.a-photo i{left:14px;top:14px;width:36px;height:36px;border-radius:50%;background:conic-gradient(#F5B841,#E4572E,#C05BD6,#5B8DEF,#4CC38A,#F5B841)}
.a-notes{background:#FFF6D6}
.a-notes i{left:0;right:0;top:0;height:14px;background:#F5C64A}
.a-notes i::after{content:"";position:absolute;left:12px;right:12px;top:26px;height:2px;background:#D9CFA8;box-shadow:0 9px 0 #D9CFA8,0 18px 0 #D9CFA8}


/* izdavaj.mk: scrolls with the others, stays sharp, and lights up when it reaches the middle */
.app.a-izd{overflow:visible;filter:none;opacity:1;z-index:2;box-shadow:0 8px 22px rgba(228,87,46,.45);transition:transform .55s cubic-bezier(.34,1.7,.5,1),box-shadow .45s ease}
.a-izd .face{position:absolute;inset:0;border-radius:15px;overflow:hidden}
.a-izd svg{display:block;width:100%;height:100%}
.a-izd i.shine{position:absolute;top:0;bottom:0;left:-70%;width:55%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-18deg);opacity:0}
.a-izd i.ring{position:absolute;inset:-3px;border-radius:18px;border:2px solid var(--signal);opacity:0}
.a-izd i.dot{position:absolute;left:50%;top:auto;bottom:-10px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ivory);opacity:0;transition:opacity .3s}
.a-izd.live{transform:scale(1.14);box-shadow:0 10px 34px rgba(228,87,46,.95)}
.a-izd.live i.dot{opacity:1}
.a-izd.live i.shine{animation:shine .9s ease-out .1s 1 both}
.a-izd.live i.ring{animation:ripple 1.5s ease-out .15s infinite}
@keyframes shine{0%{left:-70%;opacity:1}100%{left:130%;opacity:1}}
@keyframes ripple{from{transform:scale(1);opacity:.9}to{transform:scale(1.32);opacity:0}}

/* footer */
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1280px;width:100%;margin:0 auto;padding:clamp(10px,2vh,20px) var(--gutter) calc(clamp(10px,2vh,20px) + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--mist)}

/* intro motion */
.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.title .word{animation:wordup 1s cubic-bezier(.2,.75,.15,1) .35s both}
@keyframes wordup{from{transform:translateY(105%)}to{transform:none}}
.title .dot{animation:pop .6s cubic-bezier(.34,1.56,.64,1) 1.15s both}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.mark .stem{animation:grow .7s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.mark .roof-drop{animation:drop .8s cubic-bezier(.34,1.5,.6,1) .95s both}
@keyframes drop{from{transform:translateY(-160%);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
.mark .roof-float{animation:float 3.6s ease-in-out 2s infinite alternate}
@keyframes float{from{transform:none}to{transform:translateY(-14px)}}
.d1{animation-delay:.15s}.d2{animation-delay:.9s}.d3{animation-delay:1.1s}.d4{animation-delay:1.5s}

/* 404: small "still building" page for the coming-soon period */
.nf{min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:1280px;width:100%;margin:0 auto;padding:clamp(8px,2vh,24px) var(--gutter)}
.nf .code{display:block;white-space:nowrap;margin:0;max-width:none;font-size:clamp(96px,min(22vw,30vh),300px);line-height:.9;color:var(--ivory)}
.code .house{display:inline-block;width:.52em;height:.719em;margin:0 .07em;vertical-align:baseline;overflow:visible}
.code .house path{fill:none;stroke-linejoin:round}
.code .house .crane .hang{fill:var(--signal)}
.code .house .outline,.code .house .door{stroke:var(--signal);stroke-width:9;stroke-dasharray:1;stroke-dashoffset:1}
.code .house .outline{animation:draw 1.3s cubic-bezier(.6,.05,.3,1) .4s forwards}
.code .house .door{animation:draw .6s ease-out 1.5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes march{to{stroke-dashoffset:-1}}
.code .house .crane{animation:swing 3.2s ease-in-out 2.1s infinite alternate;transform-box:view-box;transform-origin:52px -52px}
@keyframes swing{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.nf h1{margin:clamp(14px,2.6vh,28px) 0 0;font-size:clamp(32px,min(5vw,6.4vh),62px);line-height:1}
.nf p{margin:clamp(10px,1.8vh,18px) 0 0;max-width:46ch;font-size:clamp(15px,min(1.35vw,2.2vh),19px);line-height:1.55;color:#C3C8D4}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,3vh,30px);background:var(--signal-deep);color:var(--paper);text-decoration:none;font-weight:600;font-size:16px;padding:14px 22px;transition:background .2s,color .2s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn:focus-visible,.top a:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(-3px)}
.page.nfp{grid-template-rows:auto minmax(0,1fr) auto}

/* responsive */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;align-content:center;gap:clamp(10px,2vh,18px)}
  .mark-wrap{order:-1;justify-content:flex-start}
  .mark{height:clamp(84px,15vh,150px)}
  .mark-wrap::before{left:40px;width:130px;height:45%;bottom:-2%}
  .title{font-size:clamp(52px,min(22vw,13vh),120px)}
  .cloud{max-width:none;font-size:clamp(9.5px,min(3.3vw,1.9vh),17px)}
  .status{font-size:12px;padding:7px 11px}
  .foot{font-size:12px}
}
@media (max-width:420px){
  .top img{height:22px}
}

/* reduced motion: everything visible, no movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .code .house .outline,.code .house .door{stroke-dashoffset:0}
    .cloud .hop{opacity:1}
}