/* ==========================================================================
   TESLA LOUNGE & BAR — theme.css
   Tokeni, skinovi i animacije / Design tokens, skins and animations.

   Tipografija i naslovi su preuzeti iz originalne lounge-menu stranice:
   Cormorant Garamond za naslove, Montserrat za tekst.
   Typography and headings are inherited from the original lounge-menu page.

   Skin se bira preko atributa na <html>:
     data-skin="blueprint | midnight | ivory | copper"
     data-cards="portrait | compact | overlay | plaque"
     data-price="blob | outline | plain | dots"
     data-anim="full | subtle | off"
   ========================================================================== */

/* ==========================================================================
   FONTOVI / FONTS
   Fontovi se serviraju sa našeg servera, ne sa fonts.googleapis.com. Link ka
   Google Fonts šalje IP adresu svakog posetioca Google-u pri prvom iscrtavanju,
   pre nego što je iko mogao da pristane ili odbije (GDPR; LG München I,
   3 O 17493/20). Oba fonta su pod SIL OFL 1.1 — vidi assets/fonts/OFL-*.txt.
   Promenljivi fontovi: jedan fajl po pismu pokriva sve debljine, a browser
   preuzima samo pismo koje stranica stvarno koristi (unicode-range).

   Fonts are served from our own origin rather than fonts.googleapis.com: the
   Google link hands every visitor's IP to Google on first paint, before any
   consent could be asked. Both are SIL OFL 1.1. Variable fonts: one file per
   script covers every weight, and unicode-range means only the scripts a page
   actually uses are downloaded.
   ========================================================================== */
/* cyrillic-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tesla-grid: url("../images/art/tesla-grid-c31dd816.svg");
  --tesla-diagram-a: url("../images/art/tesla-diagram-a-4bba773c.svg");
  --tesla-diagram-b: url("../images/art/tesla-diagram-b-b700051e.svg");
  --section-invention-coil: url("../images/art/section-invention-coil-d4d3f26c.svg");
  --section-invention-motor: url("../images/art/section-invention-motor-5e5bec36.svg");
  --section-invention-turbine: url("../images/art/section-invention-turbine-d371308e.svg");
  --section-invention-tower: url("../images/art/section-invention-tower-632cc2fe.svg");
  --section-invention-oscillator: url("../images/art/section-invention-oscillator-bd4cf01d.svg");
  --section-invention-radiant: url("../images/art/section-invention-radiant-3398c367.svg");

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-lg: 28px;
  --maxw: 1200px;

  --art-opacity: .72;
  --section-art-opacity: .22;
  --sheen: rgba(255,255,255,.55);
}

/* ==========================================================================
   SKIN 1 — BLUEPRINT (original Tesla Lounge look)
   ========================================================================== */
html[data-skin="blueprint"] {
  --bg: #10100f;
  --bg-grad:
    radial-gradient(circle at 10% 0%, rgba(183,152,90,.10), transparent 32%),
    linear-gradient(180deg, #0c0c0b 0%, #111110 48%, #0e0e0d 100%);
  --surface: #171715;
  --surface-2: #1d1c19;
  --text: #f5f0e7;
  --text-strong: #fffaf1;
  --muted: #aaa398;
  --soft: #d5cbb8;
  --gold: #b7985a;
  --gold-2: #d7c49d;
  --accent: #b7985a;
  --line: rgba(183,152,90,.25);
  --shadow: 0 18px 45px rgba(0,0,0,.24);

  --panel-bg: linear-gradient(180deg, rgba(24,24,22,.76), rgba(14,14,13,.92));
  --panel-border: rgba(183,152,90,.14);
  --panel-glow: rgba(183,152,90,.10);

  --card-bg:
    linear-gradient(145deg, rgba(183,152,90,.03), transparent 55%),
    linear-gradient(145deg, var(--surface-2), var(--surface));
  --card-border: rgba(255,255,255,.06);
  --card-border-hover: rgba(183,152,90,.55);
  --card-shadow-hover: 0 22px 55px rgba(0,0,0,.45), 0 0 26px rgba(183,152,90,.10);

  --nav-bg: rgba(16,16,15,.92);
  --nav-chip: rgba(255,255,255,.10);
  --footer-bg: #0b0b0a;

  --price-bg: var(--gold);
  --price-fg: #16130d;

  --hero-scrim: linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.62) 45%, rgba(5,5,5,.32) 100%);
  --flare: rgba(183,152,90,.55);
  --arc: #d7c49d;
}

