/* ==================================================
   RESET
================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
}

body{
overflow-x:hidden;
}

/* ==================================================
   GLASS – SPOLEČNÉ HODNOTY (DESIGN DNA)
================================================== */
:root {
  --top-bar-height: 0px;
  --glass-bg: rgba(255,255,255,0.42);
  --glass-blur: blur(14px);
  --glass-border: rgba(255,255,255,0.55);
}
/* ==================================================
   POZADÍ STRÁNKY
================================================== */
body {
  background-image: url("pozadi1.png"); /* PNG ve stejné složce */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}
/* ==================================================
   ZÁKLAD GLASS PANELU
================================================== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0px solid var(--glass-border);
}
/* ==================================================
   PRAVÝ VERTIKÁLNÍ GLASS PANEL (PŮLKA STRÁNKY)
================================================== */
.vertical-glass {
  position: fixed;
  top: var(--top-bar-height);
  right: 0;
  width: 50vw;
  height: calc(100vh - var(--top-bar-height));
  z-index: 3;
  pointer-events: auto;
}
.vertical-glass {
  --glass-bg: rgba(255,255,255,0.39);
  --glass-blur: blur 7px);
}
/* ==================================================
   MOBILNÍ OPTIMALIZACE
================================================== */
@media (max-width: 768px) {
  :root {
    --glass-bg: rgba(255,255,255,0.22);
    --glass-blur: blur(4px);
  }
  .top-glass {
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  .enter-button {
    bottom: 0;
    font-size: 16px;
    padding: 12px 0;
  }
}
/* ==================================================
   OBSAH GLASS PANELU – KVĚTINÁŘSTVÍ
================================================== */
.flower-content{
  position:absolute;
  top:50%;
  right:8%;
  transform:translateY(-50%);
  max-width:400px;
  text-align:left;
  pointer-events:auto;
}
/* NADPIS */
.flower-content h1{
  font-size:64px;
  color:white;
  font-weight:300;
  letter-spacing:0.05em;
  margin-bottom:16px;
  text-shadow:
    0 4px 20px rgba(0,0,0,0.25);
}
/* PODTEXT */
.flower-content p{
  font-size:20px;
  color:white;
  line-height:1.5;
  font-weight:300;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.25);
}

.flower-content h1{
  font-size:64px;
  color:white;
  font-weight:300;
  letter-spacing:0.05em;
  backdrop-filter: blur(2px);
}
/* ==================================================
   TEXT NA GLASS PANELU – KVĚTINÁŘSTVÍ
================================================== */
.flower-text{
  position:absolute;
  top:15%;
  right:15%;
  transform:translateY(-50%);
  text-align:right;
  max-width:900px;
  z-index:1000; /* text je nad vším */
}
/* ==================================================
   TEXT NA GLASS PANELU – PODNADIS A JEHO POSUN
================================================== */
.flower-text p{
font-size:26px;
color:rgba(255,255,255,0.95);
font-weight:300;
letter-spacing:0.12em;
margin-top:20px;
margin-right:65px;
text-shadow:
    0 4px 18px rgba(0,0,0,0.35);
}
/* ==================================================
   NADPIS – DUHOVÁ ANIMACE + LUXUSNÍ GLOW
================================================== */

.flower-text h1{
  display:inline-block;
  position:relative;
  font-family: "Parisienne", cursive;
  font-size:160px;
  font-weight:300;
  letter-spacing:0.03em;
  margin-bottom:12px;
  background: linear-gradient(
  90deg,
  #ffffff 0%,
  #f7e6c4 20%,   /* světlé zlato */
  #e4c27a 40%,   /* zlatá */
  #c89b52 50%,   /* hlubší zlato */
  #8b6a3f 60%,   /* hnědo-zlatá */
  #e4c27a 75%,   /* zpět zlato */
  #f7e6c4 90%,   /* champagne */
  #ffffff 100%
);
  background-size:400% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: rainbowSweep 25s linear infinite;
  filter: brightness(1.15) contrast(1.05);
  /* jemná luxusní mlha kolem textu */
  text-shadow:
0 2px 6px rgba(0,0,0,0.35),
0 8px 20px rgba(0,0,0,0.25),
0 0 12px rgba(255,230,180,0.35);
}
/* ==================================================
   SVĚTELNÝ EFEKT POD TEXTEM
================================================== */
.flower-text h1::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-35px;
  width:120%;
  height:160px;
   background:radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.28) 30%,
    rgba(255,255,255,0.12) 55%,
    rgba(255,255,255,0) 85%
   );
  filter:blur(35px);
  z-index:-1;
}
/* ==================================================
   LINKA
================================================== */
.hero-line{
width:140%;
height:1px;
margin-top:4px;
margin-bottom:30px;
margin-left:-35%;

background:linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
#f7e6c4 20%,
#e4c27a 40%,
#c89b52 50%,
#e4c27a 70%,
#f7e6c4 85%,
rgba(255,255,255,0) 100%
);

