/* ==========================================================================
   TESLA LOUNGE & BAR — menu.css
   Javna stranica menija / public menu page.
   Zavisi od theme.css (tokeni, skinovi, animacije).
   ========================================================================== */

header, .nav-wrap, main, .footer { position: relative; z-index: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(440px, 62vh, 720px);
  display: grid;
  place-items: end start;
  padding: 32px clamp(20px, 5vw, 72px) 56px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

/* Sve pokretne pozadinske trake žive ovde / all moving background layers live here */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

.hero__image {
  position: absolute;
  inset: -7%;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  animation: tl-kenburns 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* Blueprint crtež preko fotografije / blueprint drawing over the photo */
.hero__diagram {
  position: absolute;
  inset: 0;
  background-image: var(--tesla-diagram-b);
  background-repeat: no-repeat;
  background-size: min(64vw, 780px) auto;
  background-position: right -120px center;
  opacity: .28;
  mix-blend-mode: screen;
}

/* Ornament praznika utkan u hero, preko Teslinog crteža.
   Isti crtež koji stoji u pozadini stranice ovde se stapa sa fotografijom, pa
   hero nosi i temu događaja, a ne samo blueprint.
   The holiday ornament woven into the hero, over the Tesla drawing: the same
   art used page-wide blends with the photo, so the hero carries the occasion. */
.hero__ornament {
  position: absolute;
  inset: 0;
  background-image: var(--season-art);
  background-repeat: no-repeat;
  background-size: var(--hero-ornament-size, min(46vw, 560px)) auto;
  background-position: var(--hero-ornament-position, left -40px bottom -10%);
  opacity: var(--hero-ornament-opacity, .34);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px var(--flare));
  pointer-events: none;
}
html[data-hero-ornament="off"] .hero__ornament,
html[data-bg-art="off"] .hero__ornament { display: none; }

/* Svetle teme: ornament se množi umesto da svetli / light themes multiply */
html[data-skin="ivory"] .hero__ornament,
html[data-skin="easter-intl"] .hero__ornament {
  mix-blend-mode: multiply;
  filter: none;
  opacity: var(--hero-ornament-opacity, .28);
}

/* Čestice unutar samog zaglavlja — sneg/žar/varnice padaju preko fotografije,
   a ne samo niže po stranici. Isti `--fall-*` slojevi kao i na ostatku sajta.
   Particles inside the hero itself, so snow or embers fall across the photo
   and not only further down the page. Same --fall-* layers as page-wide. */
.hero__fall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--fall-opacity) * var(--fall-level, 1) * .85);
}

/* Kada sezona nosi sneg, latice ili lišće, lukovi struje se povuku u drugi
   plan — zaglavlje tada priča priču godišnjeg doba, a ne pražnjenja.
   When the season carries snow, petals or leaves, the electric arcs step back. */
html[data-particles="snow"] .hero__arcs,
html[data-particles="petals"] .hero__arcs,
html[data-particles="leaves"] .hero__arcs,
html[data-particles="glints"] .hero__arcs { opacity: .3; }

/* Bljesak koji lebdi / drifting flare */
.hero__flare {
  position: absolute;
  top: -10%;
  right: 4%;
  width: min(62%, 780px);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--flare), transparent 62%);
  mix-blend-mode: screen;
  filter: blur(26px);
  opacity: .45;
  animation: tl-flare 17s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Odsjaj koji prelazi preko hero-a / light sweep across the hero */
.hero__glare {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 20%;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  filter: blur(12px);
  opacity: .34;
  mix-blend-mode: screen;
  animation: tl-glare 11s cubic-bezier(.5,.1,.4,.9) 1.4s infinite;
  will-change: transform, opacity;
}

/* Lukovi struje / electric arcs */
.hero__arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero__arcs path {
  fill: none;
  stroke: var(--arc);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 12 260;
  filter: drop-shadow(0 0 5px var(--flare));
  animation: tl-arc-flow 7s linear infinite, tl-arc-pulse 7s ease-in-out infinite;
}
.hero__arcs path:nth-child(2) { animation-duration: 9.5s, 9.5s; animation-delay: -2.4s, -2.4s; }
.hero__arcs path:nth-child(3) { animation-duration: 12s, 12s;   animation-delay: -5.1s, -5.1s; }

