/* Hidden preview login */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #111;
}

.login-panel {
  width: min(380px, calc(100% - 32px));
  padding: 32px;
  color: #eee;
  background: #1d1d1d;
  border: 1px solid #444;
  border-radius: 8px;
}

.login-panel h1 {
  margin: 0 0 24px;
}

.login-panel form {
  display: grid;
  gap: 10px;
}

.login-panel input,
.login-panel button {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  font: inherit;
}

.login-panel button {
  margin-top: 8px;
  cursor: pointer;
}

.login-error {
  margin: 4px 0 0;
  color: #f28b82;
}

:root {
  --link: #93bfde;
  --linkHover: #d2e9f8;
  --note: #a1a1a1;
  --accent: #ff9700;
  --introtext: #6ce0ff;
}




/* elements */
html {scrollbar-gutter: stable;}
body {margin:0; font-size:18px; color:#eee; font-family: "Orbitron", sans-serif; letter-spacing: 1.2px; word-spacing: 1px;
      background:#000 url('https://www.livingfuture.cz/img/bg_galaxy_small.webp'); background-size:cover; background-position: center center; background-attachment: fixed; user-select:auto;
      caret-color: transparent; overflow-x: hidden;}
header {height:auto; display:flex; align-items:center; justify-content:space-between; padding: 16px 0 0 0;}
.logo-cont {text-decoration:none; opacity:0.9;}
.logo-cont:hover {opacity:1;}
.logo-img {height: 32px;}
.mainContainer {max-width: 1300px;  margin: 0 auto; display: flex; flex-direction: column; gap: 32px;}

