/* ==========================================================================
   APONE — SVET (Gate 1)
   Stilovi za 2D sloj oko 3D scene: loader, diskretan UI, fallback, teme.
   3D svet sam po sebi ne koristi ovaj CSS — ovde je samo "opna" oko canvasa.
   ========================================================================== */

@font-face {
  font-family: 'InterVariable';
  src: url('../../assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  --navy:   #0d1b3e;
  --ink:    #0d1b3e;
  --brand:  #4f46e5;
  --violet: #7c3aed;
  --nfc:    #5b8cff;         /* plava NFC linija */
  --paper:  #f4f1ea;         /* topla "dnevna" pozadina okvira */
  --overlay-bg: #efeae1;     /* boja loadera po danu */
  --overlay-fg: #0d1b3e;
  --ui-fg:  #16233f;
  --ui-fg-soft: rgba(22,35,63,.60);
}

/* Veče / dark atmosfera — ista opna, druga toplina */
.svet-root[data-theme="dark"] {
  --paper:  #0b1120;
  --overlay-bg: #0b1120;
  --overlay-fg: #eef2ff;
  --ui-fg:  #eaf0ff;
  --ui-fg-soft: rgba(234,240,255,.62);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--overlay-bg);
  color: var(--ink);
  font-family: 'InterVariable', Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------- Scena */
.svet-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--overlay-bg);
}
.svet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;      /* kamera hvata pointer/touch bez scroll konflikta */
}

/* ---------------------------------------------------------------- UI opna */
.svet-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;    /* propušta pointer do canvasa; deca vraćaju auto */
  z-index: 3;
}

.svet-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2.4vw, 26px) clamp(16px, 3vw, 34px);
}

.svet-brand {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ui-fg);
  letter-spacing: .16em;
  font-weight: 700;
  font-size: 15px;
  opacity: .92;
  transition: opacity .25s ease;
}
.svet-brand:hover { opacity: 1; }
.svet-brand__mark { color: var(--ui-fg); display: block; }
.svet-brand__word { transform: translateY(1px); }

.svet-theme {
  pointer-events: auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ui-fg) 22%, transparent);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ui-fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.svet-theme:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ui-fg) 40%, transparent); }

.svet-topbar__actions { display: flex; align-items: center; gap: 10px; pointer-events: none; }
.svet-lang {
  pointer-events: auto;
  height: 42px; min-width: 46px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-fg) 22%, transparent);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ui-fg); cursor: pointer;
  font-weight: 700; font-size: 13px; letter-spacing: .1em;
  transition: transform .25s ease, border-color .25s ease;
}
.svet-lang:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ui-fg) 40%, transparent); }
.svet-theme__night { display: none; }
.svet-root[data-theme="dark"] .svet-theme__day { display: none; }
.svet-root[data-theme="dark"] .svet-theme__night { display: inline; }

/* Donji potpis (cinematic caption) */
/* Hero tekst je namerno diskretan — ne sme da konkuriše kartici.
   Pojavljuje se kasno i prigušeno (kartica je prvo što oko vidi). */
.svet-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(16px, 3vh, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.6s ease 1.2s, transform 1.6s ease 1.2s;
}
.svet-caption.is-in { opacity: .5; transform: none; }
.svet-caption__eyebrow {
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ui-fg-soft);
}
.svet-caption__text {
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ui-fg-soft);
}

/* ---------------------------------------------------------------- Loader */
.svet-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--overlay-bg);
  color: var(--overlay-fg);
  transition: opacity .8s ease, visibility .8s ease;
}
.svet-loader.is-hidden { opacity: 0; visibility: hidden; }
.svet-loader__logo { animation: svet-breathe 2.4s ease-in-out infinite; }
.svet-loader__bar {
  width: min(220px, 54vw);
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--overlay-fg) 14%, transparent);
  overflow: hidden;
}
.svet-loader__fill {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--nfc));
  transition: width .35s ease;
}
.svet-loader__label {
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--overlay-fg) 55%, transparent);
}
@keyframes svet-breathe {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1;   }
}

