/* ------------------------------------------------------------------ *
 *  navrh interieru . projekt interieru . realizacia interieru
 *  Paleta a typografia sú prevzaté 1:1 z pôvodného dizajnového mockupu.
 * ------------------------------------------------------------------ */
:root{
  --paper:#EAE6DF;
  --ink:#2B2926;
  --line:#4A463F;
  --brass:#A8814C;
  --soft:#D8D2C7;
  --shadow:#C4BDB0;

  /* rozostup dielikov stupnice: jeden dielik = 5°, teda 2.4 px na stupeň.
     JS si tieto dve hodnoty číta, aby sa stupnica a uhol nikdy nerozišli. */
  --tick-step-deg:5;
  --tick-px:12;

  /* Hlavicka a vodotlac su zviazane cez tieto premenne: logo ma presne
     vysku trojriadkoveho textu vlavo. Staci zmenit --brand-size a zmensi
     sa oboje naraz a zostane zarovnane. */
  --brand-size:clamp(15px,3.1vw,22px);
  --brand-lh:1.35;
  --header-pt:20px;                 /* horny padding hlavicky */
  /* polovicne prevysenie riadku: line-height je 1.35, takze nad prvym a
     pod poslednym riadkom je (1.35-1)/2 em prazdna. Odpocitam ju, aby
     logo licovalo s viditelnym textom, nie s riadkovymi boxmi. */
  --brand-half-lead:calc((var(--brand-lh) - 1) / 2 * var(--brand-size));
  --logo-h:calc(var(--brand-size) * var(--brand-lh) * 3 - 2 * var(--brand-half-lead));
  --logo-w:calc(var(--logo-h) * 1.0582);   /* logo.gif je 600x567 */

  /* skutočná výška viditeľnej plochy. JS ju prepisuje z visualViewport pri
     každom resize/otočení; 100dvh je fallback, kým sa JS nedostane k slovu.
     Bez tohto sa po otočení telefónu rozsypala pätička, lebo fixed prvky
     počítali s výškou, ktorú lišta prehliadača medzitým zmenila. */
  --app-h:100dvh;
}
/* ------------------------------------------------------------------ *
 *  Orbitron – display font, hostovany LOKALNE (ziadne Google CDN).
 *
 *  !!! ORBITRON NEMA LATIN-EXT !!!
 *  Overene citanim cmap tabulky upstream TTF: font ma 207 glyfov a
 *  z 34 slovenskych znakov s diakritikou mu chyba tychto 14:
 *
 *      č  ď  ĺ  ľ  ň  ŕ  ť
 *      Č  Ď  Ĺ  Ľ  Ň  Ŕ  Ť
 *
 *  (teda vsetko s makcenom okrem š/ž, plus ĺ a ŕ)
 *  Font MA:  á ä é í ó ô š ú ý ž  Á Ä É Í Ó Ô Š Ú Ý Ž
 *
 *  Preto je cely viditelny text webu ZAMERNE BEZ DIAKRITIKY. Ak sa taky
 *  znak do textu predsa dostane, prehliadac ho vykresli fallback fontom –
 *  jedno pismeno uprostred slova v inom reze. Nie je to prazdny stvorcek,
 *  ale vyzera to zle.
 *
 *  Diakritika ZOSTAVA a je ziaduca v: <title>, meta description, Open
 *  Graph, JSON-LD, sr-only textoch, aria-labeloch a alt textoch. Tie font
 *  nevykresluje a pre SEO aj pristupnost je spravna slovencina dolezita.
 *
 *  Admin pri zadavani nazvu vizualizacie na chybajuci znak upozorni a
 *  ponukne verziu bez diakritiky.
 * ------------------------------------------------------------------ */
