/* Uvodni ekran (intro) - prikazuje se jednom po poseti, pre početne strane */
html.has-intro, html.has-intro body { overflow: hidden; }
#intro { display: none; --blue: #1f6bff; --cyan: #19e6c1; --img: url("intro.jpg"); position: fixed; inset: 0; z-index: 1000; background: #000; overflow: hidden; transition: opacity 1s ease, visibility 1s; font-family: system-ui, "Segoe UI", Arial, sans-serif; }
html.has-intro #intro { display: block; }
#intro.hide { opacity: 0; visibility: hidden; }
#intro *, #intro *::before, #intro *::after { box-sizing: border-box; }

#intro .in-bg { position: absolute; inset: -5%; background: var(--img) center/cover; filter: blur(40px) brightness(.45) saturate(1.5); opacity: 0; animation: in-fade 2s .2s ease forwards; }
@keyframes in-fade { to { opacity: 1; } }

#intro .in-stage { position: absolute; inset: 0; display: flex; justify-content: center; perspective: 1200px; }
#intro .in-photo { position: relative; height: 100%; aspect-ratio: 1719/2576; max-width: 100%;
  background: var(--img) center/cover no-repeat;
  opacity: 0; transform: scale(1.25) rotateX(6deg); filter: brightness(.2) blur(10px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: in-reveal 2.6s .4s cubic-bezier(.2, .7, .2, 1) forwards, in-drift 16s 3s ease-in-out infinite alternate; }
@keyframes in-reveal { 60% { filter: brightness(.9) blur(1px); } to { opacity: 1; transform: scale(1) rotateX(0); filter: brightness(1) blur(0); } }
@keyframes in-drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.05) translateY(-1%); } }

#intro .in-sweep { position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent, rgba(25, 230, 193, .55), rgba(31, 107, 255, .7), transparent);
  filter: blur(18px); transform: skewX(-12deg);
  animation: in-sweep 1.8s 1s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes in-sweep { to { left: 130%; } }

#intro .in-ring { position: absolute; width: min(115vh, 130vw); aspect-ratio: 1; border-radius: 50%; left: 50%; top: 46%; translate: -50% -50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 40%, var(--blue) 70%, var(--cyan) 95%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53% 66%, transparent 67%);
  mask: radial-gradient(circle, transparent 52%, #000 53% 66%, transparent 67%);
  filter: blur(8px); opacity: 0;
  animation: in-ringIn 1.5s 1.4s ease forwards, in-spin 7s 1.4s linear infinite; }
@keyframes in-ringIn { to { opacity: .8; } }
@keyframes in-spin { to { rotate: 360deg; } }

#intro .in-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at 50% 46%, rgba(31, 107, 255, .35), transparent 60%); animation: in-pulse 3.5s ease-in-out infinite; }
@keyframes in-pulse { 50% { opacity: .35; } }

#intro .in-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .9) 100%); }
#intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

#intro .in-content { position: absolute; left: 0; right: 0; bottom: calc(7vh + env(safe-area-inset-bottom, 0px)); text-align: center; color: #fff; padding: 0 16px; }
#intro .in-btn { display: inline-block; padding: 14px 42px; color: #fff; text-decoration: none; letter-spacing: .3em; padding-left: calc(42px + .3em); font: inherit; font-size: 14px; text-transform: uppercase; border: 1px solid var(--cyan);
  border-radius: 40px; background: rgba(0, 0, 0, .35); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 0 20px rgba(25, 230, 193, .4); opacity: 0; transform: translateY(20px);
  animation: in-up 1s 2.6s ease forwards, in-glowbtn 2.4s 3.8s infinite; transition: background .3s, transform .3s; }
#intro .in-btn:hover, #intro .in-btn:focus-visible { background: rgba(25, 230, 193, .28); transform: scale(1.06); outline: none; }
@keyframes in-up { to { opacity: 1; transform: none; } }
@keyframes in-glowbtn { 50% { box-shadow: 0 0 38px rgba(25, 230, 193, .85); } }

@media (prefers-reduced-motion: reduce) {
  #intro *, #intro *::before, #intro *::after { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  #intro { transition-duration: .01s; }
}
#intro .in-welcome { margin: 0 0 22px; font-size: clamp(24px, 4.2vw, 46px); font-weight: 800; letter-spacing: .28em; padding-left: .28em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 18px var(--blue), 0 0 44px var(--blue), 0 0 84px var(--cyan); opacity: 0; transform: translateY(20px) scale(.94);
  animation: in-up 1.4s 2.3s cubic-bezier(.2, .7, .2, 1) forwards; }
#intro .in-btn { letter-spacing: .24em; padding-left: calc(42px + .24em); white-space: nowrap; }

/* lagana verzija za slabije računare (uključuje se sama kad animacija seče) */
@keyframes in-reveal-lite { to { opacity: 1; transform: none; } }
#intro.lite .in-bg { background: radial-gradient(ellipse at 50% 46%, #0b2260 0%, #050b1f 45%, #000 80%); filter: none; inset: 0; animation: in-fade 1s .1s ease forwards; }
#intro.lite .in-photo { filter: none; transform: none; animation: in-reveal-lite 1.2s .2s ease forwards; }
#intro.lite .in-sweep, #intro.lite .in-glow, #intro.lite canvas { display: none; }
#intro.lite .in-ring { mix-blend-mode: screen; filter: none; opacity: 0; animation: in-ringLite 1s .6s ease forwards; }
@keyframes in-ringLite { to { opacity: .55; } }
#intro.lite .in-welcome { text-shadow: 0 0 20px var(--blue); animation: in-up .8s 1s ease forwards; }
#intro.lite .in-btn { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: in-up .8s 1.3s ease forwards; }