/* ==========================================================================
   SKIN 2 — MIDNIGHT (plavo-zlatna varijanta / blue-gold variant)
   ========================================================================== */
html[data-skin="midnight"] {
  --bg: #03070e;
  --bg-grad:
    radial-gradient(circle at 50% 8%, rgba(15,91,170,.20), transparent 34%),
    linear-gradient(180deg, #02050a 0%, #050b13 48%, #02060c 100%);
  --surface: #0b1420;
  --surface-2: #0e1a28;
  --text: #f5f1e8;
  --text-strong: #ffffff;
  --muted: #a9a7a0;
  --soft: #c8cdd6;
  --gold: #d6ad5b;
  --gold-2: #f1d28b;
  --accent: #168cff;
  --line: rgba(214,173,91,.30);
  --shadow: 0 18px 50px rgba(0,0,0,.42);

  --panel-bg: linear-gradient(180deg, rgba(9,18,30,.78), rgba(2,6,12,.94));
  --panel-border: rgba(214,173,91,.16);
  --panel-glow: rgba(22,140,255,.12);

  --card-bg: linear-gradient(160deg, rgba(14,25,38,.92), rgba(3,8,14,.98));
  --card-border: rgba(214,173,91,.27);
  --card-border-hover: rgba(214,173,91,.70);
  --card-shadow-hover: 0 15px 50px rgba(0,0,0,.55), 0 0 28px rgba(22,140,255,.14);

  --nav-bg: rgba(2,6,12,.91);
  --nav-chip: rgba(214,173,91,.20);
  --footer-bg: #02060c;

  --price-bg: var(--gold);
  --price-fg: #0a0f16;

  --hero-scrim: linear-gradient(90deg, rgba(2,6,12,.96) 0%, rgba(2,6,12,.78) 42%, rgba(2,6,12,.30) 100%);
  --flare: rgba(22,140,255,.62);
  --arc: #6fc0ff;
}

/* ==========================================================================
   SKIN 3 — IVORY (svetla, dnevna varijanta / light daytime variant)
   ========================================================================== */
html[data-skin="ivory"] {
  --bg: #f6f1e7;
  --bg-grad:
    radial-gradient(circle at 12% 0%, rgba(150,112,44,.10), transparent 34%),
    linear-gradient(180deg, #fbf7ef 0%, #f3ece0 55%, #eee6d8 100%);
  --surface: #fffdf8;
  --surface-2: #f7f1e6;
  --text: #221f19;
  --text-strong: #14120e;
  --muted: #6d6557;
  --soft: #4a4438;
  --gold: #96702c;
  --gold-2: #7d5c22;
  --accent: #96702c;
  --line: rgba(150,112,44,.32);
  --shadow: 0 16px 40px rgba(60,45,20,.10);

  --art-opacity: .40;
  --section-art-opacity: .16;
  --sheen: rgba(255,255,255,.85);

  --panel-bg: linear-gradient(180deg, rgba(255,253,248,.86), rgba(246,240,230,.94));
  --panel-border: rgba(150,112,44,.20);
  --panel-glow: rgba(150,112,44,.10);

  --card-bg: linear-gradient(145deg, #fffdf8, #f4ede0);
  --card-border: rgba(150,112,44,.22);
  --card-border-hover: rgba(150,112,44,.62);
  --card-shadow-hover: 0 20px 45px rgba(60,45,20,.16);

  --nav-bg: rgba(251,247,239,.93);
  --nav-chip: rgba(34,31,25,.12);
  --footer-bg: #f1e9db;

  --price-bg: var(--gold);
  --price-fg: #fff8e9;

  --hero-scrim: linear-gradient(90deg, rgba(251,247,239,.95) 0%, rgba(251,247,239,.76) 44%, rgba(251,247,239,.34) 100%);
  --flare: rgba(255,236,190,.85);
  --arc: #b98d3c;
}

/* ==========================================================================
   SKIN 4 — COPPER (topla bakarna varijanta / warm copper variant)
   ========================================================================== */
html[data-skin="copper"] {
  --bg: #141010;
  --bg-grad:
    radial-gradient(circle at 82% 0%, rgba(192,122,74,.14), transparent 34%),
    linear-gradient(180deg, #120e0c 0%, #181312 50%, #100c0b 100%);
  --surface: #1d1614;
  --surface-2: #241b18;
  --text: #f6ece2;
  --text-strong: #fff6ec;
  --muted: #b3a396;
  --soft: #d9c8b8;
  --gold: #c07a4a;
  --gold-2: #e6b183;
  --accent: #c07a4a;
  --line: rgba(192,122,74,.30);
  --shadow: 0 18px 45px rgba(0,0,0,.34);

  --panel-bg: linear-gradient(180deg, rgba(35,25,21,.80), rgba(16,12,11,.94));
  --panel-border: rgba(192,122,74,.18);
  --panel-glow: rgba(192,122,74,.14);

  --card-bg: linear-gradient(150deg, rgba(42,30,24,.95), rgba(19,14,12,.98));
  --card-border: rgba(192,122,74,.20);
  --card-border-hover: rgba(230,177,131,.62);
  --card-shadow-hover: 0 22px 55px rgba(0,0,0,.50), 0 0 26px rgba(192,122,74,.16);

  --nav-bg: rgba(18,14,12,.92);
  --nav-chip: rgba(255,255,255,.10);
  --footer-bg: #0f0c0a;

  --price-bg: var(--gold);
  --price-fg: #1a0f08;

  --hero-scrim: linear-gradient(90deg, rgba(10,7,6,.90) 0%, rgba(10,7,6,.64) 45%, rgba(10,7,6,.30) 100%);
  --flare: rgba(230,150,90,.60);
  --arc: #e6b183;
}

/* ==========================================================================
   OSNOVA / BASE
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background: var(--bg-grad);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; width: 100%; }

/* Blueprint crteži u pozadini / blueprint drawings in the background */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  opacity: var(--art-opacity);
  background-image: var(--tesla-grid), var(--tesla-diagram-a), var(--tesla-diagram-b);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 320px 320px, min(62vw, 860px) auto, min(54vw, 760px) auto;
  background-position: center center, left -180px top 150px, right -140px bottom 140px;
  filter: saturate(.9);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.78) 45%, rgba(0,0,0,.96));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.78) 45%, rgba(0,0,0,.96));
}