/* ---------------------------------------------------------------- Fallback */
.svet-fallback {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #16264d 0%, #0b1224 55%, #070b16 100%);
  color: #eaf0ff;
}
.svet-fallback[hidden] { display: none; }
.svet-fallback__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.svet-fallback__word {
  margin: 6px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .22em;
}
.svet-fallback__sub {
  margin: 0;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(234,240,255,.6);
}
.svet-fallback__title {
  margin: 10px 0 0;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.svet-fallback__lead {
  max-width: 520px;
  margin: 4px 0 0;
  line-height: 1.65;
  color: rgba(234,240,255,.72);
}
.svet-fallback__cta {
  margin-top: 14px;
  display: inline-flex;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--violet));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 40px -12px rgba(79,70,229,.7);
  transition: transform .2s ease;
}
.svet-fallback__cta:hover { transform: translateY(-2px); }

/* Scroll indikator — diskretan, nestaje na prvi scroll */
.svet-scrollhint {
  position: absolute;
  left: 50%;
  bottom: clamp(52px, 8vh, 84px);
  transform: translate(-50%, 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--ui-fg-soft);
  opacity: 0;
  transition: opacity 1s ease .2s, transform 1s ease .2s;
  pointer-events: none;
}
.svet-scrollhint.is-in { opacity: 1; transform: translate(-50%, 0); }
.svet-scrollhint.is-gone { opacity: 0 !important; transform: translate(-50%, 8px) !important; }
.svet-scrollhint__label {
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.svet-scrollhint__chev { animation: svet-bob 1.8s ease-in-out infinite; }
@keyframes svet-bob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ============================ SADRŽAJNI PANELI ============================ */
.svet-content { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.svet-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}
.svet-panel.is-in { opacity: 1; visibility: visible; }

.svet-panel__inner {
  pointer-events: auto;
  width: min(400px, calc(100vw - 40px));
  margin: clamp(16px, 4vw, 56px);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 22px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-fg) 12%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 24px 60px -24px rgba(10,20,50,.45);
  transform: translateY(14px);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  color: var(--ui-fg);
}
.svet-panel.is-in .svet-panel__inner { transform: none; }
.svet-panel--left  { justify-content: flex-start; }
.svet-panel--right { justify-content: flex-end; }
.svet-panel--center { justify-content: center; align-items: flex-end; }
.svet-panel--center .svet-panel__inner { margin-bottom: clamp(24px, 6vh, 70px); width: min(440px, calc(100vw - 40px)); }

.svet-panel__eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.svet-panel__title { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.svet-panel__lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ui-fg-soft); }
.svet-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.svet-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ui-fg-soft); }
.svet-list li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: #10b981; font-weight: 800; }

/* Reviews */
.svet-reviews { display: grid; gap: 11px; }
.svet-rev-agg { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.svet-rev-agg__num { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.svet-rev-agg__stars { color: #fbbf24; letter-spacing: 2px; }
.svet-rev-agg__cnt { font-size: 12px; color: var(--ui-fg-soft); }
.svet-rev { display: flex; gap: 11px; padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, var(--ui-fg) 5%, transparent); }
.svet-rev__av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--violet)); }
.svet-rev__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
.svet-rev__top span { color: #fbbf24; font-size: 12px; letter-spacing: 1px; }
.svet-rev p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ui-fg-soft); }

/* Calculator */
.svet-field { margin-bottom: 15px; }
.svet-field label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.svet-field label b { color: var(--brand); }
.svet-field input[type=range] { width: 100%; accent-color: var(--brand); cursor: pointer; }
.svet-calc-res { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--violet)); }
.svet-calc-res__num { font-size: 40px; font-weight: 800; letter-spacing: -.03em; display: block; line-height: 1; }
.svet-calc-res small { font-size: 11px; opacity: .85; }
.svet-calc-res__year { font-size: 13px; text-align: right; opacity: .95; }

/* Statistics */
.svet-stats { display: grid; gap: 16px; }
.svet-stat { display: flex; align-items: baseline; gap: 14px; }
.svet-stat__num { font-size: 42px; font-weight: 800; letter-spacing: -.03em; color: var(--brand); min-width: 96px; }
.svet-stat__num i { font-style: normal; font-size: 26px; }
.svet-stat small { font-size: 13px; line-height: 1.4; color: var(--ui-fg-soft); }

