/* ============================================================
   /promo screensaver — standalone full-screen scena (Casino Night).
   Aktivno je samo uz html[data-lb-view="promo"] (index.html inline skript).
   Ostali režimi (/, /game, /console) ga uopšte ne prikazuju.

   Smooth pravila (isto kao .lb-cd-overlay u style.css):
   - samo transform + opacity animacije (GPU compositing, 60fps na TV-u),
   - nema filter:blur na velikim površinama (šavovi + slabiji FPS),
   - glow = radial-gradient, bez box-shadow na velikim elementima.
   ============================================================ */

html[data-lb-view="promo"] body { overflow: hidden; background: #040717; }
html[data-lb-view="promo"] .shell,
html[data-lb-view="promo"] #preloaderLayout { display: none !important; }

#lbPromoSaver { display: none; }
/* Scena je projektovana za 1920×1080 (čist 16:9) — isto ponašanje kao /game i /console:
   na 16:9 ekranu puni sve; na drugom odnosu se skalira (contain) uz tamne trake. */
html[data-lb-view="promo"] #lbPromoSaver {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  pointer-events: none;
  animation: psSceneIn .9s ease-out both;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(85% 62% at 50% 34%, rgba(0, 110, 220, 0.30) 0%, rgba(0, 90, 200, 0.10) 48%, transparent 72%),
    radial-gradient(130% 100% at 50% -12%, rgba(46, 76, 180, 0.65) 0%, transparent 58%),
    radial-gradient(90% 65% at 10% 108%, rgba(0, 160, 215, 0.45) 0%, transparent 60%),
    radial-gradient(90% 65% at 90% 108%, rgba(0, 130, 205, 0.40) 0%, transparent 60%),
    linear-gradient(180deg, #0c1548 0%, #091240 40%, #060e2c 72%, #040717 100%);
}

@keyframes psSceneIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── ① Atmosfera: aurora + zlatni beams ─── */
.ps-bg { position: absolute; inset: -12%; overflow: hidden; }
.ps-aurora { position: absolute; border-radius: 50%; }
.ps-aurora.a1 { left: -4%; top: -10%; width: 60%; height: 78%; opacity: .95;
  background: radial-gradient(circle, rgba(56, 108, 245, .62) 0%, transparent 68%);
  animation: psDrift1 34s ease-in-out infinite alternate; }
.ps-aurora.a2 { right: -6%; bottom: -14%; width: 66%; height: 80%; opacity: .9;
  background: radial-gradient(circle, rgba(0, 195, 240, .55) 0%, transparent 68%);
  animation: psDrift2 41s ease-in-out infinite alternate; }
.ps-aurora.a3 { left: 30%; top: 22%; width: 52%; height: 62%; opacity: .75;
  background: radial-gradient(circle, rgba(255, 209, 77, .30) 0%, transparent 66%);
  animation: psDrift3 47s ease-in-out infinite alternate; }
.ps-aurora.a4 { left: 56%; top: 2%; width: 46%; height: 58%; opacity: .6;
  background: radial-gradient(circle, rgba(140, 92, 255, .34) 0%, transparent 66%);
  animation: psDrift4 53s ease-in-out infinite alternate; }
@keyframes psDrift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6%, 4%, 0) scale(1.08); } }
@keyframes psDrift2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-5%, -4%, 0) scale(1); } }
@keyframes psDrift3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 5%, 0) scale(1.10); } }
@keyframes psDrift4 { from { transform: translate3d(0, 0, 0) scale(1.02); } to { transform: translate3d(-6%, 3%, 0) scale(1.12); } }

/* Scenski reflektor od vrha ka logu — "pozornica" i dubina. */
.ps-spot { position: absolute; left: 50%; top: -16%; width: 64%; height: 92%; transform: translateX(-50%);
  background:
    radial-gradient(28% 58% at 50% 12%, rgba(255, 246, 220, .16) 0%, rgba(255, 246, 220, 0) 72%),
    radial-gradient(64% 80% at 50% 6%, rgba(255, 240, 200, .18) 0%, rgba(255, 240, 200, 0) 74%);
  animation: psSpot 9s ease-in-out infinite; }