@font-face{
  font-family:'Orbitron';
  font-style:normal;
  font-weight:400 900;          /* variabilny rez, jeden subor pre vsetky vahy */
  font-display:swap;
  src:url('../fonts/orbitron-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;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--paper);color:var(--ink);
  font-family:'Orbitron',"Manrope",-apple-system,"Segoe UI",sans-serif;font-size:15px}
@font-face{font-family:Manrope;src:local("Manrope")}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0;overflow:hidden;touch-action:none;background:var(--paper)}
.stage canvas{display:block}

/* Pannellum chrome zladené s paletou. Vlastné ovládanie knižnice je vypnuté
   (showControls:false), ostáva len nenápadný indikátor načítania. */
.pnlm-container{background:var(--paper);font-family:inherit;cursor:grab}
.pnlm-grab{cursor:grab}
.pnlm-grabbing{cursor:grabbing}
.pnlm-load-box{background:rgba(234,230,223,.82);color:var(--ink);border:none;
  border-radius:0;box-shadow:none;font-family:inherit;font-size:12px;
  letter-spacing:.12em;text-transform:lowercase;width:200px;height:auto;
  padding:14px 0;margin:-30px 0 0 -100px}
.pnlm-load-box p{font-size:12px;margin:0 0 10px}
.pnlm-lbox{display:none}
.pnlm-load-box .pnlm-lbar{background:none;border:1px solid var(--line);
  width:150px;height:6px;margin:0 auto}
.pnlm-load-box .pnlm-lbar-fill{background:var(--brass)}
.pnlm-load-box .pnlm-lmsg{color:var(--line)}
.pnlm-panorama-info,.pnlm-about-msg{display:none}
.pnlm-dragfix{touch-action:none}

/* ---------- chrome ---------- */
/* výška z --app-h, nie inset:0 – po otočení telefónu sedí pätička tam,
   kde reálne končí viditeľná plocha */
.chrome{position:fixed;left:0;right:0;top:0;height:var(--app-h);
  pointer-events:none;z-index:10;
  display:flex;flex-direction:column;justify-content:space-between}
.chrome a,.chrome button{pointer-events:auto}

/* Scrim: nad reálnou fotkou sa tmavý text na svetlej stene strácal.
   Jemný prechod z papierovej farby, paleta ostáva nezmenená.
   position:absolute vyradí pseudoprvky z flex layoutu, z-index:-1 ich
   pošle pod header/footer, ale stále nad plátno panorámy. */
.chrome::before,.chrome::after{content:"";position:absolute;left:0;right:0;
  z-index:-1;pointer-events:none}
.chrome::before{top:0;height:calc(env(safe-area-inset-top,0px) + 150px);
  background:linear-gradient(180deg,rgba(234,230,223,.88) 0%,rgba(234,230,223,.6) 45%,rgba(234,230,223,0) 100%)}
.chrome::after{bottom:0;height:calc(env(safe-area-inset-bottom,0px) + 220px);
  background:linear-gradient(0deg,rgba(234,230,223,.92) 0%,rgba(234,230,223,.68) 45%,rgba(234,230,223,0) 100%)}

/* svetlý halo pod drobným textom – druhá poistka čitateľnosti */
.brand,.credit,.deg,.tick.major span,.hint{text-shadow:0 1px 3px rgba(234,230,223,.95)}

/* Pravy padding sa pocita z realnej sirky loga, takze pod nu nadpis
   nikdy nezabehne ani ked sa logo zvacsi. */
header{display:flex;justify-content:flex-start;align-items:flex-start;
  padding:calc(env(safe-area-inset-top,0px) + var(--header-pt))
          calc(env(safe-area-inset-right,0px) + var(--logo-w) + 32px) 0
          calc(env(safe-area-inset-left,0px) + 24px)}

/* Povodny podnadpis povyseny na hlavny nadpis.
   Tri samostatne riadky VZDY, na kazdom zariadeni vratane desktopu.
   Jednoriadkova varianta s bodkami-oddelovacmi bola zrusena aj s media
   query, ktora ju zapinala. */