box-shadow:
0 0 10px rgba(255,230,180,0.45);
}
/* ==================================================
   ANIMACE DUHY
================================================== */
@keyframes rainbowSweep{
  0%{
    background-position:200% 0;
  }
  100%{
    background-position:-200% 0;
  }
}
/* ==================================================
   PODTEXT
================================================== */
.flower-text p{
font-size:32px;
background:linear-gradient(
90deg,
#ffffff 0%,
#f7e6c4 35%,
#e4c27a 60%,
#f7e6c4 85%,
#ffffff 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:0.12em;
margin-top:12px;
text-shadow:
0 1px 2px rgba(0,0,0,0.45),
0 3px 6px rgba(0,0,0,0.28),
0 0 5px rgba(255,230,180,0.10);
}
/* =================================================
   SEKCÍ TLAČÍTKA
================================================= */
.flower-buttons{
display:flex;
flex-direction:column;   /* tlačítka pod sebou */
gap:18px;
position:fixed;
top:65%;
right:-70px;             /* část bude mimo obrazovku */
transform:translateY(-50%);
z-index:1000;
pointer-events:auto;
}
/* =================================================
   GLASS ČTVEREC TLAČÍTKO 
================================================= */
/* =================================================
   SPA RUČNÍK TLAČÍTKO
================================================= */

.flower-circle{

width:120px;
height:90px;

border-radius:18px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-decoration:none;
color:#7a5a35;

/* textura ručníku */

background:linear-gradient(
180deg,
#f8f4ea 0%,
#efe6d6 45%,
#e4d7c2 100%
);

/* jemná struktura */

box-shadow:
inset 0 6px 12px rgba(255,255,255,0.6),
inset 0 -8px 12px rgba(0,0,0,0.08),
0 8px 18px rgba(0,0,0,0.18);

border:1px solid rgba(210,190,160,0.45);

cursor:pointer;

transition: transform 0.35s ease, box-shadow 0.35s ease;

position:relative;
}
.flower-circle::before{

content:"";

position:absolute;
top:-6px;
left:8px;
right:8px;
height:12px;

border-radius:12px;

background:linear-gradient(
180deg,
#ffffff 0%,
#e9deca 100%
);

box-shadow:
0 3px 6px rgba(0,0,0,0.15);

}
/* vysunutí tlačítka */

.flower-circle:hover{

transform:translateX(-80px) scale(1.05);

box-shadow:
0 10px 25px rgba(0,0,0,0.25),
inset 0 6px 12px rgba(255,255,255,0.6),
inset 0 -8px 12px rgba(0,0,0,0.08);

}

/* =================================================
   IKONA - LIST 
================================================= */

.flower-icon{
font-size:28px;
margin-bottom:4px;
color:#7a5a35;
}

/* =================================================
   TEXT - TLAČÍTKA 
================================================= */

.flower-circle span{
font-size:13px;
font-weight:600;
letter-spacing:0.06em;

color:#7a5a35;

text-shadow:
0 1px 1px rgba(255,255,255,0.6);

}
/* =================================================
   ZATŘESENÍ
================================================= */
@keyframes flowerShake{
0%{ transform:scale(1) rotate(0deg); }
25%{ transform:scale(1.04) rotate(1deg); }
50%{ transform:scale(1.04) rotate(-1deg); }
75%{ transform:scale(1.03) rotate(1deg); }
100%{ transform:scale(1.05) rotate(0deg); }
}
/* =================================================
   SPODNÍ FOTO PÁS
================================================= */
.flower-strip{
position:fixed;
top:0;
left:0;
width:120px;
height:100vh;
display:flex;
justify-content:center;
overflow:hidden;
z-index:9999;              /* nad vším */
transform:translateZ(0);   /* vlastní GPU vrstva */
isolation:isolate;         /* oddělí od glass blur */
background:none;
border-right:1px solid rgba(255,255,255,0.15);
box-shadow:
15px 0 40px rgba(0,0,0,0.25) inset;
}
/* =================================================
   FADE OKRAJE GALERIE
================================================= */
.flower-strip::before,
.flower-strip::after{
content:"";
position:absolute;
top:0;
height:100%;
width:520px;   /* ještě delší fade */
z-index:10;
pointer-events:none;
}
.flower-strip::before{
left:0;
background:linear-gradient(
to right,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.12) 20%,
rgba(255,255,255,0.30) 35%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0.15) 65%,
rgba(255,255,255,0.07) 80%,
rgba(255,255,255,0.0) 100%
);
}
.flower-strip::after{
right:0;
background:linear-gradient(
to left,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.12) 20%,
rgba(255,255,255,0.30) 35%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0.15) 65%,
rgba(255,255,255,0.07) 80%,
rgba(255,255,255,0.0) 100%
);
}
/* =================================================
   TRACK
================================================= */
.flower-track{
display:flex;
flex-direction:column;
gap:20px;
height:max-content;
padding:20px;
animation:flowerScrollVertical 35s linear infinite;
}
/* =================================================
   OBRÁZKY
================================================= */
.flower-track img{
 width:100px;
 height:140px;
 border-radius:16px;
 object-fit:cover;
 box-shadow:0 10px 25px rgba(0,0,0,0.25);
 position:relative;
 z-index:2;
 transform:translateZ(0);   /* oddělí od glass blur */
}
/* =================================================
   NEKONEČNÝ POHYB
================================================= */
@keyframes flowerScrollVertical{
0%{
transform:translateY(0);
}
100%{
transform:translateY(-50%);
}
}
/* ==================================================
   GLASS PANEL NA ZAHRADU - KYTICE
================================================== */
.garden-overlay{
position:fixed;
overflow:hidden;
top:140px;
left:60px;
width:45vw;
height:70vh;
background:linear-gradient(
180deg,
rgba(255,255,255,0.45) 0%,
rgba(255,255,255,0.28) 100%
);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-radius:30px;
border:2px solid rgba(255,255,255,0.45);
box-shadow:
0 30px 80px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,255,255,0.35) inset;
padding:50px;
color:white;
opacity:0;
visibility:hidden;
pointer-events:none;
transform-origin:top left;
transform:none;
transition:
transform 0.5s cubic-bezier(.22,.9,.3,1),
opacity 0.25s ease;
z-index:20000;
}
.garden-overlay.active{
visibility:visible;
pointer-events:auto;
opacity:1;
}
.garden-overlay::after{
content:"";
position:absolute;
top:-120%;
left:-40%;
width:80%;
height:300%;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.25) 45%,
rgba(255,255,255,0.55) 50%,
rgba(255,255,255,0.25) 55%,
rgba(255,255,255,0) 100%
);
transform:rotate(25deg);
opacity:0;
pointer-events:none;
}
.garden-overlay.active::after{
animation:glassLight 1.2s ease;
}
@keyframes glassLight{
0%{ left:-60%; opacity:0; }
30%{ opacity:1; }
100%{ left:120%; opacity:0; }
}
.garden-overlay-content img{
width:100%;
max-height:260px;
border-radius:14px;
margin:20px 0;
object-fit:cover;
box-shadow:none;
}
.garden-overlay-content ul{
margin-top:15px;
line-height:1.7;
}
/* =================================================
   KLIK EFEKT KVĚTINY
================================================= */
.flower-circle:active{
transform:scale(0.9);
}
/* jemné pulzování při hover */
.flower-circle:hover .flower-icon{
animation:flowerGrow 0.6s ease;
}
@keyframes flowerGrow{
0%{
transform:scale(1);
}
50%{
transform:scale(1.25);
}
100%{
transform:scale(1.15);
}
}
/* =================================================
   ZTMAVENÍ PŘI OTEVŘENÍ PANLU 
================================================= */
#pageDim{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
backdrop-filter:blur(3px);
z-index:19999;
display:none;
cursor:pointer; 
}
/* =================================================
   TLAČÍTKO VSTUP DO SHOPU
================================================= */
.shop-enter{
display:inline-block;
margin-top:20px;
margin-bottom:25px;   /* odsazení od textu */
padding:14px 28px;
border-radius:14px;
background:linear-gradient(
180deg,
rgba(255,248,235,0.75) 0%,
rgba(255,235,205,0.45) 100%
);
color:white;
text-decoration:none;
font-weight:600;
border:1px solid rgba(255,255,255,0.45);
backdrop-filter:blur(8px);
transition:0.3s;
}
.shop-enter:hover{
transform:translateY(-3px);
box-shadow:
0 0 20px rgba(255,255,255,0.45),
inset 0 0 20px rgba(255,255,255,0.35);
}
.shop-cta{
margin-top:18px;
margin-bottom:12px;
font-size:15px;
color:rgba(255,255,255,0.9);
}
.garden-overlay-content{
color:rgba(255,255,255,0.99);
font-weight:550;
text-shadow:
0 4px 20px rgba(0,0,0,0.75),
0 0 14px rgba(255,255,255,0.75),
0 0 30px rgba(255,255,255,0.55);
}
/* =========================
   TEXT V PANELU
========================= */

