/* ==================================================
   RESET
================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

/* ==================================================
   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("zahrada 2.png"); /* PNG ve stejné složce */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  font-family: Arial, sans-serif;
  overflow: 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: none;
}

.vertical-glass {
  --glass-bg: rgba(255,255,255,0.19);
  --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:420px;
  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:19%;
  right:17%;
  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:32px;
  color:white;
  font-weight:300;
  letter-spacing:0.05em;

  margin-top:30px;
  margin-right:50px;   /* POSUN DOLEVA */

  text-shadow:
      0 0 20px rgba(255,255,255,0.65),
      0 0 40px rgba(255,255,255,0.45),
      0 6px 20px rgba(0,0,0,0.25);
}
/* ==================================================
   NADPIS – DUHOVÁ ANIMACE + LUXUSNÍ GLOW
================================================== */

.flower-text h1{

  display:inline-block;
  position:relative;

  font-family:"Playfair Display", serif;
  font-size:165px;
  font-weight:300;
  letter-spacing:0.03em;

  margin-bottom:12px;

  background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 46%,
      #ffd59e 48%,
      #9cff9c 50%,
      #8ed8ff 52%,
      #ffffff 54%,
      #ffffff 100%
  );

  background-size:400% 100%;

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  animation: rainbowSweep 25s linear infinite;

  filter: brightness(1.08);

  /* jemná luxusní mlha kolem textu */
  text-shadow:
      0 0 25px rgba(255,255,255,0.65),
      0 0 60px rgba(255,255,255,0.45),
      0 10px 40px rgba(255,255,255,0.35),
      0 6px 25px rgba(0,0,0,0.25);
}


/* ==================================================
   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;
}


/* ==================================================
   ANIMACE DUHY
================================================== */

@keyframes rainbowSweep{

  0%{
    background-position:200% 0;
  }

  100%{
    background-position:-200% 0;
  }

}

/* ==================================================
   PODTEXT
================================================== */

.flower-text p{

  font-size:40px;
  color:white;
  font-weight:300;
  letter-spacing:0.05em;

  margin-top:10px;

  /* stejný luxusní glow jako nadpis */
  text-shadow:
      0 0 20px rgba(255,255,255,0.65),
      0 0 40px rgba(255,255,255,0.45),
      0 6px 20px rgba(0,0,0,0.25);

}

/* =================================================
   SEKCÍ TLAČÍTKA
================================================= */

.flower-buttons{

display:flex;
gap:40px;

position:absolute;
top:60%;
right:15%;

transform:translateY(-50%);

z-index:1000;

/* důležité – umožní hover uvnitř glass panelu */
pointer-events:auto;

}


/* =================================================
   GLASS KRUH
================================================= */

.flower-circle{

width:145px;
height:145px;

border-radius:50%;

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

text-decoration:none;
color:white;

/* jemnější glass */
background:rgba(255,255,255,0.08);

backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,0.20);

/* BÍLÝ GLASS STÍN */
box-shadow:
0 12px 30px rgba(255,255,255,0.25),
0 30px 60px rgba(255,255,255,0.12),
inset 0 0 20px rgba(255,255,255,0.15);

transition:all 0.35s ease;

position:relative;

/* důležité pro hover */
pointer-events:auto;

}


/* =================================================
   KVĚTINA
================================================= */

.flower-icon{

font-size:40px;

margin-bottom:6px;

transition:transform 0.35s ease;

}


/* =================================================
   TEXT
================================================= */

.flower-circle span{

font-size:14px;

letter-spacing:0.05em;

opacity:0.9;

}


/* =================================================
   HOVER EFEKT
================================================= */

.flower-circle:hover{

animation:flowerShake 0.6s ease;

/* silnější světelný glow */
box-shadow:
0 18px 45px rgba(255,255,255,0.35),
0 35px 80px rgba(255,255,255,0.18),
inset 0 0 25px rgba(255,255,255,0.25);

}


/* květina lehce poskočí */

.flower-circle:hover .flower-icon{

transform:translateY(-6px) scale(1.15);

}


/* =================================================
   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); }

}

/* =================================================
   MOBILNÍ VERZE
================================================= */

@media (max-width:768px){

/* GLASS PANEL – polovina obrazovky */

.vertical-glass{

width:70%;
height:100%;

right:0;
top:0;

}


/* TEXT */

.flower-text{

top:18%;
right:50%;

transform:translate(50%,-50%);

text-align:center;

max-width:90%;

}


/* NADPIS */

.flower-text h1{

font-size:48px;

}


/* PODNADPIS */

.flower-text p{

font-size:20px;

margin-right:0;

}


/* TLAČÍTKA */

.flower-buttons{

top:60%;

right:50%;

transform:translate(50%,-50%);

gap:15px;

display:grid;

grid-template-columns:repeat(2,1fr);

}


/* KRUHY */

.flower-circle{

width:80px;
height:80px;

}


/* IKONA */

.flower-icon{

font-size:26px;

}


/* TEXT POD IKONOU */

.flower-circle span{

font-size:11px;

}

}