:root{
    --bg:#0e0f12; --surface:#16181d; --line:#262932; --text:#eceef2; --muted:#9aa0ad;
    --accent:#6ee7b7; --accent-ink:#06281c;
  }
  @media (prefers-color-scheme: light){
    :root{ --bg:#f6f6f3; --surface:#fff; --line:#e3e3dd; --text:#14151a; --muted:#5f6573; --accent:#0f9d6e; --accent-ink:#fff; }
  }
  *{box-sizing:border-box;margin:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}

  /* NAV */
  nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  /* naziv sa "shine" efektom (po uzoru na Vengeance UI Animated Button, bez okvira) */
  @property --mask-x{syntax:"<percentage>";inherits:false;initial-value:100%}
  .logo{display:inline-block;font-weight:300;letter-spacing:.14em;font-size:18px;color:var(--text);
    -webkit-mask-image:linear-gradient(-75deg,#fff calc(var(--mask-x) + 20%),transparent calc(var(--mask-x) + 30%),#fff calc(var(--mask-x) + 100%));
            mask-image:linear-gradient(-75deg,#fff calc(var(--mask-x) + 20%),transparent calc(var(--mask-x) + 30%),#fff calc(var(--mask-x) + 100%));
    animation:shine 2s linear infinite}
  @keyframes shine{0%{--mask-x:100%}50%{--mask-x:-100%}100%{--mask-x:-100%}}   /* 1s prelazak + 1s pauza */
  @media (prefers-reduced-motion:reduce){ .logo{animation:none;-webkit-mask-image:none;mask-image:none} }
  nav ul{display:flex;gap:28px;list-style:none;padding:0}
  nav ul a{color:var(--muted);font-size:15px}
  nav ul a:hover{color:var(--text)}

  /* ABOUT */
  #about{padding:110px 0 90px;min-height:562px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;--mx:-999px;--my:-999px}
  #about .wrap{position:relative;z-index:1;width:100%}
  /* tamna meka podloga iza naslova, da se tekst čita i kad crveno svjetlo prođe iza njega */
  #about .wrap::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;
    width:min(100%,820px);height:260px;transform:translate(-50%,-50%);pointer-events:none;
    background:radial-gradient(closest-side,
      color-mix(in srgb,var(--bg) 70%,transparent) 0,
      color-mix(in srgb,var(--bg) 64%,transparent) 30%,
      color-mix(in srgb,var(--bg) 46%,transparent) 55%,
      color-mix(in srgb,var(--bg) 21%,transparent) 78%,
      color-mix(in srgb,var(--bg) 5%,transparent) 92%,transparent 100%)}
  .bg{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;overflow:hidden;
    font:12px/24px ui-monospace,"SF Mono",Consolas,monospace;letter-spacing:.03em;white-space:nowrap;color:var(--muted);opacity:.091;
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .bg div{animation:drift var(--dur,45s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);will-change:transform}
  @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-36px)}}
  .bg i{font-style:normal;margin-right:var(--gap,14px)}
  .bg i.b{font-weight:700}
  .bg.hot{color:#ff4a2e;opacity:1;
    -webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
  .bg.hot i{animation:tw 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes tw{0%,100%{opacity:.55}50%{opacity:1}}
  #about{text-align:center}
  .sw{display:inline-block;white-space:nowrap}
  .st{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
  .st>span{display:inline-block;transform:translateY(110%);will-change:transform;
    animation:stIn .75s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--sd,0s)}
  @keyframes stIn{to{transform:translateY(0)}}
  @media (prefers-reduced-motion:reduce){ .st>span{transform:none;animation:none} }
  h1{font-size:clamp(40px,7vw,72px);line-height:1.08;letter-spacing:-.03em;margin:0 auto 16px}
  #about .lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px);font-weight:400;letter-spacing:0;margin:0 auto;max-width:none}
  .facts{display:flex;gap:40px;margin-top:44px;flex-wrap:wrap}
  .facts b{display:block;font-size:30px;letter-spacing:-.02em}
  .facts span{color:var(--muted);font-size:14px}

  /* PROJECTS */
  #projects{padding:0;overflow-x:clip;border-top:1px solid var(--line)}
  h2{font-size:clamp(26px,4vw,38px);letter-spacing:-.025em;margin:10px 0 8px}
  /* KARUSEL */
  .cyl{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;--w:clamp(209px,32.3vw,437px);display:grid;place-items:center;overflow:hidden;height:calc(var(--w) * 10 / 7);
    width:100vw;margin:0 0 0 calc(50% - 50vw);perspective:calc(var(--w) * 2.2);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10% 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10% 90%,transparent)}
  .cyl.over{cursor:pointer}
  .cyl.grabbing{cursor:grabbing}
  .cyl-ring{pointer-events:none;--ba:calc(1turn / var(--n));display:grid;place-items:center;transform-style:preserve-3d;will-change:transform}
  .cyl-card{pointer-events:auto;cursor:inherit;grid-area:1/1;display:block;width:var(--w);aspect-ratio:7/10;border-radius:16px;overflow:hidden;backface-visibility:hidden;
    transform:rotateY(calc(var(--i) * var(--ba))) translateZ(calc(-1 * (.5 * var(--w) + .5em) / tan(.5 * var(--ba)))) scale(1);transition:transform .25s ease}
  .cyl-card.hot{transform:rotateY(calc(var(--i) * var(--ba))) translateZ(calc(-1 * (.5 * var(--w) + .5em) / tan(.5 * var(--ba)))) scale(1.03)}
  .cyl-card.soon{pointer-events:none;cursor:inherit;display:grid;place-items:center;text-align:center;
    background:linear-gradient(160deg,#171a21,#0f1115);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .cyl-card.soon span{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;
    font-size:calc(var(--w) * .13);letter-spacing:.04em;color:var(--muted);padding:0 12%}
  .cyl-card img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}

  /* FOOTER */
  footer{border-top:1px solid var(--line);padding:55px 0;overflow-x:clip;color:var(--muted);font-size:20px}
  footer .wrap{display:flex;justify-content:center;text-align:center;gap:16px;flex-wrap:wrap}
  footer .wrap > div{width:100%}
  footer canvas{display:block;width:100%}

  @media (max-width:600px){ nav ul{gap:18px} #about{padding:35px 0 30px;min-height:281px} footer{padding:27px 0} }