/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  overflow:hidden;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: url("funnypozadina.webp") center/cover no-repeat;
}

/* Simple vignette overlay (cheap to render) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 650px at 50% 35%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 80%),
    radial-gradient(1400px 900px at 50% 55%, rgba(0,0,0,0.10), rgba(0,0,0,0.78));
}

/* ---------- Layout ---------- */
.stage{
  position:relative;
  height:100%;
  width:100%;
  display:grid;
  place-items:center;
}

.center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:24px;
}

/* ---------- Card + Aggressive Glow (optimized) ---------- */
.holo-wrap{
  position:relative;
  width:min(460px, 86vw);
  aspect-ratio: 3 / 4;
  border-radius:28px;
  overflow:hidden;

  /* Keep it on its own composited layer */
  transform: translateZ(0);
  will-change: transform;

  /* Strong but static glow (no animated gradients / blend modes) */
  box-shadow:
    0 18px 60px rgba(0,0,0,0.58),
    0 0 0 1px rgba(255,255,255,0.10) inset,
    /* aggressive static bloom */
    0 0 42px rgba(255, 196, 70, 0.48),
    0 0 86px rgba(255, 196, 70, 0.26),
    0 0 64px rgba(90, 230, 255, 0.22),
    0 0 68px rgba(255, 80, 220, 0.20);
}

/* Static holographic sheen (no animation / no blend-modes) */
.holo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.00) 28%,
      rgba(255,255,255,0.07) 44%,
      rgba(255,210,90,0.06) 52%,
      rgba(140,235,255,0.06) 58%,
      rgba(255,255,255,0.00) 74%);
  opacity:0.9;
}

.card-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  /* Fade-in on load (opacity/transform only = smooth) */
  opacity:0;
  transform: scale(0.985);
  transition: opacity 800ms ease, transform 800ms ease;
}

body.is-loaded .card-img{
  opacity:1;
  transform: scale(1);
}

/* Medium floating motion (transform-only) */
.float{
  animation: floaty 5s ease-in-out infinite;
}

@keyframes floaty{
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.25deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(0.30deg); }
}

/* ---------- CA Text ---------- */
.ca-wrap{
  display:grid;
  gap:8px;
  justify-items:center;
  text-align:center;
}

.ca-value{
  border:0;
  cursor:pointer;
  padding:12px 16px;
  border-radius:14px;
  background: rgba(12, 8, 2, 0.55);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255, 225, 150, 0.18) inset,
    0 0 18px rgba(255, 196, 70, 0.18);

  color: rgba(255, 235, 190, 0.98);
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight:700;
  letter-spacing:0.04em;
  font-size: clamp(12px, 2.4vw, 16px);
  text-shadow:
    0 0 10px rgba(255, 196, 70, 0.55),
    0 0 24px rgba(255, 196, 70, 0.28);

  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  max-width: min(820px, 92vw);
}

.ca-value:hover{
  transform: translateY(-1px) scale(1.01);
  background: rgba(18, 10, 2, 0.62);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255, 225, 150, 0.24) inset,
    0 0 24px rgba(255, 196, 70, 0.24);
}

.ca-value:active{ transform: translateY(0) scale(0.99); }

.copy-hint{
  display:inline-block;
  margin-left:10px;
  font-weight:500;
  letter-spacing:0.06em;
  font-size:11px;
  opacity:0.75;
}

.ca-prefix{ color: rgba(255, 225, 150, 0.98); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .float{ animation:none !important; }
  .card-img{ transition:none !important; }
}