@keyframes psSpot { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.ps-beam { position: absolute; top: -35%; height: 170%; width: 26%; opacity: .28;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 214, 120, .08) 40%,
    rgba(255, 236, 170, .14) 50%, rgba(255, 214, 120, .08) 60%, transparent 100%);
  transform: rotate(10deg); animation: psBeam 24s ease-in-out infinite alternate; }
.ps-beam.b1 { left: 4%; }
@keyframes psBeam { 0%, 100% { opacity: .20; } 50% { opacity: .55; } }

/* ─── ② Loptice (Matter.js vozi transform; veličine/opacity ovdje) ───
   Bazni .lb-bg-ball dizajn + .bc-* gradijenti dolaze iz style.css. */
/* Svet loptica = tačno vidljivi okvir (npr. 1920×1080) — lopte se odbijaju unutar ekrana. */
.ps-balls { position: absolute; inset: 0; }
/* Sferno senčenje (inset highlight gore-lijevo + sjenka dole-desno) + ambijentalni
   sjaj — lopte izgledaju kao prave kugle umesto ravnih diskova. */
.ps-balls .lb-bg-ball { box-shadow:
    inset 6px 8px 16px rgba(255, 255, 255, .14),
    inset -7px -9px 18px rgba(0, 0, 0, .30),
    0 0 26px rgba(150, 200, 255, .07); }
.ps-balls .lb-bg-ball.d1 { width: 96px; height: 96px; opacity: .46; }
.ps-balls .lb-bg-ball.d2 { width: 66px; height: 66px; opacity: .34; }
.ps-balls .lb-bg-ball.d3 { width: 44px; height: 44px; opacity: .24; }
.ps-balls .lb-bg-ball.d1::before { font-size: 34px; }
.ps-balls .lb-bg-ball.d2::before { font-size: 23px; }
.ps-balls .lb-bg-ball.d3::before { font-size: 16px; }
/* Više boje, manji bijeli jezgro (inače na sitnim lopticama dominira bijelo). */
.ps-balls .lb-bg-ball::after { inset: 17%; }

/* ─── ③ Bokeh + zlatna prašina ─── */
/* Bokeh — veliki mekani krugovi svetla koji daju dubinu. */
.ps-bokeh { position: absolute; inset: 0; }
.ps-bokeh i { position: absolute; border-radius: 50%; }
.ps-bokeh .b1 { left: 8%;  top: 62%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255, 214, 120, .14) 0%, rgba(255, 214, 120, 0) 70%);
  animation: psBokeh1 26s ease-in-out infinite alternate; }
.ps-bokeh .b2 { right: 6%; top: 26%; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(120, 190, 255, .10) 0%, rgba(120, 190, 255, 0) 70%);
  animation: psBokeh2 33s ease-in-out infinite alternate; }
.ps-bokeh .b3 { left: 24%; top: 18%; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(180, 140, 255, .10) 0%, rgba(180, 140, 255, 0) 70%);
  animation: psBokeh1 29s ease-in-out infinite alternate-reverse; }
.ps-bokeh .b4 { right: 20%; bottom: 8%; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255, 190, 90, .10) 0%, rgba(255, 190, 90, 0) 70%);
  animation: psBokeh2 37s ease-in-out infinite alternate-reverse; }
@keyframes psBokeh1 { from { transform: translate3d(0, 0, 0); opacity: .55; } to { transform: translate3d(40px, -34px, 0); opacity: .95; } }
@keyframes psBokeh2 { from { transform: translate3d(0, 0, 0); opacity: .5; } to { transform: translate3d(-46px, 30px, 0); opacity: .9; } }

.ps-dust { position: absolute; inset: 0; }
.ps-dust i { position: absolute; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 228, 150, .95) 0%, rgba(255, 228, 150, 0) 70%);
  animation: psDust 13s linear infinite; }
