/* ============================================================
   MOTION & COLOUR LAYER
   Scroll progress, marquee strip, reveal wipes, hover lift and
   the colour washes that keep the page from reading flat.
   ============================================================ */

/* ---- Scroll progress bar ---- */
.scrollbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.scrollbar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), #ff6a4d, var(--red));
  box-shadow: 0 0 12px rgba(225, 29, 42, 0.7);
  transition: width 0.12s linear;
}

/* ============ MARQUEE STRIP ============ */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(16px, 2.2vw, 26px);
  background: var(--red);
  color: #fff;
  user-select: none;
}
.marquee--dark { background: var(--ink); }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeRun 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee__group span {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding-inline: clamp(20px, 3vw, 40px);
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__group i {
  font-size: 0.55em;
  opacity: 0.75;
}
/* outlined words alternate with solid ones for rhythm */
.marquee__group span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
}
@keyframes marqueeRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ============ SCROLL REVEAL ============
   The hidden state uses opacity + transform only. clip-path must NOT be
   used here: Chrome zeroes a clipped element's intersection rect, so the
   observer that is meant to reveal it would never fire.
   It is also gated on html.js, so with no JS the content simply shows. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
}
.reveal {
  transition:
    opacity 0.85s var(--ease),
    transform 1s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---- Count-up numbers get a subtle pop when they land ---- */
.stat__num.is-done,
.stats__feature-num.is-done { animation: numPop 0.5s var(--ease); }
@keyframes numPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* ============ HOVER LIFT (cards) ============ */
.service-card,
.pstep,
.yt__card,
.philosophy__pillars li {
  will-change: transform;
}

/* ---- Shine sweep across primary buttons ---- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease);
}
.btn:hover::after { left: 130%; }

/* ============ COLOUR WASHES ============
   Soft tinted blooms so the light sections aren't flat white. */
.about,
.process,
.testimonials {
  position: relative;
  isolation: isolate;
}
.about::before,
.process::before,
.testimonials::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(320px, 42vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
.about::before {
  top: -14%;
  right: -8%;
  background: radial-gradient(circle, rgba(225, 29, 42, 0.22), transparent 68%);
}
.process::before {
  bottom: -18%;
  left: -10%;
  background: radial-gradient(circle, rgba(225, 29, 42, 0.18), transparent 68%);
}
.testimonials::before {
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(225, 29, 42, 0.16), transparent 70%);
}

/* Thin red hairline between major light sections */
.projects,
.yt {
  position: relative;
}
.projects::before,
.yt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 92vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-line), transparent);
}

/* ---- Section headings get an animated accent underline ---- */
.section-title .accent {
  position: relative;
  display: inline-block;
}
.section-title .accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease) 0.2s;
}
.section-head.aos-animate .section-title .accent::after,
[data-aos].aos-animate .section-title .accent::after,
.section-title.is-in .accent::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .scrollbar { display: none; }
}