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

:root{
  --panel-count: 5;
}

html,
body{
  overflow-x:hidden;
}

body{
  font-family:sans-serif;
  background:#fff;
  color:#000242;
  min-height: calc(var(--panel-count) * 400vh);
}

/* 🔥 SCÉNA = SCROLL PROGRESS */
.scene{
  height:100vh;
  position:relative;
}

/* ===== 3D PANEL SYSTEM ===== */
.panel-stage{
  position:fixed;
  inset:0;
  perspective:2200px;
  overflow:hidden;
  z-index:2;
}

.panel-wrap{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.panel.is-visible{
  visibility:visible;
  pointer-events:auto;
}

.panel-inner{
  position:relative;
  width:100%;
  height:100%;
  background:#fff;
  border-radius:20px;
  overflow:hidden;

background:rgba(255,255,255,0.6);
  backdrop-filter:blur(10px);
}

.panel-1{ transform:rotateY(0deg); }
.panel-2{ transform:rotateY(180deg); }
.panel-3{ transform:rotateY(0deg); }
.panel-4{ transform:rotateY(180deg); }
.panel-5{ transform:rotateY(0deg); }
.panel-6{ transform:rotateY(180deg); }

/* 🔥 HERO = PŘIPÍCHNUTÝ */
.hero{
  position:relative;
  top:0;
  height:100vh;
  overflow:hidden;
}

/* TEXTY */
.line{
  position:absolute;
  font-weight:900;
  line-height:0.9;
  white-space:nowrap;
}

/* 🔥 ROZLOŽENÍ TEXTŮ */
.line-1{
  top:8%;
  left:15%;
  font-size:clamp(30px,4vw,60px);
  color:#7c818f;
}

.line-2{
  top:15%;
  left:10%;
  font-size:clamp(80px,10vw,180px);
  color:#000242;
  letter-spacing:-3px;
}

.line-3{
  top:32%;
  right:10%;
  font-size:clamp(70px,9vw,160px);
  color:#000242;
  letter-spacing:-3px;
}

.line-4{
  top:53%;
  left:65%;
  font-size:clamp(38px,7vw,80px);
  color:#217d00;
  font-weight:300;
}

.line-5{
  top:65%;
  right:64%;
  font-size:clamp(20px,2vw,28px);
  color:#7c818f;
  font-weight:700;
}

.line-6{
  top:72%;
  left:10%;
  font-size:clamp(46px,3vw,52px);
  color:#000242;
  font-weight:900;
}

/* 🔥 FOTO – FIX NA MÍSTĚ */
.hero-img{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:520px;
  z-index:0;
  animation:float 12s ease-in-out infinite;
}

/* FLOAT */
@keyframes float{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-10px);}
}

/* 🔥 CANVAS */
#canvas{
  position:fixed;
  top:0;
  left:0;
  pointer-events:none;
  z-index:1;
}

/* 🔥 SCROLL INDICATOR */
.scroll-indicator{
  position:fixed;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  z-index:50;
  animation:scrollMove 2.5s ease-in-out infinite;
}

/* TEXT */
.scroll-text{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:22px;
  letter-spacing:4px;
  color:#999;
  font-weight:600;
}

/* ŠIPKA */
.scroll-arrow{
  width:2px;
  height:100px;
  background:#999;
  position:relative;
}

.scroll-arrow::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:8px;
  height:8px;
  border-right:2px solid #999;
  border-bottom:2px solid #999;
}

/* ANIMACE */
@keyframes scrollMove{
  0%,100%{
    transform:translateY(-50%);
    opacity:0.6;
  }
  50%{
    transform:translateY(-40%);
    opacity:1;
  }
}

/* 🔥 LANGUAGE SWITCH - CZ JAZYK*/
.lang-switch{
  position:fixed;
  top:65px;
  right:100px;
  font-size:24px;
  font-weight:700;
  letter-spacing:2px;
  color:#7c818f;
  cursor:pointer;
  z-index:10;
  transition:opacity 0.3s ease, transform 0.3s ease;
}

.lang-switch:hover{
  opacity:0.6;
  transform:translateY(-2px);
}

/* ===== EN JAZYK = STEJNÝ LAYOUT JAKO CZ ===== */
body.lang-en .line-1{
  top:8%;
  left:15%;
}

body.lang-en .line-2{
  top:15%;
  left:20%;
}

body.lang-en .line-3{
  top:32%;
  right:28%;
  left:auto;
}

body.lang-en .line-4{
  top:53%;
  left:65%;
}

body.lang-en .line-5{
  top:65%;
  right:62%;
  left:auto;
}

body.lang-en .line-6{
  top:72%;
  left:10%;
}

/* ===== SCENE 2 ===== */
.scene-2{
  position:relative;
  inset:0;
  width:100%;
  height:100vh;
  background:#fff;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:clamp(20px, 6vw, 120px);
  opacity:1;
  pointer-events:auto;
}

