/* Campaigns — launch the campaign, the TVL chart plots in live (Total + Turtle
   TVL), then the camera pulls back to reveal the campaign dashboard beneath:
   a TVL Breakdown (by LP type) radial + a Turtle LPs chart. Then the whole
   thing fades and the loop restarts. The camera's pans are container-relative
   (cqw/cqh) so the framing is centred and identical at any viewport width.
   No glow halos, no fake lifts — the cursor reads it as a demo, not live data. */

.CampaignLaunchDemo_frame__dB_xn {
  position: absolute;
  inset: 0;
  container-type: size;
}

/* ── Launch button intro (centred overlay) ─────────────────────────────── */
/* button "Launch campaign" → click → "Launching…" holds a beat → fades to the
   chart. At the very end the labels reset (while the layer is hidden) so the
   button fades back in as "Launch campaign", not a stray "Launching…". */
.CampaignLaunchDemo_launchLayer__RdBxN { animation: CampaignLaunchDemo_cmp-launch__DzVLT 16s ease infinite paused; }
@keyframes CampaignLaunchDemo_cmp-launch__DzVLT {
  0%, 19% { opacity: 1; }
  24%, 91% { opacity: 0; }
  97%, 100% { opacity: 1; }
}
.CampaignLaunchDemo_cursor__jFvkr { animation: CampaignLaunchDemo_cmp-cursor__LC8jc 16s cubic-bezier(0.4, 0, 0.2, 1) infinite paused; }
@keyframes CampaignLaunchDemo_cmp-cursor__LC8jc {
  0% { opacity: 0; transform: translate(34px, 30px); }
  4% { opacity: 1; transform: translate(8px, 7px); }
  6% { opacity: 1; transform: translate(0, 0); }
  7% { transform: translate(0, 2px) scale(0.94); }
  9%, 17% { opacity: 1; transform: translate(0, 0) scale(1); }
  20%, 100% { opacity: 0; transform: translate(0, 0); }
}
.CampaignLaunchDemo_labelLaunch__ScIyB { animation: CampaignLaunchDemo_cmp-label-launch__lYXRJ 16s ease infinite paused; }
.CampaignLaunchDemo_labelGo__Vet_5 { animation: CampaignLaunchDemo_cmp-label-go__vhy_X 16s ease infinite paused; }
@keyframes CampaignLaunchDemo_cmp-label-launch__lYXRJ {
  0%, 6% { opacity: 1; }       /* "Launch campaign" before the click */
  7.5%, 85% { opacity: 0; }
  88%, 100% { opacity: 1; }    /* reset (layer is hidden) so it returns as "Launch campaign" */
}
@keyframes CampaignLaunchDemo_cmp-label-go__vhy_X {
  0%, 6% { opacity: 0; }
  7.5%, 85% { opacity: 1; }    /* "Launching…" holds through the fade to the chart */
  88%, 100% { opacity: 0; }
}
.CampaignLaunchDemo_spin__tRAaf { animation: CampaignLaunchDemo_cmp-spin__k8q18 0.85s linear infinite; transform-origin: center; }
@keyframes CampaignLaunchDemo_cmp-spin__k8q18 { to { transform: rotate(360deg); } }