.garden-overlay-content{

color:rgba(255,255,255,0.99);

font-weight:550;

text-shadow:

0 4px 20px rgba(0,0,0,0.75),

0 0 14px rgba(255,255,255,0.75),

0 0 30px rgba(255,255,255,0.55);

}
/* =================================================
   SCROLL UVNITŘ PANELU
================================================= */
.garden-overlay-content{
height:calc(70vh - 100px);
overflow-y:auto;
overflow-x:hidden;
padding-right:10px;
padding-bottom:30px;
scrollbar-width:none;
scroll-behavior:smooth;
}
.garden-overlay-content::-webkit-scrollbar{
display:none;
}
.garden-overlay-content{
scroll-behavior:smooth;
}
@media (max-width:768px){
.garden-overlay-content{
height:calc(70vh - 60px);
}
}
/* =================================================
   CHAT BOOT
================================================= */
.spa-chat{

position:fixed;
bottom:200px;
right:250px;

width:360px;

background:rgba(255,255,255,0.25);
backdrop-filter:blur(12px);

border-radius:20px;

box-shadow:
0 10px 40px rgba(0,0,0,0.35);

z-index:30000;

font-family:Arial;

}

.spa-chat-header{

padding:12px 16px;

font-weight:600;

border-bottom:1px solid rgba(255,255,255,0.3);

}

