/* Stranica u izradi – Judo klub Pulafit */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62.5% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62.5% 125%;src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --ink:#0b0f1a; --ink-2:#141a2a; --line:rgba(255,255,255,.09);
  --red:#e3262c; --red-d:#b8161c; --paper:#f4f1ea; --yellow:#f6c710; --blue:#1f6add;
  --muted:#9aa3b5; --white:#fff;
  --display:'Archivo',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper)}
body{font-family:var(--body);font-size:16px;line-height:1.55;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------- scena: šahovnica tatami ---------- */
.stage{position:relative;overflow:hidden;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(20px,4vw,56px) clamp(16px,5vw,80px)}
.board{position:absolute;inset:0;z-index:0;overflow:hidden;display:grid;grid-template-columns:repeat(var(--cols,12),1fr);grid-auto-rows:1fr;opacity:.42;
  -webkit-mask-image:radial-gradient(120% 90% at 28% 45%,#000 0%,rgba(0,0,0,.65) 45%,transparent 80%);mask-image:radial-gradient(120% 90% at 28% 45%,#000 0%,rgba(0,0,0,.65) 45%,transparent 80%)}
.board i{display:block;border:1px solid var(--line);background:transparent;transform-origin:center;}
.board i.r{background:linear-gradient(135deg,var(--red),var(--red-d));}
.board i.w{background:rgba(255,255,255,.045)}
.is-playing .board i{animation:flip 6.5s cubic-bezier(.6,.0,.2,1) infinite;animation-delay:var(--d)}
@keyframes flip{0%,58%,100%{transform:perspective(500px) rotateX(0)}64%{transform:perspective(500px) rotateX(90deg)}70%{transform:perspective(500px) rotateX(180deg)}76%,96%{transform:perspective(500px) rotateX(360deg)}}

.copy{position:relative;z-index:2}
.stage::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,15,26,.88) 0%,rgba(11,15,26,.55) 45%,rgba(11,15,26,.15) 75%);pointer-events:none}
@media (max-width:920px){.stage::after{background:linear-gradient(180deg,rgba(11,15,26,.2) 0%,rgba(11,15,26,.85) 45%,rgba(11,15,26,.92) 100%)}}
.badge{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);border:1px solid rgba(246,199,16,.35);padding:9px 14px;border-radius:999px;background:rgba(11,15,26,.6);backdrop-filter:blur(6px)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(246,199,16,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(246,199,16,0)}100%{box-shadow:0 0 0 0 rgba(246,199,16,0)}}
h1{font-family:var(--display);font-weight:900;font-stretch:125%;line-height:.88;letter-spacing:-.02em;font-size:clamp(46px,8.4vw,128px);margin:22px 0 18px;text-transform:uppercase}
h1 .k{display:block;font-size:.42em;font-stretch:100%;font-weight:700;letter-spacing:.04em;color:var(--muted)}
h1 .p{display:block;color:var(--white)}
h1 .p em{font-style:normal;color:var(--red)}
.lead{max-width:34em;font-size:clamp(17px,1.4vw,20px);color:#d6d9e2}
.lead strong{color:var(--white)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:12px;font:700 16px/1 var(--body);text-decoration:none;transition:transform .2s,background .2s,box-shadow .2s}
.btn svg{width:18px;height:18px}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px rgba(227,38,44,.7)}
.btn-red:hover{transform:translateY(-2px);background:#f03036}
.btn-ghost{border:1.5px solid rgba(255,255,255,.25);color:#fff;background:rgba(11,15,26,.55)}
.btn-ghost:hover{border-color:#fff}

/* ---------- logo + pojas ---------- */
.emblem{position:relative;z-index:2;justify-self:center;width:min(100%,520px);aspect-ratio:1/1;display:grid;place-items:center}
.emblem .ring{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.12),rgba(255,255,255,0) 62%);}
.emblem img{position:relative;width:74%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));transform:translateY(8px) scale(.94);opacity:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity 1s}
.loaded .emblem img{transform:none;opacity:1}
.orbit{position:absolute;inset:0;width:100%;height:100%}
.orbit circle{fill:none;stroke-linecap:round}
.orbit .o1{stroke:rgba(255,255,255,.14);stroke-width:2}
.orbit .o2{stroke:#fff;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}
.orbit .o3{stroke:var(--red);stroke-width:10;stroke-dasharray:.08 .92;stroke-dashoffset:0;transform-origin:260px 260px}
.is-playing .orbit .o2{animation:draw 2.4s cubic-bezier(.65,0,.35,1) forwards .3s}
.is-playing .orbit .o3{animation:spin 9s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.is-playing .emblem img{animation:float 6s ease-in-out infinite 1.2s}
@keyframes float{50%{transform:translateY(-8px)}}

/* ---------- info ---------- */
.info{position:relative;z-index:2;background:var(--paper);color:var(--ink);padding:clamp(40px,6vw,80px) clamp(16px,5vw,80px)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,32px);max-width:1280px;margin:0 auto}
.card{background:#fff;border-radius:18px;padding:26px 26px 24px;box-shadow:0 1px 0 rgba(11,15,26,.06),0 18px 40px -28px rgba(11,15,26,.45);position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:repeating-linear-gradient(90deg,var(--red) 0 24px,#fff 24px 48px)}
.card h2{font:800 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:6px 0 16px}
.card p,.card li{font-size:16px}
.card a{font-weight:700;text-decoration:none;border-bottom:2px solid rgba(227,38,44,.35)}
.card a:hover{border-color:var(--red)}
.big{font-family:var(--display);font-weight:800;font-stretch:110%;font-size:clamp(24px,2.3vw,32px);line-height:1.1;margin-bottom:6px;display:block}
ul.sched{list-style:none;display:grid;gap:10px}
ul.sched li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding-bottom:10px;border-bottom:1px dashed #e3ded3}
ul.sched li:last-child{border:0;padding:0}
ul.sched b{font-variant-numeric:tabular-nums;white-space:nowrap}
ul.sched span{color:#4b5263}
ul.sched .tag{color:#fff;align-self:center}
ul.sched small{grid-column:1/-1;color:#7a8191;font-size:13px}
.tag{display:inline-block;font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--ink);color:#fff;margin-right:6px}
.tag.z{background:var(--blue)}
.note{margin-top:14px;font-size:14px;color:#4b5263}

footer{background:var(--ink);color:var(--muted);font-size:13px;padding:22px clamp(16px,5vw,80px);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
footer a{color:var(--paper);text-decoration:none}
footer a:hover{color:var(--yellow)}

@media (max-width:920px){
  .stage{grid-template-columns:minmax(0,1fr);min-height:auto;padding-top:28px;padding-bottom:48px}
  .emblem{order:-1;width:min(78vw,360px)}
  .grid{grid-template-columns:minmax(0,1fr)}
  .board{--cols:7}
}
@media (max-width:920px) and (orientation:landscape){.emblem{width:min(40vw,260px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.orbit .o2{stroke-dashoffset:0}.emblem img{opacity:1;transform:none}}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* Powered by Smart Beez – kapsula (boje Smart Beez: zlatna #F2C10F, jantar #E8A317) */
.sb-badge{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;border-radius:999px;border:1px solid rgba(242,193,15,.28);background:rgba(19,20,23,.28);color:#c6d8ec;font-size:13px;line-height:1.1;transition:border-color .3s,box-shadow .3s}
.sb-mark{display:block;line-height:0;transform-origin:50% 60%}
.sb-mark svg{width:20px;height:20px;display:block}
.sb-badge a{font-weight:800;text-decoration:none;color:#F2C10F;background:linear-gradient(90deg,#F2C10F 0%,#E8A317 50%,#F2C10F 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position .6s ease}
.sb-badge:hover,.sb-badge:focus-within{border-color:rgba(242,193,15,.75);box-shadow:0 0 0 3px rgba(242,193,15,.12),0 0 18px rgba(242,193,15,.22)}
.sb-badge:hover a,.sb-badge:focus-within a{background-position:100% 0}
.sb-badge:hover .sb-mark{animation:sb-mah .6s ease}
.sb-badge a:focus-visible{outline:2px solid #F2C10F;outline-offset:3px;border-radius:4px}
@keyframes sb-mah{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.sb-badge:hover .sb-mark{animation:none}.sb-badge a{transition:none}}