/* Zatamnjenje ispod teksta. Jačina se podešava u adminu (--hero-dim: 0-1):
   na 1 je kao i do sada, niže vrednosti puštaju fotografiju da se vidi.
   Gradijent stoji u ::before da bi klizač menjao samo njega — donji preliv
   u ::after mora da ostane pun, jer spaja hero sa pozadinom stranice.

   The scrim under the hero text. Its strength is set in the admin
   (--hero-dim: 0-1); 1 keeps the previous look, lower values let the photo
   through. The gradient lives in ::before so the slider touches only it —
   the bottom fade in ::after must stay at full strength, since it is what
   blends the hero into the page background. */
.hero__scrim {
  position: absolute;
  inset: 0;
}
.hero__scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  opacity: var(--hero-dim, 1);
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 130px;
  background: linear-gradient(transparent, var(--bg));
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  /* Sopstvena senka teksta, da naslov ostane čitljiv i na slabom zatamnjenju.
     Text keeps its own shadow so it stays readable at a low scrim setting. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 6px 26px rgba(0, 0, 0, .45);
}
html[data-skin="ivory"] .hero__content {
  text-shadow: 0 1px 2px rgba(255, 255, 255, .65), 0 6px 26px rgba(255, 255, 255, .5);
}

.hero__brandmark {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-2);
  font-size: 24px;
  line-height: 1;
  animation: tl-spark 9s ease-in-out infinite;
}

.hero p {
  max-width: 590px;
  color: var(--soft);
  margin: 20px 0 0;
  font-size: .95rem;
}

.hero__quote {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--gold-2);
  max-width: 560px;
}

.hero__signature {
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--muted);
}

.hero__rule {
  width: 180px;
  height: 1px;
  margin: 24px 0 0;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ==========================================================================
   NAVIGACIJA / STICKY CATEGORY NAV
   ========================================================================== */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: var(--maxw);
  margin: auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid var(--nav-chip);
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--soft);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: .2s ease;
}
.nav a:hover {
  border-color: var(--gold);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.nav a.is-active {
  border-color: var(--gold);
  color: var(--price-fg);
  background: var(--gold);
}
.nav a .nav__icon { font-size: .95rem; line-height: 1; color: inherit; opacity: .9; }
html[data-nav-icons="off"] .nav__icon { display: none; }

.language-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0,0,0,.20);
}

.language-switch button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  transition: .18s ease;
}
.language-switch button:hover { color: var(--text); }
.language-switch button.active { color: var(--price-fg); background: var(--gold); }

/* ==========================================================================
   SEKCIJE / MENU SECTIONS
   ========================================================================== */
main {
  max-width: var(--maxw);
  margin: auto;
  padding: 52px 20px 96px;
}

.menu-section {
  scroll-margin-top: 82px;
  margin-bottom: 34px;
  position: relative;
  isolation: isolate;
  padding: 28px clamp(16px, 2.4vw, 28px);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  --section-art: var(--section-invention-coil);
}

.menu-section::before,
.menu-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menu-section::before {
  background-image: var(--section-art);
  background-repeat: no-repeat;
  background-size: min(48vw, 620px) auto;
  background-position: right -50px center;
  opacity: var(--section-art-opacity);
  mix-blend-mode: screen;
  filter: saturate(.95);
}

.menu-section::after {
  background:
    var(--panel-scrim),
    radial-gradient(circle at top right, var(--panel-glow), transparent 34%);
  opacity: .55;
}
html[data-section-art="off"] .menu-section::before,
html[data-section-art="off"] .menu-section::after { display: none; }

.menu-section > * { position: relative; z-index: 1; }

/* Blueprint crtež po kategoriji / per-category blueprint drawing */
.art-coil       { --section-art: var(--section-invention-coil); }
.art-motor      { --section-art: var(--section-invention-motor); }
.art-turbine    { --section-art: var(--section-invention-turbine); }
.art-tower      { --section-art: var(--section-invention-tower); }
.art-oscillator { --section-art: var(--section-invention-oscillator); }
.art-radiant    { --section-art: var(--section-invention-radiant); }