.ps-dust .p1 { left: 12%; top: 76%; animation-delay: 0s; }
.ps-dust .p2 { left: 27%; top: 88%; animation-delay: -3s; animation-duration: 16s; width: 3px; height: 3px; }
.ps-dust .p3 { left: 44%; top: 80%; animation-delay: -6s; animation-duration: 12s; }
.ps-dust .p4 { left: 61%; top: 90%; animation-delay: -9s; animation-duration: 15s; width: 3px; height: 3px; }
.ps-dust .p5 { left: 74%; top: 82%; animation-delay: -2s; animation-duration: 18s; }
.ps-dust .p6 { left: 86%; top: 92%; animation-delay: -11s; animation-duration: 14s; width: 3px; height: 3px; }
.ps-dust .p7 { left: 6%;  top: 64%; animation-delay: -7s; animation-duration: 17s; }
.ps-dust .p8 { left: 92%; top: 70%; animation-delay: -5s; animation-duration: 13s; width: 5px; height: 5px; }
.ps-dust .p9  { left: 18%; top: 58%; animation-delay: -4s; animation-duration: 19s; width: 5px; height: 5px; }
.ps-dust .p10 { left: 36%; top: 68%; animation-delay: -8s; animation-duration: 15s; }
.ps-dust .p11 { left: 52%; top: 62%; animation-delay: -12s; animation-duration: 21s; width: 3px; height: 3px; }
.ps-dust .p12 { left: 66%; top: 72%; animation-delay: -1s; animation-duration: 17s; }
.ps-dust .p13 { left: 80%; top: 60%; animation-delay: -10s; animation-duration: 20s; width: 5px; height: 5px; }
.ps-dust .p14 { left: 94%; top: 78%; animation-delay: -6s; animation-duration: 16s; width: 3px; height: 3px; }
@keyframes psDust {
  0%   { transform: translate3d(0, 26px, 0) scale(.6); opacity: 0; }
  12%  { opacity: .85; }
  70%  { opacity: .45; }
  100% { transform: translate3d(16px, -130px, 0) scale(1); opacity: 0; }
}

/* ─── ④ HERO: HD kompozicija loga + svetlo ─── */
.ps-hero { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%);
  animation: psHeroIn 1.8s cubic-bezier(.22, .61, .36, 1) both; }
/* Ulazak: logo se "upali" — blagi scale + fade; prvi shine prolaz je ignition. */
@keyframes psHeroIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* God-rays iza loga — spori, mekani zlatni zraci. */
.ps-rays { position: absolute; left: 50%; top: 50%; width: 76cqmax; height: 76cqmax; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: .85;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 219, 130, .14) 0deg 1deg, rgba(255, 219, 130, 0) 1deg 6.4deg);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .55) 40%, transparent 74%);
          mask-image: radial-gradient(closest-side, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .55) 40%, transparent 74%);
  animation: psRays 110s linear infinite; }
@keyframes psRays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Tamni "scrim" — drži centar mirnim da loptice iz pozadine ne guše logo. */
.ps-scrim { position: absolute; left: 50%; top: 50%; width: 175%; height: 235%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(4, 8, 30, .62) 0%, rgba(4, 8, 30, .34) 48%, transparent 74%); }

/* Toplo svetlo iza loga — "diše". */
.ps-glow { position: absolute; left: 50%; top: 50%; width: 142%; height: 180%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 209, 77, .36) 0%, rgba(0, 168, 198, .18) 46%, transparent 72%);
  animation: psGlow 11s ease-in-out -2.6s infinite; }
@keyframes psGlow {
  0%, 100% { opacity: .70; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1.00; transform: translate(-50%, -50%) scale(1.06); }
}

/* Pulse prstenovi — "power" talas iz loga svakih ~11s. */
.ps-rings { position: absolute; left: 50%; top: 50%; }
.ps-rings i { position: absolute; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%; border: 1.5px solid rgba(255, 220, 140, .30); opacity: 0;
  animation: psPulse 11s cubic-bezier(.22, .61, .36, 1) infinite; }
.ps-rings i:nth-child(2) { animation-delay: .5s; border-color: rgba(140, 200, 255, .24); }
@keyframes psPulse {
  0%, 64%, 100% { opacity: 0; transform: scale(.42); }
  66%           { opacity: .55; }
  82%           { opacity: .18; transform: scale(1.06); }
  88%, 100%     { opacity: 0; transform: scale(1.18); }
}

/* "Pool" svetla pod logom — kao odsjaj na stolu. */
.ps-pool { position: absolute; left: 50%; top: 94%; width: 155%; height: 64%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 206, 90, .22) 0%, rgba(255, 206, 90, .08) 46%, transparent 72%);
  animation: psPool 11s ease-in-out -2.6s infinite; }