/* Clients */
.svet-clients { display: grid; gap: 10px; }
.svet-client { padding: 13px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ui-fg) 12%, transparent); background: color-mix(in srgb, var(--ui-fg) 4%, transparent); }
.svet-client b { display: block; font-size: 15px; letter-spacing: .06em; }
.svet-client small { font-size: 12px; color: var(--ui-fg-soft); }

/* Contact form */
.svet-pricing { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.svet-price { flex: 1; min-width: 92px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ui-fg) 12%, transparent); text-align: center; }
.svet-price.is-featured { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.svet-price b { display: block; font-size: 13px; }
.svet-price span { font-size: 16px; font-weight: 800; }
.svet-price small { font-size: 10px; color: var(--ui-fg-soft); }
.svet-form { display: grid; gap: 9px; }
.svet-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.svet-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.svet-form input, .svet-form textarea { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--ui-fg) 16%, transparent); background: color-mix(in srgb, var(--paper) 60%, transparent); color: var(--ui-fg); font: inherit; font-size: 14px; }
.svet-form input:focus, .svet-form textarea:focus { outline: 2px solid var(--brand); border-color: transparent; }
.svet-btn { margin-top: 3px; padding: 13px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14.5px; color: #fff; cursor: pointer; background: linear-gradient(90deg, var(--brand), var(--violet)); box-shadow: 0 12px 34px -12px rgba(79,70,229,.7); transition: transform .2s ease; }
.svet-btn:hover { transform: translateY(-1px); }
.svet-btn:disabled { opacity: .6; cursor: default; transform: none; }
.svet-form-note { margin: 4px 0 0; font-size: 12.5px; min-height: 16px; }
.svet-form-note.is-ok { color: #10b981; }
.svet-form-note.is-err { color: #ef4444; }
.svet-contact-alt { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--ui-fg-soft); text-decoration: none; }
.svet-contact-alt:hover { color: var(--brand); }

/* --- Fizički materijali panela (ne uniformni glass) --- */
.svet-paper, .svet-print, .svet-notecard {
  background: #f7f4ec;
  color: #22303f;
  border: 1px solid rgba(20,20,40,.08);
  backdrop-filter: none;
  box-shadow: 0 34px 66px -24px rgba(15,20,45,.55), 0 1px 0 rgba(255,255,255,.5) inset;
}
.svet-notecard { background: #fbf7ee; }
.svet-print { background: #f8f6f0; }
.svet-panel.is-in .svet-paper { transform: rotate(-1.3deg); }
.svet-panel.is-in .svet-print { transform: rotate(1deg); }
.svet-panel.is-in .svet-notecard { transform: rotate(-.5deg); }
.svet-paper .svet-panel__title, .svet-print .svet-panel__title, .svet-notecard .svet-panel__title { color: #1a2740; }
.svet-paper .svet-panel__lead, .svet-print .svet-panel__lead, .svet-notecard .svet-panel__lead { color: #55606e; }
.svet-paper .svet-field label, .svet-notecard label { color: #22303f; }
.svet-print .svet-rev { background: rgba(20,30,60,.05); }
.svet-print .svet-rev p, .svet-print .svet-rev-agg__cnt { color: #55606e; }
.svet-notecard .svet-form input, .svet-notecard .svet-form textarea { background: #fff; color: #22303f; border-color: rgba(20,20,40,.16); }
.svet-notecard .svet-price { border-color: rgba(20,20,40,.14); color: #22303f; }
.svet-notecard .svet-price small { color: #6b7684; }
.svet-notecard .svet-contact-alt { color: #6b7684; }

/* Anchored panel — prati projektovanu poziciju fizičkog objekta (npr. papir) */
.svet-panel__inner.svet-anchored {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: min(340px, calc(100vw - 32px));
  transform: translate(-50%, -50%) rotate(-1.4deg);
  transition: opacity .5s ease;
}
.svet-panel.is-in .svet-anchored { transform: translate(-50%, -50%) rotate(-1.4deg); }
@media (max-width: 720px) {
  .svet-panel__inner.svet-anchored { left: 50% !important; top: auto !important; bottom: 84px; transform: translate(-50%, 0) !important; }
}

/* Klijenti — suptilan potpis (fizičke kartice nose sadržaj) */
.svet-caption-card { width: min(340px, calc(100vw - 40px)); }
.svet-caption-card .svet-panel__lead { margin-bottom: 0; letter-spacing: .04em; }

/* Business showcase — use-case koji se smenjuje */
.svet-usecase { text-align: left; }
.svet-uc { margin: 12px 0 8px; min-height: 104px; }
.svet-uc.is-swap { animation: svet-ucIn .45s ease; }
@keyframes svet-ucIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.svet-uc__type { display: inline-block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.svet-uc__line { margin: 8px 0 14px; font-size: clamp(19px, 2.5vw, 25px); font-weight: 700; letter-spacing: -.01em; color: var(--ui-fg); }
.svet-uc__flow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-weight: 700; font-size: 13.5px; }
.svet-uc__hint { margin-top: 14px; font-size: 11.5px; color: var(--ui-fg-soft); letter-spacing: .05em; }

/* Cinematic lower-third caption (podržava scenu, ne konkuriše fizičkom svetu) */
.svet-uc-cap {
  position: absolute; left: clamp(24px, 5vw, 62px); bottom: clamp(60px, 11vh, 96px);
  z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  text-align: left; pointer-events: none; max-width: min(520px, calc(100vw - 48px));
  opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease;
  text-shadow: 0 1px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55);
}
.svet-uc-cap.is-in { opacity: 1; transform: none; }
.svet-uc-cap__type { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #fff; opacity: .82; font-weight: 600; }
.svet-uc-cap__line { font-size: clamp(20px, 2.8vw, 30px); font-weight: 700; letter-spacing: -.01em; color: #fff; line-height: 1.12; }
.svet-uc-cap__flow { margin-top: 3px; font-size: 12px; letter-spacing: .05em; color: #fff; opacity: .78; font-weight: 600; }

/* Back iz biznis vinjete */
.svet-vig-back {
  position: absolute; left: clamp(16px, 3vw, 34px); bottom: clamp(20px, 4vh, 40px);
  z-index: 6; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 15px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-fg) 20%, transparent);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  backdrop-filter: blur(12px);
  color: var(--ui-fg); font-weight: 600; font-size: 13.5px; cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, border-color .25s ease;
}
.svet-vig-back.is-in { opacity: 1; transform: none; pointer-events: auto; }
.svet-vig-back:hover { border-color: color-mix(in srgb, var(--ui-fg) 40%, transparent); }

/* Progres / nav — diskretan, desno */
.svet-nav { position: absolute; right: clamp(12px, 2vw, 22px); top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }
.svet-nav__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--ui-fg) 26%, transparent); transition: background .3s ease, transform .3s ease; }
.svet-nav__dot:hover { transform: scale(1.25); }
.svet-nav__dot.is-active { background: var(--brand); transform: scale(1.35); }
.svet-nav__dot span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 11px; letter-spacing: .04em; color: var(--ui-fg); background: color-mix(in srgb, var(--paper) 80%, transparent); padding: 3px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.svet-nav__dot:hover span, .svet-nav__dot.is-active span { opacity: 1; }

/* Mobilni: paneli preko dna, nav dole */
@media (max-width: 720px) {
  .svet-panel { align-items: flex-end; }
  .svet-panel__inner, .svet-panel--center .svet-panel__inner { margin: 0 10px 78px; width: calc(100vw - 20px); max-height: 56vh; overflow-y: auto; }
  .svet-panel--right { justify-content: center; }
  .svet-panel--left { justify-content: center; }
  .svet-nav { flex-direction: row; right: 50%; top: auto; bottom: 16px; transform: translateX(50%); }
  .svet-nav__dot span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svet-loader__logo { animation: none; }
  .svet-scrollhint__chev { animation: none; }
  .svet-panel__inner { transition: opacity .3s ease; }
}