/* Naslov sekcije — preuzet iz originalne stranice / heading kept from the original */
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.section-head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.menu-section.is-in .section-head::before {
  animation: tl-draw-rule 1.1s cubic-bezier(.2,.7,.3,1) both;
}

.section-head h2 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: .9;
}

.section-head .section-count {
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

.section-title-wrap { display: grid; gap: 6px; }

.section-title-wrap h2 { display: flex; align-items: baseline; gap: 12px; }
.section-icon { font-size: .5em; color: var(--gold); }
html[data-nav-icons="off"] .section-icon { display: none; }

.section-theme {
  max-width: 520px;
  color: var(--soft);
  font-size: .84rem;
  letter-spacing: .02em;
}

/* ==========================================================================
   MREŽA KARTICA / CARD GRID
   ========================================================================== */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.card__media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 26%, transparent), var(--surface));
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.03);
  transition: transform .6s cubic-bezier(.2,.6,.3,1), filter .4s ease;
}
.card:hover .card__img { transform: scale(1.06); filter: saturate(1) contrast(1.05); }

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--media-scrim);
  pointer-events: none;
}

/* Sjaj koji prelazi preko slike — jednom pri ulasku, pa opet na hover
   Gleam sweeping across the image — once on reveal, again on hover */
.card__gleam {
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  opacity: 0;
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
.card.is-in .card__gleam {
  animation: tl-gleam 1.25s cubic-bezier(.3,.6,.3,1) calc(var(--delay, 0ms) + 240ms) both;
}
.card:hover .card__gleam {
  animation: tl-gleam-hover 1s cubic-bezier(.3,.6,.3,1);
}

/* ==========================================================================
   ELEKTRIČNI OKVIR / ELECTRIC OUTLINE

   Luk struje jednom obiđe ivicu kartice i ugasi se — ne vrti se u krug.
   Prsten se dobija maskom (spoljni pravougaonik minus unutrašnji), pa prati
   zaobljenje ivice samo od sebe; svetlo je običan `conic-gradient` koji rotira.

   A current arc travels the card edge once and dies out — it does not loop.
   The ring is a mask (outer box minus inner box), so it follows the corner
   radius by itself; the light is a rotating conic-gradient.
   ========================================================================== */

.tl-circuit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: var(--circuit-width, 1.5px);
  pointer-events: none;
  opacity: 0;
}
/* Prsten se seče maskom samo u „arc" stilu; „bolt" crta pravu liniju po ivici
   i maska bi mu odsekla upravo ono što ga čini pražnjenjem.
   The ring mask belongs to the "arc" style only — it would clip away exactly
   what makes the "bolt" style read as a discharge. */
html[data-circuit-style="arc"] .tl-circuit {
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
html[data-circuit-style="arc"] .tl-circuit__svg { display: none; }
html[data-circuit-style="bolt"] .tl-circuit b { display: none; }
.tl-circuit b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    transparent 0 62%,
    color-mix(in srgb, var(--flare) 60%, transparent) 72%,
    var(--arc) 82%,
    #fff 87%,
    var(--arc) 92%,
    transparent 100%);
  filter: blur(.2px);
  will-change: transform;
}

@keyframes tl-circuit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Gasi se na kraju — bez petlje / fades out at the end, no loop */
@keyframes tl-circuit-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

/* jednom pri ulasku kartice u vidno polje / once as the card scrolls in */
html[data-circuit="reveal"] .card.is-in .tl-circuit,
html[data-circuit="both"]   .card.is-in .tl-circuit {
  animation: tl-circuit-fade var(--circuit-time, 1.8s) linear
             calc(var(--delay, 0ms) + 320ms) both;
}
html[data-circuit="reveal"] .card.is-in .tl-circuit b,
html[data-circuit="both"]   .card.is-in .tl-circuit b {
  animation: tl-circuit-spin var(--circuit-time, 1.8s) linear
             calc(var(--delay, 0ms) + 320ms) both;
}