body::after {
  z-index: 0;
  background:
    radial-gradient(circle at 18% 18%, var(--panel-glow), transparent 24%),
    radial-gradient(circle at 82% 70%, var(--panel-glow), transparent 22%);
}

html[data-bg-art="off"] body::before { display: none; }

/* Tipografija — identična originalnoj lounge-menu stranici
   Typography — identical to the original lounge-menu page */
h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
}

h1 {
  font-size: clamp(3.4rem, 10vw, 7rem);
  line-height: .82;
  letter-spacing: -.03em;
  max-width: 750px;
}

.eyebrow {
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold-2);
  font-weight: 700;
  margin-bottom: 10px;
}

/* ==========================================================================
   ANIMACIJE / ANIMATIONS
   ========================================================================== */

/* Spori "ken burns" zum na hero slici */
@keyframes tl-kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.17) translate3d(-2%, -1.6%, 0); }
}

/* Bljesak svetla koji lagano lebdi preko hero slike / drifting lens flare */
@keyframes tl-flare {
  0%   { transform: translate3d(-14%, 8%, 0) scale(1);    opacity: .30; }
  50%  { transform: translate3d(10%, -6%, 0) scale(1.30); opacity: .80; }
  100% { transform: translate3d(-14%, 8%, 0) scale(1);    opacity: .30; }
}

/* Odsjaj koji prelazi preko površine / specular light sweep */
@keyframes tl-glare {
  0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translateX(260%) skewX(-18deg); opacity: 0; }
}

/* Struja koja teče kroz linije / current flowing along the arc paths */
@keyframes tl-arc-flow { to { stroke-dashoffset: -1400; } }
@keyframes tl-arc-pulse {
  0%, 100% { opacity: .18; }
  45%      { opacity: .70; }
}