.spa-chat-body{

padding:15px;

}

.spa-chat button{

width:100%;
margin-top:8px;

padding:10px;

border-radius:10px;

border:none;

background:#e6c59a;

cursor:pointer;

}

/* =================================================
   MOBILNÍ VERZE – KOMPLETNÍ LAYOUT
================================================= */

@media (max-width:768px){

/* =========================
   GLASS PANEL POZADÍ
========================= */

.vertical-glass{
width:100%;
height:100%;
right:0;
top:0;
}


/* =========================
   TEXT KONTEJNER
========================= */
.flower-text{
position:absolute;
left:50%;
transform:translateX(-50%);
width:90%;
text-align:center;
}
/* =========================
   NADPIS
========================= */
.flower-text h1{
position:relative;
top:0px;        /* POSUN NADPISU */
font-size:55px;
line-height:1.1;
}
/* =========================
   PODTEXT
========================= */
.flower-text p{
position:relative;
top:0px;
margin-left:55px;   /* POSUN DOPRAVA */
font-size:18px;
}
/* =========================
   LINKA
========================= */
.hero-line{
width:180px;
margin:20px auto;
}
/* =========================
   CHATBOT – MENŠÍ
========================= */
.spa-chat{
position:fixed;
bottom:120px;
right:75px;
width:240px;
z-index:2500;
}

@media (max-width:768px){

/* =========================
   TLAČÍTKA SEKCE
========================= */
.flower-buttons{
position:fixed;
bottom:30px;
left:50%;
right:auto;
top:auto;
transform:translateX(-50%);
display:flex;
flex-direction:row;
gap:12px;
z-index:2000;
}
/* =========================
   VYPNUTÍ ODSKOKU NA MOBILU
========================= */
.flower-circle:hover{
transform:none;
}
.flower-circle:active{
transform:scale(0.95);
}
}
/* tlačítka */
.flower-circle{
width:70px;
height:65px;
border-radius:16px;
}
/* ikona */
.flower-icon{
font-size:20px;
}
/* text */
.flower-circle span{
font-size:11px;
}
/* =========================
   ROZBALOVACÍ PANEL
========================= */
.garden-overlay{
position:fixed;
bottom:90px;
left:50%;
transform:translateX(-50%);
width:92vw;
max-height:60vh;
overflow:auto;
padding:20px;
z-index:5000;
}
#pageDim{
z-index:4900;
}
/* =========================
   FILMOVÝ PÁS – NAHORU
========================= */
.flower-strip{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;
z-index:9999999;
display:flex;
justify-content:center;
}
/* track */
.flower-track{
display:flex;
flex-direction:row;
gap:10px;
animation:flowerScrollVertical 30s linear infinite;
}
/* obrázky */
.flower-track img{
height:60px;
width:auto;
object-fit:contain;
}
/* odstranění gradientů */
.flower-strip::before,
.flower-strip::after{
display:none;
}
}
/* =========================
   TEXT V PANELU
========================= */
.garden-overlay-content{
color:rgba(255,255,255,0.99);
font-weight:550;
text-shadow:
0 4px 20px rgba(0,0,0,0.75),
0 0 14px rgba(255,255,255,0.75),
0 0 30px rgba(255,255,255,0.55);
}
}