/* Na prelazak mišem — bilo koji element koji nosi okvir: kartica, dugme u
   navigaciji, prekidač jezika, dugme za vrh.
   On hover — any element carrying the outline.

   DVA razloga zašto hover ima svoje `-h` verzije animacija:
     1. pravilo za ulazak (`.card.is-in`) je specifičnije od opšteg `:hover`,
        pa bi ga nadjačalo — zato se ovde `.card.is-in:hover` navodi izričito;
     2. CSS ne pokreće animaciju ponovo ako ime ostane isto, a kartica koja je
        već ušla drži `tl-circuit-fade` sa `both`. Drugo ime = novo paljenje.

   Hover needs its own `-h` animation names because the reveal rule is more
   specific, and because CSS will not restart an animation whose name has not
   changed — a revealed card still holds the reveal animation. */
html[data-circuit="hover"] :hover > .tl-circuit,
html[data-circuit="both"]  :hover > .tl-circuit,
html[data-circuit="both"]  .card.is-in:hover > .tl-circuit,
html[data-circuit="reveal"] .nav a:hover > .tl-circuit,
html[data-circuit="reveal"] .language-switch button:hover > .tl-circuit,
html[data-circuit="reveal"] .back-top:hover > .tl-circuit {
  animation: tl-circuit-fade-h var(--circuit-time, 1.8s) linear both;
}
html[data-circuit="hover"] :hover > .tl-circuit > b,
html[data-circuit="both"]  :hover > .tl-circuit > b,
html[data-circuit="both"]  .card.is-in:hover > .tl-circuit > b,
html[data-circuit="reveal"] .nav a:hover > .tl-circuit > b,
html[data-circuit="reveal"] .language-switch button:hover > .tl-circuit > b,
html[data-circuit="reveal"] .back-top:hover > .tl-circuit > b {
  animation: tl-circuit-spin-h var(--circuit-time, 1.8s) linear both;
}

/* Iste krive, drugo ime — samo da bi se animacija ponovo upalila. */
@keyframes tl-circuit-spin-h {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes tl-circuit-fade-h {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tl-bolt-run-h {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1000; }
}
@keyframes tl-circuit-flicker-h {
  0%   { opacity: 0; }   6%  { opacity: 1; }   10% { opacity: .35; }
  14%  { opacity: 1; }   22% { opacity: .6; }  27% { opacity: 1; }
  46%  { opacity: .78; } 52% { opacity: 1; }   68% { opacity: .45; }
  74%  { opacity: .9; }  88% { opacity: .25; } 100% { opacity: 0; }
}

html[data-circuit="off"] .tl-circuit,
html[data-anim="off"] .tl-circuit { display: none; }

/* --------------------------------------------------------------------------
   STIL OKVIRA / OUTLINE STYLE

   „arc"  — mek luk svetla koji klizi ivicom (mirniji, elegantniji);
   „bolt" — pražnjenje: deblja linija koju šum lomi, uz treperenje i zujanje
            svetla, da se odmah vidi da je struja.

   "arc"  — a soft light arc gliding along the edge;
   "bolt" — a discharge: a thicker line broken up by turbulence, flickering,
            so it reads unmistakably as electricity.
   -------------------------------------------------------------------------- */

.tl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.tl-circuit__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: url(#tl-bolt);
}
/* Geometrija iz CSS-a: linija stoji tačno na ivici kartice, sa istim
   zaobljenjem. `pathLength=1000` znači da je ceo krug uvek 1000 jedinica,
   bez obzira na veličinu kartice — pa jedna animacija radi za sve. */
.tl-circuit__svg rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: var(--radius, 14px);
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 130 870;     /* pražnjenje + prazan ostatak kruga */
  stroke-dashoffset: 0;
}
.tl-circuit__glow {
  stroke: var(--arc);
  stroke-width: 6;
  opacity: .5;
}
.tl-circuit__core {
  stroke: #fff;
  stroke-width: 1.7;
}

/* Jedan krug po ivici — i to je sve, bez ponavljanja. */
@keyframes tl-bolt-run {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1000; }
}