/* Ulazak elementa u vidno polje / scroll reveal */
@keyframes tl-rise {
  from { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Sjaj koji prelazi preko slike pića / gleam sweeping across a drink image */
@keyframes tl-gleam {
  0%   { transform: translateX(-130%) rotate(9deg); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translateX(240%) rotate(9deg); opacity: 0; }
}
@keyframes tl-gleam-hover {
  0%   { transform: translateX(-130%) rotate(9deg); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translateX(240%) rotate(9deg); opacity: 0; }
}

/* Cena se "napuni" pri ulasku / price blob charges up on reveal */
@keyframes tl-charge {
  0%   { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 0 var(--flare); }
  55%  { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 18px 3px var(--flare); }
  100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 0 transparent; }
}

/* Zlatna linija ispod naslova sekcije se izvlači / heading rule draws itself */
@keyframes tl-draw-rule { from { width: 0; } to { width: 120px; } }

/* Treperenje simbola / brand symbol flicker */
@keyframes tl-spark {
  0%, 88%, 100% { opacity: 1; text-shadow: 0 0 14px var(--flare); }
  90%           { opacity: .45; text-shadow: none; }
  94%           { opacity: 1; text-shadow: 0 0 26px var(--flare); }
  96%           { opacity: .65; text-shadow: none; }
}

/* Elementi koji čekaju scroll / elements waiting to be revealed */
.reveal { opacity: 0; }
.reveal.is-in {
  animation: tl-rise .85s cubic-bezier(.22,.68,.28,1) var(--delay, 0ms) both;
}

/* Isključivanje animacija — po izboru u adminu ili po sistemskom podešavanju
   Animations off — by admin setting or by the visitor's OS preference */
html[data-anim="off"] *,
html[data-anim="off"] *::before,
html[data-anim="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-anim="off"] .reveal { opacity: 1; }

/* "Subtle" zadržava samo ulazak i spori zum / subtle keeps reveal + slow zoom */
html[data-anim="subtle"] .hero__glare,
html[data-anim="subtle"] .hero__arcs,
html[data-anim="subtle"] .card__gleam { display: none; }
html[data-anim="subtle"] .hero__image { animation-duration: 70s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; }
}

/* ==========================================================================
   ZAVESE PREKO SEKCIJA I SLIKA / per-skin scrims
   Izdvojene u promenljive da bi svaka tema (uključujući sezonske)
   kontrolisala svoja zatamnjenja.
   ========================================================================== */
:root {
  --panel-scrim: linear-gradient(90deg, rgba(11,11,10,.96) 0%, rgba(11,11,10,.88) 32%, rgba(11,11,10,.62) 68%, rgba(11,11,10,.90) 100%);
  --card-overlay-scrim: linear-gradient(0deg, rgba(3,4,6,.92) 6%, rgba(3,4,6,.55) 42%, transparent 72%);
  --media-scrim: linear-gradient(0deg, rgba(3,4,6,.55), transparent 46%);
}

html[data-skin="midnight"] {
  --panel-scrim: linear-gradient(90deg, rgba(2,6,12,.96) 0%, rgba(2,6,12,.88) 32%, rgba(2,6,12,.62) 68%, rgba(2,6,12,.90) 100%);
  --card-overlay-scrim: linear-gradient(0deg, rgba(2,6,12,.92) 6%, rgba(2,6,12,.55) 42%, transparent 72%);
  --media-scrim: linear-gradient(0deg, rgba(2,6,12,.55), transparent 46%);
}

html[data-skin="ivory"] {
  --panel-scrim: linear-gradient(90deg, rgba(251,247,239,.92) 0%, rgba(251,247,239,.80) 32%, rgba(251,247,239,.55) 68%, rgba(251,247,239,.88) 100%);
  --card-overlay-scrim: linear-gradient(0deg, rgba(20,17,12,.92) 6%, rgba(20,17,12,.55) 42%, transparent 72%);
  --media-scrim: linear-gradient(0deg, rgba(20,17,12,.42), transparent 46%);
}

html[data-skin="copper"] {
  --panel-scrim: linear-gradient(90deg, rgba(16,12,11,.96) 0%, rgba(16,12,11,.88) 32%, rgba(16,12,11,.62) 68%, rgba(16,12,11,.90) 100%);
  --card-overlay-scrim: linear-gradient(0deg, rgba(16,12,11,.92) 6%, rgba(16,12,11,.55) 42%, transparent 72%);
  --media-scrim: linear-gradient(0deg, rgba(16,12,11,.55), transparent 46%);
}