/* Autonomous Foxie particle morph — words -> logo -> words, no scroll scrub. */
.journey:has(.system-morph-section){overflow-x:clip!important;overflow-y:visible!important}
.system-section.system-morph-section{
  --morph-ink:#173d5f;
  min-height:auto!important;
  margin-top:0!important;
  padding:0!important;
  position:relative;
  z-index:9;
  overflow:visible!important;
  background:transparent!important;
}
.system-section.system-morph-section::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:48%;
  width:min(1080px,92vw);
  height:520px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(118,169,211,.10),rgba(174,126,205,.035) 38%,transparent 72%);
  filter:blur(18px);
  pointer-events:none;
}
.system-morph-section .system-shell{
  position:relative!important;
  top:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:clamp(720px,92svh,940px)!important;
  height:clamp(720px,92svh,940px)!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:visible!important;
  background:transparent!important;
  perspective:none!important;
  transform:none!important;
}
.system-morph-section .system-copy,
.system-morph-section .architecture-stage,
.system-morph-section .system-caption{
  display:none!important;
}
.system-morph-layer{
  position:absolute;
  z-index:12;
  left:50%;
  top:-14vh;
  width:144vw;
  height:calc(100% + 28vh);
  transform:translateX(-50%);
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,255,255,.085),transparent 29%),
    linear-gradient(180deg,transparent,rgba(255,255,255,.018) 50%,transparent);
  pointer-events:auto;
  overflow:visible!important;
  cursor:grab;
  touch-action:pan-y;
}
.system-morph-layer.is-dragging{cursor:grabbing}
.icon-morph-canvas{
  position:absolute;
  z-index:2;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  background:transparent;
}
.icon-morph-meta{
  position:absolute;
  z-index:5;
  left:clamp(24px,4.8vw,78px);
  top:calc(14vh + clamp(34px,5.5vh,58px));
  max-width:360px;
  color:rgba(23,61,95,.34);
  font-size:7px;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.18em;
  text-transform:uppercase;
  pointer-events:none;
}
.icon-morph-phase{
  position:absolute;
  z-index:5;
  right:clamp(24px,4.8vw,78px);
  top:calc(14vh + clamp(34px,5.5vh,58px));
  display:grid;
  grid-template-columns:auto 62px auto;
  align-items:center;
  gap:10px;
  color:rgba(23,61,95,.28);
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
  pointer-events:none;
}
.icon-morph-phase>span{color:rgba(23,61,95,.68)}
.icon-morph-phase>i{
  height:1px;
  background:linear-gradient(90deg,rgba(55,103,160,.42),transparent);
}
.icon-morph-phase>strong{
  color:rgba(23,61,95,.48);
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
}
.icon-morph-caption{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:calc(14vh + clamp(54px,7vh,78px));
  width:min(620px,82vw);
  margin:0;
  transform:translateX(-50%);
  color:rgba(23,61,95,.46);
  font-size:10px;
  line-height:1.55;
  letter-spacing:.01em;
  text-align:center;
  pointer-events:none;
}
.icon-morph-progress{
  position:absolute;
  z-index:6;
  left:clamp(24px,4.8vw,78px);
  right:clamp(24px,4.8vw,78px);
  bottom:calc(14vh + clamp(28px,3.6vh,42px));
  height:1px;
  background:rgba(23,61,95,.045);
  overflow:hidden;
}
.icon-morph-progress i{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg,#6d95ee,#a779ce 58%,#55be97);
  box-shadow:0 0 10px rgba(104,141,231,.12);
  transition:transform .08s linear;
}

html[data-theme='light'] .system-morph-section{color:#173d5f}
html[data-theme='dark'] .system-morph-section{color:#eef4ff}
html[data-theme='dark'] .system-section.system-morph-section::before{
  background:radial-gradient(ellipse at 50% 50%,rgba(95,118,222,.09),rgba(190,96,181,.035) 40%,transparent 72%);
}
html[data-theme='dark'] .system-morph-layer{
  background:
    radial-gradient(circle at 50% 48%,rgba(112,135,231,.045),transparent 31%),
    linear-gradient(180deg,transparent,rgba(255,255,255,.008) 50%,transparent);
}
html[data-theme='dark'] .icon-morph-meta{color:rgba(231,238,255,.30)}
html[data-theme='dark'] .icon-morph-phase{color:rgba(231,238,255,.28)}
html[data-theme='dark'] .icon-morph-phase>span{color:rgba(244,247,255,.68)}
html[data-theme='dark'] .icon-morph-phase>i{background:linear-gradient(90deg,rgba(148,170,255,.52),transparent)}
html[data-theme='dark'] .icon-morph-phase>strong{color:rgba(236,242,255,.46)}
html[data-theme='dark'] .icon-morph-caption{color:rgba(236,242,255,.42)}
html[data-theme='dark'] .icon-morph-progress{background:rgba(255,255,255,.035)}

@media(max-width:900px){
  .system-morph-section .system-shell{
    min-height:720px!important;
    height:82svh!important;
    max-height:820px!important;
  }
  .icon-morph-phase{grid-template-columns:auto 42px auto}
}
@media(max-width:620px){
  .system-morph-section .system-shell{
    min-height:620px!important;
    height:78svh!important;
    max-height:720px!important;
  }
  .icon-morph-meta{
    left:18px;
    top:calc(14vh + 28px);
    max-width:170px;
    font-size:6px;
    letter-spacing:.14em;
  }
  .icon-morph-phase{
    right:18px;
    top:calc(14vh + 28px);
    grid-template-columns:auto 26px auto;
    gap:6px;
    font-size:6px;
  }
  .icon-morph-phase>strong{font-size:6px}
  .icon-morph-caption{
    bottom:calc(14vh + 52px);
    width:min(86vw,520px);
    font-size:8px;
  }
  .icon-morph-progress{
    left:18px;
    right:18px;
    bottom:calc(14vh + 29px);
  }
}
@media(prefers-reduced-motion:reduce){
  .icon-morph-progress{display:none}
}