@keyframes psPool { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* Dva nezavisna transforma: float (lebdi) + breathe (skoro neprimetno skalira). */
.ps-float { animation: psFloat 9s ease-in-out infinite alternate; }
@keyframes psFloat { from { transform: translate3d(0, -9px, 0); } to { transform: translate3d(0, 9px, 0); } }
.ps-breathe { animation: psBreathe 7s ease-in-out infinite; }
@keyframes psBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.014); } }

/* ── HD logo: sastavljen iz Godot intro dijelova (precizne koordinate iz IntroScreen.tscn) ──
   986×652 izvor — prikaz ≤ 986px je pixel-perfect (nema upscale mutnoće). */
.ps-logo-stage { position: relative; width: min(52cqw, 986px); aspect-ratio: 986 / 652;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .48)) drop-shadow(0 4px 20px rgba(255, 190, 80, .12)); }
.ps-logo { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* Zlatni shine PREKO loga — mask je sam HD logo PNG, pa svetlo ide tačno po obliku. */
.ps-shine { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: url("../assets/images/logo/hd/lucky-balls-logo.png");
          mask-image: url("../assets/images/logo/hd/lucky-balls-logo.png");
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ps-shine::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 36%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 240, 180, .50) 42%,
    rgba(255, 255, 255, .95) 50%, rgba(255, 240, 180, .50) 58%, rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-320%, 0, 0) rotate(6deg); opacity: 0;
  animation: psShine 19.2s cubic-bezier(.50, .05, .35, 1) infinite; }
/* 3 prolaza u 19.2s: prolaz, prolaz, pa DUPLI udarni par (svaki 3. ciklus). */
@keyframes psShine {
  0%    { transform: translate3d(-320%, 0, 0) rotate(6deg); opacity: 0; }
  1.4%  { opacity: 1; }
  5.7%  { transform: translate3d(320%, 0, 0) rotate(6deg);  opacity: 1; }
  6.1%, 32.9% { transform: translate3d(320%, 0, 0) rotate(6deg); opacity: 0; }
  33.0% { transform: translate3d(-320%, 0, 0) rotate(6deg); opacity: 0; }
  34.4% { opacity: 1; }
  38.7% { transform: translate3d(320%, 0, 0) rotate(6deg); opacity: 1; }
  39.1%, 65.9% { transform: translate3d(320%, 0, 0) rotate(6deg); opacity: 0; }
  66.0% { transform: translate3d(-320%, 0, 0) rotate(6deg); opacity: 0; }
  67.2% { opacity: 1; }
  71.3% { transform: translate3d(320%, 0, 0) rotate(6deg); opacity: 1; }
  71.7% { transform: translate3d(320%, 0, 0) rotate(6deg); opacity: 0; }
  72.6% { transform: translate3d(-320%, 0, 0) rotate(6deg); opacity: 0; }
  73.6% { opacity: .8; }
  77.5% { transform: translate3d(320%, 0, 0) rotate(6deg); opacity: .8; }
  77.9%, 100% { transform: translate3d(320%, 0, 0) rotate(6deg); opacity: 0; }
}