/* Treperenje — pražnjenje ne gori ravnomerno / a discharge never burns evenly */
@keyframes tl-circuit-flicker {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  10%  { opacity: .35; }
  14%  { opacity: 1; }
  22%  { opacity: .6; }
  27%  { opacity: 1; }
  46%  { opacity: .78; }
  52%  { opacity: 1; }
  68%  { opacity: .45; }
  74%  { opacity: .9; }
  88%  { opacity: .25; }
  100% { opacity: 0; }
}

html[data-circuit-style="bolt"][data-circuit="reveal"] .card.is-in .tl-circuit,
html[data-circuit-style="bolt"][data-circuit="both"]   .card.is-in .tl-circuit,
html[data-circuit-style="bolt"][data-circuit="hover"] :hover > .tl-circuit,
html[data-circuit-style="bolt"][data-circuit="both"]  :hover > .tl-circuit,
html[data-circuit-style="bolt"][data-circuit="both"]  .card.is-in:hover > .tl-circuit,
html[data-circuit-style="bolt"][data-circuit="reveal"] .nav a:hover > .tl-circuit,
html[data-circuit-style="bolt"][data-circuit="reveal"] .language-switch button:hover > .tl-circuit,
html[data-circuit-style="bolt"][data-circuit="reveal"] .back-top:hover > .tl-circuit {
  animation-name: tl-circuit-flicker-h;
}

html[data-circuit-style="bolt"][data-circuit="reveal"] .card.is-in .tl-circuit__svg rect,
html[data-circuit-style="bolt"][data-circuit="both"]   .card.is-in .tl-circuit__svg rect {
  animation: tl-bolt-run var(--circuit-time, 1.8s) linear
             calc(var(--delay, 0ms) + 320ms) both;
}
html[data-circuit-style="bolt"][data-circuit="hover"] :hover > .tl-circuit .tl-circuit__svg rect,
html[data-circuit-style="bolt"][data-circuit="both"]  :hover > .tl-circuit .tl-circuit__svg rect,
html[data-circuit-style="bolt"][data-circuit="both"]  .card.is-in:hover > .tl-circuit .tl-circuit__svg rect,
html[data-circuit-style="bolt"][data-circuit="reveal"] .nav a:hover > .tl-circuit .tl-circuit__svg rect,
html[data-circuit-style="bolt"][data-circuit="reveal"] .language-switch button:hover > .tl-circuit .tl-circuit__svg rect,
html[data-circuit-style="bolt"][data-circuit="reveal"] .back-top:hover > .tl-circuit .tl-circuit__svg rect {
  animation: tl-bolt-run-h var(--circuit-time, 1.8s) linear both;
}
/* Jezgro kasni za sjajem — pražnjenje ima glavu i rep. */
html[data-circuit-style="bolt"] .tl-circuit__core { animation-delay: inherit; }

/* Filter je skup na slabijim uređajima — na uskim ekranima ide bez šuma. */
/* Filter je skup na slabijim uređajima — na uskim ekranima ide bez šuma. */
@media (max-width: 640px) {
  .tl-circuit__svg { filter: none; }
  .tl-circuit__glow { stroke-width: 4; }
}

/* Elementi koji nose okvir moraju biti sidro za apsolutni sloj. */
.nav a,
.language-switch button,
.back-top { position: relative; }

/* Dugmad su sitnija — kraće pražnjenje i tanja linija. */
.nav a > .tl-circuit,
.language-switch button > .tl-circuit,
.back-top > .tl-circuit {
  --circuit-time: 1.15s;
  --circuit-width: 1.2px;
}
.nav a > .tl-circuit .tl-circuit__glow,
.language-switch button > .tl-circuit .tl-circuit__glow { stroke-width: 4; }
.nav a > .tl-circuit .tl-circuit__core,
.language-switch button > .tl-circuit .tl-circuit__core { stroke-width: 1.3; }



.card__badge {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--surface);
  color: var(--gold-2);
  font-size: 20px;
  line-height: 1;
  z-index: 3;
}

.card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 17px 18px;
}

.card__name {
  font-size: 1.55rem;
  line-height: 1.05;
  color: var(--text-strong);
}

.card__desc {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: .82rem;
}

