/*
Theme Name: Protos Software Technologies
Theme URI: https://protos.tech
Author: Protos Software Technologies
Description: Kreatryx-replica theme for Protos Software Technologies
Version: 3.0.0
Text Domain: protos
*/

/* Hide Webflow-only elements */
#awwwards, .floating-popup, .similar-panel, .wand-tooltip { display: none !important; }

/* Protos logo text */
.protos-logo-dot { color: rgb(179, 222, 79); }

/* Back-to-top */
.footer-one-arrow-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}
.footer-one-arrow-top.visible { opacity: 1; transform: translateY(0); }

/* Nav scrolled state */
.navbar-one-new.scrolled {
  background: rgba(7, 6, 22, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ────────────────────────────────────────────────────────────────────────
   MARQUEES — infinite horizontal scroll. Each track holds 3 identical copies,
   so translateX(-33.333%) loops seamlessly.
   ──────────────────────────────────────────────────────────────────────── */
@keyframes protos-mq-x   { from { transform: translateX(0); }       to { transform: translateX(-33.333%); } }
@keyframes protos-mq-x-r { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }

.home-one-hero-merquee.protos-mq-left,
.home-one-project-merquee.protos-mq-left {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: protos-mq-x 30s linear infinite;
  will-change: transform;
}
.home-one-project-merquee.protos-mq-left { animation-duration: 40s; }

.home-one-hero-merquee .home-one-hero-merquee-item,
.home-one-project-merquee .home-one-project-merquee-item {
  flex: 0 0 auto;
}

/* Testimonial name marquee — clipped to the card */
.home-one-testimonial-item { overflow: hidden; position: relative; }
.home-one-testimonial-merquee.protos-mq-left {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: protos-mq-x 16s linear infinite;
  will-change: transform;
}
.home-one-testimonial-merquee .home-one-testimonial-merquee-item { flex: 0 0 auto; }

/* ────────────────────────────────────────────────────────────────────────
   TRUSTED-BY LOGOS — text wordmarks (the original CDN logo SVGs are 503).
   ──────────────────────────────────────────────────────────────────────── */
.home-one-logo-subheading { text-align: center; margin-bottom: 36px; }
.protos-logo-row { overflow: hidden; width: 100%; padding: 14px 0; }
.protos-logo-track {
  display: flex;
  width: max-content;
  gap: 64px;
  align-items: center;
  will-change: transform;
}
.protos-logo-row.protos-mq-left  .protos-logo-track { animation: protos-mq-x   38s linear infinite; }
.protos-logo-row.protos-mq-right .protos-logo-track { animation: protos-mq-x-r 38s linear infinite; }
.protos-logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  transition: color 0.3s;
}
.protos-logo:hover { color: rgb(179, 222, 79); }

/* ────────────────────────────────────────────────────────────────────────
   COUNTER REELS — fully self-contained slot machine. JS builds the columns.
   Each column window = 1 digit tall; strip is 10 digits, so yPercent -10
   advances exactly one digit.
   ──────────────────────────────────────────────────────────────────────── */
.protos-reel {
  display: inline-flex;
  align-items: flex-start;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  color: #0E0D26;
}
.protos-reel-col  { height: 1em; overflow: hidden; }
.protos-reel-strip{ display: flex; flex-direction: column; will-change: transform; }
.protos-reel-cell { height: 1em; display: flex; align-items: center; justify-content: center; }
.protos-reel-static { height: 1em; display: flex; align-items: center; }

/* ────────────────────────────────────────────────────────────────────────
   EFFECT SECTION — award words flow up through a fixed lens (CSS sticky pin,
   GSAP scrubs the track). No dead space: words are always moving.
   ──────────────────────────────────────────────────────────────────────── */
.protos-effect {
  position: relative;
  height: 320vh;            /* scroll distance for the flow */
  background: #070616;
}
.protos-effect-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.protos-effect-lens {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* bright centre band, dim top/bottom — the "reveal lens" */
  background: linear-gradient(
    to bottom,
    rgba(7,6,22,0.92) 0%,
    rgba(7,6,22,0.55) 32%,
    rgba(7,6,22,0) 50%,
    rgba(7,6,22,0.55) 68%,
    rgba(7,6,22,0.92) 100%
  );
}
.protos-effect-track {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8vh;
  will-change: transform;
}
.protos-effect-word {
  font-family: 'Italiana', 'Outfit', serif;
  font-size: clamp(54px, 13vw, 190px);
  line-height: 1;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
}

/* Tool image starts collapsed, expands on hover via GSAP */
.home-one-tool-image-big-wrapper { overflow: hidden; max-height: 0; }

/* Mobile menu toggle */
.responsive-burger-menu-navbar { }
@media (max-width: 767px) {
  .responsive-burger-menu-navbar {
    display: none;
  }
  .responsive-burger-menu-navbar.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(7, 6, 22, 0.97);
    padding: 24px;
    gap: 14px;
    z-index: 999;
  }
}

/* prefers-reduced-motion: stop the infinite marquees */
@media (prefers-reduced-motion: reduce) {
  .home-one-hero-merquee.protos-mq-left,
  .home-one-project-merquee.protos-mq-left,
  .home-one-testimonial-merquee.protos-mq-left,
  .protos-logo-row .protos-logo-track {
    animation: none !important;
  }
}