/* Homepage refinements — 27 Aug 2026 v6.
   Scope: seamless CloudCaive-style tools rail, Kubernetes Lab animation and project card layout. */

/* Full-width DevOps tools rail.
   Each repeated set is one viewport split into 11 equal columns. This keeps the
   spacing identical between every tool, including the Bash -> Linux loop seam. */
body[data-page="home"] .tool-marquee{
  width:100vw !important;
  margin:0 calc(50% - 50vw) !important;
  overflow:hidden;
  background:transparent !important;
  border:0 !important;
  padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.10) 4%,
    rgba(0,0,0,.48) 10%,
    #000 18%,
    #000 82%,
    rgba(0,0,0,.48) 90%,
    rgba(0,0,0,.10) 96%,
    transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.10) 4%,
    rgba(0,0,0,.48) 10%,
    #000 18%,
    #000 82%,
    rgba(0,0,0,.48) 90%,
    rgba(0,0,0,.10) 96%,
    transparent 100%);
}
body[data-page="home"] .tool-fade{display:none !important}
body[data-page="home"] .tool-track{
  display:flex;
  width:200vw !important;
  min-width:200vw !important;
  animation:toolScroll 46s linear infinite;
  will-change:transform;
}
body[data-page="home"] .tool-set{
  width:100vw !important;
  min-width:100vw !important;
  flex:0 0 100vw !important;
  display:grid !important;
  grid-template-columns:repeat(11,minmax(0,1fr));
  align-items:center;
  padding:0 !important;
}
body[data-page="home"] .tool{
  width:100% !important;
  min-width:0 !important;
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
}
body[data-page="home"] .tool img{
  width:32px;
  height:32px;
}
body[data-page="home"] .tool span{font-size:11px}

/* Two equal 100vw sets: translating by half of the 200vw track moves exactly
   one complete set, so the animation loops without a visible jump. */
@keyframes toolScroll{to{transform:translateX(-50%)}}

/* Keep Selected Projects close to the rail so it remains part of the homepage
   flow instead of reading as a separate empty band. */
body[data-page="home"] .evidence-section{
  padding-top:40px !important;
}

/* Featured-project technology pills: increase readability without altering the
   project-card geometry. Desktop rows remain a single line. */
@media(min-width:1121px){
  body[data-page="home"] .evidence-card .integrated-stack-pills{
    flex-wrap:nowrap;
    gap:8px;
    white-space:nowrap;
  }
  body[data-page="home"] .evidence-card .integrated-stack-pills>span{
    min-height:40px;
    padding:8px 12px;
    flex:0 0 auto;
  }
  body[data-page="home"] .evidence-card .integrated-stack-pills b{
    font-size:12px;
  }
  body[data-page="home"] .evidence-card .integrated-stack-pills small{
    font-size:9.5px;
  }
  body[data-page="home"] .evidence-card .integrated-stack-pills i{
    flex:0 0 auto;
    font-size:11.5px;
  }
}

/* Four representative Kubernetes lab areas. */
body[data-page="home"] #lab .lab-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
body[data-page="home"] #lab .lab-card{
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
body[data-page="home"] #lab .lab-card>.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  color:var(--orange) !important;
}
body[data-page="home"] #lab .lab-card>.kicker::after{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,var(--orange),transparent);
  transform-origin:left center;
  animation:labKickerSignal 2.2s ease-in-out infinite;
}
body[data-page="home"] #lab .lab-card:nth-child(2)>.kicker::after{animation-delay:.25s}
body[data-page="home"] #lab .lab-card:nth-child(3)>.kicker::after{animation-delay:.5s}
body[data-page="home"] #lab .lab-card:nth-child(4)>.kicker::after{animation-delay:.75s}
@keyframes labKickerSignal{
  0%,100%{opacity:.28;transform:scaleX(.35)}
  50%{opacity:1;transform:scaleX(1)}
}
body[data-page="home"] #lab .lab-card p{flex:1}
body[data-page="home"] #lab .lab-card .tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
body[data-page="home"] #lab .lab-card .tag{
  padding:8px 11px;
  font-size:11.5px;
  line-height:1.1;
  color:var(--text);
  border-color:color-mix(in srgb,var(--text) 16%,transparent);
  background:color-mix(in srgb,var(--panel) 42%,transparent);
  transition:transform 180ms ease,border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease,color 180ms ease;
}
body[data-page="home"] #lab .lab-card .tag:hover,
body[data-page="home"] #lab .lab-card .tag:focus-visible{
  transform:translateY(-1px);
  color:var(--text);
  border-color:var(--green);
  background:color-mix(in srgb,var(--green) 18%,var(--panel));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 24%,transparent),0 0 18px color-mix(in srgb,var(--green) 34%,transparent);
  outline:none;
}
body[data-page="home"] .lab-section-cta{
  margin-top:22px;
  display:flex;
  justify-content:flex-start;
}

/* Four stages in the project card. */
body[data-page="home"] .evidence-principle .principle-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body[data-page="home"] .evidence-principle .principle-item{min-height:58px}

@media(max-width:1100px) and (min-width:821px){
  body[data-page="home"] .tool img{width:30px;height:30px}
  body[data-page="home"] .tool span{font-size:10px}
}

@media(max-width:820px){
  body[data-page="home"] .tool-marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  }
  body[data-page="home"] .tool-track{
    width:max-content !important;
    min-width:0 !important;
  }
  body[data-page="home"] .tool-set{
    width:auto !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    display:flex !important;
    padding:0 !important;
  }
  body[data-page="home"] .tool{
    width:108px !important;
    min-width:108px !important;
    min-height:70px;
  }
  body[data-page="home"] .evidence-section{padding-top:36px !important}
  body[data-page="home"] #lab .lab-grid{grid-template-columns:1fr}
  body[data-page="home"] #lab .lab-card{min-height:0}
  body[data-page="home"] #lab .lab-card .tag{font-size:11px;padding:8px 10px}
}

@media(max-width:430px){
  body[data-page="home"] .evidence-principle .principle-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  body[data-page="home"] #lab .lab-card>.kicker::after{
    animation:none;
    opacity:.65;
    transform:none;
  }
  body[data-page="home"] #lab .lab-card .tag{transition:none}
}