.section-2-content{
  transform:translate(80vw, 80vh) scale(0.3);
  opacity:0;
  will-change:transform, opacity;
  position:relative;
  z-index:5;
}

/* TEXT */
.s2-title{
  font-size:clamp(70px, 9vw, 140px);
  font-weight:900;
  line-height:1.05;
  transform:translateY(-40px); 
}

.s2-title .line-a{
  display:block;
}

.s2-title .line-b{
  display:block;
  margin-left:clamp(60px, 12vw, 220px);
}

.s2-sub{
  margin-top:470px;
  margin-left:20px;
  font-family: 'Caveat', cursive;
  font-size:34px;
  color:#217d00;
  font-weight:900;
}

/* ===== panel helper ===== */
.panel.panel-front .panel-inner,
.panel.panel-back .panel-inner{
  opacity:1;
}

@media (max-width: 900px){
  body{
    min-height: calc(var(--panel-count) * 160vh);
  }

  .line-1{
    top:10%;
    left:8%;
  }

  .line-2{
    top:17%;
    left:6%;
    font-size:clamp(48px,14vw,90px);
  }

  .line-3{
    top:32%;
    right:6%;
    font-size:clamp(46px,13vw,82px);
  }

  .line-4{
    top:48%;
    left:50%;
    font-size:clamp(22px,8vw,44px);
  }

  .line-5{
    top:63%;
    left:8%;
    right:auto;
    font-size:clamp(16px,4vw,22px);
    max-width:80vw;
    white-space:normal;
    line-height:1.15;
  }

  .line-6{
    top:76%;
    left:8%;
    font-size:clamp(30px,8vw,42px);
  }

  body.lang-en .line-2{
    left:8%;
  }

  body.lang-en .line-3{
    right:8%;
  }

  body.lang-en .line-5{
    left:8%;
    right:auto;
  }

  .hero-img{
    width:min(360px, 72vw);
  }

  .scroll-indicator{
    right:12px;
  }

  .lang-switch{
    right:18px;
    top:16px;
    font-size:18px;
  }

  .scene-2{
    align-items:flex-end;
    padding:0 24px 14vh 24px;
  }

  .s2-title .line-b{
    margin-left:0;
  }
}

/* ===== TLAČÍTKO - Spustit projekt ===== */
.cta-section{
  position:fixed; /* 🔥 místo relative */
  top:0;
  left:0;
  width:100%;
  height:100vh;

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

  z-index:20; /* 🔥 nad vším */
  pointer-events:none; /* 🔥 propouští scroll */
}


/* ===== BUTTON ===== */
.cta-btn{
  pointer-events:auto; /* 🔥 aby šlo kliknout */

  font-size:clamp(22px, 2.2vw, 34px);
  padding:20px 42px;
  border:none;
  border-radius:999px;

  background:#227a01;
  color:#fff;
  font-weight:700;
  letter-spacing:0.5px;
  cursor:pointer;

  opacity:0;
  transform:translateY(120px) scale(0.92);

  transition:
    opacity 0.8s cubic-bezier(.2,.8,.2,1),
    transform 0.8s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.3s ease;

  box-shadow:0 20px 50px rgba(0,0,0,0.18);
}


/* ===== AKTIVACE ===== */
.cta-btn.show{
  opacity:1;
  transform:translateY(0) scale(1);
}


/* ===== HOVER ===== */
.cta-btn:hover{
  box-shadow:0 26px 60px rgba(0,0,0,0.24);
}


/* ===== SUBTLE SHAKE ===== */
@keyframes subtleShake{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-1px) rotate(-0.6deg); }
  50%{ transform:translateY(1px) rotate(0.6deg); }
  75%{ transform:translateY(-1px) rotate(-0.4deg); }
}

.cta-btn.shake{
  animation:subtleShake 2.4s ease-in-out infinite;
}

/* =========================
   🎬 MEDIA (IMG + VIDEO)
   ========================= */

.media-box{
  position:absolute;
  top:50%;
  right:8%;
  transform:translateY(-50%);

  width:clamp(240px, 26vw, 420px);
  height:clamp(140px, 18vw, 260px);

  border-radius:10px;
  background:#000;
  overflow:hidden;

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

  box-shadow:none;
  z-index:1;
  animation:floatyBox 6s ease-in-out infinite;
  will-change:transform;
}

/* 🔁 střídání stran */
.panel-3 .media-box,
.panel-5 .media-box{
  left:8%;
  right:auto;
}

/* 🎥 IMG + VIDEO = sjednoceno */
.media-box img,
.media-box video{
  width:100%;
  height:100%;
  object-fit:contain; /* 🔥 celé video */
  display:block;
  background:#000;
}

@keyframes floatyBox{
  0%{ transform:translateY(-50%) rotate(0deg); }
  50%{ transform:translateY(-53%) rotate(1deg); }
  100%{ transform:translateY(-50%) rotate(0deg); }
}

/* 🔥 drobný rozdíl mezi panely */
.panel-3 .media-box{
  transform:translateY(-50%) rotate(-2deg);
}