/* ── Stage (chart + dashboard, under the camera) ───────────────────────── */
.CampaignLaunchDemo_stage__V4TZr { animation: CampaignLaunchDemo_cmp-stage__OD9LP 16s ease infinite paused; }
@keyframes CampaignLaunchDemo_cmp-stage__OD9LP {
  0%, 20% { opacity: 0; }
  25%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* Camera: framed on the chart during the draw, then pulls back to the full
   dashboard. Scale is fixed (height-calibrated to ~340); translates use cqw/cqh
   so the comp stays centred and the framing matches at every viewport width. */
.CampaignLaunchDemo_camera__YgpCH {
  transform-origin: 0 0;
  animation: CampaignLaunchDemo_cmp-cam__cQwEC 16s cubic-bezier(0.45, 0, 0.55, 1) infinite paused;
  will-change: transform;
  /* Draw-in (chart-fill) framing — the TVL card (684×312, centred at 758,156). */
  --fill-tx: calc(50cqw - 758px);
  --fill-ty: calc(50cqh - 156px);
  --fill-s: 1;
  /* Zoom-out endpoint, sized to the frame (container queries on .frame) so the
     comp is framed-in (not pulled too far back) on wide viewports yet still fits
     fully on narrower ones. Content is 1100×564 centred, so for a given scale s:
     tx = 50cqw − 550·s, ty = 50cqh − 282·s. */
  --cam-s: 0.6;
  --cam-tx: calc(50cqw - 330px);
  --cam-ty: calc(50cqh - 169px);
}
@container (max-width: 700px) {
  .CampaignLaunchDemo_camera__YgpCH { --cam-s: 0.55; --cam-tx: calc(50cqw - 303px); --cam-ty: calc(50cqh - 155px); }
}
@container (max-width: 600px) {
  .CampaignLaunchDemo_camera__YgpCH { --cam-s: 0.46; --cam-tx: calc(50cqw - 253px); --cam-ty: calc(50cqh - 130px); }
}
/* Phone: the 684px chart / 1100px dashboard can't read at ~342px wide, so the
   camera fits the TVL chart to the width (scale 0.5, centred at 758,156) and
   holds there — the chart simply draws in full-width, no pull-back to the
   unreadable dashboard. Frame is height-matched (190px) in ProductsSection. */
@container (max-width: 450px) {
  .CampaignLaunchDemo_camera__YgpCH {
    --fill-tx: calc(50cqw - 379px); --fill-ty: calc(50cqh - 78px); --fill-s: 0.5;
    --cam-tx: calc(50cqw - 379px); --cam-ty: calc(50cqh - 78px); --cam-s: 0.5;
  }
}
@keyframes CampaignLaunchDemo_cmp-cam__cQwEC {
  0%, 56% { transform: translate(var(--fill-tx), var(--fill-ty)) scale(var(--fill-s)); }          /* TVL card (684x312) fills the frame */
  70%, 100% { transform: translate(var(--cam-tx), var(--cam-ty)) scale(var(--cam-s)); }          /* zoom out — framed to the frame size, not pulled so far back */
}

/* Chart draw-out cover — slides right, plotting the curves live. Only the TVL
   chart generates; the dashboard beneath is already fully drawn and is simply
   revealed by the camera pulling back further at the end. */
/* Linear travel that ends exactly at the chart's right edge — keeps the line
   reveal locked to the (linear) number count, both finishing together. */
.CampaignLaunchDemo_cover__5kx7F { animation: CampaignLaunchDemo_cmp-cover__NJZfh 16s linear infinite paused; }
@keyframes CampaignLaunchDemo_cmp-cover__NJZfh {
  0%, 26% { transform: translateX(0); }
  56%, 100% { transform: translateX(522px); }
}

.demo-run .CampaignLaunchDemo_launchLayer__RdBxN,
.demo-run .CampaignLaunchDemo_cursor__jFvkr,
.demo-run .CampaignLaunchDemo_labelLaunch__ScIyB,
.demo-run .CampaignLaunchDemo_labelGo__Vet_5,
.demo-run .CampaignLaunchDemo_stage__V4TZr,
.demo-run .CampaignLaunchDemo_camera__YgpCH,
.demo-run .CampaignLaunchDemo_cover__5kx7F { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .CampaignLaunchDemo_launchLayer__RdBxN { animation: none; opacity: 0; }
  .CampaignLaunchDemo_cursor__jFvkr { animation: none; opacity: 0; }
  .CampaignLaunchDemo_labelLaunch__ScIyB { animation: none; opacity: 0; }
  .CampaignLaunchDemo_labelGo__Vet_5 { animation: none; opacity: 1; }
  .CampaignLaunchDemo_stage__V4TZr { animation: none; opacity: 1; }
  .CampaignLaunchDemo_camera__YgpCH { animation: none; transform: translate(var(--cam-tx), var(--cam-ty)) scale(var(--cam-s)); }
  .CampaignLaunchDemo_cover__5kx7F { animation: none; transform: translateX(560px); }
}

/* Streams — configure the rate, then launch it, true to the real configurator
   layout. One camera glides the real layout: open on the selector bar + chart,
   zoom into the chart (the green Target APY line is hand-tuned), pan RIGHT to
   the cards (TVL / cost tick up), then down to a centred Launch Stream button.
   The cursor clicks it, the label flips to Launching…, then the whole frame
   fades and the loop restarts (no jarring zoom-back). Paused until in view. */

/* Container context so the camera resolves its pans against the frame size:
   the frame height is fixed (~340) across desktop widths but the width grows,
   so the right-anchored (cards) and centred (launch) beats use cqw/cqh — the
   framing then reads identically at every viewport width. */
.StreamConfigureVignette_frame__VbHYQ {
  position: absolute;
  inset: 0;
  container-type: size;
}

.StreamConfigureVignette_camera__cH_OA {
  transform-origin: 0 0;
  animation:
    StreamConfigureVignette_stm-cam__4jyt3 15s cubic-bezier(0.45, 0, 0.55, 1) infinite paused,
    StreamConfigureVignette_stm-fade__sHSBx 15s linear infinite paused;
  will-change: transform, opacity;
}
@keyframes StreamConfigureVignette_stm-cam__4jyt3 {
  0%, 12% { transform: translate(4px, 10px) scale(0.78); }                                   /* open — selector bar + chart */
  24%, 42% { transform: translate(20px, -52px) scale(1.05); }                                /* chart — left edge inset 20px (like the LP card) */
  50%, 66% { transform: translate(calc(100cqw - 1027px), calc(50cqh - 232px)) scale(0.95); } /* cards — right edge inset 20px, vertically centred */
  74%, 100% { transform: translate(calc(50cqw - 913px), calc(50cqh - 593px)) scale(0.95); }  /* launch — button dead-centred (held; fade resets) */
}
/* Fade in at the start, hold, fade out after launch — the loop wraps while
   invisible so the camera never visibly snaps back to the open frame. */
@keyframes StreamConfigureVignette_stm-fade__sHSBx {
  0% { opacity: 0; }
  4%, 88% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

.StreamConfigureVignette_cursor__5VAch { animation: StreamConfigureVignette_stm-cursor__spdkq 15s cubic-bezier(0.4, 0, 0.2, 1) infinite paused; }
.StreamConfigureVignette_launchBtn__ZWUYQ { animation: StreamConfigureVignette_stm-btn__KaG2V 15s ease-in-out infinite paused; }
.StreamConfigureVignette_labelIdle__KW8YE { animation: StreamConfigureVignette_stm-label-idle__DBvbA 15s ease infinite paused; }
.StreamConfigureVignette_labelGo__Z5qKl { animation: StreamConfigureVignette_stm-label-go__8ZghC 15s ease infinite paused; }

@keyframes StreamConfigureVignette_stm-cursor__spdkq {
  0%, 74% { opacity: 0; transform: translate(48px, 46px); }
  79% { opacity: 1; transform: translate(12px, 9px); }
  83% { opacity: 1; transform: translate(0, 0); }
  85% { transform: translate(0, 3px) scale(0.9); }
  87%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes StreamConfigureVignette_stm-btn__KaG2V {
  0%, 84% { background-color: rgba(249, 249, 249, 0.05); }
  85% { transform: scale(0.985); }
  87%, 100% { background-color: rgba(249, 249, 249, 0.09); transform: scale(1); }
}
/* Clean swap — idle label fully gone before "Launching…" arrives (no overlap). */
@keyframes StreamConfigureVignette_stm-label-idle__DBvbA {
  0%, 84% { opacity: 1; }
  85.5%, 100% { opacity: 0; }
}
@keyframes StreamConfigureVignette_stm-label-go__8ZghC {
  0%, 85.5% { opacity: 0; }
  87%, 100% { opacity: 1; }
}

.demo-run .StreamConfigureVignette_camera__cH_OA,
.demo-run .StreamConfigureVignette_cursor__5VAch,
.demo-run .StreamConfigureVignette_launchBtn__ZWUYQ,
.demo-run .StreamConfigureVignette_labelIdle__KW8YE,
.demo-run .StreamConfigureVignette_labelGo__Z5qKl { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .StreamConfigureVignette_camera__cH_OA { animation: none; transform: translate(20px, -52px) scale(1.05); opacity: 1; }
  .StreamConfigureVignette_cursor__5VAch { animation: none; opacity: 0; }
  .StreamConfigureVignette_launchBtn__ZWUYQ { animation: none; }
  .StreamConfigureVignette_labelIdle__KW8YE { animation: none; opacity: 1; }
  .StreamConfigureVignette_labelGo__Z5qKl { animation: none; opacity: 0; }
}

/* Outreach — "Narrow the Universe", the LP Search slice. A close-up of the
   filter field + the matching-LP counter; three criteria chips accrete one by
   one and the count free-falls 143,483 → 1,180, then the camera pulls back and
   the results card resolves into the matched set. One shared 8s clock, paused on
   the resting close-up (frame 0) until the card scrolls into view (.demo-run,
   added by an IntersectionObserver). No glow, no solid green fills, no fake
   lifts — the count is honest scripted motion that resets each loop. Reduced
   motion locks the resolved wide still. */

/* Camera: a single transform on the WHOLE app frame, so it reads as a camera
   panning/zooming over the real app. Close-up zooms into the header filter
   region (transform-origin), then eases back out to reveal the full slice. */
.LpSearchNarrowVignette_camera__8LN5Z {
  transform-origin: 13% 18%;
  animation: LpSearchNarrowVignette_lp-camera__DC4yt 8s cubic-bezier(0.4, 0, 0.2, 1) infinite paused;
  will-change: transform;
}
@keyframes LpSearchNarrowVignette_lp-camera__DC4yt {
  0%, 12% { transform: scale(1.5); }
  52%, 88% { transform: scale(1); }
  96%, 100% { transform: scale(1.5); }
}

/* The results card resolves into view as the camera pulls back — a clean rise +
   settle (a light de-blur, not a heavy wash). */
.LpSearchNarrowVignette_grid__T0Ew2 {
  animation: LpSearchNarrowVignette_lp-grid__eTOOI 8s ease infinite paused;
}
@keyframes LpSearchNarrowVignette_lp-grid__eTOOI {
  0%, 14% { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  52%, 88% { opacity: 1; transform: translateY(0); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translateY(10px); filter: blur(3px); }
}

/* Placeholder fades the moment the first criterion lands. */
.LpSearchNarrowVignette_ph__BkDx9 {
  animation: LpSearchNarrowVignette_lp-ph__ffu17 8s ease infinite paused;
}
@keyframes LpSearchNarrowVignette_lp-ph__ffu17 {
  0%, 6% { opacity: 1; }
  10%, 100% { opacity: 0; }
}

/* Criteria chips accrete one at a time (8% / 26% / 40%), hold, then clear. */
.LpSearchNarrowVignette_chipA__9V29P { animation: LpSearchNarrowVignette_lp-chip-a__Dlnq5 8s ease infinite paused; }
.LpSearchNarrowVignette_chipB__1txN3 { animation: LpSearchNarrowVignette_lp-chip-b__9MsuZ 8s ease infinite paused; }
.LpSearchNarrowVignette_chipC__BpHlc { animation: LpSearchNarrowVignette_lp-chip-c__kW9LJ 8s ease infinite paused; }
@keyframes LpSearchNarrowVignette_lp-chip-a__Dlnq5 {
  0%, 6% { opacity: 0; transform: scale(0.6); }
  10%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes LpSearchNarrowVignette_lp-chip-b__9MsuZ {
  0%, 26% { opacity: 0; transform: scale(0.6); }
  30%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes LpSearchNarrowVignette_lp-chip-c__kW9LJ {
  0%, 40% { opacity: 0; transform: scale(0.6); }
  44%, 92% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(0.6); }
}

/* The active sort affordance ticks on as the set re-sorts on resolve. */
.LpSearchNarrowVignette_sortActive__7O_9M {
  animation: LpSearchNarrowVignette_lp-sort__t3nWn 8s ease infinite paused;
}
@keyframes LpSearchNarrowVignette_lp-sort__t3nWn {
  0%, 50% { opacity: 0.25; }
  58%, 88% { opacity: 1; }
  96%, 100% { opacity: 0.25; }
}

/* Add-to-Outreach action: dim → active as the matched set lands (opacity only). */
.LpSearchNarrowVignette_action__0U_2I {
  animation: LpSearchNarrowVignette_lp-action__H1NvW 8s ease infinite paused;
}
@keyframes LpSearchNarrowVignette_lp-action__H1NvW {
  0%, 44% { opacity: 0.45; }
  52%, 88% { opacity: 1; }
  96%, 100% { opacity: 0.45; }
}

.demo-run .LpSearchNarrowVignette_camera__8LN5Z,
.demo-run .LpSearchNarrowVignette_grid__T0Ew2,
.demo-run .LpSearchNarrowVignette_ph__BkDx9,
.demo-run .LpSearchNarrowVignette_chipA__9V29P,
.demo-run .LpSearchNarrowVignette_chipB__1txN3,
.demo-run .LpSearchNarrowVignette_chipC__BpHlc,
.demo-run .LpSearchNarrowVignette_sortActive__7O_9M,
.demo-run .LpSearchNarrowVignette_action__0U_2I {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .LpSearchNarrowVignette_camera__8LN5Z { animation: none; transform: scale(1); }
  .LpSearchNarrowVignette_grid__T0Ew2 { animation: none; opacity: 1; transform: none; filter: none; }
  .LpSearchNarrowVignette_ph__BkDx9 { animation: none; opacity: 0; }
  .LpSearchNarrowVignette_chipA__9V29P, .LpSearchNarrowVignette_chipB__1txN3, .LpSearchNarrowVignette_chipC__BpHlc { animation: none; opacity: 1; transform: none; }
  .LpSearchNarrowVignette_sortActive__7O_9M { animation: none; opacity: 1; }
  .LpSearchNarrowVignette_action__0U_2I { animation: none; opacity: 1; }
}

/* Distribution — a guided 3-scene run through the real distributor app, cross-faded
   on one 17s clock (paused on the resting frame until scrolled into view, .demo-run):
   (A) Auto-distribution on + criteria → matching deals flip on, (B) the TVL-by-Deal
   chart draws in, (C) Your Earnings fills day by day + the payout bars rise. The data
   (toggles, sliders, counts, chart/bar growth) is rAF-driven; this file just cross-fades
   the scenes. No glow, no fake lifts. */

.DistributionReferralVignette_sceneA__XpxxE { animation: DistributionReferralVignette_dr-a___SbYd 17s ease infinite paused; }
@keyframes DistributionReferralVignette_dr-a___SbYd {
  0% { opacity: 0; transform: translateY(10px); }
  3%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-10px); }
}

.DistributionReferralVignette_sceneB__6K96c { animation: DistributionReferralVignette_dr-b__ZDoqU 17s ease infinite paused; }
@keyframes DistributionReferralVignette_dr-b__ZDoqU {
  0%, 34% { opacity: 0; transform: translateY(10px); }
  38%, 60% { opacity: 1; transform: none; }
  64%, 100% { opacity: 0; transform: translateY(-10px); }
}

.DistributionReferralVignette_sceneC__Akzl3 { animation: DistributionReferralVignette_dr-c__myzch 17s ease infinite paused; }
@keyframes DistributionReferralVignette_dr-c__myzch {
  0%, 64% { opacity: 0; transform: translateY(10px); }
  68%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(10px); }
}

.demo-run .DistributionReferralVignette_sceneA__XpxxE,
.demo-run .DistributionReferralVignette_sceneB__6K96c,
.demo-run .DistributionReferralVignette_sceneC__Akzl3 {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .DistributionReferralVignette_sceneA__XpxxE, .DistributionReferralVignette_sceneB__6K96c { animation: none; opacity: 0; }
  .DistributionReferralVignette_sceneC__Akzl3 { animation: none; opacity: 1; transform: none; }
}

/* The Turtle hub — one isometric plane: the four parts pop up around the
   central Turtle platform and pipe into it. Everything shares the same
   iso projection; positions are local-plane offsets so the layout stays
   a coherent grid. */

/* True axonometric — no perspective, so every plate projects identically
   no matter how far it sits from centre (no vanishing-point skew). */
.TurtleOsSection_scene__C_Iaf {
  transform-style: flat;
}

.TurtleOsSection_node__AAj0X {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  transform-style: preserve-3d;
  opacity: 0;
  transform: rotateX(56deg) rotateZ(-45deg) translate(var(--x), var(--y))
    scale(0.82);
  transition:
    opacity 0.55s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d);
}

.reveal-on-scroll.is-visible .TurtleOsSection_node__AAj0X {
  opacity: 1;
  transform: rotateX(56deg) rotateZ(-45deg) translate(var(--x), var(--y))
    scale(1);
}

/* Satellite cards — the landing's cut-out Union silhouette, laid flat.
   The shell SVG paints fill/stroke/shadow; the node is just the iso host. */
.TurtleOsSection_sat__GDpBx {
  --pw: clamp(158px, 13.5vw, 190px);
  width: var(--pw);
  aspect-ratio: 601 / 745;
  margin-left: calc(var(--pw) / -2);
  margin-top: calc(var(--pw) * 1.2396 / -2);
}

/* The hub — a plain square routing plate, smaller than the cards. */
.TurtleOsSection_center__w1PeI {
  --hw: clamp(148px, 12.5vw, 176px);
  width: var(--hw);
  height: var(--hw);
  margin-left: calc(var(--hw) / -2);
  margin-top: calc(var(--hw) / -2);
}

/* Pipes — permanently plugged in: hairline conduits running flush under
   the plates, brightening gently toward the hub. */
.TurtleOsSection_pipe__AMr6p {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  overflow: hidden;
  opacity: 0;
  transform: rotateX(56deg) rotateZ(-45deg) translate(var(--x), var(--y));
  transition: opacity 0.6s ease;
  transition-delay: 0.75s;
}

.reveal-on-scroll.is-visible .TurtleOsSection_pipe__AMr6p {
  opacity: 1;
}

/* Gradient direction: always brighter toward the hub. */
.TurtleOsSection_pipeRight__LwDw1 {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink-primary) 7%, var(--surface-1)) 0%,
    color-mix(in srgb, var(--ink-primary) 17%, var(--surface-1)) 100%
  );
}
.TurtleOsSection_pipeLeft__Z0m3y {
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--ink-primary) 7%, var(--surface-1)) 0%,
    color-mix(in srgb, var(--ink-primary) 17%, var(--surface-1)) 100%
  );
}
.TurtleOsSection_pipeDown__X_TFP {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink-primary) 7%, var(--surface-1)) 0%,
    color-mix(in srgb, var(--ink-primary) 17%, var(--surface-1)) 100%
  );
}
.TurtleOsSection_pipeUp__6hhUy {
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--ink-primary) 7%, var(--surface-1)) 0%,
    color-mix(in srgb, var(--ink-primary) 17%, var(--surface-1)) 100%
  );
}

