/* ===== Oct 2026 updates: home hero carousel + clients logo wall ===== */

/* ---- Home hero carousel ---- */
.hero-slides { position: absolute; inset: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-position: center 45%; background-size: cover; background-repeat: no-repeat; opacity: 0; transform: scale(1.06); transition: opacity 1.3s ease, transform 7.5s ease-out; will-change: opacity, transform; }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slide:first-child { background-position: center 52%; }
.hero-controls { position: absolute; z-index: 3; right: 34px; bottom: 70px; display: flex; align-items: center; gap: 14px; }
.hero-dots { display: flex; gap: 8px; }
.hero-dot { position: relative; width: 34px; height: 3px; padding: 0; border: 0; overflow: hidden; background: rgba(255,255,255,.28); cursor: pointer; }
.hero-dot::before { content: ""; position: absolute; inset: -10px 0; }
.hero-dot span { position: absolute; inset: 0; background: #8fe3dc; transform: scaleX(0); transform-origin: left; }
.hero-dot.is-active span { animation: hero-dot-fill var(--hero-delay, 6.5s) linear forwards; }
.hero.is-paused .hero-dot.is-active span { animation-play-state: paused; }
.hero-arrow { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(5,10,18,.25); font-size: 16px; line-height: 1; cursor: pointer; transition: background .25s, border-color .25s; }
.hero-arrow:hover, .hero-arrow:focus-visible { border-color: #8fe3dc; background: rgba(21,149,158,.35); }
@keyframes hero-dot-fill { to { transform: scaleX(1); } }
@media (max-width: 700px) {
  .hero-controls { right: 20px; bottom: 54px; }
  .hero-arrow { display: none; }
  .hero-dot { width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .4s ease; transform: none !important; }
  .hero-dot.is-active span { animation: none; transform: scaleX(1); }
}

/* ---- Clients page: moving logo wall in the hero ---- */
.page-hero-clients::before { background: #070d16 !important; }
.page-hero-clients::after { background: linear-gradient(90deg, rgba(5,10,18,.97) 0%, rgba(5,10,18,.86) 34%, rgba(5,10,18,.45) 70%, rgba(5,10,18,.3) 100%), linear-gradient(0deg, rgba(5,10,18,.85), transparent 55%); }
.logo-wall { position: absolute; z-index: -1; inset: -60px -10%; display: flex; flex-direction: column; justify-content: center; gap: 18px; transform: rotate(-7deg); pointer-events: none; }
.logo-wall-row { display: flex; width: max-content; gap: 18px; animation: logo-wall-left var(--wall-speed, 60s) linear infinite; }
.logo-wall-row:nth-child(even) { animation-name: logo-wall-right; }
.logo-wall-tile { display: grid; flex: 0 0 auto; place-items: center; width: 170px; height: 92px; padding: 16px 22px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.logo-wall-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes logo-wall-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes logo-wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 700px) {
  .logo-wall { gap: 12px; }
  .logo-wall-row { gap: 12px; }
  .logo-wall-tile { width: 118px; height: 66px; padding: 11px 15px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) { .logo-wall-row { animation: none; } }

/* ---- Work page: hero carousel (same as home) ---- */
.page-hero-work { height: auto !important; min-height: min(780px, calc(100svh - 86px)) !important; align-items: center; }
.page-hero-work::before { background: #070d16 !important; }
.page-hero-work::after { background: linear-gradient(90deg, rgba(5,10,18,.95) 0%, rgba(5,10,18,.8) 32%, rgba(5,10,18,.32) 68%, rgba(5,10,18,.1) 100%), linear-gradient(0deg, rgba(5,10,18,.72), transparent 40%) !important; }
.page-hero-work .hero-slides { z-index: -1; }
.page-hero-work .page-hero-content { padding-block: 105px 130px; }
@media (max-width: 700px) {
  .page-hero-work { min-height: 600px !important; }
  .page-hero-work .page-hero-content { padding-block: 80px 110px; }
}