.card__meta {
  margin-top: auto;
  padding-top: 10px;
  color: var(--soft);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.card__leader { display: none; }

/* ==========================================================================
   CENA / PRICE — data-price="blob | outline | plain | dots"
   ========================================================================== */
.price {
  flex: 0 0 auto;
  align-self: flex-start;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: .78rem;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  color: var(--price-fg);
  background: var(--price-bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.card.is-in .price {
  animation: tl-charge 1.4s ease-out calc(var(--delay, 0ms) + 320ms) both;
}

html[data-price="outline"] .price {
  background: transparent;
  color: var(--gold-2);
  border: 1px solid var(--gold);
  box-shadow: none;
}
html[data-price="outline"] .card.is-in .price { animation: none; }

html[data-price="plain"] .price,
html[data-price="dots"] .price {
  background: transparent;
  color: var(--gold-2);
  box-shadow: none;
  padding: 4px 0;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .95rem;
}
html[data-price="plain"] .card.is-in .price,
html[data-price="dots"] .card.is-in .price { animation: none; }

/* Tačkasta linija između naziva i cene / dotted leader between name and price */
html[data-price="dots"][data-cards="compact"] .card__leader,
html[data-price="dots"][data-cards="plaque"] .card__leader {
  display: block;
  flex: 1 1 auto;
  align-self: flex-end;
  margin: 0 8px 7px;
  border-bottom: 1px dotted var(--line);
  min-width: 18px;
}

/* Sakrivena cena / hidden price */
html[data-prices="off"] .price,
.card.no-price .price { display: none; }

/* ==========================================================================
   SKIN KARTICE 1 — PORTRAIT (slika gore, tekst centriran)
   ========================================================================== */
html[data-cards="portrait"] .card { display: flex; flex-direction: column; }
html[data-cards="portrait"] .card__media { height: clamp(200px, 22vw, 275px); flex: 0 0 auto; }
html[data-cards="portrait"] .card__body { text-align: center; align-items: center; padding: 24px 18px 20px; flex: 1 1 auto; }
html[data-cards="portrait"] .card__top { display: contents; }
html[data-cards="portrait"] .card__name { order: 1; font-size: 1.42rem; letter-spacing: .02em; color: var(--gold-2); }
html[data-cards="portrait"] .card__desc { order: 2; min-height: 38px; }
html[data-cards="portrait"] .card__meta { order: 3; margin-top: 10px; padding-top: 0; }
html[data-cards="portrait"] .price {
  order: 4;
  align-self: center;
  margin-top: 14px;
  position: relative;
}
/* mala zlatna crta iznad cene / small gold rule above the price */
html[data-cards="portrait"] .price::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
}
html[data-cards="portrait"] .card.no-image .card__media { display: none; }

/* ==========================================================================
   SKIN KARTICE 2 — COMPACT (slika levo — raspored originalne stranice)
   ========================================================================== */
html[data-cards="compact"] .card {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 150px;
}
html[data-cards="compact"] .card__media { min-height: 150px; height: 100%; }
html[data-cards="compact"] .card__media::after { background: linear-gradient(90deg, transparent 55%, rgba(3,4,6,.35)); }
html[data-cards="compact"] .card__badge { left: 12px; bottom: 12px; transform: none; width: 30px; height: 30px; font-size: 15px; }
html[data-cards="compact"] .card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
html[data-cards="compact"] .card.no-image { grid-template-columns: 1fr; }
html[data-cards="compact"] .card.no-image .card__media { display: none; }

/* ==========================================================================
   SKIN KARTICE 3 — OVERLAY (tekst preko slike)
   ========================================================================== */
html[data-cards="overlay"] .card { display: block; aspect-ratio: 3 / 4; }
html[data-cards="overlay"] .card__media { position: absolute; inset: 0; height: 100%; }
html[data-cards="overlay"] .card__media::after {
  background: var(--card-overlay-scrim);
}
html[data-cards="overlay"] .card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 20px;
}
html[data-cards="overlay"] .card__name,
html[data-cards="overlay"] .card__desc,
html[data-cards="overlay"] .card__meta { color: #fff; }
html[data-cards="overlay"] .card__desc { color: rgba(255,255,255,.78); }
html[data-cards="overlay"] .card__meta { color: rgba(255,255,255,.62); margin-top: 8px; }
html[data-cards="overlay"] .card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
html[data-cards="overlay"] .card__badge { left: auto; right: 14px; top: 14px; bottom: auto; transform: none; }
html[data-cards="overlay"] .card.no-image .card__media { background: var(--card-bg); }
html[data-cards="overlay"] .card.no-image .card__media::after { opacity: .25; }

/* ==========================================================================
   SKIN KARTICE 4 — PLAQUE (bez slike, klasična kartа pića)
   ========================================================================== */
html[data-cards="plaque"] .card { display: block; }
html[data-cards="plaque"] .card__media { display: none; }
html[data-cards="plaque"] .card__body { padding: 20px 22px; }
html[data-cards="plaque"] .card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
html[data-cards="plaque"] .card__name { font-size: 1.5rem; color: var(--gold-2); }
html[data-cards="plaque"] .card__meta { margin-top: 10px; }
html[data-cards="plaque"] .card:hover { transform: none; }

/* Slika nije dostupna / image failed to load */
.card.no-image .card__gleam { display: none; }

/* ==========================================================================
   PODNOŽJE / FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
  padding: 42px 20px 55px;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
}

.footer strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 6px;
}

.footer__symbol {
  font-size: 30px;
  color: var(--gold);
  margin-bottom: 8px;
  animation: tl-spark 11s ease-in-out infinite;
}

.footer__local {
  display: none;
  margin: 16px auto 0;
  max-width: 640px;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--gold-2);
  font-size: .7rem;
  letter-spacing: .06em;
}
.footer__local.show { display: block; }
.footer__local button {
  margin-left: 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: inherit;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: .68rem;
}

/* Nazad na vrh / back to top */
.back-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--surface);
  color: var(--gold-2);
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 30;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { transform: translateY(-3px); }

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 70px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .menu-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body::before {
    background-size: 260px 260px, 620px auto, 520px auto;
    background-position: center center, left -180px top 210px, right -180px bottom 220px;
    opacity: calc(var(--art-opacity) * .9);
  }
  .hero { min-height: 520px; }
  .hero__diagram { background-size: 560px auto; background-position: right -180px center; opacity: .24; }
  .menu-section { padding: 22px 16px; }
  .menu-section::before { background-size: 520px auto; background-position: right -160px top 40px; opacity: calc(var(--section-art-opacity) * .82); }
  html[data-cards="portrait"] .card__media { height: 210px; }
}