/* A soft swell of light rippling down each conduit's gradient toward
   the hub — three pipe-lengths wide, so it reads as the gradient
   breathing, not an object travelling. */
.TurtleOsSection_flow__r8LvG {
  position: absolute;
  opacity: 0;
}

.TurtleOsSection_pipeRight__LwDw1 .TurtleOsSection_flow__r8LvG,
.TurtleOsSection_pipeLeft__Z0m3y .TurtleOsSection_flow__r8LvG {
  top: 0;
  bottom: 0;
  left: -300%;
  width: 300%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-primary) 52%, var(--surface-1)) 50%,
    transparent 100%
  );
}

.TurtleOsSection_pipeDown__X_TFP .TurtleOsSection_flow__r8LvG,
.TurtleOsSection_pipeUp__6hhUy .TurtleOsSection_flow__r8LvG {
  left: 0;
  right: 0;
  top: -300%;
  height: 300%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-primary) 52%, var(--surface-1)) 50%,
    transparent 100%
  );
}

.TurtleOsSection_pipeRight__LwDw1 .TurtleOsSection_flow__r8LvG {
  animation: TurtleOsSection_swell-x__p_73Z 7.5s linear infinite;
}
.TurtleOsSection_pipeLeft__Z0m3y .TurtleOsSection_flow__r8LvG {
  animation: TurtleOsSection_swell-x-rev__w2zEq 7.5s linear infinite;
  animation-delay: 3.75s;
}
.TurtleOsSection_pipeDown__X_TFP .TurtleOsSection_flow__r8LvG {
  animation: TurtleOsSection_swell-y__oaVwk 7.5s linear infinite;
  animation-delay: 1.9s;
}
.TurtleOsSection_pipeUp__6hhUy .TurtleOsSection_flow__r8LvG {
  animation: TurtleOsSection_swell-y-rev__ezozD 7.5s linear infinite;
  animation-delay: 5.6s;
}

