/* v6.0 — uvodna animacija sklapanja (js/intro.js). Vlastite boje, neovisno o temi. */
.intro{--z0:#0F4FA0;--z1:#7A2FD0;--z2:#1E9E57;--sms:#1E9E57;--gold:#E9A21B;font-family:inherit}
.intro[hidden]{display:none}
.intro{position:fixed;z-index:9999;inset:0;z-index:10;overflow:hidden;
  background:radial-gradient(120% 85% at 50% 48%,#2C66C8 0%,#174596 48%,#0D2E70 100%);
  transition:opacity .45s ease-in}
.intro.out{opacity:0}
/* most u podlozi: iz nevidljivog postaje vidljiv, pa pulsira ispod ikona cijelo vrijeme */
.bridge{position:absolute;left:50%;top:50%;width:86%;max-width:420px;transform:translate(-50%,-50%);color:#EAF6FF;opacity:0;
  animation:bIn 1.1s ease-out .1s forwards, bglow 1.6s ease-in-out .9s infinite}
.bridge .lamps circle{fill:#FFE9A0}
@keyframes bIn{0%{opacity:0}18%{opacity:.75}26%{opacity:.2}38%{opacity:.9}46%{opacity:.45}62%,100%{opacity:1}}
@keyframes bglow{
  0%,100%{filter:drop-shadow(0 0 1px #FFFFFF) drop-shadow(0 0 3px #8FD8FF) drop-shadow(0 0 8px rgba(90,190,255,.45))}
  50%{filter:drop-shadow(0 0 1.5px #FFFFFF) drop-shadow(0 0 5px #A6E2FF) drop-shadow(0 0 13px rgba(90,190,255,.6))}
}
.bridge.dim{transition:opacity .5s ease;opacity:.45}
.halo{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  background:radial-gradient(circle,rgba(140,200,255,.22),rgba(140,200,255,0) 65%);opacity:0;animation:halo 1.6s ease-in-out .9s infinite}
@keyframes halo{50%{opacity:1;transform:scale(1.12)}}
/* stroj */
.stage{position:absolute;left:50%;top:50%;width:0;height:0}
.piece{position:absolute;left:-52px;top:-52px;width:104px;height:104px;border-radius:22px;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 10px 30px rgba(0,0,0,.35);display:grid;place-items:center;opacity:0;will-change:transform}
.piece svg{width:76px;height:76px}
.piece{--surface:#fff;--surface-2:#EEF4FC;--border:#B4C8E4;--ink:#0F2A4A;--ink-2:#4A6286;--accent:#0F4FA0}
.frame{position:absolute;left:-130px;top:-130px;width:260px;height:260px;overflow:visible;opacity:0}
.frame rect{fill:none;stroke:#E3EEFF;stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1}
.frame.on{opacity:1}.frame.on rect{transition:stroke-dashoffset .45s ease-out;stroke-dashoffset:0}
.gear{position:absolute;top:-22px;width:44px;height:44px;opacity:0;transition:opacity .25s}
.gear.g1{left:-152px}.gear.g2{left:108px}
.gear.on{opacity:1;animation:spin 1.1s linear infinite}.gear.g2.on{animation-direction:reverse}
.gear g{fill:#CFE2FF}.gear circle.h{fill:#174596}
@keyframes spin{to{transform:rotate(360deg)}}
.bolt{position:absolute;left:-31px;top:-31px;width:62px;height:62px;border-radius:18px;background:#0F4FA0;color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:34px;transform:scale(0);box-shadow:0 0 0 6px #fff,0 0 30px rgba(158,194,255,.8)}
.bolt.on{transition:transform .35s cubic-bezier(.3,1.6,.5,1);transform:scale(1)}
.stage.fly{transition:transform .55s cubic-bezier(.6,0,.3,1),opacity .5s ease-in;opacity:0}
.claim{position:absolute;left:0;right:0;top:calc(50% + 148px);text-align:center;font-weight:800;font-size:19px;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.claim small{display:block;font-weight:600;font-size:14px;color:#A9BCE0;margin-top:4px}
.claim.on{opacity:1;transform:none}
.skip{position:absolute;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);
  color:#fff;border-radius:999px;padding:10px 18px;font:600 15px system-ui,sans-serif;cursor:pointer}
@media (prefers-reduced-motion: reduce){ .intro{display:none} }