@media (max-width: 620px) {
  .menu-grid { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); gap: 10px; }
  html[data-cards="compact"] .menu-grid,
  html[data-cards="plaque"] .menu-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body::before {
    background-size: 220px 220px, 470px auto, 400px auto;
    background-position: center center, left -190px top 170px, right -170px bottom 170px;
  }
  .hero { min-height: 470px; padding-bottom: 40px; }
  .hero__diagram { background-size: 430px auto; background-position: right -170px top 54%; opacity: .18; }
  .hero p { font-size: .85rem; }
  .hero__quote { font-size: 1.05rem; }
  .nav-inner { padding-inline: 12px; gap: 8px; }
  .nav a { padding: 8px 11px; }
  .language-switch button { padding: 7px 9px; }
  main { padding-inline: 14px; }
  .menu-section { border-radius: 24px; margin-bottom: 24px; }
  .menu-section::before { background-size: 400px auto; background-position: right -145px top 28px; }
  .section-theme { font-size: .78rem; max-width: none; }
  html[data-cards="portrait"] .card__media { height: 170px; }
  html[data-cards="portrait"] .card__body { padding: 18px 10px 16px; }
  html[data-cards="portrait"] .card__name { font-size: 1.15rem; }
  html[data-cards="portrait"] .card__desc { font-size: .72rem; min-height: 34px; }
  html[data-cards="compact"] .card { grid-template-columns: 112px 1fr; min-height: 132px; }
  html[data-cards="compact"] .card__media { min-height: 132px; }
  .card__body { padding: 14px; }
  .card__name { font-size: 1.35rem; }
  .price { font-size: .71rem; padding: 6px 8px; }
  .card__desc { font-size: .76rem; }
}