@keyframes TurtleOsSection_swell-x__p_73Z {
  0% {
    transform: translateX(16.7%);
    opacity: 0;
  }
  18% {
    opacity: 0.55;
  }
  82% {
    opacity: 0.55;
  }
  100% {
    transform: translateX(116.7%);
    opacity: 0;
  }
}

@keyframes TurtleOsSection_swell-x-rev__w2zEq {
  0% {
    transform: translateX(116.7%);
    opacity: 0;
  }
  18% {
    opacity: 0.55;
  }
  82% {
    opacity: 0.55;
  }
  100% {
    transform: translateX(16.7%);
    opacity: 0;
  }
}

@keyframes TurtleOsSection_swell-y__oaVwk {
  0% {
    transform: translateY(16.7%);
    opacity: 0;
  }
  18% {
    opacity: 0.55;
  }
  82% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(116.7%);
    opacity: 0;
  }
}

@keyframes TurtleOsSection_swell-y-rev__ezozD {
  0% {
    transform: translateY(116.7%);
    opacity: 0;
  }
  18% {
    opacity: 0.55;
  }
  82% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(16.7%);
    opacity: 0;
  }
}

/* Below lg the reveal never arms — rest assembled. */
@media (max-width: 1023px) {
  .TurtleOsSection_node__AAj0X,
  .TurtleOsSection_pipe__AMr6p {
    opacity: 1;
    transform: rotateX(56deg) rotateZ(-45deg) translate(var(--x), var(--y))
      scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .TurtleOsSection_node__AAj0X,
  .TurtleOsSection_pipe__AMr6p {
    transition: none;
    opacity: 1;
    transform: rotateX(56deg) rotateZ(-45deg) translate(var(--x), var(--y))
      scale(1);
  }

  .TurtleOsSection_flow__r8LvG {
    animation: none;
    opacity: 0;
  }
}