/* RotoSight page, "How it works": a three-stage pipeline with data flowing from step to step.
   The three stages light up in turn (9s loop). Everything runs only once the stage is in view (.in). */
.flow { background: #fff; }
.flow .phead h2 { font-size: clamp(30px, 3.6vw, 48px); max-width: 720px; }

.hw { --gap: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gap); margin-top: 56px; }
.hs { position: relative; }
.hs-art { position: relative; display: grid; aspect-ratio: 4 / 3; border-radius: 28px; }
.hs-art.warm { background: radial-gradient(circle at 30% 25%, #fff6ea 0%, #ffe6c9 60%, #ffd9ae 100%); }
.hs-art.cool { background: radial-gradient(circle at 70% 25%, #f7fafd 0%, #e6edf5 60%, #d6e1ee 100%); }
.hs-art::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(rgba(16,33,47,.09) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 85%); }
.hs-art .sc-svg { padding: 5% 6%; }
.hs h3 { margin: 24px 0 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.hs p { margin: 10px 0 0; max-width: 400px; font-size: 16px; line-height: 1.65; color: var(--mute); }
.hs-n { position: absolute; z-index: 3; left: 20px; top: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 12px 24px -8px rgba(247,134,30,.75); }

/* the "light up in turn" ring */
.hs-art::after { content: ""; position: absolute; inset: -7px; border-radius: 34px; border: 2.5px solid var(--orange); opacity: 0; pointer-events: none; }
.hs.in .hs-art::after { animation: hsring 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s + 1.2s); }
.hs.in .hs-n { animation: hsn 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s + 1.2s); }
@keyframes hsring { 0% { opacity: 0; transform: scale(.97); } 6%,26% { opacity: 1; transform: scale(1); } 34%,100% { opacity: 0; transform: scale(1.02); } }
@keyframes hsn { 0%,34%,100% { transform: scale(1); } 8%,24% { transform: scale(1.22); } }

/* the pipe between two stages, with a packet travelling through it */
.hs-link { position: absolute; z-index: 2; left: 100%; top: 50%; width: var(--gap); height: 4px; margin-top: -2px; }
.hs:last-child .hs-link { display: none; }
.hs-link::before { content: ""; position: absolute; inset: 0 -16px 0 0; background: repeating-linear-gradient(90deg, rgba(247,134,30,.85) 0 8px, transparent 8px 16px); animation: pipe .8s linear infinite; }
.hs-link { overflow: hidden; }
.hs-link::after { content: ""; position: absolute; left: 0; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #f7861e; box-shadow: 0 0 0 4px rgba(247,134,30,.25); opacity: 0; }
.hs.in .hs-link::after { animation: packet 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s + 2.4s); }
@keyframes pipe { to { transform: translateX(16px); } }
@keyframes packet { 0% { opacity: 0; transform: translateX(-12px); } 4% { opacity: 1; } 16% { opacity: 1; transform: translateX(calc(var(--gap) + 2px)); } 20%,100% { opacity: 0; transform: translateX(calc(var(--gap) + 2px)); } }

/* ---- stage 1: connect ---- */
.h-shell { fill: #fff; stroke: #0b2036; stroke-width: 3; stroke-dasharray: 6 5; }
.h1-box { fill: #fff; stroke: #0b2036; stroke-width: 3; }
.h-cable { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 7; }
.h1-led { fill: #c9d2dc; }
.h1-arc { fill: none; stroke: #f7861e; stroke-width: 3; stroke-linecap: round; opacity: 0; transform-origin: 0 0; }
.h1-chip rect { fill: #fff; stroke: rgba(22,163,74,.55); stroke-width: 1.5; }
.h1-chip text { font-size: 9.5px; font-weight: 700; fill: #15803d; }
.h1-chip { opacity: 0; }
.hs.in .h1-spin { animation: s2spin 14s linear infinite; transform-origin: 0 0; }
.hs.in .h-cable { animation: cable .9s linear infinite; }
.hs.in .h1-led { animation: led 1.6s ease-in-out infinite; }
.hs.in .h1-led.l2 { animation-delay: .25s; } .hs.in .h1-led.l3 { animation-delay: .5s; }
.hs.in .h1-arc { animation: arc 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.hs.in .h1-arc.a2 { animation-delay: .5s; } .hs.in .h1-arc.a3 { animation-delay: 1s; }
.hs.in .h1-chip { animation: chip 6s ease-in-out infinite; }
@keyframes cable { to { stroke-dashoffset: -11; } }
@keyframes led { 0%,100% { fill: #c9d2dc; } 50% { fill: #4ade80; } }
@keyframes arc { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: .95; } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes chip { 0%,20% { opacity: 0; } 32%,88% { opacity: 1; } 100% { opacity: 0; } }

/* ---- stage 2: see ---- */
.h2-live { fill: #4ade80; }
.h2-pill { font-size: 7.5px; font-weight: 800; letter-spacing: .08em; fill: #8fa3b8; }
.h2-bar { fill: #f7861e; transform-box: fill-box; transform-origin: 50% 100%; }
.h2-bar.b2 { fill: #4aa3ff; } .h2-bar.b3 { fill: #4ade80; } .h2-bar.b4 { fill: #a78bfa; } .h2-bar.b5 { fill: #f7861e; }
.h2-line { fill: none; stroke: #f7861e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.h2-gauge { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .3; }
.hs.in .h2-live { animation: livepulse 1.8s infinite; }
.hs.in .h2-bar { animation: s2bar 3s cubic-bezier(.45,0,.3,1) infinite alternate; }
.hs.in .h2-bar.b2 { animation-duration: 3.8s; animation-delay: -1s; } .hs.in .h2-bar.b3 { animation-duration: 2.6s; animation-delay: -2s; } .hs.in .h2-bar.b4 { animation-duration: 4.2s; animation-delay: -.5s; } .hs.in .h2-bar.b5 { animation-duration: 3.4s; animation-delay: -1.5s; }
.hs.in .h2-line { animation: h2line 5s ease-in-out infinite; }
.hs.in .h2-gauge { animation: h2gauge 5s ease-in-out infinite; }
@keyframes h2line { 0% { stroke-dashoffset: 1; } 55%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes h2gauge { 0% { stroke-dashoffset: 1; } 60%,90% { stroke-dashoffset: .22; } 100% { stroke-dashoffset: 1; } }

/* ---- stage 3: improve ---- */
.h3-ghost { fill: #d7dee6; }
.h3-now { fill: #22c55e; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--to)); }
.h3-arm { fill: #f7861e; transform-box: fill-box; transform-origin: 50% 100%; }
.hs.in .h3-now { animation: h3now 6s cubic-bezier(.45,0,.2,1) var(--d) infinite; }
.hs.in .h3-arm { animation: h3arm 6s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes h3now { 0%,8% { transform: scaleX(1); } 45%,88% { transform: scaleX(var(--to)); } 100% { transform: scaleX(1); } }
@keyframes h3arm { 0%,8% { transform: scaleY(var(--f)); } 50%,88% { transform: scaleY(1); } 100% { transform: scaleY(var(--f)); } }

/* pairs-with row */
.pair2 { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; margin-top: 72px; padding: 26px 32px; border-radius: 28px; background: linear-gradient(120deg, #fff4e6, #ffe3c4); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.pair2:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px rgba(238,111,11,.6); }
.pair2-ic .blogo-ic { width: 60px; height: 60px; }
.pair2-t { flex: 1; min-width: 0; }
.pair2-t small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a65700; }
.pair2-t b { display: block; margin-top: 4px; font-size: clamp(18px, 2vw, 24px); line-height: 1.25; font-weight: 800; letter-spacing: -.015em; }
.pair2-t span { display: block; margin-top: 6px; max-width: 640px; font-size: 15px; line-height: 1.55; color: #5d4a38; }
.pair2-go { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 14px 28px -10px rgba(247,134,30,.8); transition: transform .3s; }
.pair2:hover .pair2-go { transform: translateX(6px); }
.pair2.in .pair2-go svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }

@media (max-width: 1000px) { .hw { --gap: 36px; } .hs h3 { font-size: 22px; } }
@media (max-width: 860px) {
  .hw { grid-template-columns: 1fr; gap: 64px; margin-top: 44px; }
  .hs { --gap: 0px; }
  .hs-link { display: none; }
  .hs:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -64px; width: 4px; height: 64px; margin-left: -2px; background: repeating-linear-gradient(180deg, rgba(247,134,30,.85) 0 8px, transparent 8px 16px); }
  .hs.in:not(:last-child)::after { animation: pipebg .8s linear infinite; }
  .hs p { max-width: none; }
  .pair2 { margin-top: 52px; padding: 22px; flex-wrap: wrap; }
}
@keyframes pipebg { to { background-position: 0 16px; } }
@media (max-width: 560px) {
  .pair2 { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pair2-go { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .flow *, .flow *::before, .flow *::after { animation: none !important; transition: none !important; }
  .h2-line { stroke-dashoffset: 0; } .h1-chip { opacity: 1; } .h1-arc { opacity: .5; transform: scale(1.2); }
  .h3-now { transform: scaleX(var(--to)); } .h3-arm { transform: none; }
}