.panel-4 .media-box{
  transform:translateY(-50%) rotate(2deg);
}

/* POZICE TEXTU V SEKCI 2 - NAD VIDEO */

.panel-inner{
  position:relative; /* 🔥 důležité */
}
.panel-inner .text{
  position:relative;
  z-index:3; /* 🔥 text vždy nahoře */
}
.panel-inner > *:not(.media-box){
  position:relative;
  z-index:3;
}

/* umístění videa na stránce */
.panel-2 .media-box{
  top:32%;
  right:5%;
}

body.lang-en .panel-2 .s2-title .line-b{
  margin-left:208px;
  display:inline;
}

/* =========================
   🔥 PANEL 2 – 3 VISÍCÍ VIDEA
   ========================= */

/* vypnutí starého videa */
.panel-2 .media-box{
  display:none;
}

/* layout */
.panel-2 .media-row{
  position:absolute;
  top:65%;
  right:3%;
  transform:translateY(-50%);

  display:flex;
  gap:90px;

  perspective:1000px;
  z-index:2;
}

/* rám (FIXNÍ – drží hřebík) */
.panel-2 .video-wrap{
  width:460px;
  aspect-ratio:16/9;

  border-radius:5px;
  overflow:visible;

  position:relative;
  border:none;

  transform:translateZ(0);
}

/* video */
.panel-2 .video-wrap video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/*PRASKLYNA ZEĎ */
.panel-2 .video-wrap{
  position:relative;
}

.panel-2 .video-wrap .crack{
  position:absolute;
  top:-73px;
  left:51%;
  transform:translate(-50%, -50%);

  width:230px;
  height:230px;

  background:url('img/crack.webp') center/contain no-repeat;

  pointer-events:none;
  z-index:1;
}

/* =========================
   🎬 POHYBLIVÁ ČÁST
   ========================= */
.video-inner{
  width:100%;
  height:100%;
  position:relative;
  transform-origin: 50% -80px;
}
/* 🪢 lano (HÝBE SE S OBRAZEM) */
.video-inner::before{
  content:"";
  position:absolute;
  top:-80px;
  left:51%;
  width:7px;
  height:80px;
  transform:translateX(-50%);
  border-radius:0;

  background:
    repeating-linear-gradient(
      180deg,
      #8b6a45 0px,
      #8b6a45 2px,
      #b89363 2px,
      #b89363 4px,
      #6e5438 4px,
      #6e5438 6px
    );
  box-shadow:
    inset 2px 0 2px rgba(255,255,255,0.15),
    inset -2px 0 2px rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.25);
}
/* =========================
   🔥 REALISTICKÁ ANIMACE
   ========================= */

@keyframes swing{
  0%   { transform:rotate(-5deg); }
  50%  { transform:rotate(5deg); }
  100% { transform:rotate(-5deg); }
}

.panel-2 .v1 .video-inner{
  animation:swing 4s ease-in-out infinite;
  animation-delay:0s;
}
.panel-2 .v2 .video-inner{
  animation:swing 5s ease-in-out infinite;
  animation-delay:0.3s;
}

.panel-2 .v3 .video-inner{
  animation:swing 4.5s ease-in-out infinite;
  animation-delay:0.6s;
}

/* =================================
   🔥 ANIMACE-PANEL-VIDEO-MALÝ VÝKYV
   ================================= */

.video-content{
  width:100%;
  height:100%;
  transform-origin:center;

  border:3px solid #1e1e1e;
  border-radius:6px;
  overflow:hidden;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.18),
    0 2px 6px rgba(0,0,0,0.08);
}

.video-inner{
  filter: drop-shadow(0 20px 25px rgba(0,0,0,0.15));
}

/* wobble pro všechny */
.panel-2 .v1 .video-content{
  animation:wobble 1.2s ease-in-out infinite;
  animation-delay:0s;
}

.panel-2 .v2 .video-content{
  animation:wobble 1.4s ease-in-out infinite;
  animation-delay:0.2s;
}

.panel-2 .v3 .video-content{
  animation:wobble 1.3s ease-in-out infinite;
  animation-delay:0.4s;
}

/* keyframes */
@keyframes wobble{
  0%   { transform:rotateZ(0deg); }
  20%  { transform:rotateZ(1deg); }
  40%  { transform:rotateZ(-0.8deg); }
  60%  { transform:rotateZ(0.6deg); }
  80%  { transform:rotateZ(-0.3deg); }
  100% { transform:rotateZ(0deg); }
}


/* ==============================================
   📱 PANEL 3 – 3D PHONE FIX - THREE.JS CONTAINER
   =========================================== */
#phone3D{
  position:absolute;
  top:50%;
  left:50%;
  width:1040px;
  height:760px;
  transform:translate(-50%, -50%);
  z-index:1;
  pointer-events:auto;
}

#phone3D canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

@media (max-width: 900px){
  #phone3D{
    width:min(88vw, 620px);
    height:min(64vw, 430px);
  }
}