/* Iskre na detelini — "pop" svakih ~11s. */
.ps-sparks { position: absolute; inset: 0; }
.ps-sparks i { position: absolute; width: 11px; height: 11px; border-radius: 50%; margin: -5.5px 0 0 -5.5px;
  background: radial-gradient(circle, #fff8e0 0%, rgba(255, 209, 77, .9) 35%, rgba(255, 209, 77, 0) 72%);
  opacity: 0; animation: psSpark 11s ease-in-out infinite; }
.ps-sparks i:nth-child(1) { left: 44%; top: 7%;  animation-delay: 0s; }
.ps-sparks i:nth-child(2) { left: 51%; top: 3%;  animation-delay: .18s; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.ps-sparks i:nth-child(3) { left: 58%; top: 10%; animation-delay: .34s; }
.ps-sparks i:nth-child(4) { left: 47%; top: 15%; animation-delay: .50s; width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.ps-sparks i:nth-child(5) { left: 62%; top: 6%;  animation-delay: .64s; width: 8px; height: 8px; margin: -4px 0 0 -4px; }
@keyframes psSpark {
  0%, 74%, 100% { opacity: 0; transform: scale(.4); }
  78%           { opacity: 1; transform: scale(1.15); }
  86%           { opacity: 0; transform: scale(.5); }
}

/* ─── ⑤ Orbita: akcentne loptice kruže iza loga + orbit prstenovi ─── */
.ps-orbit { position: absolute; left: 50%; top: 47%; }
.ps-orbit-ring { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px dashed rgba(150, 195, 255, .12); }
.ps-orbit-ring.r1 { width: 62cqw; height: 62cqw; max-width: 1220px; max-height: 1220px;
  animation: psRingSpin 170s linear infinite; }
.ps-orbit-ring.r2 { width: 82cqw; height: 82cqw; max-width: 1560px; max-height: 1560px;
  border-style: solid; border-color: rgba(255, 220, 150, .07); }
@keyframes psRingSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.ps-orbit .lb-bg-ball { left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  opacity: .82;
  box-shadow: inset 4px 5px 10px rgba(255, 255, 255, .16), inset -5px -6px 12px rgba(0, 0, 0, .28),
    0 0 20px rgba(255, 220, 140, .22), 0 0 8px rgba(255, 255, 255, .12);
  animation-duration: 34s; animation-timing-function: linear; animation-iteration-count: infinite; }
.ps-orbit .lb-bg-ball::before { font-size: 16px; }
.ps-orbit .o1 { animation-name: psOrbit1; }
.ps-orbit .o2 { animation-name: psOrbit2; animation-duration: 46s; }
.ps-orbit .o3 { animation-name: psOrbit3; animation-duration: 40s; }
.ps-orbit .o4 { animation-name: psOrbit4; animation-duration: 52s; }
@keyframes psOrbit1 { from { transform: rotate(20deg)  translateX(min(30cqw, 470px)) rotate(-20deg); }  to { transform: rotate(380deg)  translateX(min(30cqw, 470px)) rotate(-380deg); } }
@keyframes psOrbit2 { from { transform: rotate(200deg) translateX(min(36cqw, 560px)) rotate(-200deg); } to { transform: rotate(-160deg) translateX(min(36cqw, 560px)) rotate(160deg); } }
@keyframes psOrbit3 { from { transform: rotate(130deg) translateX(min(26cqw, 460px)) rotate(-130deg); } to { transform: rotate(-230deg) translateX(min(26cqw, 460px)) rotate(230deg); } }
@keyframes psOrbit4 { from { transform: rotate(300deg) translateX(min(40cqw, 620px)) rotate(-300deg); } to { transform: rotate(660deg) translateX(min(40cqw, 620px)) rotate(-660deg); } }

/* Povremeni svetlosni prelaz preko cijele scene. */
.ps-sweep { position: absolute; top: -25%; bottom: -25%; left: 0; width: 54cqw; opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(190, 220, 255, .05) 36%, rgba(255, 244, 214, .12) 50%, rgba(190, 220, 255, .05) 64%, transparent 100%);
  transform: rotate(13deg) translateX(-140cqw);
  animation: psSweep 26s ease-in-out infinite; }
@keyframes psSweep {
  0%, 57%, 100% { opacity: 0; transform: rotate(13deg) translateX(-140cqw); }
  61% { opacity: 1; }
  79% { opacity: 1; transform: rotate(13deg) translateX(160cqw); }
  80%, 99.9% { opacity: 0; transform: rotate(13deg) translateX(160cqw); }
}

/* Drugi, hladniji sweep — suprotan smjer, sporiji ritam. */
.ps-sweep.b2 { width: 46cqw;
  background: linear-gradient(90deg, transparent 0%, rgba(150, 210, 255, .05) 38%, rgba(210, 240, 255, .10) 50%, rgba(150, 210, 255, .05) 62%, transparent 100%);
  transform: rotate(-11deg) translateX(150cqw);
  animation: psSweep2 34s ease-in-out infinite; animation-delay: -13s; }
@keyframes psSweep2 {
  0%, 55%, 100% { opacity: 0; transform: rotate(-11deg) translateX(150cqw); }
  59% { opacity: 1; }
  76% { opacity: 1; transform: rotate(-11deg) translateX(-150cqw); }
  77%, 99.9% { opacity: 0; transform: rotate(-11deg) translateX(-150cqw); }
}

/* ─── ⑥ Vignette + caption (dijamanti + per-slovo stagger) ─── */
.ps-vignette { position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(2, 4, 14, .62) 100%),
    linear-gradient(180deg, rgba(2, 4, 14, .42) 0%, transparent 20%, transparent 80%, rgba(2, 4, 14, .55) 100%); }

/* Caption se otkriva tek kad su fontovi i talas slova slegnuti (JS dodaje .is-show) —
   nema vidljivog "uleta" usred animacije; prvi vidljivi kadar je već tačno centriran. */
.ps-caption { position: absolute; left: 50%; bottom: 6cqh; transform: translateX(-50%);
  display: flex; align-items: center; gap: 30px;
  opacity: 0; transition: opacity .85s cubic-bezier(.4, 0, .2, 1); }
.ps-caption.is-show { opacity: 1; }

/* (uklonjen mutni "blob" ispod teksta — zamijenjen čistom refleksijom na .ps-phrase) */

/* Linije sa dijamantskim vrhom — "crtaju" se iz centra ka spolja, dijamant iskoči. */
.ps-rule { position: relative; display: block; width: min(10cqw, 170px); height: 1px;
  transform: scaleX(.2); opacity: 0;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1), opacity .45s ease; }
