/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.portfolio{
  padding-top:120px;
}
body{
  font-family: 'Comic Neue', cursive;
  color:#111;

  background-attachment: fixed;
  background-color:#ffffff;

  overflow-x:hidden;
}

.hero,
main{
  position: relative;
  z-index: 2;
}

.hero,
.portfolio,
.gallery,
.about,
.services,
.contact{
  background: transparent !important;
}

.hero-logo{
  margin-bottom:20px;
}

.hero-logo img{
  width:520px;
  height:auto;
  display:block;
  margin:0 auto;

  filter:
    drop-shadow(0 10px 25px rgba(0,0,0,0.3))
    drop-shadow(0 0 10px rgba(255,255,255,0.1));
}

/* HERO */
.hero{
  position: relative;        /* 🔥 místo fixed */
  min-height: 100vh;         /* zabere celou obrazovku */

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  background: transparent;   /* 🔥 žádné bílé pozadí */
}

/* LEVÁ + PRAVÁ STRANA */
/* === BACKGROUND HANDS === */
.bg-hands{
  position: fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hand{
  position:absolute;
  top:-110px;        /* doladíme */
  height:135%;       /* základ */
  max-width:none;
  object-fit:contain;
  pointer-events:none;
}
 
.hand.left{
  left:-30px; /* 🔥 tady ladíš */
  animation: handLeft 8s ease-in-out infinite;
}

.hand.right{
  right:-30px; /* 🔥 tady ladíš */
  animation: handRight 8s ease-in-out infinite;
}

@keyframes handLeft{
  0%   { transform: translateX(0px) scale(1); }
  50%  { transform: translateX(20px) scale(1.03); }
  100% { transform: translateX(0px) scale(1); }
}

@keyframes handRight{
  0%   { transform: translateX(0px) scale(1); }
  50%  { transform: translateX(-20px) scale(1.03); }
  100% { transform: translateX(0px) scale(1); }
}

/* OBRÁZEK - MONAKU DESIGN */

.hero-title-img img{
  width:660px;      /* 👈 tady ladíš velikost */
  max-width:90%;
  height:auto;
  display:block;
  margin:0 auto;
}

@media(max-width:768px){
  .hero-title-img img{
    width:200px;
  }
}

/* OBSAH */
.hero-content{
  position: relative;
  z-index: 2;
  color: #111;
}

/* TEXTY */
.hero h1{
  font-size:60px;
  font-weight:600;
  margin-bottom:10px;
}

.hero p{
  font-size:20px;
  margin-bottom:20px;
}

/* BUTTON */
.btn{
  display:inline-block;
  padding:12px 28px;
  background:white;
  color:black;
  text-decoration:none;
  font-weight:500;
  transition:0.3s;
}

.btn:hover{
  background:black;
  color:white;
}

/* PORTFOLIO */
.portfolio{
  padding:40px 0;
}

/* FILM PÁS */
.gallery{
  overflow:hidden;
  position:relative;
  padding:80px 0;
}

.gallery-track{
  display:flex;
  gap:15px;
  flex-wrap:nowrap;
}

.gallery img{
  width:340px;
  height:220px;
  object-fit:cover;
  border-radius:6px;

  transition:transform 0.4s ease;
  will-change:transform;
}

.img-wrap{
  transition: transform 0.6s ease;
}

.img-wrap.highlight{
  transform: scale(1.18);
  z-index:20;
}

.img-inner{
  width:100%;
  height:100%;
  display:block;

  border:4px solid #000;
  border-radius:12px;
  overflow:hidden;
  background:transparent;
}

.img-inner picture{
  display:block;
  width:100%;
  height:100%;
}

.img-inner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.img-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 0.6s ease;
}

.gallery-track{
  display:flex;
  gap:15px;
  flex-wrap:nowrap;
  width:max-content;
  animation:scroll 60s linear infinite;
}
/* hover stop */
.gallery:hover .gallery-track{
  animation-play-state:paused;
}

