/* ============================================================
   Cystem X motion system. Everything here is additive on top of
   the existing design system and degrades gracefully: without JS
   every .reveal element is simply visible (see the noscript rule
   at the bottom), and prefers-reduced-motion disables all motion.
   ============================================================ */

/* ---------- Scroll reveal ----------
   Scoped under html.js so that without JavaScript (the inline snippet in <head> never runs),
   content is simply visible by default - no flash-of-hidden-content, no dependency on a timeout. */
html.js .reveal, html.js .reveal-left, html.js .reveal-right, html.js .reveal-scale {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
html.js .reveal { transform: translateY(28px); }
html.js .reveal-left { transform: translateX(-32px); }
html.js .reveal-right { transform: translateX(32px); }
html.js .reveal-scale { transform: scale(.94); }

html.js .reveal.is-visible, html.js .reveal-left.is-visible, html.js .reveal-right.is-visible, html.js .reveal-scale.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger: children of .stagger-group get an incremental delay set inline by animations.js
   via --stagger-index; this CSS just turns that index into a delay. */
.stagger-group > * { transition-delay: calc(var(--stagger-index, 0) * 90ms); }

/* ---------- Hover interactions ---------- */
.hover-lift { transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease; }
.hover-lift:hover, .hover-lift:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-2); }

.hover-glow { position: relative; transition: box-shadow .25s ease, border-color .25s ease; }
.hover-glow:hover, .hover-glow:focus-within { box-shadow: 0 0 0 1px var(--cx-red), 0 16px 40px rgba(227,0,42,.18); border-color: var(--cx-red); }

/* ---------- Image treatments ---------- */
.img-frame { position: relative; overflow: hidden; border-radius: var(--radius); display: block; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,.84,.44,1); }
.img-frame:hover img, .img-frame:focus-within img { transform: scale(1.06); }

html.js .img-frame--wipe::after {
  content: ""; position: absolute; inset: 0; background: var(--cx-ink); transform-origin: left;
  transform: scaleX(1); transition: transform .9s cubic-bezier(.16,.84,.44,1);
}
html.js .img-frame--wipe.is-visible::after { transform: scaleX(0); }

.img-frame--tint::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,19,26,0) 40%, rgba(14,19,26,.72) 100%);
}
.img-frame--tint-red::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(227,0,42,.78) 0%, rgba(227,0,42,.38) 45%, rgba(14,19,26,.55) 100%);
}

/* ---------- Animated mesh / grid backgrounds for hero & accent bands ---------- */
@keyframes cx-mesh-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50%  { background-position: 10% 6%, 90% 94%, 54% 46%; }
  100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}
.mesh-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image:
    radial-gradient(42% 60% at 18% 20%, rgba(227,0,42,.22), transparent 70%),
    radial-gradient(38% 55% at 85% 85%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(50% 70% at 50% 50%, rgba(227,0,42,.08), transparent 75%);
  background-size: 140% 140%, 140% 140%, 160% 160%;
  animation: cx-mesh-drift 22s ease-in-out infinite;
}
.mesh-bg--mist { background-image:
    radial-gradient(42% 60% at 15% 15%, rgba(227,0,42,.10), transparent 70%),
    radial-gradient(38% 55% at 88% 80%, rgba(14,19,26,.06), transparent 70%),
    radial-gradient(50% 70% at 50% 50%, rgba(227,0,42,.05), transparent 75%);
}

/* Animated circuit-line overlay (used behind dark/hero sections for texture) */
.circuit-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; overflow: hidden; }
.circuit-overlay svg { width: 100%; height: 100%; }
.circuit-overlay .circuit-dot { animation: cx-pulse 3.2s ease-in-out infinite; }
.circuit-overlay .circuit-dot:nth-child(2n) { animation-delay: .6s; }
.circuit-overlay .circuit-dot:nth-child(3n) { animation-delay: 1.3s; }
@keyframes cx-pulse { 0%, 100% { opacity: .35; r: 2.2; } 50% { opacity: 1; r: 3.4; } }

/* ---------- Animated underline for section titles ---------- */
html.js .section-title.anim::before { width: 0; transition: width .8s cubic-bezier(.16,.84,.44,1) .1s; }
html.js .section-title.anim.is-visible::before { width: 50px; }

/* ---------- Floating badge / stat chip used over photos ---------- */
.float-badge {
  position: absolute; z-index: 2; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-3);
  animation: cx-float 5s ease-in-out infinite;
}
.float-badge__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--cx-red-50); color: var(--cx-red-600); display: grid; place-items: center; flex: none; }
.float-badge__icon svg { width: 20px; height: 20px; }
.float-badge strong { display: block; font-family: var(--ff-head); font-size: 1.1rem; color: var(--cx-ink); line-height: 1.1; }
.float-badge span { font-size: .75rem; color: var(--cx-muted); }
@keyframes cx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Marquee (continuous horizontal scroll strip, e.g. tech logos/chips) ---------- */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-6); width: max-content; animation: cx-marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes cx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Progress / comparison bars (dynamic component) ---------- */
.bar-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.bar-row__label { font-family: var(--ff-head); font-weight: 600; font-size: .875rem; color: var(--cx-ink); }
.bar-row__track { height: 10px; background: var(--cx-fog); border-radius: 999px; overflow: hidden; }
.bar-row__fill { height: 100%; background: linear-gradient(90deg, var(--cx-red) 0%, var(--cx-red-600) 100%); border-radius: 999px; width: 0; transition: width 1.1s cubic-bezier(.16,.84,.44,1); }
.bar-row.is-visible .bar-row__fill { width: var(--bar-value, 0%); }
.bar-row__value { font-family: var(--ff-mono); font-size: .8125rem; color: var(--cx-muted); }

/* ---------- Tabs (dynamic component) ---------- */
.cx-tabs__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); border-bottom: 1px solid var(--cx-line); margin-bottom: var(--sp-7); }
.cx-tabs__btn { background: none; border: none; padding: var(--sp-3) var(--sp-5); font-family: var(--ff-head); font-weight: 600; font-size: .875rem; color: var(--cx-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.cx-tabs__btn:hover { color: var(--cx-ink); }
.cx-tabs__btn[aria-selected="true"] { color: var(--cx-red-600); border-bottom-color: var(--cx-red); }
.cx-tabs__panel { display: none; }
.cx-tabs__panel.is-active { display: block; }

/* ---------- Before/after or toggle switch (dynamic component) ---------- */
.cx-toggle { display: inline-flex; background: var(--cx-mist); border-radius: 999px; padding: 4px; gap: 4px; }
.cx-toggle__btn { background: none; border: none; padding: var(--sp-2) var(--sp-5); border-radius: 999px; font-family: var(--ff-head); font-weight: 600; font-size: .8125rem; color: var(--cx-muted); cursor: pointer; transition: background-color .2s, color .2s; }
.cx-toggle__btn[aria-pressed="true"] { background: var(--cx-ink); color: #fff; }

/* ---------- Reduced motion: strip everything down to an instant, safe state ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .img-frame img, .img-frame--wipe::after,
  .section-title.anim::before, .hover-lift, .hover-glow, .bar-row__fill {
    transition: none !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .mesh-bg, .float-badge, .marquee__track, .circuit-overlay .circuit-dot { animation: none !important; }
  .img-frame--wipe::after { transform: scaleX(0); }
}