.ps-rule.rl { background: linear-gradient(90deg, transparent, rgba(255, 231, 165, .9)); transform-origin: right center; }
.ps-rule.rr { background: linear-gradient(270deg, transparent, rgba(255, 231, 165, .9)); transform-origin: left center; }
.ps-rule::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px;
  background: linear-gradient(135deg, #fff7d8, #d9a93a);
  transform: rotate(45deg) scale(.2); transition: transform .7s cubic-bezier(.34, 1.3, .64, 1) .3s; }
.ps-rule.rl::after { right: -11px; }
.ps-rule.rr::after { left: -11px; }
.ps-caption.is-in .ps-rule { transform: scaleX(1); opacity: 1; }
.ps-caption.is-in .ps-rule::after { transform: rotate(45deg) scale(1); }
.ps-caption.is-out .ps-rule { transform: scaleX(.2); opacity: 0; transition-duration: .5s, .35s; }

/* Tekst: metalik zlato (gradijent kroz slova) + tiha refleksija — kao gravura na uglačanoj tabli. */
.ps-phrase { font-family: "bebas", "myFont", "Poppins", sans-serif;
  font-size: min(2cqw, 36px); letter-spacing: .34em; text-transform: uppercase;
  white-space: nowrap; text-align: center; color: #ffe9ad;
  margin-right: -.34em; /* kompenzacija trailing letter-spacing-a */
  filter: drop-shadow(0 1px 1px rgba(45, 24, 0, .55)) drop-shadow(0 5px 16px rgba(0, 0, 0, .5));
  -webkit-box-reflect: below 10px linear-gradient(transparent 62%, rgba(255, 255, 255, .12)); }
/* Gradijent ide na SVAKI span pojedinačno — background-clip na roditelju ne prolazi do djece. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ps-phrase .ps-ch { background: linear-gradient(180deg, #fffef7 0%, #ffeeb2 32%, #f1c967 56%, #d2a244 78%, #a87c26 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* Per-slovo stagger: ulazak talasom sleva, izlazak obrnutim redom. */
.ps-phrase .ps-ch { display: inline-block; opacity: 0;
  transform: translateY(16px) scale(.72) rotate(5deg);
  transition: opacity .45s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 22ms); }
.ps-caption.is-in .ps-phrase .ps-ch { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
.ps-caption.is-out .ps-phrase .ps-ch { opacity: 0; transform: translateY(-10px) scale(.85);
  transition-duration: .3s, .38s;
  transition-delay: calc((var(--n, 20) - var(--i, 0)) * 9ms); }

/* Reduced motion: bez animacija — statična, mirna scena. */
@media (prefers-reduced-motion: reduce) {
  #lbPromoSaver, #lbPromoSaver * { animation: none !important; }
  .ps-shine, .ps-dust, .ps-beam, .ps-rays, .ps-sweep, .ps-orbit { display: none !important; }
  .ps-phrase .ps-ch { opacity: 1 !important; transform: none !important; transition: none !important; }
}