@keyframes scroll{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

/* ZÁKLAD */
.img-wrap{
  width:360px;
  height:250px;
  overflow:visible;
  background:transparent;

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

  z-index:1;

  --shakeX: 0px;
  --shakeY: 0px;
  --scale: 1;

  transform-origin: center center;

  transform: translate(var(--shakeX), var(--shakeY)) scale(var(--scale));

  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

/* HOVER */
.img-wrap:hover{
  transform: translate(var(--shakeX), var(--shakeY)) scale(1.08);
  z-index:10;
}

/* AKTIVNÍ (highlight z JS) */
.img-wrap.highlight{
  transform: translate(var(--shakeX), var(--shakeY)) scale(1.18);
  z-index:20;
}

/* ABOUT */
.about{
  padding:80px 20px;
  text-align:center;
  max-width:800px;
  margin:auto;
}

.about h2{
  margin-bottom:20px;
  font-size:32px;
}

/* SERVICES */
.services{
  padding:80px 20px;
  background: transparent;
  text-align:center;
}

.service-grid{
  display:flex;
  justify-content:center;
  gap:70px;
  margin-top:40px;
  flex-wrap:wrap;
}

.card{
  padding:10px;
  background:white;
  border-radius:8px;
  min-width:150px;
  transition:0.3s;
}
.card.btn-sketch{
  padding:12px 24px !important; /* 🔥 přebije .card */
  background: transparent;
  border-radius: 0;
}

.card.btn-sketch{
  cursor:pointer;
  font-size:14px;
}

.card:hover{
  transform:translateY(-5px);
}

/* CONTACT */
.contact{
  padding:80px 20px;
  text-align:center;
}

form{
  display:flex;
  flex-direction:column;
  max-width:400px;
  margin:40px auto 0;
}

input, textarea{
  padding:12px;
  margin-bottom:12px;
  border:none;
  font-family:inherit;
}

button{
  padding:12px;
  border:none;
  background:black;
  color:white;
  cursor:pointer;
  transition:0.3s;
}

button:not(.btn-sketch):hover{
  background:#333;
}

/* RESPONSIVE */
@media(max-width:768px){

  .hero h1{
    font-size:38px;
  }

.img-wrap{
  position: relative;
  z-index:1;
}

.img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  pointer-events:none;
  transition:transform 0.4s ease;
}

.img-wrap:hover{
  z-index:10;
}

.img-wrap:hover .img-inner{
  transform: scale(1.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.img-wrap.highlight{
  z-index: 20;
}

.img-wrap.highlight .img-inner{
  transform: none;
  filter: brightness(1.05) contrast(1.05);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}

main{
  position: relative;
  z-index:2;
  margin-top:0;          /* ❗ ZRUŠIT 100vh */
  background: transparent; /* ❗ ŽÁDNÝ GRADIENT */
}

/* ==== CUSTOM TLAČÍTKO ==== */

.btn-sketch{
  position:relative;
  display:inline-block;
  padding:14px 28px;
  background:transparent; /* 🔥 pryč černá */
  color:#000;              /* 🔥 text černý */
  font-weight:600;
  border:none;
  cursor:pointer;

  border-radius: 20px;

  transition: all 0.25s ease;
}

/* RUČNÍ OBRYS */
.btn-sketch::after{
  content:"";
  position:absolute;
  inset:-8px;

  border:3px solid #000;

  border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;

  pointer-events:none;

  transition: all 0.3s ease;
}

/* HOVER */
.btn-sketch:hover{
  transform: scale(1.05) rotate(-1deg);
}

.btn-sketch:hover::after{
  border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%;
  transform: scale(1.05);
}

}
/* ==== CUSTOM TLAČÍTKO - MIMO MÉDIA  ==== */
.btn-sketch{
  position:relative;
  display:inline-block;
  padding:14px 28px;
  background:transparent; /* 🔥 pryč černá */
  color:#000;              /* 🔥 text černý */
  font-weight:600;
  border:none;
  cursor:pointer;

  border-radius: 20px;

  transition: all 0.25s ease;
}

.btn-sketch::after{
  content:"";
  position:absolute;
  inset:-8px;

  border:3px solid #000;

  border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;

  pointer-events:none;

  transition: all 0.3s ease;
}

.btn-sketch:hover{
  background: transparent !important; /* 🔥 zruší černý hover */
  transform: scale(1.05) rotate(-1deg);
}

.btn-sketch:hover::after{
  border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%;
  transform: scale(1.05);
}


/* ==== SKETCH INPUT ==== */

.input-sketch{
  position:relative;
  margin-bottom:20px;

  width:100%;
  max-width:500px;   /* 🔥 tady řídíš velikost */
  margin-left:auto;
  margin-right:auto;
}

.input-sketch input,
.input-sketch textarea{
  width:100%;        /* 🔥 musí být 100% */
  padding:14px 50px;
  border:none;
  background:transparent;
  outline:none;
  font-family:inherit;
  font-size:16px;
}

/* ruční obrys */
.input-sketch::after{
  content:"";
  position:absolute;
  inset:-4px;

  border:3px solid #000;

  border-radius: 55% 45% 60% 40% / 40% 60% 45% 55%;

  pointer-events:none;
}

.contact h2{
  margin-bottom:40px; /* 🔥 zvětši mezeru */
}

/* ==== KONTEJNER PRO MONITORY  ==== */

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}