a {color:var(--link); text-decoration:none;}
  a:hover {color:var(--linkHover);}
  .abutton {display:inline-block; margin:5px 10px 0 0; padding:3px 8px; border:1px solid #999; border-radius:3px; background:#333;}

h1 {margin: 0; font-size: 24px; color:var(--accent);}

img {border:0;} 





/* Buttons */
.button_v1 {border:1px solid var(--link); border-radius:4px; padding:4px 8px; background:transparent; color:var(--link); font-size:14px;}

.btn-primary, .btn-sec {    
    height: 36px;
    display: flex;  align-items: stretch;padding: 0;
    background: none; border: 0; font-size: 16px; font-weight:bold; cursor:pointer; }
  .btn-primary .icon, .btn-sec .icon { width:12px; height:12px;}   
  .btn-left, .btn-right {
      width: 11px; height: 100%;
      background-size: cover; background-repeat: no-repeat;  }
  .btn-middle {
      display: flex; align-items: center; gap: 8px; padding: 0 8px;
      background-size: contain;  background-repeat: repeat-x;  }

.btn-primary .btn-left {  background-image:url(img/btn-primary-left.webp); }
.btn-primary .btn-middle {background-image:url(img/btn-primary-middle.webp); color: #ffd6c7bf; }
.btn-primary .btn-right {background-image:url(img/btn-primary-right.webp); }
.btn-sec .btn-left {  background-image:url(img/btn-sec-left.webp); }
.btn-sec .btn-middle {background-image:url(img/btn-sec-middle.webp); color: #c7eeffbf; }
.btn-sec .btn-right {background-image:url(img/btn-sec-right.webp); }

.btn-primary:hover, .btn-sec:hover {
  filter: brightness(1.2);
}

.btn-outline {border:1px solid var(--link); border-radius:4px; padding:8px 16px; color:var(--link); font-size:12px; }

.timeline {
    height: 400px;
    position: relative;
    margin-top: 32px;
    padding-left: 80px;
}

/* Vertical line */
.timeline-line {
    position: absolute;
    left: 70px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
}

/* Decade markers */
.timeline-decade {
    position: absolute;
    left: 0px;
    width: 60px;
    text-align: right;
    font-size: 12px;
    color: transparent;
    transform: translateY(-50%);
    white-space: nowrap;
}
.timeline-decade[data-year='2050'],
.timeline-decade[data-year='2100'],
.timeline-decade[data-year='2150'] {
    color: var(--note);
}
.timeline-decade::before {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--note);
}

/* Timeline items */
.timeline-item {
    position: absolute;
    left: 72px;
    transform: translateY(-50%) translateX(-10px);
    display: flex;
    gap: 16px;
    opacity: 0.8;
    transition: all 0.3s ease;
    cursor: pointer;
}

.timeline-item:hover {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.timeline-marker {
    width: 32px;
    height: 0.5px;
    background: var(--accent);
    margin-top: 10px;
}

.timeline-content {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #3d3d3d;
    border-radius: 4px;
    padding: 2px 12px;
    min-width: 200px;
    max-width: 100%;
    display: flex;
    gap:8px;
}

.timeline-year {
    font-weight: bold;
    color: var(--accent);
    font-size: 12px;
}

.timeline-description {
    font-size: 12px;
    color: #ccc;
}

@keyframes timelineFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .timeline {
        padding-left: 60px;
    }
    .timeline-decade {
        left: 0px;
        font-size: 11px;
    }
    .timeline-content {
        min-width: 150px;
        max-width: 250px;
        padding: 6px 10px;
    }
}



/* classess */
.introtext {
  position: absolute;
  text-transform: uppercase; color: var(--introtext);
  border: 1px solid #0e3b3f;  border-radius: 4px;
  padding: 4px 8px;
}
.introtext span {
  color: var(--accent);
}
.introtext-1 {top:3%; left:1%;}
.introtext-2 {top:11%; left:1%;}
.introtext-3 {top:10%; left:59%; }
.introtext-4 {position:absolute; left:65%; top: 87%;}


.aniscreen {
  position:relative;
  height: 600px;
  border: 8px solid #fff;
}

.boxes {display: flex; gap: 64px; margin-bottom:64px;}
  .box {position: relative; height: 300px;    border: 1px solid #3d3d3d;    border-radius: 8px;    overflow: hidden;}
  .boxes .title {font-size:16px; font-weight: bold; padding: 4px 16px;     color: #76b7a8;}
  .boxes .content {position: absolute; bottom: 0; padding: 16px; background: #000000a3; font-size:14px; }

.frames {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom:24px; border:4px solid #fff;}
.frame {
  position:relative;
  aspect-ratio:3/4;
  max-height: 861px;
  max-width: 646px;
  box-sizing: border-box;
  flex: 0 0 50%;
  margin: 0; padding: 0; 
  border:4px solid #fff;
  overflow: hidden;}
.frame-img {width: 100%; object-fit: contain;}





.display-cont {
  width: fit-content; background: url(img/display-02.webp) no-repeat center center; background-size: 100% 100%; overflow: hidden;
}
.display-01 {
    padding: 16px 48px;
    width: 400px;}
.display-sub {font-size: 12px;
    color: #78593b;
    border: 1px solid #55351b;
    border-radius: 4px;
    padding: 2px 8px;}
.display-sub strong {color: #ff9700;}



/* textmodal classes */
.textmodal {
    position: absolute; width: auto;
    border: 1px solid #473c27; border-radius: 4px; background: #cdc0a6;
    margin-right: 8px; padding: 4px 8px;
    color: #473c27;
    white-space: pre-line;
    font-size: 16px;}
.textmodal.info {
    background: #383838;
    color: #a1a1a1;
    border: 1px solid #a1a1a1;
    font-size:16px;
  }
.textmodal.sweep-9 {
    background: #a2a8bb;
    color: #273047;
    border: 1px solid #273047;
  }
.textmodal.k-4 {
    background: #a2b1bb;
    color: #273047;
    border: 1px solid #273047;
  }
.textmodal.robots {
    background: #a7afc3;
    color: #273047;
    border: 1px solid #273047;
  }
.textmodal.humans {
    background: #bba08f;
    color: #473c27;
    border: 1px solid #473c27; 
  }
.textmodal.small {
    font-size:12px;
  }
.textmodal.thoughts {
    font-style: italic;
    border:1px dashed #333;
  }

.credits {position:absolute; width:100%; text-align:center;}
.credits.title {font-weight:bold; color: var(--accent); font-size: 24px;}
.credits.outro-title {font-weight:bold; color: var(--accent); text-align: left;}
.credits.outro-title2 {font-size:14px; text-align: left;}
.credits.outro {position: absolute; top: 57%; transform: translateX(-8px); border: 1px solid #999; background: #99999924; padding: 8px; font-size: 14px; text-align:left;}
.credits.small {font-size: 12px;}


/* Footer */  
.episode-footer {display: flex; justify-content: space-between; margin-bottom: 32px;}
  .episode-footer .left {display: flex; justify-content: flex-start; gap:32px;}
  .episode-footer .center {display: flex; justify-content: center; gap:32px;}
  .episode-footer .right {display: flex; justify-content: flex-end; gap:32px;}

.site-footer {position: relative; display:flex; flex-direction: column; gap: 16px; padding-top: 40px;}
.footer-ad {display:block; box-sizing:border-box; width:100%; max-width:970px; min-width:0; margin:0 auto;}
.footer-ad .adsbygoogle {display:block; width:100%; min-height:90px;}


.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid #3d3d3d; border-radius: 8px;
  background: linear-gradient(135deg, #14161a, #06070a);
  padding: 24px 32px;
}
.footer-cta h2 {margin: 0 0 4px 0; font-size: 20px; color: var(--accent);}
.footer-cta .note {color: var(--note); font-size: 14px;}

.footer-grid {display: flex; gap: 24px;}
.footer-col {
  flex: 1; border: 1px solid #3d3d3d; border-radius: 8px;
  background: #0a0a0aa3; padding: 16px 20px;
}
.footer-col-title {
  font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1.5px;
  color: #76b7a8; margin-bottom: 10px;
}
.footer-col-text {font-size: 13px; line-height: 1.5; color: #c7c7c7;}

.footer-stat {display: flex; align-items: center; gap: 8px; margin-bottom: 10px;}
.footer-stat:last-child {margin-bottom: 0;}
.footer-stat span {font-size: 12px; color: #c7c7c7; white-space: nowrap;}
.footer-stat .footer-stat-value {color: var(--accent); min-width: 58px; text-align: right;}
.footer-bar {flex: 1; height: 4px; background: #222; border-radius: 2px; overflow: hidden;}
.footer-bar div {height: 100%; background: var(--accent); border-radius: 2px;}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid #2a2a2a; padding-top: 20px; margin-bottom: 50px;
  font-size: 13px; color: var(--note);
}
.footer-logo {height: 22px; opacity: 0.8;}
.footer-nav {display: flex; gap: 20px;}







/* animations */
.fadein {opacity: 0; transition: opacity 3s; z-index:10}
  .fadein.visible {opacity: 1;}

.intro-zoom-object {
    position:absolute;
    margin: 0 auto;
    display: block;
    transform-origin: center center; transition: none; will-change: transform, width;       
  }
.intro-zoom-object.jupiter {width: 30%; top:10%; left:20%; animation: zoomInIntroJupiter 10s cubic-bezier(0.77,0,0.175,1) forwards;}
.intro-zoom-object.ganymede {width: 25%; top:25%; left:60%; animation: zoomInIntroGanymede 10s cubic-bezier(0.77,0,0.175,1) forwards;}

  @keyframes zoomInIntroJupiter {
    0%    {transform: scale(0.01);}
    40%    {transform: scale(0.8);}
    100%  {transform: scale(1);}
  }

  @keyframes zoomInIntroGanymede {
    0%    {transform: scale(0.01);}
    40%   {transform: scale(0.02);}
    100%  {transform: scale(1);}
  }





/* MOBILE */
@media only screen and (max-width: 1024px) {
    body { width: 100%; font-size:14px;} 
    
    header {flex-direction: column; gap: 16px;}
    
    h1 {font-size: 20px;}
    
    .logo-img {height: 36px;}


    .intro-zoom-object.jupiter {top:20%;}
    .intro-zoom-object.ganymede {top:63%;}

    .introtext {font-size: 12px;}
    .introtext-1 {left:4%;}
    .introtext-2 {left:4%; top: 9%;}
    .introtext-3 {top: 50%; left:4%; margin-right: 8px;}
    .introtext-4 {left:22%; margin-right: 8px;}

    .boxes {flex-direction: column;}

    .frame {max-width: 100%; flex: 0 0 100%;}

    .textmodal, .textmodal.info {font-size:12px;}
    .textmodal.small { font-size:10px; }


    .display-cont {width: 100%; }
    .display-01 {width: 100%;}

    .footer-cta {flex-direction: column; align-items: flex-start; padding: 20px;}
    .footer-grid {flex-direction: column;}
    .footer-bottom {flex-direction: column; text-align: center;}
}