/* Orbitron je sirsi a opticky vacsi nez povodny stack, tak nizsi strop
   aj spodok a mensi prostrih – font ma vlastnu vzdusnost.
   Odmerane z hmtx: "realizacia interieru" = 10.29 em pri vahe 400.
   Pri 15px a rezerve +20 % na vahu 700 to je ~193 px; na 320px displeji
   ostava po odpocitani paddingov 226 px, takze sa to zmesti. */
.brand{font-size:var(--brand-size);font-weight:700;line-height:var(--brand-lh);
  letter-spacing:.01em;color:var(--ink)}
.brand .ln{display:block}

/* ---------- bočný stĺpec: kontakt, fullscreen, prepínanie ---------- */
.switch{position:fixed;right:calc(env(safe-area-inset-right,0px) + 16px);
  top:calc(var(--app-h) / 2);transform:translateY(-50%);
  max-height:calc(var(--app-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:10}

/* jednotný krúžok pre kontaktné ikony, fullscreen aj ▲▼ */
.rb{width:44px;height:44px;flex:none;border:1.5px solid var(--ink);border-radius:50%;
  background:rgba(234,230,223,.75);backdrop-filter:blur(4px);color:var(--ink);
  font-size:14px;line-height:1;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s}
.rb:hover,.rb:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.rb[disabled]{opacity:.35;cursor:default}
.rb[disabled]:hover{background:rgba(234,230,223,.75);color:var(--ink)}
/* Nespoliehať sa na UA pravidlo [hidden]: .rb{display:flex} je autorský štýl
   a v kaskáde by ho prebil. Preto explicitne. */
.rb[hidden]{display:none}

/* fullscreen prepína medzi dvoma ikonami */
#fs .i-close{display:none}
#fs.is-on .i-open{display:none}
#fs.is-on .i-close{display:block}

/* Bodky sú LEN indikátor pozície – nie sú klikateľné a musia sa zmestiť
   aj pri 20+ vizualizáciách, preto 4px bodka + 4px medzera a aktívna sa
   odlišuje výhradne farbou, nie veľkosťou. */
.dots{display:flex;flex-direction:column;gap:4px;padding:2px 0;
  min-height:0;overflow:hidden;justify-content:center;
  pointer-events:none;cursor:default}
.dots i{width:4px;height:4px;flex:none;border-radius:50%;
  background:var(--shadow);transition:background .3s}
.dots i.on{background:var(--brass)}

/* ---------- vodotlac ----------
   Pravy horny roh, vyskou presne zarovnana s trojriadkovym textom vlavo:
   horny okraj na urovni prveho riadku, spodny na urovni tretieho. Vyska
   sa pocita z --brand-size, takze text aj logo sa menia naraz.
   Bocny stlpec je zvisle vycentrovany, jeho horna hrana je hlboko pod
   logom – overene aj pre nizky landscape. */
.watermark{position:absolute;z-index:-1;pointer-events:none;user-select:none;
  top:calc(env(safe-area-inset-top,0px) + var(--header-pt) + var(--brand-half-lead));
  right:calc(env(safe-area-inset-right,0px) + 24px);
  height:var(--logo-h);width:auto;opacity:.3;mix-blend-mode:multiply}

/* ---------- dole: uhol + stupnica + kontakt ---------- */
footer{padding:0 calc(env(safe-area-inset-right,0px) + 24px)
        calc(env(safe-area-inset-bottom,0px) + 18px)
        calc(env(safe-area-inset-left,0px) + 24px)}
.deg{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;
  color:var(--brass);white-space:nowrap;margin-bottom:8px}

.ruler{position:relative;height:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ruler .ticks{position:absolute;top:0;left:50%;height:100%;display:flex;will-change:transform}
.tick{width:1px;height:10px;background:var(--line);margin-right:11px;flex:none;position:relative}
.tick.major{height:16px;width:1.5px}
/* Odmerane: najsirsi popisok "330" ma v Orbitrone 26.4 px pri 10px a
   prostrihu .05em, box ma 34 px a hlavne dieliky su od seba 72 px –
   popisky sa nemozu prekryt. */
.tick.major span{position:absolute;top:18px;left:-17px;width:34px;text-align:center;
  font-size:10px;letter-spacing:.02em;color:var(--line)}
.needle{position:absolute;left:50%;top:0;width:2px;height:20px;background:var(--brass);transform:translateX(-50%)}

.credit{margin-top:12px;font-size:12px;color:var(--line);letter-spacing:.01em;
  text-align:center}
/* Nezlomiteľný celok: číslo, e-mail aj meno vrátane svojej bodky.
   Zámerne NIE na celom .credit – riadok sa musí vedieť zalomiť medzi
   položkami, len nie vnútri nich. */
.credit .nb,.fallback-contact .nb{white-space:nowrap}
.credit b{color:var(--brass)}
.credit a{color:inherit;text-decoration:none}
.credit a:hover,.credit a:focus-visible{color:var(--ink);text-decoration:underline;outline:none}

/* Desktop má pätičku výrazne väčšiu. Dva jasné stavy cez media query,
   žiadny plynulý clamp – telefón aj tablet zostávajú na 12px. */
@media (min-width:1024px){
  .credit{font-size:20px}
}

/* z-index musí byť nad .chrome (10), inak nápoveda zapadne pod spodný scrim */
.hint{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:11;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--line);
  display:flex;align-items:center;gap:10px;opacity:1;transition:opacity .6s;pointer-events:none}
.hint.gone{opacity:0}
.hint::before,.hint::after{content:"";width:34px;height:1px;background:var(--line)}

/* len pre čítačky obrazovky */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Fallback bez JS / pri chybe načítania.
   Skrytý je DEFAULT a viditeľnosť je opt-in cez .is-visible. Nespoliehať sa
   tu na atribút [hidden]: to je pravidlo UA štýlu a ktorýkoľvek autorský
   `display` ho v kaskáde prebije, takže by fallback trvalo prekrýval web. */
.fallback{display:none}
.fallback.is-visible{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
  background:var(--paper);text-align:center}
.fallback img{max-width:min(100%,900px);height:auto;border:1px solid var(--shadow)}
.fallback p{font-size:13px;color:var(--line);letter-spacing:.06em;max-width:46ch}
.fallback-contact{font-size:12px;color:var(--line);letter-spacing:.03em}
.fallback-contact b{color:var(--brass)}

@media (max-width:640px){
  header{padding-left:calc(env(safe-area-inset-left,0px) + 16px);
         padding-right:calc(env(safe-area-inset-right,0px) + var(--logo-w) + 24px)}
  footer{padding-left:calc(env(safe-area-inset-left,0px) + 16px);
         padding-right:calc(env(safe-area-inset-right,0px) + 16px)}
  .switch{right:calc(env(safe-area-inset-right,0px) + 10px)}
  .watermark{right:calc(env(safe-area-inset-right,0px) + 12px)}
  .hint{bottom:118px}
}

/* Na šírku je výšky málo – chrome sa stiahne, aby panoráma dýchala. */
@media (max-height:480px) and (orientation:landscape){
  .chrome::before{height:calc(env(safe-area-inset-top,0px) + 92px)}
  .chrome::after{height:calc(env(safe-area-inset-bottom,0px) + 130px)}
  /* Tri riadky zaberu v landscape viac vysky nez predtym jeden, tak
     zmensim text aj logo naraz – jedna premenna, zarovnanie zostava. */
  :root{--brand-size:12px;--header-pt:10px}
  footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  .deg{margin-bottom:4px}
  .ruler{height:22px}
  .tick.major span{display:none}
  .credit{margin-top:6px}
  .hint{display:none}
  .switch{gap:6px}
  .rb{width:34px;height:34px}
  .rb svg{width:15px;height:15px}
  .dots{gap:3px}
  .dots i{width:3px;height:3px}
}

@media (prefers-reduced-motion:reduce){
  .dots i,.hint,.rb{transition:none}
  .ruler .ticks{will-change:auto}
}